diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx index bbcc817..7f1efd7 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() @@ -15,10 +16,13 @@ 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) }); } @@ -27,7 +31,7 @@ export default function Create() { className={'game-action create' + (ctx.isEnabled ? ' enabled' : ' disabled')} onClick={onClick} > - Create + ) } @@ -64,8 +68,11 @@ function Definitions() { hasCurrentUser, isEnabled, + fetching: ctx.newGame.fetching, + setFetching: (status) => { dispatchCtx({ update: "newGame", fetching: status }) }, + get_GameProposalRequest, - clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) } + clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) }, } } 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/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/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.jsx b/webapp/src/components/Header.jsx new file mode 100644 index 0000000..71d4b9f --- /dev/null +++ b/webapp/src/components/Header.jsx @@ -0,0 +1,30 @@ +import './Header.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) + + return ( +
+

+ CordaCheckers +

+ + +
+ ) +} diff --git a/webapp/src/components/Header/index.jsx b/webapp/src/components/Header/index.jsx deleted file mode 100644 index b255958..0000000 --- a/webapp/src/components/Header/index.jsx +++ /dev/null @@ -1,43 +0,0 @@ -import './index.css'; -import './wave.css' -import React from "react" -import { NavLink } from "react-router-dom"; -import OnlineToggle from '../OnlineTgl'; -import { AppData } from "../../context/data" - -export default function Header() { - const [data] = React.useContext(AppData) - - return ( -
-

- CordaCheckers -

- - -
- ) -} diff --git a/webapp/src/components/Header/wave.css b/webapp/src/components/Header/wave.css deleted file mode 100644 index f720945..0000000 --- a/webapp/src/components/Header/wave.css +++ /dev/null @@ -1,48 +0,0 @@ -/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */ - - .woble { - display: flex; - 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 { - 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 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/context/app/reducer.js b/webapp/src/context/app/reducer.js index 08f6a10..bb53b1d 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: '', + fetching: false, }, }