Store game state in Game class

src/js/Game.js

@@ -0,0 +1,30 @@
+import { State } from "./State.js";
+
+/**
+ * Represents a game.
+ */
+export class Game
+{
+    /**
+     * The state of the game.
+     *
+     * @type {State}
+     */
+    #state;
+
+    /**
+     * Initializes a new instance of the {@link Game `Game`} class.
+     */
+    constructor()
+    {
+        this.#state = new State();
+    }
+
+    /**
+     * Gets the state of the game.
+     */
+    get state()
+    {
+        return this.#state;
+    }
+}

src/js/State.js

@@ -1,8 +1,33 @@
 /**
- * The state of the board.
+ * Represents the state of a game.
  */
-export const State = {
+export class State
-    turnCount: 0,
+{
+    /**
+     * The board of the game.
+     *
+     * @type {Board}
+     */
+    #board;
+
+    /**
+     * The number of turns that have been played.
+     */
+    turnCount = 0;
+
+    /**
+     * Initializes a new instance of the {@link State `State`} class.
+     */
+    constructor()
+    {
+        this.#board = /** @type {Board} */ (
+            Array(6).fill("").map(
+                () =>
+                {
+                    return Array(7).fill(
+                        /** @type {CellOwner} */ (""));
+                }));
+    }
 
     /**
      * Gets the id of the current player.
@@ -12,9 +37,13 @@ export const State = {
     get currentPlayer()
     {
         return this.turnCount % 2 === 0 ? "r" : "b";
-    },
+    }
 
-    board: /** @type {Board} */ (
+    /**
-        Array(6).fill("").map(
+     * Gets the board of the game.
-            () => (Array(7).fill(""))))
+     */
-};
+    get board()
+    {
+        return this.#board;
+    }
+}

src/js/board.js

@@ -1,14 +1,16 @@
 import { Constants } from "./Constants.js";
 import { elt } from "./elt.js";
-import { State } from "./State.js";
 
 /**
  * Initializes the game board.
  *
  * @param {string} id
  * The id of the element to add the board to.
+ *
+ * @param {import("./Game.js").Game} game
+ * The game that is being played.
  */
-export function initializeBoard(id)
+export function initializeBoard(id, game)
 {
     let board = document.getElementById(id);
     board.innerHTML = "";
@@ -19,7 +21,7 @@ export function initializeBoard(id)
         {
             /** @type {Node[]} */
             let children = [];
-            let playerId = State.board[i][j];
+            let playerId = game.state.board[i][j];
 
             if (playerId !== "")
             {
@@ -39,9 +41,9 @@ export function initializeBoard(id)
 
             field.onclick = () =>
             {
-                State.board[i][j] = State.currentPlayer;
+                game.state.board[i][j] = game.state.currentPlayer;
-                State.turnCount++;
+                game.state.turnCount++;
-                initializeBoard("board");
+                initializeBoard("board", game);
             };
 
             board.appendChild(field);

src/js/main.js

@@ -1,11 +1,20 @@
 import { initializeBoard } from "./board.js";
+import { Game } from "./Game.js";
+
+/**
+ * The game that is being played.
+ *
+ * @type {Game}
+ */
+let game;
 
 /**
  * Initializes the board.
  */
 function initialize()
 {
-    initializeBoard("board");
+    game = new Game();
+    initializeBoard("board", game);
 }
 
 initialize();