add WIP upload feature

src/components/Board.tsx

@@ -3,6 +3,7 @@ import { Card, CardContent, Grid, IconButton, TextField, Typography } from "@mui
 import { Instruction } from "../instructions"
 import KeyboardDoubleArrowRightIcon from "@mui/icons-material/KeyboardDoubleArrowRight"
 import PlayArrowIcon from "@mui/icons-material/PlayArrow"
+import SaveIcon from "@mui/icons-material/Save"
 import StopIcon from "@mui/icons-material/Stop"
 
 import {
@@ -15,6 +16,8 @@ import {
   TILE_SIZE
 } from "../const"
 import { iterate, newProgram, ProgramState, resetProgram } from "../interpreter"
+import FileUpload from "./FileUpload"
+import loadProgram, { save } from "../filehandler"
 
 function Board() {
   let key = 0
@@ -101,6 +104,14 @@ function Board() {
             <IconButton href={save(program)} download="save.json">
               <SaveIcon />
             </IconButton>
+            <input
+              type="file"
+              onInput={
+                () => {
+                  console.log("TODO")
+                } /*loadProgram(program, )*/
+              }
+            />
           </Grid>
           <Grid item xs={4}>
             <Typography>output: {program.output}</Typography>

src/filehandler.tsx

@@ -8,6 +8,22 @@ interface SaveState {
   program: string[]
 }
 
+export default function loadProgram(to: ProgramState, save: SaveState) {
+  resetProgram(to)
+  to.board = newBoard(save.width, save.height)
+
+  save.program.forEach((line, row) => {
+    line.split("").forEach((char, col) => {
+      const index = instructions.findIndex((ins) => {
+        ins.bytecode === char
+      })
+
+      if (index !== -1) {
+        to.board[row][col] = instructions[index]
+      }
+    })
+  })
+}
 
 export function save(program: ProgramState): string {
   const saveObject: SaveState = {