From f382ec567e1292cedee7c01e721ddc38bdc4dc4e Mon Sep 17 00:00:00 2001 From: "SOGYO\\bvdoord" Date: Tue, 26 Jan 2021 11:22:58 +0100 Subject: Front-end met Snowpack toegevoegd --- client/src/About/About.tsx | 12 +++++++ client/src/App.css | 9 +++++ client/src/App.tsx | 29 +++++++++++++++ client/src/Header/Header.css | 30 ++++++++++++++++ client/src/Header/Header.tsx | 20 +++++++++++ client/src/Header/logo.jpg | Bin 0 -> 5184 bytes client/src/Mancala/Mancala.css | 1 + client/src/Mancala/Mancala.tsx | 24 +++++++++++++ client/src/Mancala/Play.css | 1 + client/src/Mancala/Play.tsx | 17 +++++++++ client/src/Mancala/StartGame.css | 10 ++++++ client/src/Mancala/StartGame.tsx | 74 +++++++++++++++++++++++++++++++++++++++ client/src/gameState.ts | 19 ++++++++++ client/src/index.tsx | 15 ++++++++ 14 files changed, 261 insertions(+) create mode 100644 client/src/About/About.tsx create mode 100644 client/src/App.css create mode 100644 client/src/App.tsx create mode 100644 client/src/Header/Header.css create mode 100644 client/src/Header/Header.tsx create mode 100644 client/src/Header/logo.jpg create mode 100644 client/src/Mancala/Mancala.css create mode 100644 client/src/Mancala/Mancala.tsx create mode 100644 client/src/Mancala/Play.css create mode 100644 client/src/Mancala/Play.tsx create mode 100644 client/src/Mancala/StartGame.css create mode 100644 client/src/Mancala/StartGame.tsx create mode 100644 client/src/gameState.ts create mode 100644 client/src/index.tsx (limited to 'client/src') diff --git a/client/src/About/About.tsx b/client/src/About/About.tsx new file mode 100644 index 0000000..e7a9c69 --- /dev/null +++ b/client/src/About/About.tsx @@ -0,0 +1,12 @@ +import React from "react"; + +export function About() { + return
+

Mancala

+

+ Mancala is one of the oldest known board games. It has many different variations and is known under several different names. + The objective of the game is obtaining as many stones, beads or seeds as possible. + It is a game of skill that does not rely on any sort of randomness, making it similar to chess. +

+
+} \ No newline at end of file diff --git a/client/src/App.css b/client/src/App.css new file mode 100644 index 0000000..8eebe3a --- /dev/null +++ b/client/src/App.css @@ -0,0 +1,9 @@ +body { + margin: 0px; + padding: 0px; + background-color: #eeeeee; +} + +.main-content { + padding: 8px; +} \ No newline at end of file diff --git a/client/src/App.tsx b/client/src/App.tsx new file mode 100644 index 0000000..edd9504 --- /dev/null +++ b/client/src/App.tsx @@ -0,0 +1,29 @@ +import React from "react"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; +import { Header } from "./Header/Header"; +import { About } from "./About/About"; +import { Mancala } from "./Mancala/Mancala"; +import "./App.css"; + +export function App() { + return ( + + {/* The header with navigation options is always on top of every page */} +
+ +
+ + {/* If the user goes to the url /about, show the about page */} + + + + + {/* If the user goes to any other url, show the play page */} + + + + +
+ + ) +} \ No newline at end of file diff --git a/client/src/Header/Header.css b/client/src/Header/Header.css new file mode 100644 index 0000000..6744f32 --- /dev/null +++ b/client/src/Header/Header.css @@ -0,0 +1,30 @@ +.main-header { + background-color: white; + color: green; + font-size: 2rem; + margin-bottom: 8px; +} + +.main-navigation { + display: flex; + justify-content: space-around; + align-items: center; + background-color: green; + font-size: 1.3rem; + height: 45px; +} + +.main-navigation a { + color: white; + text-decoration: none; +} + +.main-header div { + display: flex; + align-items: center; +} + +.main-header img { + height: 50px; + margin: 6px; +} \ No newline at end of file diff --git a/client/src/Header/Header.tsx b/client/src/Header/Header.tsx new file mode 100644 index 0000000..9f96d0c --- /dev/null +++ b/client/src/Header/Header.tsx @@ -0,0 +1,20 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import "./Header.css"; +import urlLogo from "./logo.jpg"; + +/** + * A Header component with a Sogyo logo, the name of the application and several links to different pages + */ +export function Header() { + return
+
+ + Mancala +
+
+ Play + About +
+
+} \ No newline at end of file diff --git a/client/src/Header/logo.jpg b/client/src/Header/logo.jpg new file mode 100644 index 0000000..9104922 Binary files /dev/null and b/client/src/Header/logo.jpg differ diff --git a/client/src/Mancala/Mancala.css b/client/src/Mancala/Mancala.css new file mode 100644 index 0000000..8f73945 --- /dev/null +++ b/client/src/Mancala/Mancala.css @@ -0,0 +1 @@ +/** Add some styles */ \ No newline at end of file diff --git a/client/src/Mancala/Mancala.tsx b/client/src/Mancala/Mancala.tsx new file mode 100644 index 0000000..42c31a2 --- /dev/null +++ b/client/src/Mancala/Mancala.tsx @@ -0,0 +1,24 @@ +import React, { useState } from "react"; +import { StartGame } from "./StartGame"; +import { Play } from "./Play"; +import type { GameState } from "../gameState"; +import "./Mancala.css"; + +/** + * The base component for the Mancala game. If there's no active game, the `StartGame` component allows + * users to enter two player names and start a new game. + * If there's an active game this component holds the game state. This game state can be passed as a prop + * to child components as needed. + * + * Child components can modify the game state by calling the setGameState (which they recieve as prop.) + */ +export function Mancala() { + + const [ gameState, setGameState ] = useState(undefined); + + if (!gameState) { + return + } + + return +} \ No newline at end of file diff --git a/client/src/Mancala/Play.css b/client/src/Mancala/Play.css new file mode 100644 index 0000000..8f73945 --- /dev/null +++ b/client/src/Mancala/Play.css @@ -0,0 +1 @@ +/** Add some styles */ \ No newline at end of file diff --git a/client/src/Mancala/Play.tsx b/client/src/Mancala/Play.tsx new file mode 100644 index 0000000..3b8ff25 --- /dev/null +++ b/client/src/Mancala/Play.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import type { GameState } from "../gameState"; +import "./Play.css"; + +type PlayProps = { + gameState: GameState; + setGameState(newGameState: GameState): void; +} + +export function Play({ gameState, setGameState }: PlayProps) { + return ( +
+

{gameState.players[0].name} vs {gameState.players[1].name}

+ To do... +
+ ) +} \ No newline at end of file diff --git a/client/src/Mancala/StartGame.css b/client/src/Mancala/StartGame.css new file mode 100644 index 0000000..3ab5872 --- /dev/null +++ b/client/src/Mancala/StartGame.css @@ -0,0 +1,10 @@ +.startGameButton { + font-size: 2em; + background-color: lightgreen; + border: 2px solid black; +} + +.errorMessage { + height: 1em; + color: red; +} \ No newline at end of file diff --git a/client/src/Mancala/StartGame.tsx b/client/src/Mancala/StartGame.tsx new file mode 100644 index 0000000..9d5be2c --- /dev/null +++ b/client/src/Mancala/StartGame.tsx @@ -0,0 +1,74 @@ +import React, { useState } from "react"; +import type { GameState } from "../gameState"; +import "./StartGame.css"; + +type StartGameProps = { + setGameState(newGameState: GameState): void; +} + +/** + * Allows the players to enter their name. A name is required for both players. They can't have the same names. + */ +export function StartGame({ setGameState }: StartGameProps) { + + const [errorMessage, setErrorMessage] = useState(""); + const [playerOne, setPlayerOne] = useState(""); + const [playerTwo, setPlayerTwo] = useState(""); + + async function tryStartGame(e: React.FormEvent) { + e.preventDefault(); // Prevent default browser behavior of submitting forms + if (!playerOne) { + setErrorMessage("A name is required for player 1"); + return; + } + if (!playerTwo) { + setErrorMessage("A name is required for player 2"); + return; + } + if (playerOne === playerTwo) { + setErrorMessage("Each player should have a unique name"); + return; + } + setErrorMessage(""); + + try { + const response = await fetch('mancala/api/start', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ nameplayer1: playerOne, nameplayer2: playerTwo }) + }); + + if (response.ok) { + const gameState = await response.json(); + setGameState(gameState); + } else { + console.error(response.statusText); + } + } catch (error) { + console.error(error.toString()); + } + } + + return ( +
tryStartGame(e)}> + setPlayerOne(e.target.value)} + /> + + setPlayerTwo(e.target.value)} + /> + +

