diff --git a/package.json b/package.json index 5a0f6ba..cf26239 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "mancala-frontend", "version": "0.1.3-beta.12", - "description": "", + "description": "Mancala Game Frontend", "main": "index.js", "scripts": { "dev": "parcel src/index.html", diff --git a/src/App.tsx b/src/App.tsx index a89acdd..4879b0c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; import { render } from 'react-dom'; -import { initContext } from './context'; +import { initContext } from './context/context'; -import Home from './Home'; +import Home from './routes/Home'; initContext(); diff --git a/src/Home.tsx b/src/Home.tsx deleted file mode 100644 index c1e5f48..0000000 --- a/src/Home.tsx +++ /dev/null @@ -1,346 +0,0 @@ -import * as React from "react"; -import { FunctionComponent, useEffect, useState } from "react"; -import BoardView from "./components/BoardView"; -import { context } from "./context"; -import { RTMTWS } from "./rtmt/rtmt_websocket"; -import { - channel_game_move, - channel_leave_game, - channel_on_game_crashed, - channel_on_game_start, - channel_on_game_update, - channel_on_game_user_leave, -} from "./channel_names"; -import Button from "./components/Button"; -import InfoPanel from "./components/InfoPanel"; -import { CommonMancalaGame, MancalaGame, Pit } from "mancala.js"; -import { GameMove } from "./models/GameMove"; -import PitAnimator from "./animation/PitAnimator"; -import BoardViewModel from "./viewmodel/BoardViewModel"; -import { v4 } from "uuid"; -import { Menu, MenuButton, MenuItem } from "@szhsin/react-menu"; -import "@szhsin/react-menu/dist/index.css"; -import "@szhsin/react-menu/dist/transitions/slide.css"; -import { getColorByBrightness } from "./util/ColorUtil"; -import { Theme } from "./theme/Theme"; - -type ConnectionState = "connecting" | "error" | "connected" | "reconnecting"; - -const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { - const [userKey, setUserKey] = useState(undefined); - - const [connectionState, setConnetionState] = - useState("connecting"); - - const [searchingOpponent, setSearchingOpponent] = useState(false); - - const [game, setGame] = useState(undefined); - - const [crashMessage, setCrashMessage] = useState(undefined); - - const [userKeyWhoLeave, setUserKeyWhoLeave] = useState(undefined); - - const [boardViewModel, setBoardViewModel] = useState(null); - - const [boardId, setBoardId] = useState(); - - const [pitAnimator, setPitAnimator] = useState(); - - const [theme, setTheme] = useState(undefined); - - const onConnectionDone = () => { - setConnetionState("connected"); - }; - - const onConnectionLost = () => { - connectToServer("reconnecting"); - }; - - const onConnectionError = (event: Event) => { - setConnetionState("error"); - }; - - const connectToServer = (connectionState: ConnectionState) => { - setConnetionState(connectionState); - context.userKeyStore.getUserKey((userKey: string) => { - setUserKey(userKey); - const rtmtws = context.rtmt as RTMTWS; - if (rtmtws) { - rtmtws.initWebSocket( - userKey, - onConnectionDone, - onConnectionLost, - onConnectionError - ); - } else { - console.error("context.rtmt is not RTMTWS"); - } - }); - }; - - const listenMessages = (pitAnimator: PitAnimator) => { - context.rtmt.listenMessage(channel_on_game_start, (message: Object) => { - const newGame: CommonMancalaGame = message as CommonMancalaGame; - const mancalaGame = MancalaGame.createFromMancalaGame(newGame); - setSearchingOpponent(false); - setGame(mancalaGame); - pitAnimator.setNewGame(mancalaGame); - }); - - context.rtmt.listenMessage(channel_on_game_update, (message: Object) => { - const newGame: CommonMancalaGame = message as CommonMancalaGame; - const mancalaGame = MancalaGame.createFromMancalaGame(newGame); - setGame(mancalaGame); - pitAnimator.setUpdatedGame(mancalaGame); - }); - - context.rtmt.listenMessage(channel_on_game_crashed, (message: any) => { - const newCrashMessage = message as string; - console.error("on_game_crash"); - console.error(newCrashMessage); - setCrashMessage(newCrashMessage); - }); - - context.rtmt.listenMessage(channel_on_game_user_leave, (message: any) => { - const userKeyWhoLeave = message; - setUserKeyWhoLeave(userKeyWhoLeave); - }); - }; - - const updateBoardViewModel = (boardViewModel: BoardViewModel) => { - boardViewModel.id = v4(); - setBoardId(boardViewModel.id); - setBoardViewModel(boardViewModel); - }; - - React.useEffect(() => { - setTheme(context.themeManager.theme); - const pitAnimator = new PitAnimator(context, updateBoardViewModel); - setPitAnimator(pitAnimator); - listenMessages(pitAnimator); - connectToServer("connecting"); - return () => { - pitAnimator.dispose(); - }; - }, []); - - React.useEffect(() => { - context.themeManager.onThemeChange = (theme) => { - setTheme(theme); - pitAnimator && updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game)); - }; - }, [boardViewModel]); - - const resetGameState = () => { - setGame(undefined); - setCrashMessage(undefined); - setUserKeyWhoLeave(undefined); - }; - - const newGameClick = () => { - resetGameState(); - setSearchingOpponent(true); - context.rtmt.sendMessage("new_game", {}); - }; - - const leaveGame = () => { - context.rtmt.sendMessage(channel_leave_game, {}); - }; - - const getBoardIndex = (index: number) => { - if (userKey === game.player2Id) return index + game.board.pits.length / 2; - return index; - }; - - const onHoleSelect = (index: number, pit: Pit) => { - //TODO : stoneCount comes from view model! - if (pit.stoneCount === 0) { - //TODO : warn user - return; - } - boardViewModel.pits[getBoardIndex(index)].pitColor = - context.themeManager.theme.pitSelectedColor; - updateBoardViewModel(boardViewModel); - const gameMove: GameMove = { index: index }; - context.rtmt.sendMessage(channel_game_move, gameMove); - }; - - const showConnectionState = connectionState != "connected"; - - const connectionStateText = () => { - let map: { [key: string]: string } = { - connecting: context.texts.Connecting, - connected: context.texts.Connected, - error: context.texts.CannotConnect, - reconnecting: context.texts.ConnectingAgain, - }; - - return map[connectionState]; - }; - - const renderNewGameButton = () => { - const newGame = ( -