From 7c2a3329a7d16885da9bdb9c2ed0f831de23e636 Mon Sep 17 00:00:00 2001 From: djmil Date: Thu, 26 Oct 2023 09:28:16 +0200 Subject: [PATCH] front: GameAction and GameBoard --- webapp/src/components/Game/GameAction.css | 73 +++++++++++++++++++ webapp/src/components/Game/GameAction.jsx | 24 ++++++ .../src/components/Game/GameAction/Accept.jsx | 6 ++ .../src/components/Game/GameAction/Cancel.jsx | 6 ++ .../src/components/Game/GameAction/Create.jsx | 22 ++++++ .../src/components/Game/GameAction/Reject.jsx | 6 ++ .../{Board/index.css => Game/GameBoard.css} | 0 .../{Board/index.jsx => Game/GameBoard.jsx} | 4 +- webapp/src/components/Game/Reject.jsx | 21 ------ webapp/src/components/Game/index.jsx | 6 +- 10 files changed, 143 insertions(+), 25 deletions(-) create mode 100644 webapp/src/components/Game/GameAction.css create mode 100644 webapp/src/components/Game/GameAction.jsx create mode 100644 webapp/src/components/Game/GameAction/Accept.jsx create mode 100644 webapp/src/components/Game/GameAction/Cancel.jsx create mode 100644 webapp/src/components/Game/GameAction/Create.jsx create mode 100644 webapp/src/components/Game/GameAction/Reject.jsx rename webapp/src/components/{Board/index.css => Game/GameBoard.css} (100%) rename webapp/src/components/{Board/index.jsx => Game/GameBoard.jsx} (97%) delete mode 100644 webapp/src/components/Game/Reject.jsx diff --git a/webapp/src/components/Game/GameAction.css b/webapp/src/components/Game/GameAction.css new file mode 100644 index 0000000..0e84cf4 --- /dev/null +++ b/webapp/src/components/Game/GameAction.css @@ -0,0 +1,73 @@ +.action-panel { + margin-bottom: 10px; + /* background-color: lightgrey; */ + width: 100%; + /* padding-top: 8px; + padding-bottom: 8px; */ + color: black; + padding-left: -10px; + /* */ + + margin-left: 10px; + border: 0.5px dotted lightslategray; +} + +.game-action { + width:fit-content; + padding: 8px; + padding-left: 15px; + padding-right: 15px; + border-radius: 10px; + border: 0.5px solid darkgrey; + margin: 2px; +} + +.game-action.create:hover { + background-color:#00b0ff60; +} + +.game-action.create:active { + background-color:#00b0ffa0; +} + +.game-action.cancel:hover, +.game-action.reject:hover { + background-color:#ff000030 +} + +.game-action.cancel:active, +.game-action.reject:active { + background-color:#ff000080 +} + +.game-action.accept:hover { + background-color: #00af0030; +} + +.game-action.accept:active { + background-color:#00af0080; +} + +/* .game-header a { + color:darkgrey; + text-decoration: none; + transition: .25s ease; + margin-left: 5px; + margin-right: 5px; +} + +.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.jsx b/webapp/src/components/Game/GameAction.jsx new file mode 100644 index 0000000..6c51a42 --- /dev/null +++ b/webapp/src/components/Game/GameAction.jsx @@ -0,0 +1,24 @@ +import './GameAction.css'; +import React from 'react'; + +import Create from './GameAction/Create' +import Reject from './GameAction/Reject' +import Cancel from './GameAction/Cancel' +import Accept from './GameAction/Accept' +import { AppContext } from '../../context/app' + +export default function GameAction() { + const [ctx, dispatchCtx] = React.useContext(AppContext) + + return ( +
+
+ + + + +
+ {/* {isProposalPath && } */} +
+ ) +} \ No newline at end of file diff --git a/webapp/src/components/Game/GameAction/Accept.jsx b/webapp/src/components/Game/GameAction/Accept.jsx new file mode 100644 index 0000000..17c7249 --- /dev/null +++ b/webapp/src/components/Game/GameAction/Accept.jsx @@ -0,0 +1,6 @@ +import React from 'react'; + +export default function Accept() { + + return +} diff --git a/webapp/src/components/Game/GameAction/Cancel.jsx b/webapp/src/components/Game/GameAction/Cancel.jsx new file mode 100644 index 0000000..9470172 --- /dev/null +++ b/webapp/src/components/Game/GameAction/Cancel.jsx @@ -0,0 +1,6 @@ +import React from 'react'; + +export default function Cancel() { + + return +} diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx new file mode 100644 index 0000000..e0383d8 --- /dev/null +++ b/webapp/src/components/Game/GameAction/Create.jsx @@ -0,0 +1,22 @@ +import React/*, {useState}*/ from 'react'; + +export default function Create() { + // const [pending, setPending] = useState([]) + + // for (const [key, value] of Object.entries(pending)) + // console.log("pending ", key, value); + + // 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 + // ] + // ) + // } + + // return + return +} diff --git a/webapp/src/components/Game/GameAction/Reject.jsx b/webapp/src/components/Game/GameAction/Reject.jsx new file mode 100644 index 0000000..9797197 --- /dev/null +++ b/webapp/src/components/Game/GameAction/Reject.jsx @@ -0,0 +1,6 @@ +import React from 'react'; + +export default function Reject() { + + return +} diff --git a/webapp/src/components/Board/index.css b/webapp/src/components/Game/GameBoard.css similarity index 100% rename from webapp/src/components/Board/index.css rename to webapp/src/components/Game/GameBoard.css diff --git a/webapp/src/components/Board/index.jsx b/webapp/src/components/Game/GameBoard.jsx similarity index 97% rename from webapp/src/components/Board/index.jsx rename to webapp/src/components/Game/GameBoard.jsx index f3e2e86..32ec995 100644 --- a/webapp/src/components/Board/index.jsx +++ b/webapp/src/components/Game/GameBoard.jsx @@ -1,7 +1,7 @@ -import './index.css'; +import './GameBoard.css'; import React from 'react'; -import { WhiteStone, BlackStone } from '../Game/Stone' +import { WhiteStone, BlackStone } from './Stone' export default function Board() { diff --git a/webapp/src/components/Game/Reject.jsx b/webapp/src/components/Game/Reject.jsx deleted file mode 100644 index 6b59e81..0000000 --- a/webapp/src/components/Game/Reject.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React, {useState} from 'react'; - -export default function Reject({uuid}) { - const [pending, setPending] = useState([]) - - for (const [key, value] of Object.entries(pending)) - console.log("pending ", key, value); - - 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 - ] - ) - } - - return -} diff --git a/webapp/src/components/Game/index.jsx b/webapp/src/components/Game/index.jsx index d5860db..ca8af4f 100644 --- a/webapp/src/components/Game/index.jsx +++ b/webapp/src/components/Game/index.jsx @@ -2,7 +2,8 @@ import './index.css'; import React from 'react'; import GameHeader from './GameHeader' import GameSelector from './GameSelector' -import Board from '../Board' +import GameAction from './GameAction' +import GameBoard from './GameBoard' // import { AppData } from "../../context/data" @@ -16,7 +17,8 @@ export default function Game() {
- + +