From d7cb2b21459f94340575e8726cfa79e1d49f3a7b Mon Sep 17 00:00:00 2001
From: Ole Morud <olekr99@hotmail.com>
Date: Thu, 25 Aug 2022 20:45:40 +0200
Subject: [PATCH] add play button

---
 src/components/Board.tsx | 26 +++++++++++++++++++++++---
 src/const.tsx            |  1 +
 src/interpreter.tsx      |  2 +-
 3 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/Board.tsx b/src/components/Board.tsx
index 21c0ad9..13ea8e3 100644
--- a/src/components/Board.tsx
+++ b/src/components/Board.tsx
@@ -11,6 +11,7 @@ import {
   DEFAULT_TILE_COLOR,
   SELECTED_TILE_COLOR,
   SIDEBAR_WIDTH,
+  STEP_DELAY,
   TILE_SIZE
 } from "../const"
 import { iterate, newProgram, ProgramState, resetProgram } from "../interpreter"
@@ -20,20 +21,39 @@ function Board() {
 
   const [program, setProgram] = useState<ProgramState>(newProgram())
   const [playing, setPlaying] = useState<boolean>(false)
+  const intervalRef = useRef<NodeJS.Timer>()
+
+  useEffect(() => {
+    if (playing) {
+      intervalRef.current = setInterval(() => {
+        step()
+        console.log("a")
+      }, STEP_DELAY)
+    } else {
+      clearInterval(intervalRef.current)
+      console.log(program)
+    }
+  }, [playing])
 
   useEffect(() => {
     if (program.done) {
+      console.log("done")
       const x = structuredClone(program)
       resetProgram(x)
+      setPlaying(false)
       x.done = false
       setProgram(x)
     }
   }, [program])
 
   const step = () => {
-    const x = structuredClone(program)
+    //const x = structuredClone(program)
+    //iterate(x)
+    setProgram((prog) => {
+      const x = structuredClone(prog)
     iterate(x)
-    setProgram(x)
+      return x
+    })
   }
 
   const handleDrop = (
@@ -94,7 +114,7 @@ function Board() {
       {/* BOARD */}
       {program.board.map((row, rowNo): JSX.Element => {
         return (
-          <Grid key={key++} container columns={BOARD_WIDTH} sx={{ width: `${5 * 12}rem` }}>
+          <Grid key={key++} container columns={BOARD_WIDTH} sx={{ width: `${6 * BOARD_WIDTH}rem` }}>
             {row.map((tile, colNo): JSX.Element => {
               return (
                 <div
diff --git a/src/const.tsx b/src/const.tsx
index bc56f5c..945fb69 100644
--- a/src/const.tsx
+++ b/src/const.tsx
@@ -4,5 +4,6 @@ export const DEFAULT_TILE_COLOR = "0xFFFFFF"
 export const BOARD_WIDTH = 10
 export const BOARD_HEIGHT = 10
 export const TILE_SIZE = 5
+export const STEP_DELAY = 300
 
 export default {}
diff --git a/src/interpreter.tsx b/src/interpreter.tsx
index 28719ba..908314d 100644
--- a/src/interpreter.tsx
+++ b/src/interpreter.tsx
@@ -57,7 +57,7 @@ export const resetProgram = (program: ProgramState) => {
   })*/
 
   program.direction = Direction.Right
-  program.done = false
+  program.done = true
   program.instructionPointer.x = 0
   program.instructionPointer.y = 0
   program.output = ""