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() {