From 8e418021ae60bf4c0733c35937f0a3fc6eebab36 Mon Sep 17 00:00:00 2001 From: Mathias Wagner Date: Fri, 28 Feb 2025 18:38:24 +0100 Subject: [PATCH] Create Home --- client/src/App.jsx | 4 +++- client/src/common/styles/colors.sass | 6 +++++ client/src/common/styles/main.sass | 6 +++++ client/src/pages/Game/Game.jsx | 6 +++-- client/src/pages/Game/styles.sass | 11 ++------- client/src/pages/Home/Home.jsx | 18 +++++++++++++++ .../Home/components/ActionCard/ActionCard.jsx | 11 +++++++++ .../pages/Home/components/ActionCard/index.js | 1 + .../Home/components/ActionCard/styles.sass | 23 +++++++++++++++++++ client/src/pages/Home/index.js | 1 + client/src/pages/Home/styles.sass | 15 ++++++++++++ 11 files changed, 90 insertions(+), 12 deletions(-) create mode 100644 client/src/pages/Home/Home.jsx create mode 100644 client/src/pages/Home/components/ActionCard/ActionCard.jsx create mode 100644 client/src/pages/Home/components/ActionCard/index.js create mode 100644 client/src/pages/Home/components/ActionCard/styles.sass create mode 100644 client/src/pages/Home/index.js create mode 100644 client/src/pages/Home/styles.sass diff --git a/client/src/App.jsx b/client/src/App.jsx index 1426719..a7cb72a 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -3,6 +3,7 @@ import {useContext} from "react"; import {StateContext} from "@/common/contexts/StateContext"; import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; import {faMusic} from "@fortawesome/free-solid-svg-icons"; +import Home from "@/pages/Home"; const App = () => { const {currentState} = useContext(StateContext); @@ -14,7 +15,8 @@ const App = () => { - {currentState === "Home" && } + {currentState === "Home" && } + {currentState === "Game" && } ) } diff --git a/client/src/common/styles/colors.sass b/client/src/common/styles/colors.sass index e69de29..272028d 100644 --- a/client/src/common/styles/colors.sass +++ b/client/src/common/styles/colors.sass @@ -0,0 +1,6 @@ +$background: rgba(255, 255, 255, 0.14) +$border: rgba(255, 255, 255, 0.35) + +$white: #ECECEC + +$green: #26EE5E \ No newline at end of file diff --git a/client/src/common/styles/main.sass b/client/src/common/styles/main.sass index a996833..cfec2ed 100644 --- a/client/src/common/styles/main.sass +++ b/client/src/common/styles/main.sass @@ -15,6 +15,12 @@ body overflow: hidden position: relative +.glassy + background: $background + backdrop-filter: blur(10px) + border: 2px solid $border + border-radius: 0.8rem + ::-webkit-scrollbar width: 10px diff --git a/client/src/pages/Game/Game.jsx b/client/src/pages/Game/Game.jsx index 4971922..ae56947 100644 --- a/client/src/pages/Game/Game.jsx +++ b/client/src/pages/Game/Game.jsx @@ -2,6 +2,8 @@ import "./styles.sass"; import {StateContext} from "@/common/contexts/StateContext"; import {useContext, useState, useEffect, useRef} from "react"; import MusicSlider from "@/pages/Game/components/MusicSlider"; +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import {faMessage} from "@fortawesome/free-solid-svg-icons"; export const Game = () => { const {setCurrentState} = useContext(StateContext); @@ -21,7 +23,7 @@ export const Game = () => { }; return ( -
+

ToneGuessr

@@ -37,7 +39,7 @@ export const Game = () => {
-
+
Chat
diff --git a/client/src/pages/Game/styles.sass b/client/src/pages/Game/styles.sass index f099e5e..6556b1f 100644 --- a/client/src/pages/Game/styles.sass +++ b/client/src/pages/Game/styles.sass @@ -1,4 +1,4 @@ -.home-page +.game-page display: flex flex-direction: column align-items: center @@ -81,15 +81,8 @@ background: rgba(30, 30, 30, 0.5) border-bottom: 1px solid rgba(255, 255, 255, 0.2) - .account-icon - width: 30px - height: 30px - background: url('https://place-hold.it/100x100') no-repeat center - background-size: cover - border-radius: 50% - margin-right: 10px - .chat-title + margin-left: 10px font-size: 16pt color: #fff diff --git a/client/src/pages/Home/Home.jsx b/client/src/pages/Home/Home.jsx new file mode 100644 index 0000000..2c7a5ff --- /dev/null +++ b/client/src/pages/Home/Home.jsx @@ -0,0 +1,18 @@ +import "./styles.sass"; +import ActionCard from "@/pages/Home/components/ActionCard"; +import {faArrowRightToBracket, faPlusSquare} from "@fortawesome/free-solid-svg-icons"; +import {StateContext} from "@/common/contexts/StateContext"; +import {useContext} from "react"; + +export const Home = () => { + const {setCurrentState} = useContext(StateContext); + + return ( +
+
+ {}} /> + setCurrentState("Game")} /> +
+
+ ); +} diff --git a/client/src/pages/Home/components/ActionCard/ActionCard.jsx b/client/src/pages/Home/components/ActionCard/ActionCard.jsx new file mode 100644 index 0000000..4f1aa68 --- /dev/null +++ b/client/src/pages/Home/components/ActionCard/ActionCard.jsx @@ -0,0 +1,11 @@ +import {FontAwesomeIcon} from "@fortawesome/react-fontawesome"; +import "./styles.sass"; + +export const ActionCard = ({ title, icon, onClick }) => { + return ( +
+ +

{title}

+
+ ); +} \ No newline at end of file diff --git a/client/src/pages/Home/components/ActionCard/index.js b/client/src/pages/Home/components/ActionCard/index.js new file mode 100644 index 0000000..eaa81f9 --- /dev/null +++ b/client/src/pages/Home/components/ActionCard/index.js @@ -0,0 +1 @@ +export {ActionCard as default} from "./ActionCard.jsx"; \ No newline at end of file diff --git a/client/src/pages/Home/components/ActionCard/styles.sass b/client/src/pages/Home/components/ActionCard/styles.sass new file mode 100644 index 0000000..8770c81 --- /dev/null +++ b/client/src/pages/Home/components/ActionCard/styles.sass @@ -0,0 +1,23 @@ +@use "@/common/styles/colors" as * + +.action-card + display: flex + flex-direction: column + padding: 2rem 0 + width: 13rem + text-align: center + gap: 2rem + transition: all 0.3s ease-in-out + cursor: pointer + user-select: none + + svg + font-size: 52pt + color: $white + + h1 + margin: 0 + color: $white + + &:hover + transform: scale(1.1) translate(0, -0.5rem) rotate(0.5deg) \ No newline at end of file diff --git a/client/src/pages/Home/index.js b/client/src/pages/Home/index.js new file mode 100644 index 0000000..614867f --- /dev/null +++ b/client/src/pages/Home/index.js @@ -0,0 +1 @@ +export {Home as default} from "./Home.jsx"; \ No newline at end of file diff --git a/client/src/pages/Home/styles.sass b/client/src/pages/Home/styles.sass new file mode 100644 index 0000000..8d0dfe0 --- /dev/null +++ b/client/src/pages/Home/styles.sass @@ -0,0 +1,15 @@ +.home-page + display: flex + flex-direction: column + align-items: center + justify-content: center + height: 100% + width: 100% + + +.action-area + margin-top: 5rem + display: flex + gap: 3rem + flex-wrap: wrap + justify-content: center \ No newline at end of file