new crop tool

includes/cropper.css

@@ -0,0 +1,122 @@
+.slider[type='range'] {
+    -webkit-appearance: none;
+    margin: 9px 0;
+    width: 100%
+}
+
+.slider[type='range']:focus {
+    outline: 0
+}
+
+.slider[type='range']::-webkit-slider-runnable-track {
+    cursor: pointer;
+    height: 5px;
+    width: 100%;
+    background: #008ecc;
+    border: none
+}
+
+.slider[type='range']::-webkit-slider-thumb {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 50%;
+    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    height: 18px;
+    width: 18px;
+    -webkit-appearance: none;
+    margin-top: -6.5px
+}
+
+.slider[type='range']::-moz-range-track {
+    cursor: pointer;
+    height: 5px;
+    width: 100%;
+    background: #008ecc;
+    border: none
+}
+
+.slider[type='range']::-moz-range-thumb {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 50%;
+    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    height: 18px;
+    width: 18px
+}
+
+.slider[type='range']::-ms-track {
+    cursor: pointer;
+    height: 5px;
+    width: 100%;
+    background: transparent;
+    border-color: transparent;
+    border-width: 9px 0;
+    color: transparent
+}
+
+.slider[type='range']::-ms-fill-lower {
+    background: #008ecc;
+    border: none
+}
+
+.slider[type='range']::-ms-fill-upper {
+    background: #008ecc;
+    border: none
+}
+
+.slider[type='range']::-ms-thumb {
+    background: #fff;
+    border: 1px solid #e0e0e0;
+    border-radius: 50%;
+    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.12);
+    cursor: pointer;
+    height: 18px;
+    width: 18px;
+    margin-top: 0
+}
+
+
+.cropper {
+    display: inline-block
+}
+
+.cropper canvas {
+    border-radius: 3px
+}
+
+.cropper canvas:hover {
+    cursor: move
+}
+
+.cropper-tools {
+    margin-top: 15px;
+    text-align: center
+}
+
+.cropper-zoom {
+    display: inline-block
+}
+
+.cropper-zoom .slider {
+    margin: 0 10px;
+    width: 225px
+}
+
+.cropper-zoom .icon {
+    margin-top: 2px;
+    font-size: 18px
+}
+
+.cropper-zoom .icon:last-child {
+    font-size: 24px
+}
+
+.cropper .icon {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    fill: rgba(0, 0, 0, .54);
+    vertical-align: middle;
+}

includes/style.less

@@ -90,8 +90,12 @@ textarea {
     margin-right: 1em;
 }
 
+.cropper-tools {
+    margin-top: 0;
+}
+
 .image-container {
-    height: 38.5vmin;
+    height: 46vh;
     text-align: left;
 }
 
@@ -106,3 +110,7 @@ textarea {
     padding: 5vmin;
     position: relative;
 }
+
+#crop canvas {
+    height: 32vh;
+}

index.pug

@@ -4,6 +4,8 @@ html(lang="en-gb")
         meta(charset="utf-8")
         title pixsy
         link(rel="stylesheet" href="includes/style.css")
+        link(rel="stylesheet" href="includes/cropper.css")
+        script(src="includes/cropper.min.js")
     body
         h1
             | pixsy
@@ -27,8 +29,8 @@ html(lang="en-gb")
             .page.image
                 h2 image
                 .image-container
-                    input#image(type="file" autocomplete="off")
-                    img#preview
+                    input#image(type="file" accept="image/*")
+                    #crop
                 button.pagination.prev previous
                 button.pagination.next next
             .page.extras

script.js

@@ -65,15 +65,12 @@ async function run() {
     const buttonLoadGame         = el("load");
     const buttonNewGame          = el("new");
     const buttonReset            = el("reset");
-    const checkboxInvertTiles    = el("invert");
-    const checkboxFlipTiles      = el("flip");
-    const checkboxMirrorTiles    = el("mirror");
-    const checkboxRotateTiles    = el("rotate");
-    const inputPrefix            = el("prefix");
-    const imagePreview           = el("preview");
     const textareaGameDataInput  = el("game-data");
     const textareaGameDataOutput = el("output");
 
+    const cropper = new Cropper({ width: 128, height: 128 });
+    let cropperRendered = false;
+
     // hide all pages except start page
     for (let page of document.getElementsByClassName('page')) {
         page.style.display = "none";
@@ -125,13 +122,14 @@ async function run() {
     textareaGameDataInput.addEventListener("keyup",  checkGameData);
     checkGameData();
 
-    imagePreview.style.display = "none";
-
     el('image').addEventListener('change', function () {
         readFile(this, function (e) {
-            imagePreview.src = e.target.result;
-            imagePreview.style.display = "initial";
-            console.log(load_image(imagePreview.getAttribute("src")));
+            if ( ! cropperRendered) {
+                cropper.render("#crop");
+                cropperRendered = true;
+            }
+
+            cropper.loadImage(e.target.result);
         }, "image");
     });
 
@@ -159,29 +157,8 @@ async function run() {
     buttonAddImage.addEventListener("click",    addImage);
     buttonAddImage.addEventListener("touchend", addImage);
 
-    inputPrefix.addEventListener("change", () => {
-        set_prefix(inputPrefix.value);
-    })
-
-    checkboxInvertTiles.addEventListener("change", () => {
-       set_invert(checkboxInvertTiles.checked);
-    });
-
-    checkboxFlipTiles.addEventListener("change", () => {
-        set_flip(checkboxFlipTiles.checked);
-    });
-
-    checkboxMirrorTiles.addEventListener("change", () => {
-        set_mirror(checkboxMirrorTiles.checked);
-    });
-
-    checkboxRotateTiles.addEventListener("change", () => {
-        set_rotate(checkboxRotateTiles.checked);
-    });
-
     function reset() {
         clear_game();
-        imagePreview.removeAttribute("src");
     }
 
     buttonReset.addEventListener("click",    reset);