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

Merge pull request #2 from jhalitaksoy/feature/animation

Browse Source 
Feature/animation
This commit is contained in:
Halit Aksoy 2022-05-12 23:49:42 +03:00 committed by GitHub
commit eaf0d760df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 426 additions and 237 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "mancala-frontend", "name": "mancala-frontend",
"version": "0.1.3-beta.1", "version": "0.1.3-beta.2",
"description": "", "description": "",
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
@ -14,7 +14,7 @@
"author": "", "author": "",
"license": "ISC", "license": "ISC",
"dependencies": { "dependencies": {
"mancala.js": "^0.0.2-beta.0", "mancala.js": "^0.0.2-beta.1",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2" "react-dom": "^17.0.2"
}, },

308
src/Home.tsx
View File

@ -1,179 +1,255 @@
import * as React from 'react'; import * as React from "react";
import { FunctionComponent, useState } from 'react'; import { FunctionComponent, useEffect, useState } from "react";
import BoardView from './components/BoardView'; import BoardView from "./components/BoardView";
import { context } from './context' import { context } from "./context";
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 {
import Button from './components/Button'; channel_game_move,
import InfoPanel from './components/InfoPanel'; channel_leave_game,
import { CommonMancalaGame, MancalaGame, Pit } from 'mancala.js' channel_on_game_update,
import { GameMove } from './models/GameMove'; 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";
type ConnectionState = "connecting" | "error" | "connected" | "reconnecting" type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
const [userKey, setUserKey] = useState(undefined); const [userKey, setUserKey] = useState(undefined);
const [connectionState, setConnetionState] = useState<ConnectionState>("connecting") const [connectionState, setConnetionState] =
useState<ConnectionState>("connecting");
const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false) const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false);
const [game, setGame] = useState<CommonMancalaGame>(undefined) const [game, setGame] = useState<CommonMancalaGame>(undefined);
const gameRef = React.useRef<CommonMancalaGame>(game);
const [crashMessage, setCrashMessage] = useState<string>(undefined) const [crashMessage, setCrashMessage] = useState<string>(undefined);
const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string>(undefined) const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string>(undefined);
const [animationPitIndex, setAnimationPitIndex] = useState<number>(-1);
const [intervalId, setIntervalId] = useState<number>(-1);
useEffect(() => {
gameRef.current = game;
});
const onConnectionDone = () => { const onConnectionDone = () => {
setConnetionState("connected") setConnetionState("connected");
} };
const onConnectionLost = () => { const onConnectionLost = () => {
connectToServer("reconnecting") connectToServer("reconnecting");
} };
const onConnectionError = (event: Event) => { const onConnectionError = (event: Event) => {
setConnetionState("error") setConnetionState("error");
} };
const connectToServer = (connectionState: ConnectionState) => { const connectToServer = (connectionState: ConnectionState) => {
setConnetionState(connectionState) setConnetionState(connectionState);
context.userKeyStore.getUserKey((userKey: string) => { context.userKeyStore.getUserKey((userKey: string) => {
setUserKey(userKey) setUserKey(userKey);
const rtmtws = context.rtmt as RTMTWS const rtmtws = context.rtmt as RTMTWS;
if (rtmtws) { if (rtmtws) {
rtmtws.initWebSocket(userKey, onConnectionDone, onConnectionLost, onConnectionError) rtmtws.initWebSocket(
userKey,
onConnectionDone,
onConnectionLost,
onConnectionError
);
} else { } else {
console.error("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: CommonMancalaGame = message as CommonMancalaGame; const newGame: CommonMancalaGame = message as CommonMancalaGame;
setGame(MancalaGame.createFromMancalaGame(newGame)) const mancalaGame = MancalaGame.createFromMancalaGame(newGame);
}) if (gameRef.current && mancalaGame.history.length > 0) {
const lastHistoryItem =
mancalaGame.history[mancalaGame.history.length - 1];
if (lastHistoryItem.gameSteps.length > 0) {
let stepIndex = 0;
if (intervalId) {
clearInterval(intervalId);
}
const id = setInterval(() => {
if (stepIndex === lastHistoryItem.gameSteps.length) {
clearInterval(id);
setAnimationPitIndex(-1);
setGame(mancalaGame);
} else {
const gameStep = lastHistoryItem.gameSteps[stepIndex];
const index = mancalaGame.board.getPitIndexCircularly(
gameStep.index
);
setAnimationPitIndex(index);
}
stepIndex++;
}, 250);
setIntervalId(intervalId);
}
}
});
context.rtmt.listenMessage("on_game_start", (message: Object) => { context.rtmt.listenMessage("on_game_start", (message: Object) => {
const newGame: CommonMancalaGame = message as CommonMancalaGame; const newGame: CommonMancalaGame = message as CommonMancalaGame;
setSearchingOpponent(false) setSearchingOpponent(false);
setGame(MancalaGame.createFromMancalaGame(newGame)) 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.error("on_game_crash"); console.error("on_game_crash");
console.error(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;
setUserKeyWhoLeave(userKeyWhoLeave) setUserKeyWhoLeave(userKeyWhoLeave);
}) });
} };
React.useEffect(() => { React.useEffect(() => {
listenMessages() listenMessages();
connectToServer("connecting") connectToServer("connecting");
}, []) }, []);
const resetGameState = () => { const resetGameState = () => {
setGame(undefined) setGame(undefined);
setCrashMessage(undefined) setCrashMessage(undefined);
setUserKeyWhoLeave(undefined) setUserKeyWhoLeave(undefined);
} };
const newGameClick = () => { const newGameClick = () => {
resetGameState() resetGameState();
setSearchingOpponent(true) setSearchingOpponent(true);
context.rtmt.sendMessage("new_game", {}) context.rtmt.sendMessage("new_game", {});
} };
const leaveGame = () => { const leaveGame = () => {
context.rtmt.sendMessage(channel_leave_game, {}) context.rtmt.sendMessage(channel_leave_game, {});
} };
const onHoleSelect = (index: number, hole: Pit) => { 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);
} };
const showConnectionState = connectionState != "connected" const showConnectionState = connectionState != "connected";
const connectionStateText = () => { const connectionStateText = () => {
let map: { [key: string]: string } = { let map: { [key: string]: string } = {
"connecting": context.texts.Connecting, connecting: context.texts.Connecting,
"connected": context.texts.Connected, connected: context.texts.Connected,
"error": context.texts.CannotConnect, error: context.texts.CannotConnect,
"reconnecting": context.texts.ConnectingAgain reconnecting: context.texts.ConnectingAgain,
}; };
return map[connectionState] return map[connectionState];
} };
const renderNewGameButton = () => { const renderNewGameButton = () => {
const newGame = <Button text={context.texts.NewGame} color="#005f73" onClick={newGameClick} /> const newGame = (
<Button
text={context.texts.NewGame}
color="#005f73"
onClick={newGameClick}
/>
);
if (userKeyWhoLeave) { if (userKeyWhoLeave) {
return newGame return newGame;
} }
if (crashMessage) { if (crashMessage) {
return newGame return newGame;
} }
if (!game) { if (!game) {
return newGame return newGame;
} else if (game.state == "ended") { } else if (game.state == "ended") {
return newGame return newGame;
} }
return <></> return <></>;
} };
return <div style={{ return (
display: "flex", <div
flexDirection: "column", style={{
alignItems: "center", display: "flex",
background: "#EEEEEE", flexDirection: "column",
flex: "1", alignItems: "center",
}}> background: "#EEEEEE",
{showConnectionState && flex: "1",
<div style={{ }}
position: "absolute", >
bottom: "0px", {showConnectionState && (
left: "0px", <div
padding: "15px ", style={{
borderTopRightRadius: "1vw", position: "absolute",
minWidth: "10vw", bottom: "0px",
minHeight: "1vw", left: "0px",
background: "#2F2504", padding: "15px ",
color: "white", borderTopRightRadius: "1vw",
}}> minWidth: "10vw",
{connectionStateText()} minHeight: "1vw",
</div>} background: "#2F2504",
<div style={{ color: "white",
padding: "0px 50px", }}
background: "rgb(228, 228, 228)", >
display: 'flex', {connectionStateText()}
flexDirection: "row", </div>
alignItems: "center", )}
justifyContent: "space-between", <div
alignSelf: "stretch" style={{
}}> padding: "0px 50px",
<h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1> background: "rgb(228, 228, 228)",
<div> display: "flex",
{renderNewGameButton()} flexDirection: "row",
{game && !userKeyWhoLeave && !crashMessage && (game?.state === "playing" || game?.state === "initial") && < Button color="#005f73" text={context.texts.Leave} onClick={leaveGame} />} alignItems: "center",
justifyContent: "space-between",
alignSelf: "stretch",
}}
>
<h1 style={{ margin: "10px 0px" }}>{context.texts.Mancala}</h1>
<div>
{renderNewGameButton()}
{game &&
!userKeyWhoLeave &&
!crashMessage &&
(game?.state === "playing" || game?.state === "initial") && (
<Button
color="#005f73"
text={context.texts.Leave}
onClick={leaveGame}
/>
)}
</div>
</div> </div>
<InfoPanel
game={game}
crashMessage={crashMessage}
userKey={userKey}
userKeyWhoLeave={userKeyWhoLeave}
searchingOpponent={searchingOpponent}
/>
{game && (
<BoardView
userKey={userKey}
game={game}
onHoleSelect={onHoleSelect}
animationPitIndex={animationPitIndex}
/>
)}
</div> </div>
<InfoPanel );
game={game} };
crashMessage={crashMessage}
userKey={userKey}
userKeyWhoLeave={userKeyWhoLeave}
searchingOpponent={searchingOpponent} />
{game && <BoardView userKey={userKey} game={game} onHoleSelect={onHoleSelect} />}
</div >
}
export default Home export default Home;

