tile preview; styling etc.

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

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 inputPrefix            = el("prefix");
-    const preview                = el("preview");
+    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);
+    checkGameData();
     
-    preview.style.display = "none";
+    imagePreview.style.display = "none";
 
     el('image').addEventListener('change', function () {
         readFile(this, function (e) {
-            preview.src = e.target.result;
+            imagePreview.src = e.target.result;
-            preview.style.display = "initial"
+            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);

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;
 }