added you won/lost

src/Home.tsx

@@ -145,7 +145,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       {
         game && (
           <div>
-            {game.state == "ended" && <button onClick={newGameClick}>{context.texts.NewGame}</button>}
+            {game.state == "ended" && <Button text={context.texts.NewGame} color="white" onClick={newGameClick} />}
             <Button color="white" text={context.texts.Leave} onClick={leaveGame} />
           </div>)
       }
@@ -154,7 +154,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
 
     {game && (
       <>
-        {game.state == "ended" ? <h4>{context.texts.GameEnded}</h4> :
+        {game.state == "ended" ? <h4>{context.texts.GameEnded + " " + game.getWonPlayer() == userKey ? context.texts.YouWon : context.texts.YouLost}</h4> :
           <h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
         }
         <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />

src/mancala.ts

@@ -65,6 +65,7 @@ export class Game {
                 eachHole.ballCount++
             }
         })
+        
         hole.ballCount = holeEndBallCount
         console.log((stopIndex));
         console.log(checkIsOwnHole(stopIndex, circleSize));
@@ -73,7 +74,7 @@ export class Game {
             //check if it was 0 before
             if (stopHole.ballCount == 1) {
                 const ownStore = getOwnStore(circle)
-                const opponentHole = getOpponentHoleByIndex(stopIndex, circle)
+                const opponentHole = getOpponentHoleByIndex(stopIndex%16, circle)
 
                 if (opponentHole.ballCount > 0) {
                     ownStore.ballCount++
@@ -125,9 +126,31 @@ export class Game {
         }
     }
 
+    //todo throw expection
+    public getPlayerKeyByName(key: "player1" | "player2"): string {
+        if (this.player1 == key) {
+            return "player1"
+        } else {
+            return "player2"
+        }
+    }
+
     public checkGameTurn(user: string): boolean {
         return this.getPlayerNameByKey(user) == this.turn
     }
+
+    public getWonPlayer() : string | undefined {
+        const player1BallCount = this.board.player1Store.ballCount
+        const player2BallCount = this.board.player2Store.ballCount
+
+        if(player1BallCount < player2BallCount){
+            return this.getPlayerKeyByName("player1")
+        }else if(player1BallCount > player2BallCount) {
+            return this.getPlayerKeyByName("player2")
+        }else{
+            return undefined
+        }
+    }
 }
 
 export function createGame(player1: string, player2: string) {
@@ -182,6 +205,14 @@ export class Board {
     public player2Circle(): Array<Hole> {
         return [...this.player2Holes, this.player2Store, ...this.player1Holes, this.player1Store]
     }
+
+    public getBallCount(holes : Array<Hole> ) : number {
+        let ballCount = 0
+        for (let hole of holes) {
+            ballCount += hole.ballCount;
+        }
+        return ballCount
+    }
 }
 
 function iterateHoles(holes: Array<Hole>, start: number, stop: number, callback: (hole: Hole, index: number) => void) {