make width and height dynamic

src/components/Board.tsx

@@ -6,8 +6,8 @@ import PlayArrowIcon from "@mui/icons-material/PlayArrow"
 import StopIcon from "@mui/icons-material/Stop"
 
 import {
-  BOARD_HEIGHT,
-  BOARD_WIDTH,
+  DEFAULT_WIDTH,
+  DEFAULT_HEIGHT,
   DEFAULT_TILE_COLOR,
   SELECTED_TILE_COLOR,
   SIDEBAR_WIDTH,
@@ -19,7 +19,7 @@ import { iterate, newProgram, ProgramState, resetProgram } from "../interpreter"
 function Board() {
   let key = 0
 
-  const [program, setProgram] = useState<ProgramState>(newProgram())
+  const [program, setProgram] = useState<ProgramState>(newProgram(DEFAULT_WIDTH, DEFAULT_HEIGHT))
   const [playing, setPlaying] = useState<boolean>(false)
   const intervalRef = useRef<NodeJS.Timer>()
 
@@ -111,7 +111,11 @@ function Board() {
       {/* BOARD */}
       {program.board.map((row, rowNo): JSX.Element => {
         return (
-          <Grid key={key++} container columns={BOARD_WIDTH} sx={{ width: `${6 * BOARD_WIDTH}rem` }}>
+          <Grid
+            key={key++}
+            container
+            columns={program.width}
+            sx={{ width: `${6 * program.width}rem` }}>
             {row.map((tile, colNo): JSX.Element => {
               return (
                 <div

src/const.tsx

@@ -1,8 +1,8 @@
 export const SIDEBAR_WIDTH = 8
 export const SELECTED_TILE_COLOR = "Coral"
 export const DEFAULT_TILE_COLOR = "0xFFFFFF"
-export const BOARD_WIDTH = 20
-export const BOARD_HEIGHT = 10
+export const DEFAULT_WIDTH = 20
+export const DEFAULT_HEIGHT = 10
 export const TILE_SIZE = 5
 export const STEP_DELAY = 300
 

src/interpreter.tsx

@@ -1,9 +1,11 @@
-import { BOARD_HEIGHT, BOARD_WIDTH } from "./const"
+import { DEFAULT_HEIGHT, DEFAULT_WIDTH } from "./const"
 import instructions, { Instruction } from "./instructions"
 
 export interface ProgramState {
   instructionPointer: Point
   direction: Point
+  width: number
+  height: number
   stack: number[]
   board: Instruction[][]
   output: string
@@ -27,12 +29,14 @@ const Direction = {
  * Creates a new program
  * @returns new program object with initialized attributes
  */
-export const newProgram = () => {
+export const newProgram = (width: number, height: number) => {
   const program: ProgramState = {
     instructionPointer: { x: 0, y: 0 },
     direction: Direction.Right,
+    width: width,
+    height: height,
     stack: [],
-    board: newBoard(),
+    board: newBoard(width, height),
     output: "",
     stringmode: false,
     done: true
@@ -69,10 +73,10 @@ export const resetProgram = (program: ProgramState) => {
  * Initializes a 2D array of instructions with all elements set to the NOOP instruction
  * @returns Instruction[BOARD_HEIGHT][BOARD_WIDTH]
  */
-export const newBoard = () => {
-  return new Array(BOARD_HEIGHT)
+export const newBoard = (width: number, height: number) => {
+  return new Array(height)
     .fill(0)
-    .map(() => new Array(BOARD_WIDTH).fill(0).map(() => structuredClone(instructions[0])))
+    .map(() => new Array(width).fill(0).map(() => structuredClone(instructions[0])))
 }
 
 /**
@@ -99,9 +103,9 @@ const step = (program: ProgramState) => {
   program.instructionPointer.y += program.direction.y
 
   if (
-    program.instructionPointer.x >= BOARD_WIDTH ||
+    program.instructionPointer.x >= DEFAULT_WIDTH ||
     program.instructionPointer.x < 0 ||
-    program.instructionPointer.y >= BOARD_HEIGHT ||
+    program.instructionPointer.y >= DEFAULT_HEIGHT ||
     program.instructionPointer.y < 0
   ) {
     console.log("pointer out of bounds, resetting program")