-- Implement Toroidal Wrapping.

Author: Tukajo

.env

@@ -0,0 +1,2 @@
+ESLINT_NO_DEV_ERRORS=true
+TSC_COMPILE_ON_ERROR=true

src/App.tsx

@@ -7,8 +7,11 @@ function App() {
     const [gameBoard, setGameBoard] = useState<number[][]>(Array(MAX_WIDTH).fill(Array(MAX_HEIGHT).fill(0)));
     const [simulationRunning, setSimulationRunning] = useState<boolean>(false);
     const [gameSpeed, setGameSpeed] = useState<number>(200);
+    const [toroidalBorders, setToroidalBorders] = useState<boolean>(false);
     const gameSpeedRef = useRef<number>(gameSpeed);
     const simulationRunningRef = useRef<boolean>(simulationRunning);
+    const toroidalBordersRef = useRef<boolean>(toroidalBorders);
+    toroidalBordersRef.current = toroidalBorders;
     gameSpeedRef.current = gameSpeed;
     simulationRunningRef.current = simulationRunning;
 
@@ -27,7 +30,7 @@ function App() {
                 return produce(g, (gameBoardCopy) => {
                     for (let x = 0; x < gameBoardCopy.length; x++) {
                         for (let y = 0; y < gameBoardCopy.length; y++) {
-                            gameBoardCopy[x][y] = resolvePosition(g, x, y);
+                            gameBoardCopy[x][y] = resolvePosition(g, x, y, toroidalBordersRef.current);
                         }
                     }
                 });
@@ -41,48 +44,70 @@ function App() {
     }, []);
 
     return (
-        <div>
-            <div style={{ display: 'grid', gridTemplateColumns: `repeat(${MAX_WIDTH},20px` }}>
-                {gameBoard.map((row: number[], i) =>
-                    row.map((_column: number, j) => {
-                        const key = `el_${i}_${j}`;
-                        return (
-                            <div
-                                key={key}
-                                onClick={() => {
-                                    handleTogglePosition(i, j);
+        <div style={{ height: '100vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+            <div>
+                <div style={{ display: 'grid', gridTemplateColumns: `repeat(${MAX_WIDTH},20px` }}>
+                    {gameBoard.map((row: number[], i) =>
+                        row.map((_column: number, j) => {
+                            const key = `el_${i}_${j}`;
+                            return (
+                                <div
+                                    key={key}
+                                    onClick={() => {
+                                        handleTogglePosition(i, j);
+                                    }}
+                                    style={{
+                                        width: 20,
+                                        height: 20,
+                                        backgroundColor: gameBoard[i][j] ? 'skyblue' : undefined,
+                                        border: '1px solid black',
+                                    }}
+                                />
+                            );
+                        }),
+                    )}
+                </div>
+                <span style={{ display: 'flex', flexDirection: 'row' }}>
+                    <button
+                        style={{ width: '200px', height: '50px', margin: '10px' }}
+                        onClick={() => {
+                            setSimulationRunning(!simulationRunning);
+                            if (!simulationRunning) {
+                                simulationRunningRef.current = true;
+                                startSimulation();
+                            }
+                        }}
+                    >
+                        {simulationRunning ? 'pause' : 'start'}
+                    </button>
+                    <div style={{ margin: '10px', padding: '5px' }}>
+                        <label>
+                            <input
+                                type={'numeric'}
+                                value={gameSpeed}
+                                onChange={(e) => {
+                                    const { value: rawValue } = e.target;
+                                    const num = parseInt(rawValue || '0');
+                                    setGameSpeed(num);
                                 }}
-                                style={{
-                                    width: 20,
-                                    height: 20,
-                                    backgroundColor: gameBoard[i][j] ? 'skyblue' : undefined,
-                                    border: '1px solid black',
+                            />
+                            <span>game speed</span>
+                        </label>
+                    </div>
+                    <div style={{ margin: '10px', padding: '5px' }}>
+                        <label className={'switch'}>
+                            <input
+                                type="checkbox"
+                                value={`${toroidalBorders}`}
+                                onChange={() => {
+                                    setToroidalBorders(!toroidalBorders);
                                 }}
                             />
-                        );
-                    }),
-                )}
+                            <span>Wrap Toroidal</span>
+                        </label>
+                    </div>
+                </span>
             </div>
-            <button
-                style={{ width: '200px', height: '50px' }}
-                onClick={() => {
-                    setSimulationRunning(!simulationRunning);
-                    if (!simulationRunning) {
-                        simulationRunningRef.current = true;
-                        startSimulation();
-                    }
-                }}
-            >
-                {simulationRunning ? 'pause' : 'start'}
-            </button>
-            <input
-                type={'numeric'}
-                value={gameSpeed}
-                onChange={(e) => {
-                    const num = parseInt(e.target.value);
-                    setGameSpeed(num);
-                }}
-            />
         </div>
     );
 }

src/utils/ConwayUtils.ts

@@ -12,15 +12,20 @@ export const NeighborRelativePositions: number[][] = [
     [0, 1],
     [1, 0],
 ];
-export const resolvePosition = (originalBoard: number[][], x: number, y: number): number => {
+export const resolvePosition = (originalBoard: number[][], x: number, y: number, toroidal = false): number => {
     let neighbors = 0;
     let isLiving: number = originalBoard[x][y];
     const maxDimensionX = originalBoard[0].length;
     const maxDimensionY = originalBoard.length;
     for (const position of NeighborRelativePositions) {
         const [xNeighbor, yNeighbor] = position;
-        const relativeX = x + xNeighbor;
-        const relativeY = y + yNeighbor;
+        let relativeX = x + xNeighbor;
+        let relativeY = y + yNeighbor;
+        if (toroidal) {
+            // If we are on a "toroidal" map, we wrap around to the opposite end.
+            relativeX = relativeX < MIN_WIDTH ? MAX_WIDTH - 1 : relativeX >= MAX_WIDTH ? 0 : relativeX;
+            relativeY = relativeY < MIN_HEIGHT ? MAX_HEIGHT - 1 : relativeY >= MAX_HEIGHT ? 0 : relativeY;
+        }
         if (
             relativeX >= MIN_WIDTH &&
             relativeX < maxDimensionX &&