mancala/src/Home.tsx

import * as React from 'react';
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 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
}

const testGame = new Game("0", "1", testBoard(), "player2")

const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
  const [userKey, setUserKey] = useState(undefined);

  const [game, setGame] = useState<Game>(undefined)

  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))
    })
  }

  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",
    background: "#EEEEEE",
    flex: "1",
  }}>
    <div style={{
      padding: "0px 50px",
      background : "rgb(228, 228, 228)",
      display: 'flex',
      flexDirection: "row",
      alignItems: "center",
      justifyContent: "space-between",
      alignSelf: "stretch"
    }}>
      <h1>Mancala</h1>
      {game && <button onClick={leaveGame}>Leave</button>}
    </div>
    {!game && <button onClick={newGameClick}>New Game</button>}

    {game && (
      <>
        <h4>{game.checkGameTurn(userKey) ? "Your Turn" : "Opponent Turn"}</h4>
        <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />
      </>
    )}
  </div>
}

export default Home