343
src/components/BoardView.tsx
View File

@ -1,136 +1,249 @@
import { Bank, MancalaGame, Pit } from 'mancala.js'; 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";
type Theme = { type Theme = {
background : string, background: string;
boardColor: string boardColor: string;
boardColorWhenPlayerTurn: string boardColorWhenPlayerTurn: string;
storeColor: string storeColor: string;
storeColorWhenPlayerTurn: string storeColorWhenPlayerTurn: string;
holeColor: string holeColor: string;
ballColor: string ballColor: string;
} ballLightColor: string;
holeAnimateColor: string;
};
const theme: Theme = { const theme: Theme = {
background : "#EEEEEE", background: "#EEEEEE",
boardColor: "#4D606E", boardColor: "#4D606E",
boardColorWhenPlayerTurn: "#84b8a6", boardColorWhenPlayerTurn: "#84b8a6",
storeColor: "#3FBAC2", storeColor: "#3FBAC2",
storeColorWhenPlayerTurn: "#6cab94", storeColorWhenPlayerTurn: "#6cab94",
holeColor: "#D3D4D8", holeColor: "#D3D4D8",
ballColor: "#393E46", ballColor: "#393E46",
} ballLightColor: "#393E46",
holeAnimateColor: "#afb3a4",
};
const BallView: FunctionComponent<{color : string}> = ({color}) => { const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
return (
return (<div style={{ <div
style={{
background: color, background: color,
margin: "1px", margin: "1px",
width: "1vw", width: "1vw",
height: "1vw", height: "1vw",
borderRadius: "10vw" borderRadius: "10vw",
}} > }}
</div>) ></div>
} );
};
function range(size: number) { function range(size: number) {
var ans = []; var ans = [];
for (let i = 0; i < size; i++) { for (let i = 0; i < size; i++) {
ans.push(i); ans.push(i);
} }
return ans; return ans;
} }
const HoleView: FunctionComponent<{ hole: Pit, color: string, onClick: () => void }> = ({ hole, color, onClick }) => { const PitContainer: FunctionComponent<{
const balls = [...range(hole.stoneCount)].map((i) => <BallView color={theme.ballColor}/>) pit: Pit;
isAnimating: boolean;
return (<div onClick: () => void;
}> = ({ pit, isAnimating, onClick }) => {
if (isAnimating) {
pit.stoneCount += 1;
}
return (
<>
<HoleView
hole={pit}
color={isAnimating ? theme.holeAnimateColor : theme.holeColor}
stoneColor={isAnimating ? theme.ballLightColor : theme.ballColor}
onClick={onClick} onClick={onClick}
style={{ />
background: color, </>
margin: "5px", );
padding: "5px", };
borderRadius: "10vw",
display: 'flex',
alignItems: 'center',
alignContent: 'center',
justifyContent: 'center',
justifyItems: 'center',
flexWrap: "wrap",
}} >
{balls}
</div>)
}
const StoreView: FunctionComponent< const HoleView: FunctionComponent<{
{ store: Bank, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => { hole: Pit;
const balls = [...range(store.stoneCount)].map((i) => <BallView color={theme.ballColor}/>) color: string;
return (<div style={{ stoneColor: string;
gridColumn: gridColumn, onClick: () => void;
gridRow: gridRow, }> = ({ hole, color, stoneColor, onClick }) => {
background: color, const balls = [...range(hole.stoneCount)].map((i) => (
margin: "5px", <BallView color={stoneColor} />
borderRadius: "10vw", ));
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
alignContent: 'center',
flexWrap: "wrap",
}} >
{balls}
</div>)
}
const BoardView: FunctionComponent<{ game?: MancalaGame, userKey: string, onHoleSelect: (index: number, hole: Pit) => void }> = ({ return (
game, userKey, onHoleSelect }) => { <div
onClick={onClick}
style={{
background: color,
margin: "5px",
padding: "5px",
borderRadius: "10vw",
display: "flex",
alignItems: "center",
alignContent: "center",
justifyContent: "center",
justifyItems: "center",
flexWrap: "wrap",
}}
>
{balls}
</div>
);
};
const player1Pits = game?.board.player1Pits.map((hole) => ( const StoreView: FunctionComponent<{
<HoleView hole={hole} color={theme.holeColor} onClick={() => { store: Bank;
if (game.turnPlayerId === game.player1Id) onHoleSelect(game.board.player1Pits.indexOf(hole), hole) color: string;
}} /> stoneColor: string;
)) gridColumn: string;
gridRow: string;
const player2Pits = game!!.board.player2Pits.map((hole) => ( }> = ({ store, color, stoneColor, gridColumn, gridRow }) => {
<HoleView hole={hole} color={theme.holeColor} onClick={() => { const balls = [...range(store.stoneCount)].map((i) => (
if (game.turnPlayerId === game.player2Id) onHoleSelect(game.board.player2Pits.indexOf(hole), hole) <BallView color={stoneColor} />
}} /> ));
)) return (
<div
const isUserTurn = game.checkIsPlayerTurn(userKey) style={{
gridColumn: gridColumn,
const storeColor = isUserTurn ? theme.storeColor : theme.storeColorWhenPlayerTurn; gridRow: gridRow,
background: color,
margin: "5px",
borderRadius: "10vw",
display: "flex",
alignItems: "center",
justifyContent: "center",
alignContent: "center",
flexWrap: "wrap",
}}
>
{balls}
</div>
);
};
const BoardView: FunctionComponent<{
game?: MancalaGame;
userKey: string;
onHoleSelect: (index: number, hole: Pit) => void;
animationPitIndex: number;
}> = ({ game, userKey, onHoleSelect, animationPitIndex }) => {
const player1Pits = game?.board.player1Pits.map((pit) => {
const isAnimating = pit.index === animationPitIndex;
return ( return (
<div style={{ <PitContainer
margin: '10px', pit={pit}
padding: '20px', isAnimating={isAnimating}
display: 'grid', onClick={() => {
gridTemplateColumns: 'repeat(8, 11vw)', if (game.turnPlayerId === game.player1Id)
gridTemplateRows: 'repeat(2, 11vw)', onHoleSelect(game.board.player1Pits.indexOf(pit), pit);
borderRadius: "3vw", }}
background: isUserTurn ? theme.boardColor : theme.boardColorWhenPlayerTurn />
}}> );
{ });
userKey === game.player2Id ? (
<>
<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.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}
</>
)
}
</div> const player2Pits = game!!.board.player2Pits.map((pit) => {
) const isAnimating = pit.index === animationPitIndex;
} return (
<PitContainer
pit={pit}
isAnimating={isAnimating}
onClick={() => {
if (game.turnPlayerId === game.player2Id)
onHoleSelect(game.board.player2Pits.indexOf(pit), pit);
}}
/>
);
});
export default BoardView const isUserTurn = game.checkIsPlayerTurn(userKey);
const animatingPlayer1Bank =
game.board.player1Bank.index === animationPitIndex;
const animatingPlayer2Bank =
game.board.player2Bank.index === animationPitIndex;
const storeColorPlayer1 = animatingPlayer1Bank
? theme.holeAnimateColor
: isUserTurn
? theme.storeColor
: theme.storeColorWhenPlayerTurn;
const storeStoneColorPlayer1 = animatingPlayer1Bank
? theme.ballLightColor
: theme.ballColor;
const storeColorPlayer2 = animatingPlayer2Bank
? theme.holeAnimateColor
: isUserTurn
? theme.storeColor
: theme.storeColorWhenPlayerTurn;
const storeStoneColorPlayer2 = animatingPlayer2Bank
? theme.ballLightColor
: theme.ballColor;
return (
<div
style={{
margin: "10px",
padding: "20px",
display: "grid",
gridTemplateColumns: "repeat(8, 11vw)",
gridTemplateRows: "repeat(2, 11vw)",
borderRadius: "3vw",
background: isUserTurn
? theme.boardColor
: theme.boardColorWhenPlayerTurn,
}}
>
{userKey === game.player2Id ? (
<>
<StoreView
store={game!!.board.player1Bank}
color={storeColorPlayer1}
stoneColor={storeStoneColorPlayer1}
gridColumn="1 / 2"
gridRow="1 / 3"
/>
<StoreView
store={game!!.board.player2Bank}
color={storeColorPlayer2}
stoneColor={storeStoneColorPlayer2}
gridColumn="8 / 9"
gridRow="1 / 3"
/>
{player1Pits.reverse()}
{player2Pits}
</>
) : (
<>
<StoreView
store={game!!.board.player2Bank}
color={storeColorPlayer2}
stoneColor={storeStoneColorPlayer2}
gridColumn="1 / 2"
gridRow="1 / 3"
/>
<StoreView
store={game!!.board.player1Bank}
color={storeColorPlayer1}
stoneColor={storeStoneColorPlayer1}
gridColumn="8 / 9"
gridRow="1 / 3"
/>
{player2Pits.reverse()}
{player1Pits}
</>
)}
</div>
);
};
export default BoardView;

