migrate to mancala.js
This commit is contained in:
parent
0e55c5ac2b
commit
78f4e1d701
12078
package-lock.json
generated
12078
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -14,6 +14,7 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"mancala.js": "^0.0.1",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
|
||||
49
src/Home.tsx
49
src/Home.tsx
@ -2,24 +2,12 @@ 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, channel_on_game_user_leave } from './channel_names';
|
||||
import Button from './components/Button';
|
||||
import InfoPanel from './components/InfoPanel';
|
||||
|
||||
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", "playing")
|
||||
import { CommonMancalaGame, MancalaGame, Pit } from 'mancala.js'
|
||||
import { GameMove } from './models/GameMove';
|
||||
|
||||
type ConnectionState = "connecting" | "error" | "connected" | "reconnecting"
|
||||
|
||||
@ -30,7 +18,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
|
||||
|
||||
const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false)
|
||||
|
||||
const [game, setGame] = useState<Game>(undefined)
|
||||
const [game, setGame] = useState<CommonMancalaGame>(undefined)
|
||||
|
||||
const [crashMessage, setCrashMessage] = useState<string>(undefined)
|
||||
|
||||
@ -56,45 +44,32 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
|
||||
if (rtmtws) {
|
||||
rtmtws.initWebSocket(userKey, onConnectionDone, onConnectionLost, onConnectionError)
|
||||
} else {
|
||||
console.log("context.rtmt is not RTMTWS");
|
||||
console.error("context.rtmt is not RTMTWS");
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const listenMessages = () => {
|
||||
context.rtmt.listenMessage(channel_on_game_update, (message: Object) => {
|
||||
const newGame: Game = message as Game;
|
||||
console.log("on game update");
|
||||
console.log(newGame);
|
||||
setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
|
||||
})
|
||||
|
||||
context.rtmt.listenMessage(channel_on_game_update, (message: Object) => {
|
||||
const newGame: Game = message as Game;
|
||||
console.log("on game update");
|
||||
console.log(newGame);
|
||||
setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
|
||||
const newGame: CommonMancalaGame = message as CommonMancalaGame;
|
||||
setGame(MancalaGame.createFromMancalaGame(newGame))
|
||||
})
|
||||
|
||||
context.rtmt.listenMessage("on_game_start", (message: Object) => {
|
||||
const newGame: Game = message as Game;
|
||||
console.log("on_game_start");
|
||||
console.log(newGame);
|
||||
const newGame: CommonMancalaGame = message as CommonMancalaGame;
|
||||
setSearchingOpponent(false)
|
||||
setGame(new Game(newGame.player1, newGame.player2, newGame.board, newGame.turn, newGame.state))
|
||||
setGame(MancalaGame.createFromMancalaGame(newGame))
|
||||
})
|
||||
|
||||
context.rtmt.listenMessage("on_game_crashed", (message : any) => {
|
||||
const newCrashMessage = message as string
|
||||
console.log("on_game_crash");
|
||||
console.log(newCrashMessage);
|
||||
console.error("on_game_crash");
|
||||
console.error(newCrashMessage);
|
||||
setCrashMessage(newCrashMessage)
|
||||
})
|
||||
|
||||
context.rtmt.listenMessage(channel_on_game_user_leave, (message : any) => {
|
||||
const userKeyWhoLeave = message;
|
||||
console.log("on_game_user_leave");
|
||||
console.log(channel_on_game_user_leave);
|
||||
setUserKeyWhoLeave(userKeyWhoLeave)
|
||||
})
|
||||
}
|
||||
@ -120,7 +95,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
|
||||
context.rtmt.sendMessage(channel_leave_game, {})
|
||||
}
|
||||
|
||||
const onHoleSelect = (index: number, hole: Hole) => {
|
||||
const onHoleSelect = (index: number, hole: Pit) => {
|
||||
const gameMove: GameMove = { index: index }
|
||||
context.rtmt.sendMessage(channel_game_move, gameMove)
|
||||
}
|
||||
@ -187,7 +162,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
|
||||
<h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
|
||||
<div>
|
||||
{renderNewGameButton()}
|
||||
{game && !userKeyWhoLeave && !crashMessage && game?.state == "playing" && < Button color="#005f73" text={context.texts.Leave} onClick={leaveGame} />}
|
||||
{game && !userKeyWhoLeave && !crashMessage && (game?.state === "playing" || game?.state === "initial") && < Button color="#005f73" text={context.texts.Leave} onClick={leaveGame} />}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { Bank, MancalaGame, Pit } from 'mancala.js';
|
||||
import * as React from 'react';
|
||||
import { FunctionComponent, useState } from 'react';
|
||||
import { Hole, Store, Game } from '../mancala';
|
||||
|
||||
type Theme = {
|
||||
background : string,
|
||||
@ -42,8 +42,8 @@ function range(size: number) {
|
||||
return ans;
|
||||
}
|
||||
|
||||
const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
|
||||
const balls = [...range(hole.ballCount)].map((i) => <BallView color={theme.ballColor}/>)
|
||||
const HoleView: FunctionComponent<{ hole: Pit, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
|
||||
const balls = [...range(hole.stoneCount)].map((i) => <BallView color={theme.ballColor}/>)
|
||||
|
||||
return (<div
|
||||
onClick={onClick}
|
||||
@ -64,8 +64,8 @@ const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => vo
|
||||
}
|
||||
|
||||
const StoreView: FunctionComponent<
|
||||
{ store: Store, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
|
||||
const balls = [...range(store.ballCount)].map((i) => <BallView color={theme.ballColor}/>)
|
||||
{ store: Bank, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
|
||||
const balls = [...range(store.stoneCount)].map((i) => <BallView color={theme.ballColor}/>)
|
||||
return (<div style={{
|
||||
gridColumn: gridColumn,
|
||||
gridRow: gridRow,
|
||||
@ -82,22 +82,22 @@ const StoreView: FunctionComponent<
|
||||
</div>)
|
||||
}
|
||||
|
||||
const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect: (index: number, hole: Hole) => void }> = ({
|
||||
const BoardView: FunctionComponent<{ game?: MancalaGame, userKey: string, onHoleSelect: (index: number, hole: Pit) => void }> = ({
|
||||
game, userKey, onHoleSelect }) => {
|
||||
|
||||
const player1Holes = game?.board.player1Holes.map((hole) => (
|
||||
const player1Pits = game?.board.player1Pits.map((hole) => (
|
||||
<HoleView hole={hole} color={theme.holeColor} onClick={() => {
|
||||
if (game.turn == "player1") onHoleSelect(game.board.player1Holes.indexOf(hole), hole)
|
||||
if (game.turnPlayerId === game.player1Id) onHoleSelect(game.board.player1Pits.indexOf(hole), hole)
|
||||
}} />
|
||||
))
|
||||
|
||||
const player2Holes = game!!.board.player2Holes.map((hole) => (
|
||||
const player2Pits = game!!.board.player2Pits.map((hole) => (
|
||||
<HoleView hole={hole} color={theme.holeColor} onClick={() => {
|
||||
if (game.turn == "player2") onHoleSelect(game.board.player2Holes.indexOf(hole), hole)
|
||||
if (game.turnPlayerId === game.player2Id) onHoleSelect(game.board.player2Pits.indexOf(hole), hole)
|
||||
}} />
|
||||
))
|
||||
|
||||
const isUserTurn = game.checkGameTurn(userKey);
|
||||
const isUserTurn = game.checkIsPlayerTurn(userKey)
|
||||
|
||||
const storeColor = isUserTurn ? theme.storeColor : theme.storeColorWhenPlayerTurn;
|
||||
|
||||
@ -112,19 +112,19 @@ const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect:
|
||||
background: isUserTurn ? theme.boardColor : theme.boardColorWhenPlayerTurn
|
||||
}}>
|
||||
{
|
||||
game.getPlayerNameByKey(userKey) == "player2" ? (
|
||||
userKey === game.player2Id ? (
|
||||
<>
|
||||
<StoreView store={game!!.board.player1Store} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
|
||||
<StoreView store={game!!.board.player2Store} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
|
||||
{player1Holes.reverse()}
|
||||
{player2Holes}
|
||||
<StoreView store={game!!.board.player1Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
|
||||
<StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
|
||||
{player1Pits.reverse()}
|
||||
{player2Pits}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<StoreView store={game!!.board.player2Store} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
|
||||
<StoreView store={game!!.board.player1Store} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
|
||||
{player2Holes.reverse()}
|
||||
{player1Holes}
|
||||
<StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
|
||||
<StoreView store={game!!.board.player1Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
|
||||
{player2Pits.reverse()}
|
||||
{player1Pits}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import { MancalaGame } from 'mancala.js';
|
||||
import * as React from 'react';
|
||||
import { FunctionComponent } from "react"
|
||||
import { context } from '../context';
|
||||
import { Game } from '../mancala';
|
||||
|
||||
const InfoPanel: FunctionComponent<{
|
||||
game: Game,
|
||||
game: MancalaGame,
|
||||
crashMessage: string,
|
||||
userKey: string,
|
||||
userKeyWhoLeave: string,
|
||||
@ -40,10 +40,11 @@ const InfoPanel: FunctionComponent<{
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
if (game) {
|
||||
if (game.state == "ended") {
|
||||
const wonPlayer = game.getWonPlayer()
|
||||
let whoWon = game.getWonPlayer() == userKey ? context.texts.YouWon : context.texts.YouLost
|
||||
const wonPlayer = game.getWonPlayerId();
|
||||
let whoWon = game.getWonPlayerId() === userKey ? context.texts.YouWon : context.texts.YouLost
|
||||
if(!wonPlayer){
|
||||
whoWon = context.texts.GameDraw
|
||||
}
|
||||
@ -54,7 +55,7 @@ const InfoPanel: FunctionComponent<{
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
<h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
|
||||
<h4>{game.checkIsPlayerTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user