initial sort-of-working version!!

still several huge bugs

index.html

@@ -5229,4 +5229,4 @@ DLG ITM_0
 You found a nice warm cup of tea
 
 VAR a
-42</textarea></div><div class="section" id="image"><h2>image</h2><input id="imageUpload" type="file" accepts="image/*"><div id="croppie"></div></div><div class="section" id="palette"><h2>palette</h2><form id="palettes"><table><tbody></tbody></table></form></div><div class="section" id="crop"><h2>preview</h2><canvas id="preview" width="128" height="128"></canvas><input id="brightness" type="range" min="-255" max="255" value="0"><label for="brightness">brightness</label></div><div class="section" id="output"><h2>output</h2><canvas id="output" width="128" height="128"></canvas><input id="threshold" type="range" min="0" max="64"><br><label for="threshold"> <span class="left">use existing tiles </span><span class="right">create new tiles</span></label><br><input id="roomName" placeholder="room name"><br><br></div></body></html>
+42</textarea></div><div class="section" id="image"><h2>image</h2><input id="imageUpload" type="file" accepts="image/*"><div id="croppie"></div></div><div class="section" id="palette"><h2>palette</h2><form id="palettes"><table><tbody></tbody></table></form></div><div class="section" id="crop"><h2>preview</h2><canvas id="preview" width="128" height="128"></canvas><input id="brightness" type="range" min="-255" max="255" value="0"><label for="brightness">brightness</label></div><div class="section" id="output"><h2>output</h2><canvas id="room-output" width="128" height="128"></canvas><input id="threshold" type="range" min="0" max="64"><br><label for="threshold"> <span class="left">use existing tiles </span><span class="right">create new tiles</span></label><br><input id="roomName" placeholder="room name"><br><button id="save">Save</button><br><br></div></body></html>

index.pug

@@ -57,7 +57,7 @@ html
         #output.section
             h2 output
 
-            canvas#output(width=128, height=128)
+            canvas#room-output(width=128, height=128)
 
             input#threshold(type="range" min=0 max=64) 
             br
@@ -71,6 +71,10 @@ html
             
             br
 
+            button#save Save
+
+            br
+
             //-label favour broad strokes | favour details
 
             br

script.js

@@ -19,6 +19,10 @@ $(document).ready(function() {
         }
     };
 
+    var room = [];
+
+    var tiles = [];
+
     var croptions = {
         url: 'https://i.imgur.com/ThQZ94v.jpg',
         viewport: {width: 128, height: 128, type: 'square'},
@@ -61,6 +65,7 @@ $(document).ready(function() {
         delete colourOptions.sprite;
 
         _.each(palette, function(colour, name) {
+            colourOptions[name].name = name;
             colourOptions[name].difference = colourDifference(initialColour, colour);
         });
 
@@ -104,6 +109,24 @@ $(document).ready(function() {
             }
         });
 
+        // get tiles
+        bitsyData.tiles = {};
+
+        var tiles = input.match(/TIL (.*)\n([01]{8}\n){8}/g);
+
+        for (var i = 0; i < tiles.length; i++) {
+            var name = tiles[i].match(/TIL .*/)[0].replace('TIL ', '');
+            
+            tiles[i] = tiles[i].replace(/TIL .*\n/, '');
+
+            var bitmap = tiles[i].match(/[01]/g);
+
+            bitsyData.tiles[name] = {
+                name: name, 
+                bitmap: _.chunk(bitmap, 8)
+            };
+        }
+
         // set palette to first imported palette and redraw
         palette = _.first(_.sortBy(bitsyData.palettes, 'sortOrder'));
 
@@ -149,6 +172,7 @@ $(document).ready(function() {
         }).then(function (result) {
             var imageData  = result.getContext('2d').getImageData(0, 0, 128, 128);
             var rawData    = imageData.data;
+            var monochrome = [];
 
             brightnessAdjustment = parseFloat($('#brightness').val());
 
@@ -163,14 +187,92 @@ $(document).ready(function() {
 
                 var targetColour = getClosestColour(pixel, palette);
 
+                if (targetColour.name === "background") {
+                    monochrome.push(0);
+                } else { // tile
+                    monochrome.push(1)
+                }
+
                 rawData[i    ] = targetColour.red;
                 rawData[i + 1] = targetColour.green;
                 rawData[i + 2] = targetColour.blue;
+                rawData[i + 3] = 255;
             }
 
+            // split monochrome bitmap into equal chunks for easier x:y access
+            monochrome = _.chunk(monochrome, 128);
+
             document.getElementById('preview').getContext('2d').putImageData(imageData, 0, 0);
+
+            // tiled output
+
+            _.times(16, function(tileY) {
+                _.times(16, function(tileX) {
+                    // make pseudo-tile from monochrome bitmap
+                    var pseudoTile = [];
+
+                    _.times(8, function(y) {
+                        pseudoTile.push(
+                            _.slice(monochrome[(tileY * 8) + y], (tileX * 8), (tileX * 8) + 8)
+                        );
+                    })
+                    
+                    var tilesForMatch = bitsyData.tiles;
+
+                    _.each(tilesForMatch, function(tile) {
+                        tile.match = 0;
+
+                        _.each(tile.bitmap, function(row, y) {
+                            _.each(row, function(pixel, x) {
+                                if (parseInt(pixel) === parseInt(pseudoTile[y][x])) {
+                                    tile.match++;
+                                }
                             });
-    }, 12);
+                        });
+                    });
+
+                    var bestMatch = _.first(_.sortBy(tilesForMatch, 'match'));
+
+                    // if best match is under threshold
+                        // turn pseudo-tile into a real tile and add it to the tile data
+                    
+                    room.push(bestMatch.name);
+                });
+            });
+
+            room = _.chunk(room, 16);
+
+            // write room to output
+            imageData = document.getElementById("room-output").getContext('2d').getImageData(0, 0, 128, 128);
+            rawData   = imageData.data;
+
+            _.each(room, function(row, tileY) {
+                _.each(row, function(tileName, tileX) {
+                    if (_.get(bitsyData, 'tiles.' + tileName + '.bitmap')) {
+                        _.each(bitsyData.tiles[tileName].bitmap, function(row, y) {
+                            _.each(row, function(pixel, x) {
+                                var position = (((tileY * 8) + y) * 128) + ((tileX * 8) + x);
+
+                                position *= 4; // 4 values (rgba) per pixel
+
+                                if (parseInt(pixel) === 1) { // ?! wtf
+                                    pixelColour = palette.background;
+                                } else {
+                                    pixelColour = palette.tile;
+                                }
+
+                                rawData[position    ] = pixelColour.red;
+                                rawData[position + 1] = pixelColour.green;
+                                rawData[position + 2] = pixelColour.blue;
+                                rawData[position + 3] = 255;
+                            });
+                        });
+                    }
+                });
+            });
+            document.getElementById('room-output').getContext('2d').putImageData(imageData, 0, 0);
+        });
+    }, 30);
 
     $croppie.on('update', renderResult);