8
yarn.lock
View File

@ -3373,10 +3373,10 @@ magic-string@^0.22.4:
dependencies: dependencies:
vlq "^0.2.2" vlq "^0.2.2"
mancala.js@^0.0.2-beta.0: mancala.js@^0.0.2-beta.1:
version "0.0.2-beta.0" version "0.0.2-beta.1"
resolved "https://registry.yarnpkg.com/mancala.js/-/mancala.js-0.0.2-beta.0.tgz#360cd909b6ee743a3e3cbea203457c82917d6fcb" resolved "https://registry.yarnpkg.com/mancala.js/-/mancala.js-0.0.2-beta.1.tgz#333d613b349e743a00141d231e1f49ab1f99b4fe"
integrity sha512-3UOo94K81GmqhQ8m2vFoU608yMyDWbn+EI7OfPjcmQJHf+n8+bu1Ju/bUYNMP5qoFU0rQnxaXKU+Z1hK3hw/Rg== integrity sha512-RS5DFYOjcKMONqZ4DsZudscN+2OhcRBJV2fX3KjqGBvREgMjCxDZVjFMhdZxnP5HFXdRSbUeMivyisGGGQbJ/A==
map-cache@^0.2.2: map-cache@^0.2.2:
version "0.2.2" version "0.2.2"