fix game data upload button :|

add padding to bottom of sections properly

includes/script.js

@@ -217,21 +217,26 @@ $(document).ready(function() {
         $('input[name="id"][value="' + palette.id + '"]').siblings(':radio').trigger('click');
     }
 
-    function readFile(input) {
+    function readFile(input, callback) {
         if (input.files && input.files[0]) {
             var reader = new FileReader();
             
-            reader.onload = function (e) {
-                $croppie.croppie('bind', {
-                    url: e.target.result,
-                    zoom: 0
-                });
-            };
+            reader.onload = callback;
             
             reader.readAsDataURL(input.files[0]);
         }
     }
 
+    function readTextFile(input, callback) {
+        if (input.files && input.files[0]) {
+            var reader = new FileReader();
+
+            reader.onload = callback;
+
+            reader.readAsText(input.files[0]);
+        }
+    }
+
     function render() {
         $croppie.croppie('result', {
             type: 'rawcanvas',
@@ -424,7 +429,19 @@ $(document).ready(function() {
     handleBitsyGameData();
 
     $('#imageUpload').on('change', function () {
-        readFile(this);
+        readFile(this, function (e) {
+            $croppie.croppie('bind', {
+                url: e.target.result,
+                zoom: 0
+            });
+        });
+    });
+
+    $('input.game-data').on('change', function() {
+        readTextFile(this, function (e) {
+            $bitsyData.val(e.target.result);
+            handleBitsyGameData();
+        });
     });
 
     // these inputs get added and removed from the DOM so the event handler needs to be on the document

includes/style.css

@@ -84,6 +84,7 @@ input {
   background-color: #d3cbd0;
   color: #594a54;
   width: 256px;
+  padding-bottom: 1em;
 }
 #brightness {
   width: 256px;