From bff9b902583ce5bfcfbfd957a125f69fe95bac18 Mon Sep 17 00:00:00 2001
From: Max Bradbury <max@tinybird.info>
Date: Mon, 20 Jul 2020 16:41:45 +0100
Subject: [PATCH] tile preview; styling etc.

---
 index.pug  | 33 ++++++++++++++++++++++++++++++++-
 script.js  | 30 ++++++++++++++++++++++--------
 style.less | 36 ++++++++++++++++++++++++++++++++++--
 3 files changed, 88 insertions(+), 11 deletions(-)

diff --git a/index.pug b/index.pug
index adffd5d..d5e4323 100644
--- a/index.pug
+++ b/index.pug
@@ -23,7 +23,38 @@ html(lang="en-gb")
                 .image-container
                     input#image(type="file")
                     img#preview
-                input#prefix(type="text" placeholder="tile name prefix, e.g. 'forest'")
+                button.pagination.prev previous
+                button.pagination.next next
+            .page.extras
+                h2 tiles
+                label
+                    | tile name prefix
+                    input#prefix(type="text" placeholder="e.g. 'forest'")
+                p.
+                    to help you find your new tiles in Bitsy, #[br]
+                    new tiles will be labelled #[span#tile-name-preview e.g. 'forest 1']
+                br
+
+                h3 create alternate versions
+                .checkboxes
+                    label
+                        input(type="checkbox")#invert
+                        | inverted
+                    label
+                        input(type="checkbox")#flip
+                        | flipped
+                    label
+                        input(type="checkbox")#mirror
+                        | mirrored
+                    label
+                        input(type="checkbox")#rotate
+                        | rotated
+                p.
+                    some tile sets only include one rotation for each tile;
+                    this can be a problem in Bitsy since it does not allow tile rotation/mirroring.
+                p.
+                    #[i tilesy] will not create duplicate tiles,
+                    so don't worry about ending up with numerous identical tiles.
                 button.pagination.prev previous
                 button.pagination.next#import next
             .page.download
diff --git a/script.js b/script.js
index ea37bda..8511d12 100644
--- a/script.js
+++ b/script.js
@@ -49,13 +49,15 @@ async function run() {
     const buttonAddImage         = el("add");
     const buttonDownload         = el("download");
     const buttonGameDataProceed  = el("game-data-next");
-    const textareaGameDataInput  = el("game-data");
     const buttonImportGame       = el("import");
     const buttonLoadGame         = el("load");
     const buttonNewGame          = el("new");
-    const textareaGameDataOutput = el("output");
-    const preview                = el("preview");
+    const inputPrefix            = el("prefix");
+    const imagePreview           = el("preview");
     const resetButton            = el("reset");
+    const spanTileNamePreview    = el("tile-name-preview")
+    const textareaGameDataInput  = el("game-data");
+    const textareaGameDataOutput = el("output");
 
     // hide all pages except start page
     for (let page of document.getElementsByClassName('page')) {
@@ -102,16 +104,28 @@ async function run() {
 
     textareaGameDataInput.addEventListener("change", checkGameData);
     textareaGameDataInput.addEventListener("keyup",  checkGameData);
-
-    preview.style.display = "none";
+    checkGameData();
+    
+    imagePreview.style.display = "none";
 
     el('image').addEventListener('change', function () {
         readFile(this, function (e) {
-            preview.src = e.target.result;
-            preview.style.display = "initial"
+            imagePreview.src = e.target.result;
+            imagePreview.style.display = "initial"
         }, "image");
     });
 
+    function handleTilePrefix() {
+        if (this.value) {
+            spanTileNamePreview.innerText = `e.g. '${this.value} 1'`
+        } else {
+            spanTileNamePreview.innerText = "e.g. 'forest 1'"
+        }
+    }
+
+    inputPrefix.addEventListener("change", handleTilePrefix);
+    handleTilePrefix();
+
     function addTiles() {
         let image    = el("preview").getAttribute("src");
         let gameData = el("game-data").value;
@@ -140,7 +154,7 @@ async function run() {
 
     function reset() {
         clear_game();
-        preview.removeAttribute("src");
+        imagePreview.removeAttribute("src");
     }
 
     resetButton.addEventListener("click",    reset);
diff --git a/style.less b/style.less
index 36e6a31..4ebe325 100644
--- a/style.less
+++ b/style.less
@@ -1,13 +1,19 @@
+@background: #fff4d9;
+@text:       #ec6d7d;
+@accent:     #a3c4ef;
+
 * {
     box-sizing: border-box;
+    color: @text;
     margin: 0 auto 0.5em auto;
     text-align: center;
 }
 
 html, body {
+    background-color: @background;
+    font-size: 3vmin;
     margin: 0;
     padding: 0;
-    font-size: 3vmin;
 }
 
 button {
@@ -30,9 +36,18 @@ button {
     }
 }
 
+h3 {
+    font-size: 0.9em;
+}
+
 input {
     width: 100%;
     text-align: left;
+    
+    &[type="checkbox"] {
+        width: auto;
+        margin-right: 0.5em;
+    }
 }
 
 img {
@@ -40,6 +55,16 @@ img {
     max-width: 100%;
 }
 
+p {
+    font-size: 0.8em;
+    margin: 1em auto;
+}
+
+label {
+    font-size: 0.75em;
+    font-weight: bold;
+}
+
 textarea {
     height: 20em;
     padding: 0.5em;
@@ -47,14 +72,21 @@ textarea {
     width: 100%;
 }
 
+.checkboxes label {
+    margin-right: 1em;
+}
+
 .image-container {
     height: 38.5vmin;
     text-align: left;
 }
 
 .page {
-    width: 80vmin;
     height: 80vmin;
+    width: 80vmin;
+    
+    border-radius: 5vmin;
+    box-shadow: @accent 1vmin 1vmin;
     padding: 5vmin;
     position: relative;
 }