diff --git a/webapp/src/App.js b/webapp/src/App.js index d4d5288..25c4d48 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -1,11 +1,11 @@ import './App.css'; import React from 'react'; -import { BrowserRouter, Routes, Route, NavLink } from 'react-router-dom'; +import { BrowserRouter, Routes, Route, NavLink, Navigate } from 'react-router-dom'; import OnlineToggle from './components/OnlineToggle'; import Wobler from './components/Wobler'; -import About from "./components/About" +import About from "./container/About" import Games from './container/Games'; import Leaderboard from './container/Leaderboard'; @@ -41,10 +41,11 @@ export default function App() {
- } /> } /> } /> } /> + } + /> ) diff --git a/webapp/src/components/About/index.css b/webapp/src/components/About/index.css deleted file mode 100644 index cf658c6..0000000 --- a/webapp/src/components/About/index.css +++ /dev/null @@ -1,5 +0,0 @@ -.Leaderboard { - display: flex; - justify-content: center; - align-items: center; -} diff --git a/webapp/src/components/About/index.jsx b/webapp/src/components/About/index.jsx deleted file mode 100644 index 76f962f..0000000 --- a/webapp/src/components/About/index.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react" -import './index.css'; - -export default function Leaderboard() { - - return
- A simple american checkers game
-
-}; diff --git a/webapp/src/components/Game/GameAction/Create.jsx b/webapp/src/components/Game/GameAction/Create.jsx deleted file mode 100644 index 5627077..0000000 --- a/webapp/src/components/Game/GameAction/Create.jsx +++ /dev/null @@ -1,111 +0,0 @@ -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() - - const onClick = () => { - if (!ctx.hasPlayers) - return alert("Choose both black and white players"); - - if (!ctx.hasCurrentUser) - return alert("You must be one of the players"); - - if (ctx.fetching === true) - return - - const request = ctx.getGameProposalRequest() - - 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) - }); - } - - return ( - - ) -} - -function Definitions() { - const [ctx, dispatchCtx] = React.useContext(AppContext) - const [data] = React.useContext(AppData) - - const isCurrentUser = data.isCurrentUser - const whitePlayerName = ctx.newGame.whitePlayer - const blackPlayerName = ctx.newGame.blackPlayer - - const hasPlayers = whitePlayerName !== blackPlayerName - && whitePlayerName !== '' - && blackPlayerName !== '' - - const hasCurrentUser = isCurrentUser(whitePlayerName) || isCurrentUser(blackPlayerName) - - const getGameProposalRequest = () => { - const [opponentName, opponentColor] = getOpponent(isCurrentUser, whitePlayerName, blackPlayerName) - - return { - opponentName, - opponentColor, - board: null, - message: ctx.newGame.message - } - } - - return { - hasPlayers, - hasCurrentUser, - enabled: hasPlayers && hasCurrentUser, - - fetching: ctx.newGame.fetching, - setFetching: (status) => { dispatchCtx({ update: "newGame", fetching: status }) }, - - getGameProposalRequest, - clear_Message2Opponent: () => { dispatchCtx({ update: "newGame", message: '' }) }, - } -} - -function getOpponent(isCurrentUser, whitePlayerName, blackPlayerName) { - if (isCurrentUser(whitePlayerName)) { - return [blackPlayerName, BLACK()] - } - - if (isCurrentUser(blackPlayerName)) { - return [whitePlayerName, WHITE()] - } - - return ['', ''] -} - -async function postData(url = "", data = {}) { - console.log("POST", url, data) - - const response = await fetch(url, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify(data), // body data type must match "Content-Type" header - }); - - if (response.ok) - return response.json()// parses JSON response into native JavaScript objects - - console.wrn(response) - return {} -} diff --git a/webapp/src/components/Game/Message2Opponent.css b/webapp/src/components/Game/Message2Opponent.css deleted file mode 100644 index cb2abb7..0000000 --- a/webapp/src/components/Game/Message2Opponent.css +++ /dev/null @@ -1,3 +0,0 @@ -.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 deleted file mode 100644 index f341afe..0000000 --- a/webapp/src/components/Game/Message2Opponent.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import './Message2Opponent.css' -import React from 'react' - -import { AppContext } from '../../context/app' - -export default function Message2Opponent() { - const [ctx, dispatchCtx] = React.useContext(AppContext) - - const setMessage = (message) => { - dispatchCtx({ update: "newGame", message }) - } - - return ( -
- setMessage(e.target.value)} - /> -
- ) -} diff --git a/webapp/src/container/About.css b/webapp/src/container/About.css new file mode 100644 index 0000000..64fdca5 --- /dev/null +++ b/webapp/src/container/About.css @@ -0,0 +1,8 @@ +.About { + display: block; + margin-left: auto; + margin-right: auto; + + margin-top: 60px; + width: 500px; +} \ No newline at end of file diff --git a/webapp/src/container/About.jsx b/webapp/src/container/About.jsx new file mode 100644 index 0000000..fcb919b --- /dev/null +++ b/webapp/src/container/About.jsx @@ -0,0 +1,16 @@ +import React from "react" +import './About.css'; + +export default function Leaderboard() { + + return
+ A simple American checkers game, where rules are enforced by Corda Contracts. +

+ Click online-offline toggle to manually initiate fetching of fresh game states from server. By default, an update happens every 30 sec for Games and every 5 min for the Leaderboard. +

+ The wobly-dancing letters inside navigation elements and command buttons are used as an indication of request processing. Currently, game state update is a lengthy process and usually takes ~20 sec to finish. +
Hint: You can have multiple game state update requests running at the same time, so there is no particular reason to wait for one to finish before initiating another. +

+ Please pay attention to the text entry field below the checkers board. This is not a live chat with an opponent, but rather a 'message' that will become a part of the next game state. So be sure to type your message before submitting a new game state to the system. +
+}; diff --git a/webapp/src/container/Games.jsx b/webapp/src/container/Games.jsx index 205274b..a93760d 100644 --- a/webapp/src/container/Games.jsx +++ b/webapp/src/container/Games.jsx @@ -1,6 +1,6 @@ import React, { useContext, useEffect } from 'react'; import { GamesStateContext, GamesGuideContext } from '../context/games'; -import { Routes, Route, NavLink } from 'react-router-dom'; +import { Routes, Route, NavLink, Navigate } from 'react-router-dom'; import NewGame from './games/NewGame'; import { GameProposalSelector, ActiveGameSelector, GameArchiveSelector } from './games/GameSelector'; @@ -82,6 +82,8 @@ function ViewProvider({ dispatchGuide, players }) { dispatchGuide({ type: 'selectedUUID', archive: uuid })} /> } /> + } /> + )