diff --git a/webapp/src/components/Game/GameAction.css b/webapp/src/components/Game/GameAction.css index f4a27ed..f581618 100644 --- a/webapp/src/components/Game/GameAction.css +++ b/webapp/src/components/Game/GameAction.css @@ -26,7 +26,7 @@ background-color:#00b0ff60; } -.game-action.create:active { +.game-action.create.enabled:active { background-color:#00b0ffa0; } @@ -48,26 +48,6 @@ background-color:#00af0080; } -/* .game-header a { - color:darkgrey; - text-decoration: none; - transition: .25s ease; - margin-left: 5px; - margin-right: 5px; +.game-action.disabled { + color: gray; } - -.game-action .active { - color: white; - border-radius: 2px; - background-color: cadetblue; - opacity: 80%; - padding-top: 8px; - padding-bottom: 8px; -} - -.game-header 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/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx index e0383d8..c52e8f9 100644 --- a/webapp/src/components/Game/GameAction/Create.jsx +++ b/webapp/src/components/Game/GameAction/Create.jsx @@ -1,22 +1,36 @@ -import React/*, {useState}*/ from 'react'; +import React from 'react'; +import { AppContext } from '../../../context/app' +import { AppData } from '../../../context/data' export default function Create() { - // const [pending, setPending] = useState([]) + const [ctx] = React.useContext(AppContext) + const [data] = React.useContext(AppData) - // for (const [key, value] of Object.entries(pending)) - // console.log("pending ", key, value); + const hasPlayers = ctx.newGame.whitePlayer !== ctx.newGame.blackPlayer + && ctx.newGame.blackPlayer !== '' + && ctx.newGame.whitePlayer !== '' - // function sendRequest(reject_uuid) { - // setPending( // Replace the old array - // [ // with a new array consisting of: - // ...pending, // - all the old items - // { uuid: reject_uuid } // - and a new item at the end - // ] - // ) - // } + const hasCurrentUser = data.isCurrentUser(ctx.newGame.blackPlayer) + || data.isCurrentUser(ctx.newGame.whitePlayer) + + const isEnabled = hasPlayers && hasCurrentUser - // return - return + const onClick = () => { + if (!hasPlayers) + return alert("Choose both black and white players"); + + if (!hasCurrentUser) + return alert("You must be one of the players"); + + console.log("TODO: send GameCreateRequest to the server!") + } + + return ( + + ) } diff --git a/webapp/src/components/Game/NewGame.jsx b/webapp/src/components/Game/NewGame.jsx index 0856c40..4a13705 100644 --- a/webapp/src/components/Game/NewGame.jsx +++ b/webapp/src/components/Game/NewGame.jsx @@ -19,12 +19,11 @@ export default function NewGame() { /* * Name options */ - const nameOptions = data.leaderboard - ? Object.keys(data.leaderboard).map(playerName => { - const displayName = data.isCurrentUser(playerName) ? 'You' : playerName - return - }) - : [] + const nameOptions = data.leaderboard ? Object.keys(data.leaderboard).map(playerName => + ) + : [] const whiteOptions = Array(nameOptions) whiteOptions.push() diff --git a/webapp/src/components/Header/index.jsx b/webapp/src/components/Header/index.jsx index 5be44a8..b255958 100644 --- a/webapp/src/components/Header/index.jsx +++ b/webapp/src/components/Header/index.jsx @@ -15,7 +15,7 @@ export default function Header() {