djmil/corda-checkers
djmil/corda-checkers
1
0
Fork 0
Code Issues 5 Pull Requests Packages Projects Releases Wiki Activity

front: wave indication for data fetching

Browse Source
This commit is contained in:
djmil 2023-10-20 00:40:05 +02:00
parent f9f5c29438
commit 35802ea6ad
12 changed files with 138 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
webapp/public/index.html
View File

@ -29,15 +29,5 @@
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div> <div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body> </body>
</html> </html>

4
webapp/src/App.js
View File

@ -8,7 +8,7 @@ import {
import Header from "./components/Header" import Header from "./components/Header"
import Leaderboard from "./components/Leaderboard" import Leaderboard from "./components/Leaderboard"
import GameProposal from "./components/GameProposal" import Game from "./components/Game"
function App() { function App() {
@ -18,7 +18,7 @@ function App() {
<div className="Container"> <div className="Container">
<Routes> <Routes>
<Route path="/leaderboard" element={<Leaderboard/>} /> <Route path="/leaderboard" element={<Leaderboard/>} />
<Route path="/gameproposal" element={<GameProposal/>} /> <Route path="/game" element={<Game/>} />
</Routes> </Routes>
</div> </div>
</BrowserRouter> </BrowserRouter>

0
webapp/src/components/GameProposal/GameProposalAction.js → webapp/src/components/Game/GameProposalAction.js
View File

0
webapp/src/components/GameProposal/GameProposalCancel.js → webapp/src/components/Game/GameProposalCancel.js
View File

0
webapp/src/components/GameProposal/Reject.jsx → webapp/src/components/Game/Reject.jsx
View File

0
webapp/src/components/GameProposal/index.css → webapp/src/components/Game/index.css
View File

3
webapp/src/components/GameProposal/index.jsx → webapp/src/components/Game/index.jsx
View File

@ -5,9 +5,8 @@ import Reject from './Reject'
import Cancel from './GameProposalCancel' import Cancel from './GameProposalCancel'
import { AppData } from "../../context/data" import { AppData } from "../../context/data"
//import { AppContext } from "../../context/app"
export default function GameProposal() { export default function Game() {
const [data] = React.useContext(AppData) const [data] = React.useContext(AppData)
if (data.games == null) if (data.games == null)

32
webapp/src/components/Header/index.css
View File

@ -4,6 +4,34 @@ h1 {
.OnlineTgl { .OnlineTgl {
transform: scale(.25, .25); transform: scale(.25, .25);
width: 32px; width: 1px;
height: 16px; height: 1px;
}
nav {
padding: auto;
align-items: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
a {
/* color: #CCC; */
opacity: .3;
text-decoration: none;
transition: .25s ease;
margin-left: 30px;
margin-right: 30px;
}
.active {
opacity: 1;
box-shadow: 0 2px 0 0 currentcolor;
}
a:hover:not(.active) {
/* color: #000; */
opacity: .5;
}
} }

43
webapp/src/components/Header/index.jsx
View File

@ -1,19 +1,46 @@
import './index.css'; import './index.css';
import './wave.css'
import React from "react" import React from "react"
import { Link } from "react-router-dom"; import { NavLink } from "react-router-dom";
import OfflineToggle from '../OnlineTgl'; import OfflineToggle from '../OnlineTgl';
import { AppData } from "../../context/data"
export default function Header() { export default function Header() {
const [data] = React.useContext(AppData)
return <div> return <div>
<h1>CordaCheckers <OfflineToggle/> </h1> <h1>
CordaCheckers<OfflineToggle />
</h1>
<nav> <nav>
<Link to="/leaderboard">Leaderboard</Link> {"| "} <NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"} >
<Link to="/gameproposal">Game Proposal</Link> {"| "} <span>L</span>
<Link to="/game">Active Games</Link> {"| "} <span>e</span>
<Link to="/archive">Archive</Link> {"| "} <span>a</span>
<Link to="about">About</Link> <span>d</span>
<span>e</span>
<span>r</span>
<span>b</span>
<span>o</span>
<span>a</span>
<span>r</span>
<span>d</span>
</NavLink>
<NavLink to="/game" className={data.gamesFetching && "woble"}>
<span>G</span>
<span>a</span>
<span>m</span>
<span>e</span>
</NavLink>
<NavLink to="/about" className={""}>
<span>A</span>
<span>b</span>
<span>o</span>
<span>u</span>
<span>t</span>
</NavLink>
</nav> </nav>
</div> </div>
} }

46
webapp/src/components/Header/wave.css Normal file
View File

@ -0,0 +1,46 @@
/* https://blog.karimould.dev/hover-letter-wave-effect-in-css */
.woble {
display: flex;
cursor: pointer;
/* 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;
}

17
webapp/src/context/app/reducer.js
View File

@ -1,5 +1,16 @@
export const reducer = (state, action) => { export const reducer = (state, action) => {
switch (action.type) { switch (action.set) {
case "header":
if (action.selected)
return {
...state,
header: {
...state.header,
selected: action.selected
}
}
break;
default: default:
console.warn("Unknown action.type", action) console.warn("Unknown action.type", action)
@ -8,5 +19,7 @@ export const reducer = (state, action) => {
} }
export const initialState = { export const initialState = {
myState: false, header: {
selected: null
}
} }

4
webapp/src/index.js
View File

@ -9,13 +9,13 @@ import { AppContextProvider } from "./context/app"
const root = ReactDOM.createRoot(document.getElementById('root')); const root = ReactDOM.createRoot(document.getElementById('root'));
root.render( root.render(
//<React.StrictMode> <React.StrictMode>
<AppContextProvider> <AppContextProvider>
<AppDataProvider> <AppDataProvider>
<App /> <App />
</AppDataProvider> </AppDataProvider>
</AppContextProvider> </AppContextProvider>
//</React.StrictMode> </React.StrictMode>
); );
// If you want to start measuring performance in your app, pass a function // If you want to start measuring performance in your app, pass a function