jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

migrate to mancala.js

Browse Source
This commit is contained in:
Halit Aksoy 2022-05-04 23:41:04 +03:00
parent 0e55c5ac2b
commit 78f4e1d701
6 changed files with 15391 additions and 5772 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12084
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -14,6 +14,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"mancala.js": "^0.0.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2" "react-dom": "^17.0.2"
}, },

49
src/Home.tsx
View File

@ -2,24 +2,12 @@ import * as React from 'react';
import { FunctionComponent, useState } from 'react'; import { FunctionComponent, useState } from 'react';
import BoardView from './components/BoardView'; import BoardView from './components/BoardView';
import { context } from './context' 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 { 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 { channel_game_move, channel_leave_game, channel_on_game_update, channel_on_game_user_leave } from './channel_names';
import Button from './components/Button'; import Button from './components/Button';
import InfoPanel from './components/InfoPanel'; import InfoPanel from './components/InfoPanel';
import { CommonMancalaGame, MancalaGame, Pit } from 'mancala.js'
const testBoard = (): Board => { import { GameMove } from './models/GameMove';
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")
type ConnectionState = "connecting" | "error" | "connected" | "reconnecting" type ConnectionState = "connecting" | "error" | "connected" | "reconnecting"
@ -30,7 +18,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false) const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false)
const [game, setGame] = useState<Game>(undefined) const [game, setGame] = useState<CommonMancalaGame>(undefined)
const [crashMessage, setCrashMessage] = useState<string>(undefined) const [crashMessage, setCrashMessage] = useState<string>(undefined)
@ -56,45 +44,32 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
if (rtmtws) { if (rtmtws) {
rtmtws.initWebSocket(userKey, onConnectionDone, onConnectionLost, onConnectionError) rtmtws.initWebSocket(userKey, onConnectionDone, onConnectionLost, onConnectionError)
} else { } else {
console.log("context.rtmt is not RTMTWS"); console.error("context.rtmt is not RTMTWS");
} }
}) })
} }
const listenMessages = () => { const listenMessages = () => {
context.rtmt.listenMessage(channel_on_game_update, (message: Object) => { context.rtmt.listenMessage(channel_on_game_update, (message: Object) => {
const newGame: Game = message as Game; const newGame: CommonMancalaGame = message as CommonMancalaGame;
console.log("on game update"); setGame(MancalaGame.createFromMancalaGame(newGame))
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))
}) })
context.rtmt.listenMessage("on_game_start", (message: Object) => { context.rtmt.listenMessage("on_game_start", (message: Object) => {
const newGame: Game = message as Game; const newGame: CommonMancalaGame = message as CommonMancalaGame;
console.log("on_game_start");
console.log(newGame);
setSearchingOpponent(false) 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) => { context.rtmt.listenMessage("on_game_crashed", (message : any) => {
const newCrashMessage = message as string const newCrashMessage = message as string
console.log("on_game_crash"); console.error("on_game_crash");
console.log(newCrashMessage); console.error(newCrashMessage);
setCrashMessage(newCrashMessage) setCrashMessage(newCrashMessage)
}) })
context.rtmt.listenMessage(channel_on_game_user_leave, (message : any) => { context.rtmt.listenMessage(channel_on_game_user_leave, (message : any) => {
const userKeyWhoLeave = message; const userKeyWhoLeave = message;
console.log("on_game_user_leave");
console.log(channel_on_game_user_leave);
setUserKeyWhoLeave(userKeyWhoLeave) setUserKeyWhoLeave(userKeyWhoLeave)
}) })
} }
@ -120,7 +95,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
context.rtmt.sendMessage(channel_leave_game, {}) context.rtmt.sendMessage(channel_leave_game, {})
} }
const onHoleSelect = (index: number, hole: Hole) => { const onHoleSelect = (index: number, hole: Pit) => {
const gameMove: GameMove = { index: index } const gameMove: GameMove = { index: index }
context.rtmt.sendMessage(channel_game_move, gameMove) 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> <h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
<div> <div>
{renderNewGameButton()} {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>
</div> </div>

42
src/components/BoardView.tsx
View File

@ -1,6 +1,6 @@
import { Bank, MancalaGame, Pit } from 'mancala.js';
import * as React from 'react'; import * as React from 'react';
import { FunctionComponent, useState } from 'react'; import { FunctionComponent, useState } from 'react';
import { Hole, Store, Game } from '../mancala';
type Theme = { type Theme = {
background : string, background : string,
@ -42,8 +42,8 @@ function range(size: number) {
return ans; return ans;
} }
const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => void }> = ({ hole, color, onClick }) => { const HoleView: FunctionComponent<{ hole: Pit, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
const balls = [...range(hole.ballCount)].map((i) => <BallView color={theme.ballColor}/>) const balls = [...range(hole.stoneCount)].map((i) => <BallView color={theme.ballColor}/>)
return (<div return (<div
onClick={onClick} onClick={onClick}
@ -64,8 +64,8 @@ const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => vo
} }
const StoreView: FunctionComponent< const StoreView: FunctionComponent<
{ store: Store, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => { { store: Bank, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
const balls = [...range(store.ballCount)].map((i) => <BallView color={theme.ballColor}/>) const balls = [...range(store.stoneCount)].map((i) => <BallView color={theme.ballColor}/>)
return (<div style={{ return (<div style={{
gridColumn: gridColumn, gridColumn: gridColumn,
gridRow: gridRow, gridRow: gridRow,
@ -82,22 +82,22 @@ const StoreView: FunctionComponent<
</div>) </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 }) => { game, userKey, onHoleSelect }) => {
const player1Holes = game?.board.player1Holes.map((hole) => ( const player1Pits = game?.board.player1Pits.map((hole) => (
<HoleView hole={hole} color={theme.holeColor} onClick={() => { <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={() => { <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; 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 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.player1Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player2Store} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" /> <StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
{player1Holes.reverse()} {player1Pits.reverse()}
{player2Holes} {player2Pits}
</> </>
) : ( ) : (
<> <>
<StoreView store={game!!.board.player2Store} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" /> <StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
<StoreView store={game!!.board.player1Store} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" /> <StoreView store={game!!.board.player1Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
{player2Holes.reverse()} {player2Pits.reverse()}
{player1Holes} {player1Pits}
</> </>
) )
} }

11
src/components/InfoPanel.tsx
View File

@ -1,10 +1,10 @@
import { MancalaGame } from 'mancala.js';
import * as React from 'react'; import * as React from 'react';
import { FunctionComponent } from "react" import { FunctionComponent } from "react"
import { context } from '../context'; import { context } from '../context';
import { Game } from '../mancala';
const InfoPanel: FunctionComponent<{ const InfoPanel: FunctionComponent<{
game: Game, game: MancalaGame,
crashMessage: string, crashMessage: string,
userKey: string, userKey: string,
userKeyWhoLeave: string, userKeyWhoLeave: string,
@ -39,11 +39,12 @@ const InfoPanel: FunctionComponent<{
</h4> </h4>
) )
} }
if (game) { if (game) {
if (game.state == "ended") { if (game.state == "ended") {
const wonPlayer = game.getWonPlayer() const wonPlayer = game.getWonPlayerId();
let whoWon = game.getWonPlayer() == userKey ? context.texts.YouWon : context.texts.YouLost let whoWon = game.getWonPlayerId() === userKey ? context.texts.YouWon : context.texts.YouLost
if(!wonPlayer){ if(!wonPlayer){
whoWon = context.texts.GameDraw whoWon = context.texts.GameDraw
} }
@ -54,7 +55,7 @@ const InfoPanel: FunctionComponent<{
) )
} else { } else {
return ( return (
<h4>{game.checkGameTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4> <h4>{game.checkIsPlayerTurn(userKey) ? context.texts.YourTurn : context.texts.OpponentTurn}</h4>
) )
} }
} }

8976
yarn.lock
View File

File diff suppressed because it is too large Load Diff