diff --git a/includes/script.js b/includes/script.js
index 546df47..e254e28 100644
--- a/includes/script.js
+++ b/includes/script.js
@@ -2,6 +2,7 @@ $(document).ready(function() {
     var bitsyData = {};
 
     var palette = {
+        id: 0,
         background: {
             red: 62, 
             green: 43, 
@@ -112,7 +113,7 @@ $(document).ready(function() {
             });
 
             bitsyData.palettes[name] = {
-                sortOrder:  n,
+                id:         n,
                 background: colours[0],
                 tile:       colours[1],
                 sprite:     colours[2],
@@ -140,7 +141,7 @@ $(document).ready(function() {
         }
 
         // set palette to first imported palette and redraw
-        palette = _.first(_.sortBy(bitsyData.palettes, 'sortOrder'));
+        palette = _.first(_.sortBy(bitsyData.palettes, 'id'));
 
         renderResult();
 
@@ -150,7 +151,10 @@ $(document).ready(function() {
         _.each(bitsyData.palettes, function(palette, name) {
             $('#palette tbody').append(
                 '<tr class="palette">'
-                  + '<td><input type="radio" name="palette" id="palette-' + name + '"></td>'
+                  + '<td>'
+                      + '<input type="radio" name="palette" id="palette-' + name + '">'
+                      + '<input type="hidden" name="id" value="' + palette.id + '">'
+                  + '</td>'
                   + '<td><label for="palette-' + name + '">' + name + '</label></td>'
                   + '<td><input type="color" name="background" value="' + colourToHex(palette.background) + '"></td>'
                   + '<td><input type="color" name="tile"       value="' + colourToHex(palette.tile)       + '"></td>'
@@ -311,6 +315,7 @@ $(document).ready(function() {
         readFile(this);
     });
 
+    // 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() {
         // if this is a colour input, update the palette
         if ($(this).attr('type') === 'color') {
@@ -319,10 +324,32 @@ $(document).ready(function() {
 
         // if this is a radio button, pick this palette
         if ($(this).attr('type') === 'radio') {
-            palette.background = hexToColour($(this).closest('.palette').find('input[type="color"][name="background"]').val());
-            palette.tile       = hexToColour($(this).closest('.palette').find('input[type="color"][name="tile"]').val());
+            palette.id         = parseInt(   $(this).closest('.palette').find('input[name="id"]'        ).val());
+            palette.background = hexToColour($(this).closest('.palette').find('input[name="background"]').val());
+            palette.tile       = hexToColour($(this).closest('.palette').find('input[name="tile"]'      ).val());
+            // sprite colour is not currently used
         }
 
         renderResult();
     });
+
+    $('#save').on('click touchend', function() {
+        var newGameData = $('textarea').val();
+
+        // need to import IDs so we don't give the new room a conflicting ID
+        var roomNames = newGameData.match(/ROOM \d+/g);
+
+        var newRoomId = parseInt(_.last(roomNames).replace(/[^\d]+/g, "")) + 1;
+
+        var newRoom = "ROOM " + newRoomId + "\n";
+
+        _.each(room, function(row) {
+            newRoom += _.toString(row) + "\n";
+        });
+
+        newRoom += "PAL " + palette.id + "\n";
+
+        // write
+        $('textarea').val(newGameData.replace(/(ROOM .*\n(.*\n)*PAL .*)/g, '$1\n\n' + newRoom));
+    });
 });
\ No newline at end of file