diff --git a/webapp/public/index.html b/webapp/public/index.html index aa069f2..427f402 100644 --- a/webapp/public/index.html +++ b/webapp/public/index.html @@ -29,15 +29,5 @@
- diff --git a/webapp/src/App.js b/webapp/src/App.js index 8b4cb95..c0a2458 100644 --- a/webapp/src/App.js +++ b/webapp/src/App.js @@ -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() {
} /> - } /> + } />
diff --git a/webapp/src/components/GameProposal/GameProposalAction.js b/webapp/src/components/Game/GameProposalAction.js similarity index 100% rename from webapp/src/components/GameProposal/GameProposalAction.js rename to webapp/src/components/Game/GameProposalAction.js diff --git a/webapp/src/components/GameProposal/GameProposalCancel.js b/webapp/src/components/Game/GameProposalCancel.js similarity index 100% rename from webapp/src/components/GameProposal/GameProposalCancel.js rename to webapp/src/components/Game/GameProposalCancel.js diff --git a/webapp/src/components/GameProposal/Reject.jsx b/webapp/src/components/Game/Reject.jsx similarity index 100% rename from webapp/src/components/GameProposal/Reject.jsx rename to webapp/src/components/Game/Reject.jsx diff --git a/webapp/src/components/GameProposal/index.css b/webapp/src/components/Game/index.css similarity index 100% rename from webapp/src/components/GameProposal/index.css rename to webapp/src/components/Game/index.css diff --git a/webapp/src/components/GameProposal/index.jsx b/webapp/src/components/Game/index.jsx similarity index 95% rename from webapp/src/components/GameProposal/index.jsx rename to webapp/src/components/Game/index.jsx index 01bfaa8..0d71394 100644 --- a/webapp/src/components/GameProposal/index.jsx +++ b/webapp/src/components/Game/index.jsx @@ -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) diff --git a/webapp/src/components/Header/index.css b/webapp/src/components/Header/index.css index 2f24128..ad64d62 100644 --- a/webapp/src/components/Header/index.css +++ b/webapp/src/components/Header/index.css @@ -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; + } } diff --git a/webapp/src/components/Header/index.jsx b/webapp/src/components/Header/index.jsx index 817d3a4..8b20817 100644 --- a/webapp/src/components/Header/index.jsx +++ b/webapp/src/components/Header/index.jsx @@ -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
-

CordaCheckers

- +

+ CordaCheckers +

-
-} \ No newline at end of file + +} diff --git a/webapp/src/components/Header/wave.css b/webapp/src/components/Header/wave.css new file mode 100644 index 0000000..43ddd33 --- /dev/null +++ b/webapp/src/components/Header/wave.css @@ -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; + } + \ No newline at end of file diff --git a/webapp/src/context/app/reducer.js b/webapp/src/context/app/reducer.js index 240ba51..87afb5c 100644 --- a/webapp/src/context/app/reducer.js +++ b/webapp/src/context/app/reducer.js @@ -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 + } } diff --git a/webapp/src/index.js b/webapp/src/index.js index 58da36a..d65c14e 100644 --- a/webapp/src/index.js +++ b/webapp/src/index.js @@ -9,13 +9,13 @@ import { AppContextProvider } from "./context/app" const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - // - - - - - - // + + + + + + + ); // If you want to start measuring performance in your app, pass a function