added ending game

src/Home.tsx

@@ -17,14 +17,17 @@ const testBoard = (): Board => {
   return board
 }
 
-const testGame = new Game("0", "1", testBoard(), "player2")
+const testGame = new Game("0", "1", testBoard(), "player2", "playing")
 
 const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   const [userKey, setUserKey] = useState(undefined);
 
   const [game, setGame] = useState<Game>(undefined)
 
+  const [connectionState, setConnetionState] = useState<"connecting" | "error" | "connected">("connecting")
+
   React.useEffect(() => {
+
     context.userKeyStore.getUserKey((userKey: string) => {
       setUserKey(userKey)
       const rtmtws = context.rtmt as RTMTWS
@@ -39,19 +42,19 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       const newGame: Game = JSON.parse(decodeText(message))
       console.log("on game update");
       console.log(newGame);
-      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn))
+      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
     })
 
     context.rtmt.listenMessage(channel_on_game_update, (message: Bytes) => {
       const newGame: Game = JSON.parse(decodeText(message))
       console.log("on game update");
       console.log(newGame);
-      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn))
+      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
     })
   }, [])
 
   const onConnectionDone = () => {
-
+    setConnetionState("connected")
   }
 
   const newGameClick = () => {
@@ -60,7 +63,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       const newGame: Game = JSON.parse(decodeText(message))
       console.log("on_game_start");
       console.log(newGame);
-      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn))
+      setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
     })
   }
 
@@ -90,13 +93,21 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       alignSelf: "stretch"
     }}>
       <h1>Mancala</h1>
-      {game && <button onClick={leaveGame}>Leave</button>}
-    </div>
+      {
+        game && (
+          <div>
+            {game.state == "ended" && <button onClick={newGameClick}>New Game</button>}
+            <button onClick={leaveGame}>Leave</button>
+          </div>)
+      }
       {!game && <button onClick={newGameClick}>New Game</button>}
+    </div>
 
     {game && (
       <>
+        {game.state == "ended" ? <h4>Game ended</h4> :
           <h4>{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}</h4>
+        }
         <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />
       </>
     )}

src/components/BoardView.tsx

@@ -96,7 +96,7 @@ const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect:
     return (
         <div style={{
             margin: '10px',
-            padding: '10px',
+            padding: '20px',
             display: 'grid',
             gridTemplateColumns: 'repeat(8, 11vw)',
             gridTemplateRows: 'repeat(2, 11vw)',

src/mancala.ts

@@ -3,12 +3,14 @@ export class Game {
     player2: string
     board: Board
     turn: "player1" | "player2"
+    state: "playing" | "ended"
 
-    constructor(player1: string, player2: string, board: Board, turn: "player1" | "player2") {
+    constructor(player1: string, player2: string, board: Board, turn: "player1" | "player2", state: "playing" | "ended") {
         this.player1 = player1
         this.player2 = player2
         this.board = board
         this.turn = turn
+        this.state = state
     }
 
     public moveByIndex(holeIndex: number, player: "player1" | "player2") {
@@ -73,6 +75,7 @@ export class Game {
                 const ownStore = getOwnStore(circle)
                 const opponentHole = getOpponentHoleByIndex(stopIndex, circle)
 
+                if (opponentHole.ballCount > 0) {
                     ownStore.ballCount++
                     stopHole.ballCount = 0;
 
@@ -80,10 +83,27 @@ export class Game {
                     opponentHole.ballCount = 0
                 }
             }
+        }
 
         if (!checkIsOwnStore(stopIndex, circleSize)) {
             this.changeTurn()
         }
+
+        const ownHoles = circle.slice(0, circle.length / 2 - 1)
+
+        let sumBallCount = 0;
+        for (const hole of ownHoles) sumBallCount += hole.ballCount
+
+        if (sumBallCount == 0) {
+            const opppentHoles = circle.slice(circle.length / 2, circle.length - 1)
+            let sumOppenentBallCount = 0;
+            for (const hole of opppentHoles) {
+                sumOppenentBallCount += hole.ballCount
+                hole.ballCount = 0
+            }
+            getOwnStore(circle).ballCount += sumOppenentBallCount
+            this.state = "ended"
+        }
     }
 
     public changeTurn() {
@@ -94,7 +114,7 @@ export class Game {
         }
     }
 
-    public clone() { return new Game(this.player1, this.player2, this.board, this.turn) }
+    public clone() { return new Game(this.player1, this.player2, this.board, this.turn, this.state) }
 
     //todo throw expection
     public getPlayerNameByKey(key: string): "player1" | "player2" {
@@ -119,7 +139,11 @@ export function createGame( player1: string, player2: string){
         [new Hole(4), new Hole(4), new Hole(4), new Hole(4), new Hole(4), new Hole(4)],
         [new Hole(4), new Hole(4), new Hole(4), new Hole(4), new Hole(4), new Hole(4)],
         new Store(0), new Store(0))
-    return new Game(player1, player2, board, "player1")
+    // const board = new Board(
+    //     [new Hole(4), new Hole(4), new Hole(4), new Hole(4), new Hole(4), new Hole(1)],
+    //     [new Hole(1), new Hole(0), new Hole(0), new Hole(0), new Hole(1), new Hole(0)],
+    //     new Store(0), new Store(0))
+    return new Game(player1, player2, board, "player1", "playing")
 }
 
 export class Hole {