diff --git a/includes/script.js b/includes/script.js
index ea92690..dacfd5b 100644
--- a/includes/script.js
+++ b/includes/script.js
@@ -1,11 +1,11 @@
 $(document).ready(function() {
     // todo define things like 16x16, 128x128 etc. as constants?
     // also script debounce/throttle times
-    var animationTime = 400; // defined in bitsy.js
+    let animationTime = 400; // defined in bitsy.js
 
-    var bitsyData = {};
+    let bitsyData = {};
 
-    var palette = {
+    let palette = {
         id: 0,
         background: {
             red: 62, 
@@ -24,23 +24,23 @@ $(document).ready(function() {
         }
     };
 
-    var room = [];
+    let room = [];
 
-    var tileMatchThreshold = 64;
+    let tileMatchThreshold = 64;
 
-    var croptions = {
+    let croptions = {
         url: 'https://i.imgur.com/ThQZ94v.jpg',
         viewport: {width: 128, height: 128, type: 'square'},
         boundary: {width: 256, height: 256},
         zoom: 0
     };
 
-    var $croppie = $('#croppie');
+    let $croppie = $('#croppie');
 
     $croppie.croppie(croptions);
 
     function colourDifference(colour1, colour2) {
-        var difference = {};
+        let difference = {};
 
         _.each(['red', 'green', 'blue'], function(key) {
             difference[key] = Math.abs(colour1[key] - colour2[key]);
@@ -64,7 +64,7 @@ $(document).ready(function() {
     }
 
     function hexToColour(hex) {
-        var rgb = hex.match(/[\da-f]{2}/gi);
+        let rgb = hex.match(/[\da-f]{2}/gi);
 
         return {
             red:   parseInt(rgb[0], 16),
@@ -87,9 +87,9 @@ $(document).ready(function() {
     }
 
     function newTileName() {
-        var tileNames = _.map(bitsyData.tiles, 'name');
+        let tileNames = _.map(bitsyData.tiles, 'name');
 
-        var i = 1; // start with 1 as 0 is an implicit tile
+        let i = 1; // start with 1 as 0 is an implicit tile
 
         while (tileNames.indexOf(i.toString(36)) > -1) {
             i++;
@@ -100,7 +100,7 @@ $(document).ready(function() {
     }
 
     function handleBitsyGameData() {
-        var input = $('#bitsy-data').val();
+        let input = $('#bitsy-data').val();
 
         if ( ! input) {
             return;
@@ -109,14 +109,14 @@ $(document).ready(function() {
         bitsyData = {};
 
         // get palettes
-        var palettes = input.match(/PAL ([^\n]*)\n(NAME ([^\n]*)\n)?(([0-9,]+){3}\n){3,}/g);
+        let palettes = input.match(/PAL ([^\n]*)\n(NAME ([^\n]*)\n)?(([0-9,]+){3}\n){3,}/g);
 
         bitsyData.palettes = {};
         
         // do palettes always go 0..n?
         // will this cause problems if not?
         _.each(palettes, function(palette, n) {
-            var name = "";
+            let name = "";
 
             if (palette.match(/NAME (.+)\n/)) {
                 name = palette.match(/NAME (.+)\n/)[0].replace('NAME ', '');
@@ -124,10 +124,10 @@ $(document).ready(function() {
                 name = palette.match(/PAL (\d+)\n/)[0].replace("PAL", "palette");
             }
 
-            var colours = palette.match(/\d+,\d+,\d+/g);
+            let colours = palette.match(/\d+,\d+,\d+/g);
 
             colours = _.map(colours, function(colour) {
-                var rgb = colour.split(',');
+                let rgb = colour.split(',');
 
                 return {red: rgb[0], green: rgb[1], blue: rgb[2]};
             });
@@ -154,16 +154,16 @@ $(document).ready(function() {
 
         // everything after > is an optional second animation frame
         // todo: handle multiple animation frames! more than 2 are allowed (but not via the standard editor)
-        var tiles = input.match(/TIL (.*)\n([01]{8}\n){8}(>\n([01]{8}\n){8})?/g);
+        let tiles = input.match(/TIL (.*)\n([01]{8}\n){8}(>\n([01]{8}\n){8})?/g);
 
         _.each(tiles, function(tile) {
-            var name = tile.match(/TIL .*/)[0].replace('TIL ', '');
+            let name = tile.match(/TIL .*/)[0].replace('TIL ', '');
             
             tile = tile.replace(/TIL .*\n/, '');
 
-            var bitmap = _.map(tile.match(/[01]/g), _.toInteger);
+            let bitmap = _.map(tile.match(/[01]/g), _.toInteger);
 
-            var newTile = {
+            let newTile = {
                 name: name,
                 new: false
             };
@@ -219,7 +219,7 @@ $(document).ready(function() {
 
     function readFile(input, callback) {
         if (input.files && input.files[0]) {
-            var reader = new FileReader();
+            let reader = new FileReader();
             
             reader.onload = callback;
             
@@ -229,7 +229,7 @@ $(document).ready(function() {
 
     function readTextFile(input, callback) {
         if (input.files && input.files[0]) {
-            var reader = new FileReader();
+            let reader = new FileReader();
 
             reader.onload = callback;
 
@@ -242,22 +242,22 @@ $(document).ready(function() {
             type: 'rawcanvas',
             size: 'viewport'
         }).then(function (result) {
-            var imageData  = result.getContext('2d').getImageData(0, 0, 128, 128);
-            var rawData    = imageData.data;
-            var monochrome = [];
+            let imageData  = result.getContext('2d').getImageData(0, 0, 128, 128);
+            let rawData    = imageData.data;
+            let monochrome = [];
 
-            var brightnessAdjustment = parseFloat($('#brightness').val());
+            let brightnessAdjustment = parseFloat($('#brightness').val());
 
             // for each pixel
-            for (var i = 0; i < rawData.length; i += 4) {
+            for (let i = 0; i < rawData.length; i += 4) {
                 // this brightness adjustment is pretty crude but whatever
-                var pixel = {
+                let pixel = {
                     red:   _.clamp(rawData[i    ] + brightnessAdjustment, 0, 255),
                     green: _.clamp(rawData[i + 1] + brightnessAdjustment, 0, 255),
                     blue:  _.clamp(rawData[i + 2] + brightnessAdjustment, 0, 255)
                 };
 
-                var targetColour = getClosestColour(pixel, palette);
+                let targetColour = getClosestColour(pixel, palette);
 
                 if (targetColour.name === "background") {
                     monochrome.push(0);
@@ -283,7 +283,7 @@ $(document).ready(function() {
             _.times(16, function(tileY) {
                 _.times(16, function(tileX) {
                     // make pseudo-tile from monochrome bitmap
-                    var pseudoTile = [];
+                    let pseudoTile = [];
 
                     _.times(8, function(y) {
                         pseudoTile.push(
@@ -291,7 +291,7 @@ $(document).ready(function() {
                         );
                     });
 
-                    var bestMatch;
+                    let bestMatch;
 
                     // if we want to always create new tiles, don't bother trying to check matches
                     if (tileMatchThreshold === 64) {
@@ -330,8 +330,8 @@ $(document).ready(function() {
 
                         // what if there are several equally good matches?
                         // find highest match amount and find all of them
-                        var bestMatchAmount = _.last(_.sortBy(bitsyData.tiles, ['match'])).match;
-                        var bestMatches     = _.filter(bitsyData.tiles, {'match': bestMatchAmount});
+                        let bestMatchAmount = _.last(_.sortBy(bitsyData.tiles, ['match'])).match;
+                        let bestMatches     = _.filter(bitsyData.tiles, {'match': bestMatchAmount});
 
                         // sort by name in ascending order
                         // earlier names are preferable
@@ -341,7 +341,7 @@ $(document).ready(function() {
                     if ( ! bestMatch || bestMatch.match < tileMatchThreshold) {
                         // turn pseudo-tile into a real tile and add it to the tile data
 
-                        var name = newTileName();
+                        let name = newTileName();
 
                         bitsyData.tiles.push({
                             name: name,
@@ -370,15 +370,15 @@ $(document).ready(function() {
 
             _.each(room, function(row, tileY) {
                 _.each(row, function(tileName, tileX) {
-                    var tile = _.find(bitsyData.tiles, {'name' : tileName});
+                    let tile = _.find(bitsyData.tiles, {'name' : tileName});
 
                     _.each(tile.bitmap, function(row, y) {
                         _.each(row, function(pixel, x) {
-                            var position = (((tileY * 8) + y) * 128) + ((tileX * 8) + x);
+                            let position = (((tileY * 8) + y) * 128) + ((tileX * 8) + x);
 
                             position *= 4; // 4 values (rgba) per pixel
 
-                            var pixelColour = {};
+                            let pixelColour = {};
 
                             switch(parseInt(pixel)) {
                                 case 0: pixelColour = palette.background; break;
@@ -399,12 +399,12 @@ $(document).ready(function() {
         });
     }
 
-    var renderDebounced = _.debounce(render, 30);
-    var renderThrottled = _.throttle(render, 30);
+    let renderDebounced = _.debounce(render, 30);
+    let renderThrottled = _.throttle(render, 30);
 
     $croppie.on('update', renderDebounced);
 
-    var $brightness = $('#brightness');
+    let $brightness = $('#brightness');
 
     $brightness.on('change', renderThrottled);
 
@@ -418,7 +418,7 @@ $(document).ready(function() {
         $('#brightness').trigger('dblclick');
     });
 
-    var $bitsyData = $('#bitsy-data');
+    let $bitsyData = $('#bitsy-data');
 
     $bitsyData.on('change blur keyup', handleBitsyGameData);
 
@@ -446,7 +446,7 @@ $(document).ready(function() {
 
     // these inputs get added and removed from the DOM so the event handler needs to be on the document
     $(document).on('change', '#palette input', function() {
-        var id = parseInt($(this).closest('.palette').find('input[name="id"]').val());
+        let id = parseInt($(this).closest('.palette').find('input[name="id"]').val());
 
         // if this is a colour input, update the palette
         if ($(this).attr('type') === 'color') {
@@ -467,7 +467,7 @@ $(document).ready(function() {
     });
 
     $(document).on('change', '#threshold', function() {
-        var newValue = parseInt($(this).val());
+        let newValue = parseInt($(this).val());
 
         if (newValue < tileMatchThreshold) {
             // set tiles back to default
@@ -490,23 +490,23 @@ $(document).ready(function() {
     $('#save').on('click touchend', function() {
         $textArea = $('textarea');
 
-        var newGameData = $textArea.val();
+        let newGameData = $textArea.val();
 
         // handle rooms
 
         // need to import IDs so we don't give the new room a conflicting ID
-        var roomIds = newGameData.match(/ROOM \d+\n/g);
+        let roomIds = newGameData.match(/ROOM \d+\n/g);
 
         roomIds = _.map(roomIds, function(roomId) {
             return parseInt(roomId.replace(/[^\d]+/g, ""));
         });
 
-        var newRoomId = _.max(roomIds) + 1;
+        let newRoomId = _.max(roomIds) + 1;
 
-        var newRoomName = $('#roomName').val();
+        let newRoomName = $('#roomName').val();
         // remove invalid chars? what's invalid? newlines? are those possible?
 
-        var newRoom = "ROOM " + newRoomId + "\n";
+        let newRoom = "ROOM " + newRoomId + "\n";
 
         _.each(room, function(row) {
             newRoom += _.toString(row) + "\n";
@@ -522,8 +522,8 @@ $(document).ready(function() {
 
         // handle tiles
 
-        var newTiles = _.filter(bitsyData.tiles, 'new');
-        var tileText = "";
+        let newTiles = _.filter(bitsyData.tiles, 'new');
+        let tileText = "";
 
         _.each(newTiles, function(tile, n) {
             tileText += "TIL " + tile.name + "\n"; //again, rename tile name to id...