diff --git a/webapp/src/components/DropdownList.jsx b/webapp/src/components/DropdownList.jsx new file mode 100644 index 0000000..42824b7 --- /dev/null +++ b/webapp/src/components/DropdownList.jsx @@ -0,0 +1,15 @@ +import React from 'react'; + +export default function DropdownList({ selected, onSelect, optionsList }) { + const handleSelect = (event) => { + onSelect(event.target.value) + } + + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/webapp/src/components/Game/GameMessage.css b/webapp/src/components/Game/GameMessage.css deleted file mode 100644 index b8871b8..0000000 --- a/webapp/src/components/Game/GameMessage.css +++ /dev/null @@ -1,6 +0,0 @@ -.game-message { - border-radius: 3px; - border-color: lightgray; - background-color:violet; - width: 70%; -} \ No newline at end of file diff --git a/webapp/src/components/Game/GameMessage.jsx b/webapp/src/components/Game/GameMessage.jsx deleted file mode 100644 index 328b2ba..0000000 --- a/webapp/src/components/Game/GameMessage.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import './GameMessage.css' -import React from 'react' - -// import { AppContext } from '../../context/app' - -export default function GameMessage() { - - // const [ctx] = React.useContext(AppContext) - - return ( -
- TBD: Game Message -
- ) -} diff --git a/webapp/src/components/Game/GameSelector.css b/webapp/src/components/Game/GameSelector.css deleted file mode 100644 index 96d7c1a..0000000 --- a/webapp/src/components/Game/GameSelector.css +++ /dev/null @@ -1,42 +0,0 @@ -.Games { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - -} - -.Games .li { - border: 1px solid black; - margin-bottom: 5px; -} - -.Games .li p { - margin: 5px; -} - -.Games .li p q { - color: gray; -} - -.Games .li p i { - font-size: 70%; -} - -.Games .li button.action { - display: none; -} - -.Games .li:hover button.action { - display: initial; -} - -.separator { - /* width: 20%; */ - /* height: 20px; */ - border-bottom: 1px dotted black; - text-align: center; - font-size: 50%; - padding-left: 50%; - margin-bottom: 7px; -} \ No newline at end of file diff --git a/webapp/src/components/Game/GameSelector.jsx b/webapp/src/components/Game/GameSelector.jsx deleted file mode 100644 index 404e434..0000000 --- a/webapp/src/components/Game/GameSelector.jsx +++ /dev/null @@ -1,44 +0,0 @@ -import './GameSelector.css'; -import React from 'react'; -import { useLocation, matchPath } from "react-router"; - -import { AppData } from "../../context/data" -import { AppContext } from "../../context/app" -import Proposal from './GameSelector/GameProposal'; - -export default function GameSelector() { - const [data] = React.useContext(AppData) - const [/*ctx*/, dispatchCtx] = React.useContext(AppContext) - - const { pathname } = useLocation(); - const isProposalPath = matchPath("/game/proposal/*", pathname); - const isActivelPath = matchPath("/game/active/*", pathname); - const isArchivePath = matchPath("/game/archive/*", pathname); - - // console.log("GameSelector appCtx", ctx) - - const onClick_proposal = (selectedGame) => { - dispatchCtx({ component: "game-selector", selectedGameProposal: selectedGame }) - } - - // const onClick_active = (selectedGame) => { - // dispatchCtx({ component: "game-selector", selectedActiveGame: selectedGame }) - // } - - // const onClick_archive = (selectedGame) => { - // dispatchCtx({ component: "game-selector", selectedArchiveGame: selectedGame }) - // } - - if (!data.games) - return
Loading..
- - console.log("Games", data.games) - - return ( -
- {isProposalPath && } - {isActivelPath &&
TBD #1
} - {isArchivePath &&
TBD #2
} -
- ) -} \ No newline at end of file diff --git a/webapp/src/components/Game/GameSelector/ActiveGames.jsx b/webapp/src/components/Game/GameSelector/ActiveGames.jsx deleted file mode 100644 index ed68149..0000000 --- a/webapp/src/components/Game/GameSelector/ActiveGames.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import './ProposalSelector.css' -import React from 'react'; -import Selectable from './Selectable'; - -export default function ProposalSelector({ games }) { - - const waitForYou = games - .filter(game => game.status === Status.WaitForYou) - .map(game => ) - - const WaitForOpponent = games - .filter(game => game.status === Status.WaitForOpponent) - .map(game => ) - - return
-
- {waitForYou} - {WaitForOpponent.length > 0 && -
- waiting for opponent ({WaitForOpponent.length}) -
- } - {WaitForOpponent} -
-
-}; - - -const Status = { - WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT", - WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU", -} diff --git a/webapp/src/components/Game/GameSelector/GameArchive.jsx b/webapp/src/components/Game/GameSelector/GameArchive.jsx deleted file mode 100644 index ed68149..0000000 --- a/webapp/src/components/Game/GameSelector/GameArchive.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import './ProposalSelector.css' -import React from 'react'; -import Selectable from './Selectable'; - -export default function ProposalSelector({ games }) { - - const waitForYou = games - .filter(game => game.status === Status.WaitForYou) - .map(game => ) - - const WaitForOpponent = games - .filter(game => game.status === Status.WaitForOpponent) - .map(game => ) - - return
-
- {waitForYou} - {WaitForOpponent.length > 0 && -
- waiting for opponent ({WaitForOpponent.length}) -
- } - {WaitForOpponent} -
-
-}; - - -const Status = { - WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT", - WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU", -} diff --git a/webapp/src/components/Game/GameSelector/GameProposal.jsx b/webapp/src/components/Game/GameSelector/GameProposal.jsx deleted file mode 100644 index eb5858a..0000000 --- a/webapp/src/components/Game/GameSelector/GameProposal.jsx +++ /dev/null @@ -1,30 +0,0 @@ -import React from 'react'; -import Selectable from './Selectable'; - -export default function ProposalSelector({ games, onClick }) { - - const waitForYou = games - .filter(game => game.status === Status.WaitForYou) - .map(game => ) - - const WaitForOpponent = games - .filter(game => game.status === Status.WaitForOpponent) - .map(game => ) - - return ( -
- {waitForYou} - {WaitForOpponent.length > 0 && -
- waiting for opponent ({WaitForOpponent.length}) -
- } - {WaitForOpponent} -
- ) -} - -const Status = { - WaitForOpponent: "GAME_PROPOSAL_WAIT_FOR_OPPONENT", - WaitForYou: "GAME_PROPOSAL_WAIT_FOR_YOU", -} diff --git a/webapp/src/components/Game/GameSelector/Selectable.css b/webapp/src/components/Game/GameSelector/Selectable.css deleted file mode 100644 index faff0ad..0000000 --- a/webapp/src/components/Game/GameSelector/Selectable.css +++ /dev/null @@ -1,43 +0,0 @@ -.selectable { - border: 1px solid black; - margin-bottom: 5px; -} - -.selectable q { - color: gray; -} - -.selectable i { - font-size: 70%; - margin-left: 5px; - margin-right: 5px; -} - -.selectable:hover { - background-color: #d3d3d360; -} - -/* .Games .li button.action { - display: none; -} - -.Games .li:hover button.action { - display: initial; -} */ - -.separator { - /* width: 20%; */ - /* height: 20px; */ - border-bottom: 1px dotted black; - text-align: center; - font-size: 50%; - padding-left: 50%; - margin-bottom: 7px; -} - -.selectable .title { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; -} diff --git a/webapp/src/components/Game/GameSelector/Selectable.jsx b/webapp/src/components/Game/GameSelector/Selectable.jsx deleted file mode 100644 index 838ed3e..0000000 --- a/webapp/src/components/Game/GameSelector/Selectable.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import './Selectable.css' -import React from 'react'; -import { oppositeColor } from '../Stone'; -import { Player } from '../../Player'; - -export default function Selectable({ game, onClick }) { - - const myColor = game.myColor - - const opponentColor = oppositeColor(myColor) - const opponentName = game.opponentName - - return ( -
-
onClick(game)}> - - vs - -
- {game.message} -
- ) -}; - diff --git a/webapp/src/components/Game/GameView.css b/webapp/src/components/Game/GameView.css deleted file mode 100644 index 29f4839..0000000 --- a/webapp/src/components/Game/GameView.css +++ /dev/null @@ -1,30 +0,0 @@ -.game-view { - margin-bottom: 10px; - background-color: lightgrey; - width: 100%; - padding-top: 8px; - padding-bottom: 8px; - color: black; -} - -.game-view a { - color:darkgrey; - text-decoration: none; - transition: .25s ease; - margin-left: 5px; - margin-right: 5px; -} - -.game-view .active { - color: white; - border-radius: 2px; - background-color: cadetblue; - opacity: 80%; - padding-top: 8px; - padding-bottom: 8px; -} - -.game-view a:hover:not(.active) { - color: cadetblue; - box-shadow: 0 1.5px 0 0 currentColor; -} \ No newline at end of file diff --git a/webapp/src/components/Game/GameView.jsx b/webapp/src/components/Game/GameView.jsx deleted file mode 100644 index 7930edf..0000000 --- a/webapp/src/components/Game/GameView.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import './GameView.css'; -import React from 'react'; -import { NavLink } from "react-router-dom"; - -export default function GameView() { - - return ( - - ) -} diff --git a/webapp/src/components/Game/NewGame.css b/webapp/src/components/Game/NewGame.css deleted file mode 100644 index 3661eb4..0000000 --- a/webapp/src/components/Game/NewGame.css +++ /dev/null @@ -1,17 +0,0 @@ -.new-game { - margin-top: 60px; -} - -.new-game * { - width: 230px; -} - -.new-game>div { /* first level childs only*/ - margin-top: 25px; - margin-bottom: 25px; -} - -.new-game .stone { - font-size: 150%; - vertical-align: -3px; -} \ No newline at end of file diff --git a/webapp/src/components/Game/NewGame.jsx b/webapp/src/components/Game/NewGame.jsx deleted file mode 100644 index 4a42b71..0000000 --- a/webapp/src/components/Game/NewGame.jsx +++ /dev/null @@ -1,72 +0,0 @@ -import './NewGame.css'; -import React from 'react'; -import { AppData } from '../../context/data' -import { AppContext } from '../../context/app' -import { useLocation, matchPath } from "react-router"; -import { SelectPlayer } from '../Player'; -import { WhiteStone, BlackStone } from './Stone'; - - -export default function NewGame() { - const [ctx, dispatchCtx] = React.useContext(AppContext) - const [data] = React.useContext(AppData) - const { pathname } = useLocation(); - const isMyPath = matchPath("/game/new", pathname); - - if (!isMyPath) - return - - /* - * Name options - */ - const nameOptions = data.leaderboard ? Object.keys(data.leaderboard).map(playerName => - ) - : [] - - const whiteOptions = Array(nameOptions) - whiteOptions.push() - - const blackOptions = Array(nameOptions) - blackOptions.push() - - /* - * Radiobutton - */ - const radioButton = (whitePlayer, blackPlayer) => { - if (whitePlayer !== '' && whitePlayer === ctx.newGame.blackPlayer) { - blackPlayer = '' - } - if (blackPlayer !== '' && blackPlayer === ctx.newGame.whitePlayer) { - whitePlayer = '' - } - - dispatchCtx({ update: "newGame", whitePlayer, blackPlayer }) - } - - const setWhitePlayer = (name) => { - radioButton(name, ctx.newGame.blackPlayer) - } - - const setBlackPlayer = (name) => { - radioButton(ctx.newGame.whitePlayer, name) - } - - /* - * Component - */ - return ( -
-
- - -
-
- vs -
-
- - -
-
- ) -} diff --git a/webapp/src/container/Games.jsx b/webapp/src/container/Games.jsx index 0ec98b8..31d3584 100644 --- a/webapp/src/container/Games.jsx +++ b/webapp/src/container/Games.jsx @@ -17,29 +17,25 @@ import Forward from './games/action/Forward'; import GameBoard from './games/GameBoard'; -import { GamesContext, GamesDispatchContext, GamesApiContext } from '../context/games'; +import { GamesContext } from '../context/games'; -export default function Games({ context }) { +export default function Games({ context, players }) { return ( - - -
-
- - -
-
- - - {/* +
+
+ + +
+
+ + + {/* */} -
-
- - +
+
) }; @@ -57,11 +53,17 @@ function ViewSelector() { ) } -function ViewProvider(/*todo: dispatchGame*/) { +function ViewProvider({ players, dispatchGames }) { return (
- } /> + + dispatchGames({ type: "next", newGame: { whitePlayer, blackPlayer } })} + /> + } /> i { + /* first level childs only*/ + margin-top: 25px; + margin-bottom: 25px; } \ No newline at end of file diff --git a/webapp/src/container/games/view/NewGame.jsx b/webapp/src/container/games/view/NewGame.jsx index 02e58df..0069967 100644 --- a/webapp/src/container/games/view/NewGame.jsx +++ b/webapp/src/container/games/view/NewGame.jsx @@ -1,30 +1,62 @@ +import './NewGame.css' import React, { useContext } from 'react'; import { GamesContext } from '../../../context/games'; -export default function NewGame() { +import DropdownList from '../../../components/DropdownList'; +import { WhiteStone, BlackStone } from '../../../components/Checkers'; + +export default function NewGame({ players, onSelectPlayer }) { const games = useContext(GamesContext); - console.log("NewGame", games); + /* + * Name options + */ + const nameOptions = !players.leaderboard + ? [] + : Object.keys(players.leaderboard).map(playerName => + ) - return ( -
View: NewGame
- ) -} + const whiteOptions = Array(nameOptions) + whiteOptions.push() + const blackOptions = Array(nameOptions) + blackOptions.push() -// Move to components as DropSelector -function SelectPlayer({ name, setName, nameOptions }) { - const handleSelectChange = (event) => { - setName(event.target.value) + /* + * Radiobutton + */ + const radioButton = (whitePlayer, blackPlayer) => { + if (whitePlayer !== '' && whitePlayer === games.newGame.blackPlayer) { + blackPlayer = ''; + } + if (blackPlayer !== '' && blackPlayer === games.newGame.whitePlayer) { + whitePlayer = ''; + } + + console.log("WhitePlayer", whitePlayer, "BlackPlayer", blackPlayer); + onSelectPlayer(whitePlayer, blackPlayer); } + const setWhitePlayer = (name) => { + radioButton(name, games.newGame.blackPlayer); + } + + const setBlackPlayer = (name) => { + radioButton(games.newGame.whitePlayer, name); + } + + /* + * The Component + */ return ( -
-
- -
+
+ + + - vs - + +
) } \ No newline at end of file diff --git a/webapp/src/context/games.jsx b/webapp/src/context/games.jsx index 69d370c..537ab8a 100644 --- a/webapp/src/context/games.jsx +++ b/webapp/src/context/games.jsx @@ -1,8 +1,6 @@ import { createContext } from 'react'; export const GamesContext = createContext(null); -export const GamesDispatchContext = createContext(null); -export const GamesApiContext = createContext(null); // export const Games = React.createContext({ // state: initialState, diff --git a/webapp/src/reducer/games.js b/webapp/src/reducer/games.js index 95e940e..40c4954 100644 --- a/webapp/src/reducer/games.js +++ b/webapp/src/reducer/games.js @@ -3,6 +3,11 @@ import { nextState } from '../util/StateHelper'; export const gamesInitialState = { list: null, + + newGame: { + whitePlayer: '', + blackPlayer: '' + } }; export function gamesReducer(state, action) {