add support for Bitsy 7.10; turn dithering off by default; more help text

Cargo.toml

@@ -1,19 +1,19 @@
 [package]
 name = "pixsy"
-version = "0.72.5"
+version = "0.710.0"
 description = "convert images to Bitsy rooms"
 authors = ["Max Bradbury <max@tinybird.info>"]
 edition = "2018"
 license = "MIT"
-repository = "https://tinybird.dev/max/image-to-bitsy"
+repository = "https://tinybird.dev/max/pixsy"
 
 [lib]
 crate-type = ["cdylib"]
 
 [dependencies]
 base64 = "^0.12.3"
-bitsy-parser = "^0.72.5"
+bitsy-parser = "^0.710.0"
 image = "^0.23.7"
 json = "^0.12.4"
 lazy_static = "^1.4.0"
-wasm-bindgen = "=0.2.64" # newer versions are bugged...
+wasm-bindgen = "^0.2.78"

README.md

@@ -1,3 +1,57 @@
 # pixsy
 
-convert images to rooms for use in Bitsy
+a tool for [Bitsy Game Maker](http://bitsy.org). 
+upload any image and convert it into a room.
+
+## credits
+
+made by [Max Bradbury](http://tinybird.info/). 
+makes use of my own [bitsy parser](https://crates.io/crates/bitsy-parser) library.
+
+uses the [Croppie](https://foliotek.github.io/Croppie/) image crop plugin 
+by [Foliotek](https://www.foliotek.com/)
+
+uses [wasm-bindgen](https://crates.io/crates/wasm-bindgen) to automate WebAssembly bindings.
+
+## thanks
+
+to [Adam Le Doux](http://ledoux.io/) for creating the wonderful and inspiring Bitsy
+
+to [Mark Wonnacott](https://kool.tools/) for their support, encouragement and inspiration
+
+and to everyone in the bitsy community!
+
+## contributing
+
+forks and pull requests welcome!
+
+### development prerequisites
+
+* [rust/cargo](https://rustup.rs/)
+* [pug](https://pugjs.org/)
+* [less](http://lesscss.org/)
+* a bash shell for the build script
+
+## bugs
+
+when importing images, some pixels have errors. 
+it seems to only happen for pixels surrounded at the top and left:
+```
+111    111
+100 => 110
+100    100
+```
+
+pixsy does not work in the Itch desktop program 
+because their bundled version of Chromium does not support WebAssembly.
+
+## to do
+
+* add alternative dithering options (Atkinson, Bayer 8×8)
+* add a 'smoothing' (noise reduction?) stage to remove errant pixels
+
+## could do
+
+* reimplement tile reuse option
+* add camera support so users can take a pic instead of uploading an image
+* allow user to draw to canvas

TODO.md

@@ -1,10 +0,0 @@
-# todo
-
-* tests
-* if image is exactly 128×128, *don't* crop
-* tile reuse
-* noise reduction (remove lonely pixels)
-* implement Atkinson and Bayer dithering options
-* if "create new bitsy game", add new room as room 0
-* actually create room
-* stats for added room (number of tiles)

deploy.sh

@@ -1,7 +1,6 @@
 #! /usr/bin/env bash
 
-./build.sh
 rm -rf dist
 mkdir dist
-cp -r README.md LICENSE index.html script.js background.png pkg includes dist
+cp -r README.md LICENSE index.html script.js pkg includes old dist
-# butler push dist ruin/pixsy:html
+butler push dist ruin/pixsy:html

includes/cropper.css

@@ -1,122 +0,0 @@
-.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/croppie.css

@@ -0,0 +1,250 @@
+.croppie-container {
+    width: 100%;
+    height: 100%;
+}
+
+.croppie-container .cr-image {
+    z-index: -1;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform-origin: 0 0;
+    max-height: none;
+    max-width: none;
+}
+
+.croppie-container .cr-boundary {
+    position: relative;
+    overflow: hidden;
+    margin: 0 auto;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+}
+
+.croppie-container .cr-viewport,
+.croppie-container .cr-resizer {
+    position: absolute;
+    border: 2px solid #fff;
+    margin: auto;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    box-shadow: 0 0 2000px 2000px rgba(0, 0, 0, 0.5);
+    z-index: 0;
+}
+
+.croppie-container .cr-resizer {
+  z-index: 2;
+  box-shadow: none;
+  pointer-events: none;
+}
+
+.croppie-container .cr-resizer-vertical,
+.croppie-container .cr-resizer-horisontal {
+  position: absolute;
+  pointer-events: all;
+}
+
+.croppie-container .cr-resizer-vertical::after,
+.croppie-container .cr-resizer-horisontal::after {
+    display: block;
+    position: absolute;
+    box-sizing: border-box;
+    border: 1px solid black;
+    background: #fff;
+    width: 10px;
+    height: 10px;
+    content: '';
+}
+
+.croppie-container .cr-resizer-vertical {
+  bottom: -5px;
+  cursor: row-resize;
+  width: 100%;
+  height: 10px;
+}
+
+.croppie-container .cr-resizer-vertical::after {
+    left: 50%;
+    margin-left: -5px;
+}
+
+.croppie-container .cr-resizer-horisontal {
+  right: -5px;
+  cursor: col-resize;
+  width: 10px;
+  height: 100%;
+}
+
+.croppie-container .cr-resizer-horisontal::after {
+    top: 50%;
+    margin-top: -5px;
+}
+
+.croppie-container .cr-original-image {
+    display: none;
+}
+
+.croppie-container .cr-vp-circle {
+    border-radius: 50%;
+}
+
+.croppie-container .cr-overlay {
+    z-index: 1;
+    position: absolute;
+    cursor: move;
+    touch-action: none;
+}
+
+.croppie-container .cr-slider-wrap {
+    width: 75%;
+    margin: 15px auto;
+    text-align: center;
+}
+
+.croppie-result {
+    position: relative;
+    overflow: hidden;
+}
+
+.croppie-result img {
+    position: absolute;
+}
+
+.croppie-container .cr-image,
+.croppie-container .cr-overlay,
+.croppie-container .cr-viewport {
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+}
+
+/*************************************/
+/***** STYLING RANGE INPUT ***********/
+/*************************************/
+/*http://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html */
+/*************************************/
+
+.cr-slider {
+    -webkit-appearance: none;
+/*removes default webkit styles*/
+	/*border: 1px solid white; *//*fix for FF unable to apply focus style bug */
+    width: 300px;
+/*required for proper track sizing in FF*/
+    max-width: 100%;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    background-color: transparent;
+}
+
+.cr-slider::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+}
+
+.cr-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+}
+
+.cr-slider:focus {
+    outline: none;
+}
+/*
+.cr-slider:focus::-webkit-slider-runnable-track {
+background: #ccc;
+}
+*/
+
+.cr-slider::-moz-range-track {
+    width: 100%;
+    height: 3px;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0;
+    border-radius: 3px;
+}
+
+.cr-slider::-moz-range-thumb {
+    border: none;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background: #ddd;
+    margin-top: -6px;
+}
+
+/*hide the outline behind the border*/
+.cr-slider:-moz-focusring {
+    outline: 1px solid white;
+    outline-offset: -1px;
+}
+
+.cr-slider::-ms-track {
+    width: 100%;
+    height: 5px;
+    background: transparent;
+/*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
+	border-color: transparent;/*leave room for the larger thumb to overflow with a transparent border */
+	border-width: 6px 0;
+	color: transparent;/*remove default tick marks*/
+}
+.cr-slider::-ms-fill-lower {
+	background: rgba(0, 0, 0, 0.5);
+	border-radius: 10px;
+}
+.cr-slider::-ms-fill-upper {
+	background: rgba(0, 0, 0, 0.5);
+	border-radius: 10px;
+}
+.cr-slider::-ms-thumb {
+	border: none;
+	height: 16px;
+	width: 16px;
+	border-radius: 50%;
+	background: #ddd;
+	margin-top:1px;
+}
+.cr-slider:focus::-ms-fill-lower {
+	background: rgba(0, 0, 0, 0.5);
+}
+.cr-slider:focus::-ms-fill-upper {
+	background: rgba(0, 0, 0, 0.5);
+}
+/*******************************************/
+
+/***********************************/
+/* Rotation Tools */
+/***********************************/
+.cr-rotate-controls {
+	position: absolute;
+	bottom: 5px;
+	left: 5px;
+	z-index: 1;
+}
+.cr-rotate-controls button {
+	border: 0;
+	background: none;
+}
+.cr-rotate-controls i:before {
+	display: inline-block;
+	font-style: normal;
+	font-weight: 900;
+	font-size: 22px;
+}
+.cr-rotate-l i:before {
+	content: '↺';
+}
+.cr-rotate-r i:before {
+	content: '↻';
+}

includes/style.less

@@ -1,6 +1,7 @@
-@background: #fff4d9;
+@background:      #57506a;
-@text:       #ec6d7d;
+@page-background: #968eb5;
-@accent:     #a3c4ef;
+@accent:          #ec6d7d;
+@text:            #464256;
 
 * {
     box-sizing: border-box;
@@ -21,6 +22,11 @@ button {
     white-space: nowrap;
     width: 100%;
     
+    &.half {
+        float: left;
+        width: 50%;
+    }
+    
     &.pagination:not(.normal) {
         position: absolute;
         bottom: 5vmin;
@@ -36,6 +42,10 @@ button {
     }
 }
 
+header * {
+    color: @accent;
+}
+
 h1 {
     margin: 0;
 }
@@ -112,8 +122,8 @@ textarea {
     height: 80vmin;
     width:  80vmin;
     
-    background-color: @background;
+    background-color: @page-background;
-    border: 2px solid @accent;
+    color: @text;
     border-radius: 5vmin;
     box-shadow: @accent 1vmin 1vmin;
     padding: 5vmin;

index.pug

@@ -4,28 +4,50 @@ html(lang="en-gb")
         meta(charset="utf-8")
         title pixsy
         link(rel="stylesheet" href="includes/style.css")
-        link(rel="stylesheet" href="includes/cropper.css")
+        link(rel="stylesheet" href="includes/croppie.css")
-        script(src="includes/cropper.min.js")
+        script(src="includes/croppie.min.js")
     body
-        h1
+        header
-            | pixsy
+            h1 pixsy
-            //img(alt="pixsy" src="includes/pixsy.png")
+            p.
-        p.
+                version 0.710.0
-            convert images to Bitsy rooms
+                |
-            |
+                #[a(href="http://tinybird.info/image-to-bitsy/old/" target="_blank") old version]
-            #[a(href="./old/") old version]
+                |
-            |
+                #[a(href="mailto:max@tinybird.info") email]
-            #[a(href="mailto:max@tinybird.info") email]
+                |
-            |
+                #[a(href="https://twitter.com/synth_ruiner") twitter]
-            #[a(href="https://twitter.com/synth_ruiner") twitter]
         .pages
             .page#start
+                p.
+                    #[b pixsy] is a tool for #[a(href="https://bitsy.org/") Bitsy Game Maker]
+                    that allows you to generate a room from an image and add it to your game.
+                p.
+                    this version is tested to be compatible with Bitsy version 7.10 and earlier.
+                    later versions may also work fine, but make sure you have a backup of your game data.
+                p.
+                    #[b pixsy] does not currently work via the Itch desktop program.
+                    if pixsy does not work for you, please try the
+                    #[a(href="http://tinybird.info/image-to-bitsy/old/") old version] instead.
+                p.
+                    if your image is already the correct size for a bitsy room (128×128),
+                    simply leave the zoom slider at the default setting.
+                    you can draw your room in a pixel-art program and import it here.
+                p.
+                    full instructions can be found on the
+                    #[a(href="https://ruin.itch.io/pixsy/") itch.io page] -
+                    scroll down to "how to use".
+
                 button.normal.pagination.next#new create a new bitsy game
                 button.normal.pagination.next#load load an existing bitsy game
             .page.game-data
                 h2 game data
 
-                input#game(type="file" autocomplete="off")
+                p.
+                    your game data is available from the #[i game data] window in bitsy,
+                    under the #[i tools] dropdown.
+
+                input#game(type="file" accept=".bitsy,.txt" autocomplete="off")
                 br
 
                 textarea#game-data(
@@ -35,16 +57,16 @@ html(lang="en-gb")
 
                 button.pagination.prev previous
                 button.pagination.next#game-data-next(disabled=true) next
-            .page.image
+            .page.image#page-image
                 h2 image
 
                 .image-container
                     input#image(type="file" accept="image/*")
-                    #crop
+                    #crop(style="display: none;")
 
                 button.pagination.prev previous
                 button.pagination.next#image-next(disabled=true) next
-            .page.room
+            .page.room#page-room
                 h2 room
 
                 table
@@ -68,24 +90,27 @@ html(lang="en-gb")
 
                                 #new-palette(style="display: none;")
                                     .half
-                                        input#colour-background(type="color" value="#2f4ac9")
+                                        input#colour-background(type="color" value="#000000")
                                     .half
-                                        input#colour-foreground(type="color" value="#8798fe")
+                                        input#colour-foreground(type="color" value="#ffffff")
 
                                 label
-                                    input#dither(type="checkbox" checked=true)
+                                    input#dither(type="checkbox")
                                     | dither
+                                p (approximates a greyscale effect)
                                 br
 
                 button.pagination.prev#back-to-image previous
                 button.pagination.next#room-next add room
             .page.download
-                h2 download
+                h2 done!
+
+                p#added
 
                 textarea#output(autocomplete="off")
-                br
 
-                button#download download
+                button#clipboard.half copy to clipboard
+                button#download.half download
 
                 button.pagination.prev#add add another image
                 button.pagination.start#reset start again

script.js

@@ -12,10 +12,6 @@ import init, {
     set_room_name,
 } from './pkg/pixsy.js';
 
-if (typeof WebAssembly !== "object") {
-    window.location = "./old/"
-}
-
 // stolen from https://ourcodeworld.com/articles/read/189/how-to-create-a-file-and-generate-a-download-with-javascript-in-the-browser-without-a-server
 function download(filename, text) {
     let element = document.createElement('a');
@@ -28,6 +24,18 @@ function download(filename, text) {
     document.body.removeChild(element);
 }
 
+function copyToClipboard() {
+    const button = el("clipboard");
+
+    el("output").select();
+    document.execCommand("copy");
+    button.innerText = "copied!";
+
+    setTimeout(() => {
+        button.innerText = "copy to clipboard";
+    }, 2000);
+}
+
 function el(id) {
     return document.getElementById(id);
 }
@@ -60,10 +68,15 @@ function readFile(input, callback, type = "text") {
 }
 
 async function run() {
+    if (typeof WebAssembly !== "object") {
+        window.location = "http://tinybird.info/image-to-bitsy/old/"
+    }
+
     await init();
 
     const buttonAddImage         = el("add");
     const buttonBackToImage      = el("back-to-image");
+    const buttonCopyToClipboard  = el("clipboard")
     const buttonDownload         = el("download");
     const buttonGameDataProceed  = el("game-data-next");
     const buttonImageProceed     = el("image-next");
@@ -72,6 +85,7 @@ async function run() {
     const buttonNewGame          = el("new");
     const buttonReset            = el("reset");
     const checkboxDither         = el("dither");
+    const divCroppie             = el("crop");
     const divNewPalette          = el("new-palette");
     const inputBrightness        = el("brightness");
     const inputColourBackground  = el("colour-background");
@@ -81,8 +95,11 @@ async function run() {
     const textareaGameDataInput  = el("game-data");
     const textareaGameDataOutput = el("output");
 
-    const cropper = new Cropper({ width: 192, height: 192 });
+    const croppie = new Croppie(divCroppie, {
-    let cropperRendered = false;
+        viewport: {width: 128, height: 128, type: 'square'},
+        boundary: {width: 256, height: 256},
+        enableZoom: true,
+    });
 
     // hide all pages except start page
     for (let page of document.getElementsByClassName('page')) {
@@ -95,8 +112,12 @@ async function run() {
         pageButton.addEventListener('touchend', pagination);
     }
 
+    // croppie needs to be on screen to work;
+    // halt pagination until we're finished gathering the results
+    buttonImageProceed.removeEventListener("click", pagination);
+
     function new_game() {
-        console.debug(load_default_game());
+        load_default_game();
         textareaGameDataInput.value = output();
         checkGameData();
         // we don't need to look at the default game data, so skip ahead to the image page
@@ -118,14 +139,12 @@ async function run() {
     el("game").addEventListener("change", function() {
         readFile(this, function (e) {
             textareaGameDataInput.value = e.target.result;
-            console.log(load_game(e.target.result));
             checkGameData();
         }, "text");
     });
 
     function setPaletteDropdown() {
         const palettes = JSON.parse(get_palettes());
-        console.debug(palettes);
 
         selectPalette.innerHTML = "";
 
@@ -145,7 +164,9 @@ async function run() {
     }
 
     function checkGameData() {
-        if (textareaGameDataInput.value.length > 0) {
+        let result = load_game(textareaGameDataInput.value)
+
+        if (result === "Loaded game") {
             buttonGameDataProceed.removeAttribute("disabled");
             setPaletteDropdown();
         } else {
@@ -159,13 +180,9 @@ async function run() {
 
     el('image').addEventListener('change', function () {
         readFile(this, function (e) {
-            if ( ! cropperRendered) {
+            croppie.bind({url: e.target.result, zoom: 0});
-                cropper.render("#crop");
+            divCroppie.style.display = "block";
-                cropperRendered = true;
+            buttonImageProceed.removeAttribute("disabled");
-                buttonImageProceed.removeAttribute("disabled");
-            }
-
-            cropper.loadImage(e.target.result);
         }, "image");
     });
 
@@ -174,8 +191,18 @@ async function run() {
     }
 
     function handleImage() {
-        console.log(load_image(cropper.getCroppedImage()));
+        croppie.result({
-        loadPreview();
+            type: "base64",
+            size: "viewport",
+            format: "png",
+        }).then((result) => {
+            console.log("Loading image: " + load_image(result));
+
+            el("page-image").style.display = "none";
+            el("page-room" ).style.display = "block";
+
+            loadPreview();
+        });
     }
 
     buttonImageProceed.addEventListener("click",    handleImage);
@@ -216,7 +243,7 @@ async function run() {
     });
 
     function addRoom() {
-        console.log(add_room());
+        el("added").innerText = add_room();
         textareaGameDataOutput.value = output();
     }
 
@@ -227,6 +254,9 @@ async function run() {
         download("output.bitsy", textareaGameDataOutput.value);
     }
 
+    buttonCopyToClipboard.addEventListener("click",    copyToClipboard);
+    buttonCopyToClipboard.addEventListener("touchend", copyToClipboard);
+
     buttonDownload.addEventListener("click",    handleDownload);
     buttonDownload.addEventListener("touchend", handleDownload);
 
@@ -247,8 +277,8 @@ async function run() {
         inputRoomName.value         = "";
         selectPalette.innerHTML     = "";
         divNewPalette.style.display = "none";
-        inputColourBackground.value = "#2f4ac9";
+        inputColourBackground.value = "#000000";
-        inputColourForeground.value = "#8798fe";
+        inputColourForeground.value = "#ffffff";
         checkboxDither.checked      = true;
     }
 

src/lib.rs

@@ -1,5 +1,3 @@
-#![feature(clamp)]
-
 use bitsy_parser::game::Game;
 use bitsy_parser::image::Image;
 use bitsy_parser::tile::Tile;
@@ -43,15 +41,15 @@ lazy_static! {
             image:      None,
             room_name:  None,
             palette:    SelectedPalette::None,
-            dither:     true,
+            dither:     false,
             brightness: 0,
         }
     );
 }
 
-fn tile_name(prefix: &Option<String>, index: &u32) -> Option<String> {
+fn tile_name(prefix: &Option<String>, x: &u32, y: &u32) -> Option<String> {
     if let Some(prefix) = prefix {
-        Some(format!("{} {}", prefix, index))
+        Some(format!("{} ({},{})", prefix, x, y))
     } else {
         None
     }
@@ -95,28 +93,34 @@ pub fn load_image(image_base64: String) -> String {
     let mut state = STATE.lock().expect("Couldn't lock application state");
 
     let image_base64: Vec<&str> = image_base64.split("base64,").collect();
+
+    if image_base64.len() < 2 {
+        return format!("Error: Badly-formatted base64: {}", image_base64.join(""));
+    }
+
     let image_base64 = image_base64[1];
 
     match base64::decode(image_base64) {
         Ok(image) => {
             match image::load_from_memory(image.as_ref()) {
                 Ok(image) => {
+                    let size = format!("{}×{}", image.width(), image.height());
                     // todo get rid of magic numbers! what about Bitsy HD?
                     let image = image.resize(128, 128, CatmullRom);
                     state.image = Some(image);
-                    "OK"
+                    size
                 },
                 _ => {
                     state.image = None;
-                    "Couldn't load image"
+                    "Error: Couldn't load image".to_string()
                 }
             }
         },
         _ => {
             state.image = None;
-            "Couldn't decode image"
+            "Error: Couldn't decode image".to_string()
         }
-    }.to_string()
+    }
 }
 
 #[wasm_bindgen]
@@ -184,19 +188,23 @@ fn image_to_base64(image: &DynamicImage) -> String {
     format!("data:image/png;base64,{}", base64::encode(&bytes))
 }
 
+fn palette_from(bg: &bitsy_parser::Colour, fg: &bitsy_parser::Colour) -> bitsy_parser::Palette {
+    bitsy_parser::Palette {
+        id: "0".to_string(),
+        name: None,
+        colours: vec![
+            bg.clone(), fg.clone(), bitsy_parser::Colour { red: 0, green: 0, blue: 0 }
+        ],
+    }
+}
+
 fn render_preview(state: &State) -> DynamicImage {
-    let mut buffer = state.image.as_ref().unwrap().clone().into_rgba();
+    let mut buffer = state.image.as_ref().unwrap().clone().into_rgba8();
 
     let palette = match &state.palette {
         SelectedPalette::None => bitsy_parser::mock::game_default().palettes[0].clone(),
         SelectedPalette::Existing { id } => state.game.as_ref().unwrap().get_palette(id).unwrap().clone(),
-        SelectedPalette::New { background, foreground } => bitsy_parser::Palette {
+        SelectedPalette::New { background, foreground } => palette_from(background, foreground),
-            id: "0".to_string(),
-            name: None,
-            colours: vec![
-                background.clone(), foreground.clone(), bitsy_parser::Colour { red: 0, green: 0, blue: 0 }
-            ],
-        },
     };
 
     let colour_map = crate::ColourMap::from(&palette);
@@ -239,57 +247,99 @@ pub fn add_room() -> String {
     let mut state = STATE.lock().expect("Couldn't lock application state");
 
     if state.game.is_none() {
-        return "No game data loaded".to_string();
+        return "No game data loaded".into();
     }
 
+    match &state.palette {
+        SelectedPalette::None => { return "No palette selected".into(); },
+        _ => {}
+    };
+
     let mut game = state.game.clone().unwrap();
 
     if state.image.is_none() {
-        return "No image loaded".to_string();
+        return "No image loaded".into();
     }
 
-    let width   = state.image.as_ref().unwrap().width();
+    let palette_id = Some(match &state.palette {
-    let height  = state.image.as_ref().unwrap().height();
+        SelectedPalette::None => bitsy_parser::mock::game_default().palettes[0].id.clone(),
+        SelectedPalette::Existing { id } => id.clone(),
+        SelectedPalette::New { background, foreground } => {
+            game.add_palette(palette_from(background, foreground))
+        },
+    });
+
+    let foreground = &game.palettes
+        .iter()
+        .find(|&palette| &palette.id == palette_id.as_ref().unwrap())
+        .unwrap().colours[1].clone();
+
+    let preview = render_preview(&state);
+
+    let width   = 128;
+    let height  = 128;
     let columns = (width  as f64 / SD as f64).floor() as u32;
     let rows    = (height as f64 / SD as f64).floor() as u32;
 
-    let mut tile_index = 1;
+    let mut tile_ids = Vec::new();
+    let initial_tile_count = game.tiles.len();
 
-    for column in 0..columns {
+    for row in 0..rows {
-        for row in 0..rows {
+        for column in 0..columns {
             let mut pixels = Vec::with_capacity(64);
 
+            fn colour_match(a: &image::Rgb<u8>, b: &bitsy_parser::Colour) -> u8 {
+                if a[0] == b.red && a[1] == b.green && a[2] == b.blue { 1 } else { 0 }
+            }
+
             for y in (row * SD)..((row + 1) * SD) {
                 for x in (column * SD)..((column + 1) * SD) {
-                    let pixel = state.image.as_ref().unwrap().get_pixel(x, y).to_rgb();
+                    let pixel = preview.get_pixel(x, y).to_rgb();
-                    let total = pixel[0] as u32 + pixel[1] as u32 + pixel[2] as u32;
+                    pixels.push(colour_match(&pixel, foreground));
-                    // is each channel brighter than 128/255 on average?
-                    pixels.push(if total >= 384 {1} else {0});
                 }
             }
 
             let tile = Tile {
                 // "0" will get overwritten to a new, safe tile ID
                 id: "0".to_string(),
-                name: tile_name(&state.room_name, &tile_index),
+                name: tile_name(&state.room_name, &column, &row),
                 wall: None,
                 animation_frames: vec![Image { pixels }],
                 colour_id: None
             };
 
-            if !game.tiles.contains(&tile) {
+            let tile_id = if game.tiles.contains(&tile) {
-                game.add_tile(tile.clone());
+                game.tiles.iter().find(|&t| t == &tile).unwrap().id.clone()
+            } else {
+                game.add_tile(tile)
+            };
 
-                tile_index += 1;
+            tile_ids.push(tile_id);
-            }
         }
     }
 
+    game.add_room(bitsy_parser::Room {
+        id: "0".to_string(),
+        palette_id,
+        name: state.room_name.clone(),
+        tiles: tile_ids,
+        items: vec![],
+        exits: vec![],
+        endings: vec![],
+        walls: None
+    });
+
     game.dedupe_tiles();
 
+    let new_tile_count = game.tiles.len();
+
     state.game = Some(game.to_owned());
 
-    "OK".to_string()
+    format!(
+        "Added room \"{}\" with {} new tiles",
+        &state.room_name.as_ref().unwrap_or(&"untitled".to_string()),
+        new_tile_count - initial_tile_count
+    )
 }
 
 #[wasm_bindgen]
@@ -304,7 +354,7 @@ pub fn output() -> String {
 
 #[cfg(test)]
 mod test {
-    use crate::{add_room, load_image, load_default_game, output, get_preview};
+    use crate::{add_room, load_image, load_default_game, output, get_preview, set_room_name};
 
     #[test]
     fn image_to_base64() {
@@ -327,16 +377,17 @@ mod test {
         load_default_game();
         load_image(include_str!("test-resources/colour_input.png.base64").trim().to_string());
         let output = get_preview();
-        let expected = include_str!("test-resources/colour_input.png.base64.greyscale").trim();
+        let expected = include_str!("test-resources/colour_input.png.base64.blueprint").trim();
         assert_eq!(output, expected);
     }
 
     #[test]
     fn example() {
         load_default_game();
-        load_image(include_str!("test-resources/test.png.base64").to_string());
+        load_image(include_str!("test-resources/test.png.base64").trim().to_string());
-        add_room();
+        set_room_name("test".to_string());
-
+        println!("add_room(): {}", add_room());
+        // todo what? why are extraneous pixels appearing in the output tiles?
         assert_eq!(output(), include_str!("test-resources/expected.bitsy"));
     }
 }

src/test-resources/colour_input.png.base64.blueprint

@@ -0,0 +1 @@
+data:image/png;base64,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

src/test-resources/expected.bitsy

@@ -1,6 +1,6 @@
 Write your game's title here
 
-# BITSY VERSION 7.2
+# BITSY VERSION 7.5
 
 ! ROOM_FORMAT 1
 
@@ -30,6 +30,26 @@ ROOM 0
 NAME example room
 PAL 0
 
+ROOM 1
+a,a,1,1,2,2,3,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
+NAME test
+PAL 0
+
 TIL a
 11111111
 10000001
@@ -41,7 +61,7 @@ TIL a
 11111111
 NAME block
 
-TIL 2
+TIL 1
 00011000
 00111000
 00011000
@@ -50,8 +70,9 @@ TIL 2
 00011000
 00011000
 00111100
+NAME test (2,0)
 
-TIL 3
+TIL 2
 00111100
 01100110
 01100110
@@ -60,8 +81,9 @@ TIL 3
 00110000
 01100000
 01111110
+NAME test (4,0)
 
-TIL 4
+TIL 3
 00111100
 01100110
 01100110
@@ -70,6 +92,7 @@ TIL 4
 01100110
 01100110
 00111100
+NAME test (6,0)
 
 SPR A
 00011000

src/test-resources/test.png.base64

@@ -1 +1 @@
-data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAAQCAYAAACm53kpAAAAvElEQVR4nO2QQQrDMBAD6/8/upVSBMqClab2IWAP2M1qtgmovcFrgNYa7i96lWdO8nKi7oz6HkcBvWUo3FgKXo7PQpmTvJzy2XNiWgGEM/HM6fmaz54TpwLwiBvhjVnPhDPxzLny5Gpn1FceVcCoJ7/sOKcCKlC4sRS8O87EMyf55Ejy1dU58YgCerm46+ucOArA79/oI/U1ykXy1QntXHlSd9wluHX+52LsAnB2ATjLsgvA2QXgLMvyBXwAjqzoAQg4VfAAAAAASUVORK5CYII=
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAABHNCSVQICAgIfAhkiAAAAcJJREFUeJzt19FqgzAAQFEz+v+/nD1t2NLWsQgW7jlP2ogVvUYdc865LRhj/C7/7Gr/29678cfDeNxmdZznbtv2vwu2H39cPtr26H/mnNuc8259ZZzXvs7a0dHJdjE+022/sjKFrzh6jKyO89ppM8AZrgqw7C6AMcbbk3s0vmL1BfLZewDHPmIGcOdfZ5z1GbjymfbqEI7u5nf7EMvfjG3bzJVhH/EI4DoCiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHECSBOAHECiBNAnADiBBAngDgBxAkgTgBxAogTQJwA4gQQJ4A4AcQJIE4AcQKIE0CcAOIEECeAOAHEfQM+SHkFb+/YEwAAAABJRU5ErkJggg==