Repeatedly update game board

src/index.html

@@ -10,4 +10,4 @@
         <div class="board" id="board">
         </div>
     </body>
-</html>
+</html>

src/js/Constants.js

@@ -5,9 +5,11 @@ export class Constants
 {
     /**
      * The IDs of the players.
+     *
+     * @type {Partial<Record<CellOwner, string>>}
      */
-    static PLAYER_NAMES = [
-        "red",
-        "blue"
-    ];
+    static PLAYER_NAMES = {
+        r: "red",
+        b: "blue"
+    };
 }

src/js/State.js

@@ -0,0 +1,23 @@
+/**
+ * The state of the board.
+ *
+ * @type {Board}
+ */
+export const State = /** @type {Board} */ (
+    Array(6).fill("").map(
+        () => (Array(7).fill("").map(
+            () =>
+            {
+                let id = Math.floor(Math.random() * 3);
+
+                switch (id)
+                {
+                    case 1:
+                        return "r";
+                    case 2:
+                        return "b";
+                    default:
+                        return "";
+                }
+            })))
+);

src/js/board.js

@@ -1,5 +1,6 @@
 import { Constants } from "./Constants.js";
 import { elt } from "./elt.js";
+import { State } from "./State.js";
 
 /**
  * Initializes the game board.
@@ -10,21 +11,22 @@ import { elt } from "./elt.js";
 export function initializeBoard(id)
 {
     let board = document.getElementById(id);
+    board.innerHTML = "";
 
     for (let i = 0; i < 6; i++)
     {
-        for (let i = 0; i < 7; i++)
+        for (let j = 0; j < 7; j++)
         {
             /** @type {Node[]} */
             let children = [];
-            let playerId = Math.floor(Math.random() * 3);
+            let playerId = State[i][j];
 
-            if (playerId > 0)
+            if (playerId !== "")
             {
                 children.push(elt(
                     "div",
                     {
-                        class: `piece ${Constants.PLAYER_NAMES[playerId - 1]}`
+                        class: `piece ${Constants.PLAYER_NAMES[playerId]}`
                     }));
             }
 

src/js/main.js

@@ -1,5 +1,68 @@
 import { initializeBoard } from "./board.js";
-import { elt } from "./elt.js";
+import { State } from "./State.js";
 
-document.documentElement.appendChild(elt("a", { href: "https://startpage.com/" }, "This is a test"));
-initializeBoard("board");
+/**
+ * Initializes the board.
+ */
+function initialize()
+{
+    initializeBoard("board");
+}
+
+initialize();
+
+/**
+ * Sleeps for the specified number of milliseconds.
+ *
+ * @param {number} ms
+ * The number of milliseconds to sleep.
+ */
+async function sleep(ms)
+{
+    return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+(
+    async () =>
+    {
+        let counter = 0;
+        let tick = 0;
+
+        // eslint-disable-next-line no-constant-condition
+        while (true)
+        {
+            await sleep(1000 * (1 / 5));
+            let cycle = counter % 24;
+
+            if ((cycle <= 11) || ((cycle % 2) === 0))
+            {
+                tick = (tick % 18) + 1;
+                let rowId = Math.floor(Math.random() * State.length);
+                let fieldId = Math.floor(Math.random() * State[rowId].length);
+
+                /**
+                 * @type {CellOwner}
+                 */
+                let owner;
+
+                switch (Math.floor(Math.random() * 3))
+                {
+                    case 1:
+                        owner = "r";
+                        break;
+                    case 2:
+                        owner = "b";
+                        break;
+                    default:
+                        owner = "";
+                        break;
+                }
+
+                State[rowId][fieldId] = owner;
+                console.log(tick);
+                initialize();
+            }
+
+            counter++;
+        }
+    })();

src/js/types.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Represents the state of a field.
+ */
+type CellOwner = "" | "r" | "b";
+
+/**
+ * Represents a row of the game field.
+ */
+type Row = [CellOwner, CellOwner, CellOwner, CellOwner, CellOwner, CellOwner, CellOwner];
+
+/**
+ * Represents a game board.
+ */
+type Board = [
+    Row,
+    Row,
+    Row,
+    Row,
+    Row,
+    Row
+];