1 files changed, 65 insertions, 0 deletions
diff --git a/client/src/Mancala/Pit.tsx b/client/src/Mancala/Pit.tsx
new file mode 100644
index 0000000..300f3f4
--- /dev/null
+++ b/client/src/Mancala/Pit.tsx
@@ -0,0 +1,65 @@
+import React, { useState } from "react";
+import type { GameState } from "../gameState";
+import "./Pit.css";
+
+type Flatten<T> = T extends any[] ? T[number] : T;
+
+type Player = Flatten<GameState["players"]>;
+
+type Pit = Flatten<Player["pits"]>;
+
+type PitProps = {
+    player: Player;
+    index: number;
+    pit: Pit;
+    onClick?: (index: number, player: Player, pit: Pit) => (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => Promise<void>
+    displayStones: (pit: Pit, spread: "small" | "big") => JSX.Element[]
+}
+
+type SmallBowl = Pit & {kind: "small"};
+type Kalaha = Pit & {kind: "big"};
+
+
+
+export function Pit({player, index, pit, onClick, displayStones}: PitProps) {
+    const smallBowl = pit as SmallBowl;
+    smallBowl.kind = "small";
+    if (onClick) {
+        return (
+            <div className="Pit">
+                {pit.nrOfStones > 10 ? "" + pit.nrOfStones : ""}
+                <div className="Recession" onClick={onClick(index, player, pit)}>
+                    <div className="stones" id={"pit" + pit.index}>
+                        {displayStones(pit, smallBowl.kind)}
+                    </div>
+                </div>
+            </div>
+        );
+    } else {
+        return (
+            <div className="Pit">
+                <div className="Recession">
+                    <div className="stones">
+                        {pit.nrOfStones > 10 ? pit.nrOfStones : ""}
+                        {displayStones(pit, smallBowl.kind)}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
+
+export function Kalaha({player, pit, displayStones}: PitProps) {
+    const kalaha = pit as Kalaha;
+    kalaha.kind = "big";
+    return (
+        <div className="Kalaha">
+            {pit.nrOfStones > 10 ? pit.nrOfStones : ""}
+            <div className="Recession">
+                <div className="stones" id={"pit" + pit.index}>
+                    {displayStones(pit, kalaha.kind)}
+                </div>
+            </div>
+        </div>
+    );
+}