front: wave indication for data fetching
This commit is contained in:
parent
f9f5c29438
commit
35802ea6ad
@ -29,15 +29,5 @@
|
||||
<body>
|
||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
||||
<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>
|
||||
</html>
|
||||
|
||||
@ -8,7 +8,7 @@ import {
|
||||
|
||||
import Header from "./components/Header"
|
||||
import Leaderboard from "./components/Leaderboard"
|
||||
import GameProposal from "./components/GameProposal"
|
||||
import Game from "./components/Game"
|
||||
|
||||
function App() {
|
||||
|
||||
@ -18,7 +18,7 @@ function App() {
|
||||
<div className="Container">
|
||||
<Routes>
|
||||
<Route path="/leaderboard" element={<Leaderboard/>} />
|
||||
<Route path="/gameproposal" element={<GameProposal/>} />
|
||||
<Route path="/game" element={<Game/>} />
|
||||
</Routes>
|
||||
</div>
|
||||
</BrowserRouter>
|
||||
|
||||
@ -5,9 +5,8 @@ import Reject from './Reject'
|
||||
import Cancel from './GameProposalCancel'
|
||||
|
||||
import { AppData } from "../../context/data"
|
||||
//import { AppContext } from "../../context/app"
|
||||
|
||||
export default function GameProposal() {
|
||||
export default function Game() {
|
||||
const [data] = React.useContext(AppData)
|
||||
|
||||
if (data.games == null)
|
||||
@ -4,6 +4,34 @@ h1 {
|
||||
|
||||
.OnlineTgl {
|
||||
transform: scale(.25, .25);
|
||||
width: 32px;
|
||||
height: 16px;
|
||||
width: 1px;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,19 +1,46 @@
|
||||
import './index.css';
|
||||
import './wave.css'
|
||||
import React from "react"
|
||||
import { Link } from "react-router-dom";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import OfflineToggle from '../OnlineTgl';
|
||||
import { AppData } from "../../context/data"
|
||||
|
||||
export default function Header() {
|
||||
const [data] = React.useContext(AppData)
|
||||
|
||||
return <div>
|
||||
<h1>CordaCheckers <OfflineToggle/> </h1>
|
||||
|
||||
<h1>
|
||||
CordaCheckers<OfflineToggle />
|
||||
</h1>
|
||||
<nav>
|
||||
<Link to="/leaderboard">Leaderboard</Link> {"| "}
|
||||
<Link to="/gameproposal">Game Proposal</Link> {"| "}
|
||||
<Link to="/game">Active Games</Link> {"| "}
|
||||
<Link to="/archive">Archive</Link> {"| "}
|
||||
<Link to="about">About</Link>
|
||||
<NavLink to="/leaderboard" className={data.leaderboardFetching && "woble"} >
|
||||
<span>L</span>
|
||||
<span>e</span>
|
||||
<span>a</span>
|
||||
<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>
|
||||
</div>
|
||||
}
|
||||
46
webapp/src/components/Header/wave.css
Normal file
46
webapp/src/components/Header/wave.css
Normal 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;
|
||||
}
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
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:
|
||||
console.warn("Unknown action.type", action)
|
||||
@ -8,5 +19,7 @@ export const reducer = (state, action) => {
|
||||
}
|
||||
|
||||
export const initialState = {
|
||||
myState: false,
|
||||
header: {
|
||||
selected: null
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,13 +9,13 @@ import { AppContextProvider } from "./context/app"
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(
|
||||
|
||||
//<React.StrictMode>
|
||||
<React.StrictMode>
|
||||
<AppContextProvider>
|
||||
<AppDataProvider>
|
||||
<App />
|
||||
</AppDataProvider>
|
||||
</AppContextProvider>
|
||||
//</React.StrictMode>
|
||||
</React.StrictMode>
|
||||
);
|
||||
|
||||
// If you want to start measuring performance in your app, pass a function
|
||||
|
||||
Loading…
Reference in New Issue
Block a user