completed basic game flow

src/Home.tsx

@@ -1,35 +1,89 @@
 import * as React from 'react';
-import  { FunctionComponent, useState } from 'react';
-import {context} from './context'
+import { FunctionComponent, useState } from 'react';
+import BoardView from './components/BoardView';
+import { context } from './context'
+import { Board, GameMove, Hole, Store } from './mancala';
+import { Game } from './mancala';
+import { decodeText, encodeText } from './rtmt/byte_util';
+import { Bytes } from './rtmt/rtmt';
 import { RTMTWS } from './rtmt/rtmt_websocket';
+import { channel_game_move, channel_leave_game, channel_on_game_update } from './channel_names';
 
-const Home:FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
-  const [clicks, setClicks] = useState(initial);
+const testBoard = (): Board => {
+  const board = new Board(
+    [new Hole(0), new Hole(4), new Hole(4), new Hole(3), new Hole(2), new Hole(1)],
+    [new Hole(4), new Hole(4), new Hole(4), new Hole(4), new Hole(4), new Hole(10)],
+    new Store(0), new Store(0))
+  return board
+}
 
-  React.useEffect(()=>{
+const testGame = new Game("0", "1", testBoard(), "player2")
 
-    
+const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
+  const [userKey, setUserKey] = useState(undefined);
 
-    const rtmtws = context.rtmt as RTMTWS
-    if(rtmtws){
-      rtmtws.initWebSocket(onConnectionDone)
-    }else{
-      console.log("context.rtmt is not RTMTWS");
-    }
-  })
+  const [game, setGame] = useState<Game>(undefined)
 
-  const onConnectionDone = ()=>{
-    context.rtmt.sendMessage("new_game", "")
-    context.rtmt.listenMessage("new_game", (message)=>{
-      console.log("new message");
+  React.useEffect(() => {
+    context.userKeyStore.getUserKey((userKey: string) => {
+      setUserKey(userKey)
+      const rtmtws = context.rtmt as RTMTWS
+      if (rtmtws) {
+        rtmtws.initWebSocket(userKey, onConnectionDone)
+      } else {
+        console.log("context.rtmt is not RTMTWS");
+      }
+    })
+
+    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))
+    })
+
+    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))
+    })
+  }, [])
+
+  const onConnectionDone = () => {
+
+  }
+
+  const newGameClick = () => {
+    context.rtmt.sendMessage("new_game", new Uint8Array())
+    context.rtmt.listenMessage("on_game_start", (message) => {
+      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))
     })
   }
 
-  return <>
-    <p>Clicks: {clicks}</p>
-    <button onClick={() => setClicks(clicks+1)}>+</button>
-    <button onClick={() => setClicks(clicks-1)}>-</button>
-  </>
+  const leaveGame = () => {
+    context.rtmt.sendMessage(channel_leave_game, new Uint8Array())
+  }
+
+  const onHoleSelect = (index: number, hole: Hole) => {
+    const gameMove: GameMove = { index: index }
+    context.rtmt.sendMessage(channel_game_move, encodeText(JSON.stringify(gameMove)))
+  }
+
+  return <div style={{
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center"
+  }}>
+    <h2>Mancala</h2>
+    {!game && <button onClick={newGameClick}>New Game</button>}
+    {game && <button onClick={leaveGame}>Leave</button>}
+    {game && <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />}
+    {game && <h5>{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}</h5>}
+  </div>
 }
 
 export default Home

src/channel_names.ts

@@ -0,0 +1,6 @@
+export const channel_new_game = "new_game"
+export const channel_on_game_start = "on_game_start"
+export const channel_game_move = "game_move"
+export const channel_on_game_update = "on_game_update"
+export const channel_leave_game = "leave_game"
+export const channel_on_game_end = "on_game_end"

src/components/BoardView.tsx

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { FunctionComponent, useState } from 'react';
+import { Hole, Store, Game } from '../mancala';
+
+const BallView: FunctionComponent = () => {
+
+    return (<div style={{
+        background: "yellow",
+        margin: "1px",
+        width: "20px",
+        height: "20px",
+        borderRadius: "50px"
+    }} >
+    </div>)
+}
+
+function range(size: number) {
+    var ans = [];
+    for (let i = 0; i < size; i++) {
+        ans.push(i);
+    }
+    return ans;
+}
+
+const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
+    const balls = [...range(hole.ballCount)].map((i) => <BallView />)
+
+    return (<div
+        onClick={onClick}
+        style={{
+            background: color,
+            margin: "5px",
+            padding: "5px",
+            borderRadius: "100px",
+            display: 'flex',
+            alignItems: 'center',
+            alignContent: 'center',
+            justifyContent: 'center',
+            justifyItems: 'center',
+            flexWrap: "wrap",
+        }} >
+        {balls}
+    </div>)
+}
+
+const StoreView: FunctionComponent<
+    { store: Store, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
+        const balls = [...range(store.ballCount)].map((i) => <BallView />)
+        return (<div style={{
+            gridColumn: gridColumn,
+            gridRow: gridRow,
+            background: color,
+            margin: "1px",
+            borderRadius: "100px",
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            alignContent : 'center',
+            flexWrap: "wrap",
+        }} >
+            {balls}
+        </div>)
+    }
+
+const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect: (index: number, hole: Hole) => void }> = ({
+    game, userKey, onHoleSelect }) => {
+
+    const player1Holes = game?.board.player1Holes.map((hole) => (
+        <HoleView hole={hole} color="red" onClick={() => {
+            if (game.turn == "player1") onHoleSelect(game.board.player1Holes.indexOf(hole), hole)
+        }} />
+    ))
+
+    const player2Holes = game!!.board.player2Holes.map((hole) => (
+        <HoleView hole={hole} color="blue" onClick={() => {
+            if (game.turn == "player2") onHoleSelect(game.board.player2Holes.indexOf(hole), hole)
+        }} />
+    ))
+
+    return (
+        <div style={{
+            margin: '10px',
+            padding: '10px',
+            display: 'grid',
+            gridTemplateColumns: 'repeat(8, 150px)',
+            gridTemplateRows: '150px 150px',
+            border: "2px solid black",
+            borderRadius: "30px",
+        }}>
+            {
+                game.getPlayerNameByKey(userKey) == "player2" ? (
+                    <>
+                        <StoreView store={game!!.board.player1Store} color="red" gridColumn="1 / 2" gridRow="1 / 3" />
+                        <StoreView store={game!!.board.player2Store} color="blue" gridColumn="8 / 9" gridRow="1 / 3" />
+                        {player1Holes.reverse()}
+                        {player2Holes}
+                    </>
+                ) : (
+                    <>
+                        <StoreView store={game!!.board.player2Store} color="red" gridColumn="1 / 2" gridRow="1 / 3" />
+                        <StoreView store={game!!.board.player1Store} color="blue" gridColumn="8 / 9" gridRow="1 / 3" />
+                        {player2Holes.reverse()}
+                        {player1Holes}
+                    </>
+                )
+            }
+
+        </div>
+    )
+}
+
+export default BoardView