Add drag-and-drop sprite creation

dispatch.js

@@ -48,6 +48,10 @@ const ACTIONS = {
   INIT(args, state) {
     init(state);
   },
+  SET_DROPPED_IMAGE({ file }, state) {
+    dispatch("CREATE_SPRITE");
+    state.pixelEditor.setImageData(file);
+  },
   RUN(args, state) {
     const string = state.codemirror.view.state.doc.toString();
 

events.js

@@ -40,7 +40,12 @@ function readFile(file) {
   reader.onloadend = (event) => {
     let raw = reader.result;
 
-    const saved = JSON.parse(raw);
+    try {
+      const saved = JSON.parse(raw);
+    } catch (err) {
+
+      dispatch("SET_DROPPED_IMAGE", { file });
+    }
 
     dispatch("UPLOAD", { saved });
   };

pixel-editor/pixel-editor.js

@@ -44,6 +44,32 @@ export function createPixelEditor(target) {
     // hoveredCell: null,
   };
 
+  const setImageData = (file) => {
+    let reader = new FileReader();
+    reader.onload = (event) => {
+      const dataURL = event.target.result;
+      const canvas = document.getElementById('offscreen-canvas');
+      const ctx = canvas.getContext('2d');
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      const image = new Image();
+      image.onload = () => {
+        ctx.drawImage(image, 0, 0, 32, 32);
+        const imageData = ctx.getImageData(0, 0, 32, 32);
+        for (let i = 0; i < state.gridColors.length; i++) {
+          state.gridColors[i] = [
+            imageData.data[i * 4],
+            imageData.data[i * 4 + 1],
+            imageData.data[i * 4 + 2],
+            imageData.data[i * 4 + 3]
+          ];
+        }
+      };
+      image.src = dataURL;
+    };
+    reader.readAsDataURL(file);
+
+  }
+
   const renderTool = (toolName, state) => html`
     <button
       class=${[state.tool === toolName ? "selected-tool" : ""].join(" ")}
@@ -60,7 +86,15 @@ export function createPixelEditor(target) {
   const view = (state) => html`
     ${pixelStyles}
     <div class="canvas-container">
-      <canvas class="drawing-canvas"></canvas>
+      <canvas
+        class="offscreen-canvas"
+        id="offscreen-canvas"
+        width="32"
+        height="32"
+      ></canvas>
+      <canvas
+        class="drawing-canvas"
+      ></canvas>
     </div>
     <div class="toolbox">
       ${["draw", "circle", "rectangle", "line", "bucket", "move"].map((name) =>
@@ -541,5 +575,6 @@ export function createPixelEditor(target) {
       ).fill([0, 0, 0, 0]),
     }),
     gridColors: () => state.gridColors,
+    setImageData: setImageData
   };
 }

pixel-editor/pixel-styles.js

@@ -29,6 +29,10 @@ export const pixelStyles = html`
       background: white;
     }
 
+    .offscreen-canvas {
+      display: none;
+    }
+
     .toolbox {
       position: absolute;
       right: 10px;