{errorMessage}

+ + +
+ ) +} \ No newline at end of file diff --git a/client/src/gameState.ts b/client/src/gameState.ts new file mode 100644 index 0000000..2d5ec3e --- /dev/null +++ b/client/src/gameState.ts @@ -0,0 +1,19 @@ + +export interface GameState { + players: [ Player, Player ]; // a player array contains exactly two Players + gameStatus: { + endOfGame: boolean; + }; +} + +interface Player { + name: string; + pits: Pit[]; + type: "player1" | "player2"; // only "player1" and "player2" are valid options for this string + hasTurn: boolean; +} + +interface Pit { + index: number; + nrOfStones: number; +} diff --git a/client/src/index.tsx b/client/src/index.tsx new file mode 100644 index 0000000..c92ef7e --- /dev/null +++ b/client/src/index.tsx @@ -0,0 +1,15 @@ +import * as React from "react"; +import ReactDOM from "react-dom"; +import { App } from "./App"; + +ReactDOM.render( + , + document.getElementById("root") +) + +// Hot Module Replacement (HMR) - Remove this snippet to remove HMR. +// Learn more: https://www.snowpack.dev/#hot-module-replacement +const hotMudleReplacement = import.meta.hot; +if (hotMudleReplacement) { + hotMudleReplacement.accept(); +} -- cgit v1.2.3 From 0016be942179e08105c0cb4a5233e616786813e7 Mon Sep 17 00:00:00 2001 From: "SOGYO\\bvdoord" Date: Mon, 26 Apr 2021 08:45:38 +0200 Subject: Extra uitleg React hooks --- client/src/Mancala/Mancala.tsx | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'client/src') diff --git a/client/src/Mancala/Mancala.tsx b/client/src/Mancala/Mancala.tsx index 42c31a2..1c712c8 100644 --- a/client/src/Mancala/Mancala.tsx +++ b/client/src/Mancala/Mancala.tsx @@ -14,6 +14,10 @@ import "./Mancala.css"; */ export function Mancala() { + // useState is a so called React hook. + // It is used to manage variables. When the setGameState function is called, React updates the UI as needed + // The call to useState follows the "rules of hooks": https://reactjs.org/docs/hooks-rules.html + // To check if code you added also follows the rules of hooks, run "npm run lint" in the command line const [ gameState, setGameState ] = useState(undefined); if (!gameState) { -- cgit v1.2.3 From 431af32d73a37887fa7d35f371a21260f5e93949 Mon Sep 17 00:00:00 2001 From: Mike Vink Date: Tue, 22 Jun 2021 15:33:33 +0200 Subject: refactoring endgame --- client/src/Mancala/Play.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'client/src') diff --git a/client/src/Mancala/Play.tsx b/client/src/Mancala/Play.tsx index 3b8ff25..b72bce1 100644 --- a/client/src/Mancala/Play.tsx +++ b/client/src/Mancala/Play.tsx @@ -14,4 +14,4 @@ export function Play({ gameState, setGameState }: PlayProps) { To do... ) -} \ No newline at end of file +} -- cgit v1.2.3 From 976ed2b105e80b257ebb724b3061400f37460041 Mon Sep 17 00:00:00 2001 From: Mike Vink Date: Thu, 24 Jun 2021 23:11:39 +0200 Subject: mega commit --- client/src/App.css | 23 ++++- client/src/Mancala/Mancala.tsx | 13 ++- client/src/Mancala/Pit.css | 46 +++++++++ client/src/Mancala/Pit.tsx | 65 ++++++++++++ client/src/Mancala/Play.css | 45 ++++++++- client/src/Mancala/Play.tsx | 207 ++++++++++++++++++++++++++++++++++++++- client/src/Mancala/StartGame.tsx | 45 +++++---- client/src/gameState.ts | 8 ++ client/src/pitState.ts | 0 client/src/pitState.tsx | 0 10 files changed, 424 insertions(+), 28 deletions(-) create mode 100644 client/src/Mancala/Pit.css create mode 100644 client/src/Mancala/Pit.tsx create mode 100644 client/src/pitState.ts create mode 100644 client/src/pitState.tsx (limited to 'client/src') diff --git a/client/src/App.css b/client/src/App.css index 8eebe3a..1d59297 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -1,9 +1,28 @@ +html { + height: 100%; +} + body { margin: 0px; padding: 0px; background-color: #eeeeee; + height: 100%; +} + +#root { + height: 100%; + --board-color: rgb(222,184,135); + --recess-color: rgb(188,143,143); } .main-content { - padding: 8px; -} \ No newline at end of file + display: flex; + + justify-content: center; + align-items: center; + align-self: center; + + flex: 0 1 auto; + + height: calc(100% - (107px)) +} diff --git a/client/src/Mancala/Mancala.tsx b/client/src/Mancala/Mancala.tsx index 1c712c8..509410b 100644 --- a/client/src/Mancala/Mancala.tsx +++ b/client/src/Mancala/Mancala.tsx @@ -9,7 +9,7 @@ import "./Mancala.css"; * users to enter two player names and start a new game. * If there's an active game this component holds the game state. This game state can be passed as a prop * to child components as needed. - * + * * Child components can modify the game state by calling the setGameState (which they recieve as prop.) */ export function Mancala() { @@ -20,9 +20,16 @@ export function Mancala() { // To check if code you added also follows the rules of hooks, run "npm run lint" in the command line const [ gameState, setGameState ] = useState(undefined); + if (localStorage.getItem("state") !== null) { + var state = localStorage.getItem("state"); + const gameState = JSON.parse(state as string); + return + } + if (!gameState) { - return + return } + return -} \ No newline at end of file +} diff --git a/client/src/Mancala/Pit.css b/client/src/Mancala/Pit.css new file mode 100644 index 0000000..8cd3f63 --- /dev/null +++ b/client/src/Mancala/Pit.css @@ -0,0 +1,46 @@ +.Pit { + display: inline-flex; + + justify-content: center; + align-items: center; + + width: 16%; +} + +.Recession { + display: flex; + justify-content: center; + align-items: center; + background: var(--recess-color); +} + +.Pit .Recession { + border-radius: 50%; + height: 50%; + width: 100%; +} + +.Kalaha { + display: inline-flex; + + justify-content: center; + align-items: center; + + width: 10%; +} + +.Kalaha .Recession { + border-radius: 30%; + height: 50%; + width: 100%; +} + +.Stone { + position: absolute; + background: gray; + border-radius: 50%; + border: 2px solid black; + height: 16px; + width: 16px; + min-height: 5px; +} diff --git a/client/src/Mancala/Pit.tsx b/client/src/Mancala/Pit.tsx new file mode 100644 index 0000000..300f3f4 --- /dev/null +++ b/client/src/Mancala/Pit.tsx @@ -0,0 +1,65 @@ +import React, { useState } from "react"; +import type { GameState } from "../gameState"; +import "./Pit.css"; + +type Flatten = T extends any[] ? T[number] : T; + +type Player = Flatten; + +type Pit = Flatten; + +type PitProps = { + player: Player; + index: number; + pit: Pit; + onClick?: (index: number, player: Player, pit: Pit) => (event: React.MouseEvent) => Promise + displayStones: (pit: Pit, spread: "small" | "big") => JSX.Element[] +} + +type SmallBowl = Pit & {kind: "small"}; +type Kalaha = Pit & {kind: "big"}; + + + +export function Pit({player, index, pit, onClick, displayStones}: PitProps) { + const smallBowl = pit as SmallBowl; + smallBowl.kind = "small"; + if (onClick) { + return ( +
+ {pit.nrOfStones > 10 ? "" + pit.nrOfStones : ""} +
+
+ {displayStones(pit, smallBowl.kind)} +
+
+
+ ); + } else { + return ( +
+
+
+ {pit.nrOfStones > 10 ? pit.nrOfStones : ""} + {displayStones(pit, smallBowl.kind)} +
+
+
+ ); + } +} + +export function Kalaha({player, pit, displayStones}: PitProps) { + const kalaha = pit as Kalaha; + kalaha.kind = "big"; + return ( +
+ {pit.nrOfStones > 10 ? pit.nrOfStones : ""} +
+
+ {displayStones(pit, kalaha.kind)} +
+
+
+ ); +} diff --git a/client/src/Mancala/Play.css b/client/src/Mancala/Play.css index 8f73945..6aa0d8f 100644 --- a/client/src/Mancala/Play.css +++ b/client/src/Mancala/Play.css @@ -1 +1,44 @@ -/** Add some styles */ \ No newline at end of file +/** Add some styles */ +#board { + display: flex; + background: var(--board-color); + padding: 20px; + + border-radius: 10%; + + justify-content: center; + flex-flow: row; + flex-direction: row; + + width: 800px; + height: 400px; +} + +#pits { + position: relative; + display: inline-flex; + + + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + + width: 80%; +} + +.playArea { + position: relative; +} + +.playerStatus { + position: relative; + display: flex; + + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + + height: 100px; + +} diff --git a/client/src/Mancala/Play.tsx b/client/src/Mancala/Play.tsx index b72bce1..d2d7f65 100644 --- a/client/src/Mancala/Play.tsx +++ b/client/src/Mancala/Play.tsx @@ -1,17 +1,216 @@ -import React from "react"; +import React, { useState } from "react"; import type { GameState } from "../gameState"; import "./Play.css"; +import { Pit, Kalaha } from "./Pit" + +type Flatten = T extends any[] ? T[number] : T; + +type Player = Flatten; + +type Pit = Flatten; type PlayProps = { gameState: GameState; setGameState(newGameState: GameState): void; } +function xyTranslate(pit: Pit, index: number) { + var angle = index/pit.nrOfStones * 2 * Math.PI; + var d = (index % 2 + 1) * 13; + var ofX = -9; + var ofY = -9; + if (pit.index === 6 || pit.index === 13) { + var xrandom = Math.random(); + var yrandom = Math.random(); + return 'translate('+ ((xrandom > 0.5 ? Math.random() : -Math.random()) * 18 - 10) + 'px, ' + (yrandom > 0.5 ? Math.random() : -Math.random()) * 60 + 'px)'; + } else { + return 'translate('+ (Math.cos(angle) * (d) + ofX) + 'px, ' + (Math.sin(angle) * (d) + ofY) + 'px)'; + } +} + export function Play({ gameState, setGameState }: PlayProps) { + + function playPit(index: number, player: Player, pit: Pit) { + const pitTotal = gameState.players[0].pits.length; + const allPits = gameState.players[0].pits.concat(gameState.players[1].pits); + const stonesToPass = pit.state.stoneElements as JSX.Element[]; + return async function event(event: React.MouseEvent) { + if (!player.hasTurn) return; + console.log("updating server"); + console.log(pit.nrOfStones); + try { + const response = await fetch('mancala/api/play', { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json' + }, + body: JSON.stringify({player: player.type === "player1" ? 0 : 1, index: index}) + }); + + if (response.ok) { + const newGameState = await response.json(); + localStorage.setItem("state", JSON.stringify(newGameState)); + setGameState({gameState, ...newGameState}); + } else { + console.error(response.statusText); + } + } catch (error) { + console.error(error.toString()); + } + console.log(pit.nrOfStones); + + } + } + + // function animate(newGameState: GameState) { + // var pits = newGameState.players[0].pits.concat(newGameState.players[1].pits); + // var type; + // for (var pit of pits) { + // type = pit.index === 6 || pit.index === 13 ? "big" : "small" as "big" | "small"; + // displayStones(pit, type); + // setTimeout(() => {}, 1000); + // } + // }; + + function stoneStyler(pit: Pit, index: number, spread: "small" | "big", ) { + const colors = ['gray', 'purple', 'blue', 'green']; + var stoneStyle; + if (spread === "small") { + stoneStyle = { + transform: xyTranslate(pit, index), + background: colors[index % colors.length], + }; + } else { + stoneStyle = { + transform: xyTranslate(pit, index), + background: colors[index % colors.length], + }; + } + return stoneStyle; + } + + function displayStones(pit: Pit, spread: "small" | "big") { + var jsx; + var kind = pit.index === 6 || pit.index === 13 ? "big" : "small" as "small"|"big"; + if (pit.state.stoneElements === undefined) { + pit.state.stoneElements = []; + for (let i = 0; i < pit.nrOfStones; i++) { + jsx = (
); + pit.state.stoneElements.reverse().push(jsx); + } + } else if (pit.nrOfStones < pit.state.stoneElements.length) { + // while (pit.nrOfStones < pit.state.stoneElements.length) { + // pit.state.stoneElements.pop(); + // } + pit.state.stoneElements = []; + for (let i = 0; i < pit.nrOfStones; i++) { + jsx = (
); + pit.state.stoneElements.reverse().push(jsx); + } + } else if (pit.nrOfStones > pit.state.stoneElements.length) { + pit.state.stoneElements = []; + for (let i = 0; i < pit.nrOfStones; i++) { + jsx = (
); + pit.state.stoneElements.reverse().push(jsx); + } + } + return pit.state.stoneElements; + } + + const playerPits = gameState.players.map( + player => { + return player.pits.slice(0, -1).map( + (pit, index) => { + const [ pitState, setPitState ] = useState({stoneElements: undefined}); + pit.state = pitState; + pit.setPitState = setPitState; + return ( + + ) + }); + }); + + const playerKalahas = gameState.players.map( + (player, index) => { + const [ kalahaState, setKalahaState ] = useState({stoneElements: undefined}); + const pit = player.pits[player.pits.length - 1]; + pit.state = kalahaState; + pit.setPitState = setKalahaState; + return ( + + ) + } + ); + + var player2Pits = []; + var player1Pits = []; + + for (var i = 0; i < playerPits[0].length; i++) { + player1Pits.push(playerPits[0][i]); + player2Pits.push(playerPits[1][i]); + } + + const revenge = ( + + ); + return ( -
-

{gameState.players[0].name} vs {gameState.players[1].name}

- To do... +
+
+ {gameState.players[1].name} has {gameState.players[1].pits.reduce((sum, current) => {return (sum + current.nrOfStones)}, 0)} stones. + {gameState.players[1].hasTurn ? " Also has the current turn" : ""} +
+
+ {playerKalahas[1]} +
+ {player2Pits.reverse()} + {player1Pits} +
+ {playerKalahas[0]} +
+
+ {gameState.players[0].name} has {gameState.players[0].pits.reduce((sum, current) => {return (sum + current.nrOfStones)}, 0)} stones. + {gameState.players[0].hasTurn ? "Also has the current turn" : ""} +
+ {gameState.gameStatus.endOfGame ? revenge : ""}
) } diff --git a/client/src/Mancala/StartGame.tsx b/client/src/Mancala/StartGame.tsx index 9d5be2c..4cf8d94 100644 --- a/client/src/Mancala/StartGame.tsx +++ b/client/src/Mancala/StartGame.tsx @@ -1,15 +1,17 @@ import React, { useState } from "react"; import type { GameState } from "../gameState"; import "./StartGame.css"; +import { Play } from "./Play" type StartGameProps = { + gameState: GameState | undefined; setGameState(newGameState: GameState): void; } /** * Allows the players to enter their name. A name is required for both players. They can't have the same names. */ -export function StartGame({ setGameState }: StartGameProps) { +export function StartGame({gameState, setGameState }: StartGameProps) { const [errorMessage, setErrorMessage] = useState(""); const [playerOne, setPlayerOne] = useState(""); @@ -52,23 +54,30 @@ export function StartGame({ setGameState }: StartGameProps) { } } - return ( -
tryStartGame(e)}> - setPlayerOne(e.target.value)} - /> + if (localStorage.getItem("state") !== null) { + var state = localStorage.getItem("state"); + const gameState = JSON.parse(state as string); + setGameState(gameState); + return + } else { + return ( + tryStartGame(e)}> + setPlayerOne(e.target.value)} + /> - setPlayerTwo(e.target.value)} - /> + setPlayerTwo(e.target.value)} + /> -

