From 93867c7d794dcbe515b6f32d356c1b6d666805c4 Mon Sep 17 00:00:00 2001 From: djmil Date: Tue, 31 Oct 2023 09:59:14 +0100 Subject: [PATCH 1/7] mock implementaion --- webapp/src/components/Game.css | 5 +++++ webapp/src/components/Game.jsx | 4 +++- webapp/src/components/Game/GameMessage.css | 6 ++++++ webapp/src/components/Game/GameMessage.jsx | 15 +++++++++++++++ 4 files changed, 29 insertions(+), 1 deletion(-) create mode 100644 webapp/src/components/Game/GameMessage.css create mode 100644 webapp/src/components/Game/GameMessage.jsx diff --git a/webapp/src/components/Game.css b/webapp/src/components/Game.css index 458f0c4..e15501b 100644 --- a/webapp/src/components/Game.css +++ b/webapp/src/components/Game.css @@ -18,4 +18,9 @@ .game .right-side { float: left; width: 55%; + + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; } \ No newline at end of file diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/Game.jsx index b72bcfc..d4878f2 100644 --- a/webapp/src/components/Game.jsx +++ b/webapp/src/components/Game.jsx @@ -4,7 +4,8 @@ import GameView from './Game/GameView' import GameSelector from './Game/GameSelector' import GameAction from './Game/GameAction' import GameBoard from './Game/GameBoard' -import NewGame from './Game/NewGame'; +import NewGame from './Game/NewGame' +import GameMessage from './Game/GameMessage' export default function Game() { @@ -17,6 +18,7 @@ export default function Game() {
+
diff --git a/webapp/src/components/Game/GameMessage.css b/webapp/src/components/Game/GameMessage.css new file mode 100644 index 0000000..b8871b8 --- /dev/null +++ b/webapp/src/components/Game/GameMessage.css @@ -0,0 +1,6 @@ +.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 new file mode 100644 index 0000000..aad2d4c --- /dev/null +++ b/webapp/src/components/Game/GameMessage.jsx @@ -0,0 +1,15 @@ +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 +
+ ) +} From 1cf762254c7a711912201491ab91744b96cb9054 Mon Sep 17 00:00:00 2001 From: djmil Date: Tue, 31 Oct 2023 10:16:35 +0100 Subject: [PATCH 2/7] mock implementstion --- webapp/src/components/Game.jsx | 2 ++ webapp/src/components/Game/Message2Opponent.css | 6 ++++++ webapp/src/components/Game/Message2Opponent.jsx | 15 +++++++++++++++ 3 files changed, 23 insertions(+) create mode 100644 webapp/src/components/Game/Message2Opponent.css create mode 100644 webapp/src/components/Game/Message2Opponent.jsx diff --git a/webapp/src/components/Game.jsx b/webapp/src/components/Game.jsx index d4878f2..e4d49c1 100644 --- a/webapp/src/components/Game.jsx +++ b/webapp/src/components/Game.jsx @@ -6,6 +6,7 @@ import GameAction from './Game/GameAction' import GameBoard from './Game/GameBoard' import NewGame from './Game/NewGame' import GameMessage from './Game/GameMessage' +import Message2Opponent from './Game/Message2Opponent' export default function Game() { @@ -20,6 +21,7 @@ export default function Game() { + ) diff --git a/webapp/src/components/Game/Message2Opponent.css b/webapp/src/components/Game/Message2Opponent.css new file mode 100644 index 0000000..6110b41 --- /dev/null +++ b/webapp/src/components/Game/Message2Opponent.css @@ -0,0 +1,6 @@ +.message2opponent { + border-radius: 3px; + border-color: lightgray; + background-color:violet; + width: 70%; +} \ No newline at end of file diff --git a/webapp/src/components/Game/Message2Opponent.jsx b/webapp/src/components/Game/Message2Opponent.jsx new file mode 100644 index 0000000..4bda210 --- /dev/null +++ b/webapp/src/components/Game/Message2Opponent.jsx @@ -0,0 +1,15 @@ +import './Message2Opponent.css' +import React from 'react' + +import { AppContext } from '../../context/app' + +export default function Message2Opponent() { + + const [ctx] = React.useContext(AppContext) + + return ( +
+ Message to opponent +
+ ) +} From 262fa0636d332b3b292337317a3191e0ee8827c4 Mon Sep 17 00:00:00 2001 From: djmil Date: Tue, 31 Oct 2023 13:17:41 +0100 Subject: [PATCH 3/7] initial implementation --- webapp/src/components/Game/GameAction/Create.jsx | 10 ++++++---- webapp/src/components/Game/Message2Opponent.css | 7 ++----- webapp/src/components/Game/Message2Opponent.jsx | 12 ++++++++++-- webapp/src/context/app/reducer.js | 1 + 4 files changed, 19 insertions(+), 11 deletions(-) diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx index c78fff0..bbcc817 100644 --- a/webapp/src/components/Game/GameAction/Create.jsx +++ b/webapp/src/components/Game/GameAction/Create.jsx @@ -17,7 +17,8 @@ export default function Create() { postData("/api/gameproposal", request) .then((responce) => { - console.log("responce", responce); // JSON data parsed by `data.json()` call + console.log("responce", responce) // JSON data parsed by `data.json()` call + ctx.clear_Message2Opponent() }); } @@ -32,7 +33,7 @@ export default function Create() { } function Definitions() { - const [ctx] = React.useContext(AppContext) + const [ctx, dispatchCtx] = React.useContext(AppContext) const [data] = React.useContext(AppData) const isCurrentUser = data.isCurrentUser @@ -54,7 +55,7 @@ function Definitions() { opponentName, opponentColor, board: null, - message: "let's play a game" + message: ctx.newGame.message } } @@ -64,6 +65,7 @@ function Definitions() { isEnabled, get_GameProposalRequest, + clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) } } } @@ -81,7 +83,7 @@ function get_Opponent(isCurrentUser, whitePlayerName, blackPlayerName) { async function postData(url = "", data = {}) { console.log("POST", url, data) - + const response = await fetch(url, { method: "POST", headers: { diff --git a/webapp/src/components/Game/Message2Opponent.css b/webapp/src/components/Game/Message2Opponent.css index 6110b41..cb2abb7 100644 --- a/webapp/src/components/Game/Message2Opponent.css +++ b/webapp/src/components/Game/Message2Opponent.css @@ -1,6 +1,3 @@ -.message2opponent { - border-radius: 3px; - border-color: lightgray; - background-color:violet; - width: 70%; +.message2opponent input{ + width: 270px; } \ No newline at end of file diff --git a/webapp/src/components/Game/Message2Opponent.jsx b/webapp/src/components/Game/Message2Opponent.jsx index 4bda210..f341afe 100644 --- a/webapp/src/components/Game/Message2Opponent.jsx +++ b/webapp/src/components/Game/Message2Opponent.jsx @@ -4,12 +4,20 @@ import React from 'react' import { AppContext } from '../../context/app' export default function Message2Opponent() { + const [ctx, dispatchCtx] = React.useContext(AppContext) - const [ctx] = React.useContext(AppContext) + const setMessage = (message) => { + dispatchCtx({ update: "newGame", message }) + } return (
- Message to opponent + setMessage(e.target.value)} + />
) } diff --git a/webapp/src/context/app/reducer.js b/webapp/src/context/app/reducer.js index b68ecc6..08f6a10 100644 --- a/webapp/src/context/app/reducer.js +++ b/webapp/src/context/app/reducer.js @@ -24,6 +24,7 @@ export const initialState = { newGame: { whitePlayer: '', blackPlayer: '', + message: '', }, } From 3eafcf302f259f75fe3a67758efe489af57b321e Mon Sep 17 00:00:00 2001 From: djmil Date: Tue, 31 Oct 2023 17:29:01 +0100 Subject: [PATCH 4/7] minor cleanup --- webapp/src/components/Game/GameMessage.jsx | 4 ++-- webapp/src/components/{Header/index.css => Header.css} | 0 webapp/src/components/{Header/index.jsx => Header.jsx} | 8 ++++---- webapp/src/components/{Header/wave.css => woble.css} | 7 ------- 4 files changed, 6 insertions(+), 13 deletions(-) rename webapp/src/components/{Header/index.css => Header.css} (100%) rename webapp/src/components/{Header/index.jsx => Header.jsx} (87%) rename webapp/src/components/{Header/wave.css => woble.css} (77%) diff --git a/webapp/src/components/Game/GameMessage.jsx b/webapp/src/components/Game/GameMessage.jsx index aad2d4c..328b2ba 100644 --- a/webapp/src/components/Game/GameMessage.jsx +++ b/webapp/src/components/Game/GameMessage.jsx @@ -1,11 +1,11 @@ import './GameMessage.css' import React from 'react' -import { AppContext } from '../../context/app' +// import { AppContext } from '../../context/app' export default function GameMessage() { - const [ctx] = React.useContext(AppContext) + // const [ctx] = React.useContext(AppContext) return (
diff --git a/webapp/src/components/Header/index.css b/webapp/src/components/Header.css similarity index 100% rename from webapp/src/components/Header/index.css rename to webapp/src/components/Header.css diff --git a/webapp/src/components/Header/index.jsx b/webapp/src/components/Header.jsx similarity index 87% rename from webapp/src/components/Header/index.jsx rename to webapp/src/components/Header.jsx index b255958..a785ebd 100644 --- a/webapp/src/components/Header/index.jsx +++ b/webapp/src/components/Header.jsx @@ -1,9 +1,9 @@ -import './index.css'; -import './wave.css' +import './Header.css'; +import './woble.css' import React from "react" import { NavLink } from "react-router-dom"; -import OnlineToggle from '../OnlineTgl'; -import { AppData } from "../../context/data" +import OnlineToggle from './OnlineTgl'; +import { AppData } from "../context/data" export default function Header() { const [data] = React.useContext(AppData) diff --git a/webapp/src/components/Header/wave.css b/webapp/src/components/woble.css similarity index 77% rename from webapp/src/components/Header/wave.css rename to webapp/src/components/woble.css index f720945..5844950 100644 --- a/webapp/src/components/Header/wave.css +++ b/webapp/src/components/woble.css @@ -5,13 +5,6 @@ cursor: pointer; justify-content: center; align-items: center; - /* text-transform: uppercase; */ - /* font-size: 1.5rem; */ - /* padding: 1rem 2rem; */ - /* background-color: black; */ - /* color: white; */ - /* border-radius: 100px; */ - /* gap: 1rem; */ } /* .wave > span { From c007aec06ec38b05233fe7d4b831ed1c301cf408 Mon Sep 17 00:00:00 2001 From: djmil Date: Tue, 31 Oct 2023 18:45:09 +0100 Subject: [PATCH 5/7] if fetching ? classname + woble --- .../src/components/Game/GameAction/Create.jsx | 21 ++++++++++++++++--- webapp/src/components/Game/GameSelector.jsx | 4 ++-- webapp/src/components/woble.css | 3 --- webapp/src/context/app/reducer.js | 1 + 4 files changed, 21 insertions(+), 8 deletions(-) diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx index bbcc817..34973ed 100644 --- a/webapp/src/components/Game/GameAction/Create.jsx +++ b/webapp/src/components/Game/GameAction/Create.jsx @@ -15,19 +15,31 @@ export default function Create() { const request = ctx.get_GameProposalRequest() + ctx.setFetching(true) + postData("/api/gameproposal", request) .then((responce) => { console.log("responce", responce) // JSON data parsed by `data.json()` call ctx.clear_Message2Opponent() + ctx.setFetching(false) }); } + console.log("ctx", ctx) return ( ) } @@ -64,8 +76,11 @@ function Definitions() { hasCurrentUser, isEnabled, + isFetching: ctx.newGame.isFetching, + setFetching: (status) => { console.log("setFetching: ", status); dispatchCtx({ update: "newGame", isFetching: status }) }, + get_GameProposalRequest, - clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) } + clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) }, } } diff --git a/webapp/src/components/Game/GameSelector.jsx b/webapp/src/components/Game/GameSelector.jsx index 944a75a..73c08f8 100644 --- a/webapp/src/components/Game/GameSelector.jsx +++ b/webapp/src/components/Game/GameSelector.jsx @@ -8,14 +8,14 @@ import Proposal from './GameSelector/GameProposal'; export default function GameSelector() { const [data] = React.useContext(AppData) - const [ctx, dispatchCtx] = React.useContext(AppContext) + 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) + // console.log("GameSelector appCtx", ctx) const onClick_proposal = (selectedGame) => { dispatchCtx({ component: "game-selector", selectedGameProposal: selectedGame }) diff --git a/webapp/src/components/woble.css b/webapp/src/components/woble.css index 5844950..93f818f 100644 --- a/webapp/src/components/woble.css +++ b/webapp/src/components/woble.css @@ -2,9 +2,6 @@ .woble { display: flex; - cursor: pointer; - justify-content: center; - align-items: center; } /* .wave > span { diff --git a/webapp/src/context/app/reducer.js b/webapp/src/context/app/reducer.js index 08f6a10..357e399 100644 --- a/webapp/src/context/app/reducer.js +++ b/webapp/src/context/app/reducer.js @@ -25,6 +25,7 @@ export const initialState = { whitePlayer: '', blackPlayer: '', message: '', + isFetching: false, }, } From 66acd217e33409d2d36a647c575dd7c80afb9e50 Mon Sep 17 00:00:00 2001 From: djmil Date: Tue, 31 Oct 2023 20:11:16 +0100 Subject: [PATCH 6/7] implementstion (#18) Reviewed-on: http://192.168.8.55:3000/HQLAx/CordaCheckers/pulls/18 --- webapp/src/components/Header.jsx | 23 ++++------------- webapp/src/components/Wobler.css | 42 ++++++++++++++++++++++++++++++++ webapp/src/components/Wobler.jsx | 14 +++++++++++ webapp/src/components/woble.css | 38 ----------------------------- 4 files changed, 61 insertions(+), 56 deletions(-) create mode 100644 webapp/src/components/Wobler.css create mode 100644 webapp/src/components/Wobler.jsx delete mode 100644 webapp/src/components/woble.css diff --git a/webapp/src/components/Header.jsx b/webapp/src/components/Header.jsx index a785ebd..71d4b9f 100644 --- a/webapp/src/components/Header.jsx +++ b/webapp/src/components/Header.jsx @@ -1,9 +1,9 @@ import './Header.css'; -import './woble.css' import React from "react" import { NavLink } from "react-router-dom"; import OnlineToggle from './OnlineTgl'; import { AppData } from "../context/data" +import Wobler from './Wobler'; export default function Header() { const [data] = React.useContext(AppData) @@ -18,24 +18,11 @@ export default function Header() { About - - G - a - m - e + + - - L - e - a - d - e - r - b - o - a - r - d + +
diff --git a/webapp/src/components/Wobler.css b/webapp/src/components/Wobler.css new file mode 100644 index 0000000..2b7f7eb --- /dev/null +++ b/webapp/src/components/Wobler.css @@ -0,0 +1,42 @@ +/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */ + +/* +.wave > span { + transform: rotate(-90deg); +} +*/ + +@keyframes wave { + 0% { + transform: scale(1); + } + + 50% { + transform: scale(1.1); + } + + 100% { + transform: scale(1) rotate(-5deg); + } +} + +.wobler.dance { + display: flex; + flex-direction: row; +} + +.wobler.dance span { + animation: wave 0.4s linear infinite; +} + +.wobler.dance span:nth-child(2) { + animation-delay: 0.1s; +} + +.wobler.dance span:nth-child(3) { + animation-delay: 0.2s; +} + +.wobler.dance span:nth-child(4) { + animation-delay: 0.3s; +} diff --git a/webapp/src/components/Wobler.jsx b/webapp/src/components/Wobler.jsx new file mode 100644 index 0000000..3d3358c --- /dev/null +++ b/webapp/src/components/Wobler.jsx @@ -0,0 +1,14 @@ +import './Wobler.css' +import React from 'react'; + +export default function Wobler({ text, dance }) { + const spannedMessage = Array.from(text).map((letter, idx) => { + return {letter} + }) + + return ( +
+ {spannedMessage} +
+ ) +} diff --git a/webapp/src/components/woble.css b/webapp/src/components/woble.css deleted file mode 100644 index 93f818f..0000000 --- a/webapp/src/components/woble.css +++ /dev/null @@ -1,38 +0,0 @@ -/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */ - - .woble { - display: flex; - } - - /* .wave > span { - transform: rotate(-90deg); - } */ - - @keyframes wave { - 0% { - transform: scale(1) /*rotate(-90deg)*/; - } - 50% { - transform: scale(1.1) /*rotate(-90deg)*/; - } - 100% { - transform: scale(1) rotate(-5deg); - } - } - - .woble span { - animation: wave 0.4s linear infinite; - } - - .woble span:nth-child(2) { - animation-delay: 0.1s; - } - - .woble span:nth-child(3) { - animation-delay: 0.2s; - } - - .woble span:nth-child(4) { - animation-delay: 0.3s; - } - \ No newline at end of file From 352919581e52e2c528d13075c771db170d5a11bf Mon Sep 17 00:00:00 2001 From: djmil Date: Tue, 31 Oct 2023 20:33:36 +0100 Subject: [PATCH 7/7] add wobler --- .../src/components/Game/GameAction/Create.jsx | 17 +++++------------ webapp/src/context/app/reducer.js | 2 +- 2 files changed, 6 insertions(+), 13 deletions(-) diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx index 34973ed..ec2fdc7 100644 --- a/webapp/src/components/Game/GameAction/Create.jsx +++ b/webapp/src/components/Game/GameAction/Create.jsx @@ -2,6 +2,7 @@ import React from 'react'; import { AppContext } from '../../../context/app' import { AppData } from '../../../context/data' import { WHITE, BLACK } from '../Stone' +import Wobler from '../../Wobler' export default function Create() { const ctx = Definitions() @@ -28,18 +29,10 @@ export default function Create() { console.log("ctx", ctx) return ( ) } @@ -76,8 +69,8 @@ function Definitions() { hasCurrentUser, isEnabled, - isFetching: ctx.newGame.isFetching, - setFetching: (status) => { console.log("setFetching: ", status); dispatchCtx({ update: "newGame", isFetching: status }) }, + fetching: ctx.newGame.fetching, + setFetching: (status) => { dispatchCtx({ update: "newGame", fetching: status }) }, get_GameProposalRequest, clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) }, diff --git a/webapp/src/context/app/reducer.js b/webapp/src/context/app/reducer.js index 357e399..bb53b1d 100644 --- a/webapp/src/context/app/reducer.js +++ b/webapp/src/context/app/reducer.js @@ -25,7 +25,7 @@ export const initialState = { whitePlayer: '', blackPlayer: '', message: '', - isFetching: false, + fetching: false, }, }