1 files changed, 35 insertions, 0 deletions
diff --git a/client/src/Mancala/Mancala.tsx b/client/src/Mancala/Mancala.tsx
new file mode 100644
index 0000000..509410b
--- /dev/null
+++ b/client/src/Mancala/Mancala.tsx
@@ -0,0 +1,35 @@
+import React, { useState } from "react";
+import { StartGame } from "./StartGame";
+import { Play } from "./Play";
+import type { GameState } from "../gameState";
+import "./Mancala.css";
+
+/**
+ * The base component for the Mancala game. If there's no active game, the `StartGame` component allows
+ * users to enter two player names and start a new game.
+ * If there's an active game this component holds the game state. This game state can be passed as a prop
+ * to child components as needed.
+ *
+ * Child components can modify the game state by calling the setGameState (which they recieve as prop.)
+ */
+export function Mancala() {
+
+    // useState is a so called React hook.
+    // It is used to manage variables.  When the setGameState function is called, React updates the UI as needed
+    // The call to useState follows the "rules of hooks": https://reactjs.org/docs/hooks-rules.html
+    // To check if code you added also follows the rules of hooks, run "npm run lint" in the command line
+    const [ gameState, setGameState ] = useState<GameState | undefined>(undefined);
+
+    if (localStorage.getItem("state") !== null) {
+        var state = localStorage.getItem("state");
+        const gameState = JSON.parse(state as string);
+        return <Play gameState={gameState} setGameState={setGameState} />
+    }
+
+    if (!gameState) {
+        return <StartGame gameState={gameState} setGameState={setGameState} />
+    }
+
+
+    return <Play gameState={gameState} setGameState={setGameState} />
+}