{errorMessage}

+

{errorMessage}

- - - ) -} \ No newline at end of file + + + ) + } +} diff --git a/client/src/gameState.ts b/client/src/gameState.ts index 2d5ec3e..b276136 100644 --- a/client/src/gameState.ts +++ b/client/src/gameState.ts @@ -16,4 +16,12 @@ interface Player { interface Pit { index: number; nrOfStones: number; + state: PitState; + setPitState: (newPitState: PitState) => void; } + + +interface PitState { + stoneElements: JSX.Element[] | undefined; + } + diff --git a/client/src/pitState.ts b/client/src/pitState.ts new file mode 100644 index 0000000..e69de29 diff --git a/client/src/pitState.tsx b/client/src/pitState.tsx new file mode 100644 index 0000000..e69de29 -- cgit v1.2.3 From c408d4ead869da802246c87a724e594ce639b883 Mon Sep 17 00:00:00 2001 From: Mike Vink Date: Thu, 24 Jun 2021 23:13:11 +0200 Subject: ? --- client/src/Mancala/StartGame.tsx | 39 ++++++++++++++++----------------------- 1 file changed, 16 insertions(+), 23 deletions(-) (limited to 'client/src') diff --git a/client/src/Mancala/StartGame.tsx b/client/src/Mancala/StartGame.tsx index 4cf8d94..461148e 100644 --- a/client/src/Mancala/StartGame.tsx +++ b/client/src/Mancala/StartGame.tsx @@ -54,30 +54,23 @@ export function StartGame({gameState, setGameState }: StartGameProps) { } } - if (localStorage.getItem("state") !== null) { - var state = localStorage.getItem("state"); - const gameState = JSON.parse(state as string); - setGameState(gameState); - return - } else { - return ( -
tryStartGame(e)}> - setPlayerOne(e.target.value)} - /> + return ( + tryStartGame(e)}> + setPlayerOne(e.target.value)} + /> - setPlayerTwo(e.target.value)} - /> + setPlayerTwo(e.target.value)} + /> -

{errorMessage}

+

{errorMessage}

- -
- ) - } + + + ) } -- cgit v1.2.3