Merge pull request #206 from bobvoorneveld/feature/gui-improv

gui improv
jobtalle · Feb 8, 2022 · 3c8470a · 3c8470a
2 parents bc68292 + 33f82a9
commit 3c8470a
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 48 deletions.
diff --git a/css/book.css b/css/book.css
@@ -187,14 +187,3 @@
 .button-page.right {
     right: calc(var(--button-width) * var(--page-button-page-shift) * -1);
 }
-
-.load-image-button {
-    position: absolute;
-    width: 50%;
-    background-color: var(--code-button-color);
-    padding: var(--code-button-padding);
-    margin-top: var(--code-button-margin);
-    border-radius: var(--code-button-radius);
-    bottom: 0;
-    right: calc(50% * -1 - var(--code-button-padding));
-}
diff --git a/css/buttons.css b/css/buttons.css
@@ -1,6 +1,7 @@
 :root {
     --button-width: 80px;
     --button-height: 80px;
+    --load-card-button-padding: 10px;
 }
 
 button {
@@ -17,4 +18,17 @@ button {
     font-size: 18pt;
     font-family: inherit;
     user-select: none;
-}
+}
+
+.load-card-button {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: calc(var(--button-width) * 2);
+    background-color: var(--code-button-color);
+    box-shadow: 0 0 var(--code-shadow-radius) var(--code-shadow-color);
+    padding: 0 var(--load-card-button-padding);
+    margin-top: var(--code-button-margin);
+    margin-left: var(--code-button-margin);
+    border-radius: var(--code-button-radius);
+}
diff --git a/css/card.css b/css/card.css
@@ -23,6 +23,7 @@
     --card-colors-gradient: 280%;
     --card-info-spacing: 12px;
     --card-info-color: #d7d4c8;
+    --card-info-transparant-color: rgba(215, 212, 200, 0);
     --card-info-slant: -18deg;
     --card-info-padding-right: 6px;
     --card-info-text-color: #0c0c0c;
@@ -204,7 +205,7 @@
     left: 0;
     top: 0;
     position: absolute;
-    background: linear-gradient(to right, transparent, var(--card-info-color));
+    background: linear-gradient(to right, var(--card-info-transparant-color), var(--card-info-color));
     transform: skew(var(--card-info-slant));
     z-index: -1;
 }
@@ -269,4 +270,4 @@
 
 #code-icon {
     fill: var(--card-info-color);
-}
+}
diff --git a/js/koi/gui/cards/cardBook.js b/js/koi/gui/cards/cardBook.js
@@ -28,9 +28,6 @@ const CardBook = function(width, height, cards, audio, onUnlock) {
 
     this.element.appendChild(this.buttonPageLeft.element);
     this.element.appendChild(this.buttonPageRight.element);
-    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.loadImage) {
-        this.element.appendChild(this.createLoadImageElement(audio));
-    }
     this.fit();
     this.setButtonLockedStatus();
 };
@@ -45,8 +42,6 @@ CardBook.prototype.PADDING_PAGE = .02;
 CardBook.prototype.PADDING_CARD = .035;
 CardBook.prototype.HEIGHT = .65;
 CardBook.prototype.PAGE_COUNT = CardRequirements.length;
-CardBook.prototype.LANG_LOAD_CARD = "LOAD_CARD";
-CardBook.prototype.LOAD_IMAGE_BUTTON_CLASS = "load-image-button";
 
 /**
  * A page flip action
@@ -492,26 +487,3 @@ CardBook.prototype.resize = function(width, height) {
 
     this.fit();
 };
-
-/**
- * Creates the load Koi Code image button
- * @param {AudioBank} audio Game audio
- * @returns {HTMLButtonElement} The download button
- * 
- * TODO: needs styling and positioning.
- */
-CardBook.prototype.createLoadImageElement = function(audio) {
-    const button = document.createElement("button");
-    button.className = this.LOAD_IMAGE_BUTTON_CLASS;
-
-    button.appendChild(document.createTextNode(language.get(this.LANG_LOAD_CARD)));
-    button.onclick = () => {
-        audio.effectClick.play();
-
-        if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.loadImage) {
-            window.webkit.messageHandlers.loadImage.postMessage(null);
-        }
-        this.hide();
-    };
-    return button;
-};
diff --git a/js/koi/gui/cards/cards.js b/js/koi/gui/cards/cards.js
@@ -53,6 +53,8 @@ Cards.prototype.HIDE_TIME = 10;
 Cards.prototype.FISH_DROP_DIRECTION = new Vector2(1, 0);
 Cards.prototype.ID_DROP_TARGET = "drop-target";
 Cards.prototype.CLASS_DROP_TARGET = "card-shape hidden";
+Cards.prototype.LANG_LOAD_CARD = "LOAD_CARD";
+Cards.prototype.LOAD_CARD_BUTTON_CLASS = "load-card-button";
 
 /**
  * Serialize the card collection
@@ -90,8 +92,12 @@ Cards.prototype.toggleBook = function() {
 /**
  * Enable the book button
  */
-Cards.prototype.enableBookButton = function() {
+Cards.prototype.enableBookButton = function(audio) {
     this.element.appendChild(this.buttonBook.element);
+
+    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.loadImage) {
+        this.element.appendChild(this.createLoadCardElement(audio));
+    }
     this.bookEnabled = true;
 };
 
@@ -429,4 +435,22 @@ Cards.prototype.show = function() {
         this.bookVisible = true;
         this.hidden = false;
     }
-}
+}
+
+/**
+ * Creates the load Koi Card button
+ * @param {AudioBank} audio Game audio
+ * @returns {HTMLButtonElement} The download button
+ */
+ Cards.prototype.createLoadCardElement = function(audio) {
+    const button = document.createElement("button");
+    button.className = this.LOAD_CARD_BUTTON_CLASS;
+
+    button.appendChild(document.createTextNode(language.get(this.LANG_LOAD_CARD)));
+    button.onclick = () => {
+        audio.effectClick.play();
+        window.webkit.messageHandlers.loadImage.postMessage(null);
+        this.hide();
+    };
+    return button;
+};
diff --git a/js/koi/tutorial/tutorialCards.js b/js/koi/tutorial/tutorialCards.js
@@ -126,7 +126,7 @@ TutorialCards.prototype.update = function(koi) {
             else if (this.mutations === this.MUTATIONS_REQUIRED)
                 this.start();
             else {
-                koi.gui.cards.enableBookButton();
+                koi.gui.cards.enableBookButton(koi.audio);
 
                 return true;
             }
@@ -136,7 +136,7 @@ TutorialCards.prototype.update = function(koi) {
             if (koi.gui.cards.hand.cards.length > 0) {
                 this.overlay.setText(language.get(this.LANG_OPEN_BOOK_STORE));
 
-                koi.gui.cards.enableBookButton();
+                koi.gui.cards.enableBookButton(koi.audio);
 
                 this.pointToBookButton(koi);
                 this.advance();
@@ -213,4 +213,4 @@ TutorialCards.prototype.update = function(koi) {
     }
 
     return false;
-};
+};
diff --git a/js/main.js b/js/main.js
@@ -204,7 +204,7 @@ if (gl &&
         const continueGame = index => {
             slot = slotNames[index];
 
-            gui.cards.enableBookButton();
+            gui.cards.enableBookButton(audio);
 
             try {
                 session.deserialize(storage.getBuffer(slot));