From 491fd44529fc8eaa94d9fc94d6dc031341635a36 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 00:17:01 +0300 Subject: [PATCH 01/13] file setup --- components/containers/menu/MenuContainer.tsx | 11 +++++ pages/menu.tsx | 44 ++++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 components/containers/menu/MenuContainer.tsx create mode 100644 pages/menu.tsx diff --git a/components/containers/menu/MenuContainer.tsx b/components/containers/menu/MenuContainer.tsx new file mode 100644 index 0000000..aded9e2 --- /dev/null +++ b/components/containers/menu/MenuContainer.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +function MenuContainer() { + return ( +
+ +
+ ) +} + +export default MenuContainer diff --git a/pages/menu.tsx b/pages/menu.tsx new file mode 100644 index 0000000..4f12dc5 --- /dev/null +++ b/pages/menu.tsx @@ -0,0 +1,44 @@ +import { useRouter } from "next/dist/client/router"; +import Head from "next/head" +import { useEffect } from "react"; +import { useDispatch, useSelector } from "react-redux"; +import MenuContainer from "../components/containers/menu/MenuContainer"; +import Notification from "../components/notifications/Notification"; +import { getSocket, selectSocket, setSocket } from "../redux/slices/socketSlice"; +import { selectUser } from "../redux/slices/userSlice"; +import { checkForLogin } from "../requests/auth/requests"; + +export default function Menu() { + const userInfo = useSelector(selectUser); + const socketInfo = useSelector(selectSocket); + const dispatch = useDispatch(); + const router = useRouter(); + + useEffect(() => { + const socket = getSocket(); + + if(!socketInfo.connected || !socket){ + dispatch(setSocket(true)); + } + }, [socketInfo.connected]); + + useEffect(() => { + if(!userInfo.loggedIn || !userInfo.token){ + const token = window.localStorage.getItem("refreshtoken"); + + if(token){ + checkForLogin(dispatch, router); + } + } + }, [userInfo.loggedIn, dispatch, userInfo.token, router]); + + return ( +
+ + MathRoom | Menu + + + +
+ ) +} From 085b53a3c878c31668561d2bb0dd5af3a7d6dee1 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 00:17:38 +0300 Subject: [PATCH 02/13] stylesheets --- styles/main.scss | 3 ++- styles/menu/menu.scss | 0 2 files changed, 2 insertions(+), 1 deletion(-) create mode 100644 styles/menu/menu.scss diff --git a/styles/main.scss b/styles/main.scss index 977e1f3..4e2c8f9 100644 --- a/styles/main.scss +++ b/styles/main.scss @@ -3,4 +3,5 @@ @import "./notifications/notifications.scss"; @import "./rooms/index.scss"; -@import "./auth/auth.scss"; \ No newline at end of file +@import "./auth/auth.scss"; +@import "./menu/menu.scss"; \ No newline at end of file diff --git a/styles/menu/menu.scss b/styles/menu/menu.scss new file mode 100644 index 0000000..e69de29 From 31b73e065b678ee213590e5583f93feb2a2897b0 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 00:27:11 +0300 Subject: [PATCH 03/13] new files and fonts + redirecting to menu page --- components/containers/menu/MenuContainer.tsx | 2 +- pages/index.tsx | 32 +++++++++++--------- pages/menu.tsx | 4 ++- styles/variables.scss | 4 ++- 4 files changed, 25 insertions(+), 17 deletions(-) diff --git a/components/containers/menu/MenuContainer.tsx b/components/containers/menu/MenuContainer.tsx index aded9e2..6c40fd1 100644 --- a/components/containers/menu/MenuContainer.tsx +++ b/components/containers/menu/MenuContainer.tsx @@ -2,7 +2,7 @@ import React from 'react' function MenuContainer() { return ( -
+
) diff --git a/pages/index.tsx b/pages/index.tsx index 5db465e..aacb02f 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -13,23 +13,27 @@ export default function Home() { const dispatch = useDispatch(); const router = useRouter(); - useEffect(() => { - const socket = getSocket(); +// useEffect(() => { +// const socket = getSocket(); - if(!socketInfo.connected || !socket){ - dispatch(setSocket(true)); - } - }, [socketInfo.connected]); +// if(!socketInfo.connected || !socket){ +// dispatch(setSocket(true)); +// } +// }, [socketInfo.connected]); - useEffect(() => { - if(!userInfo.loggedIn || !userInfo.token){ - const token = window.localStorage.getItem("refreshtoken"); +// useEffect(() => { +// if(!userInfo.loggedIn || !userInfo.token){ +// const token = window.localStorage.getItem("refreshtoken"); - if(token){ - checkForLogin(dispatch, router); - } - } -}, [userInfo.loggedIn, dispatch, userInfo.token, router]); +// if(token){ +// checkForLogin(dispatch, router); +// } +// } +// }, [userInfo.loggedIn, dispatch, userInfo.token, router]); + + useEffect(() => { + router.push("/menu"); + }, []) return (
diff --git a/pages/menu.tsx b/pages/menu.tsx index 4f12dc5..ebfd69a 100644 --- a/pages/menu.tsx +++ b/pages/menu.tsx @@ -33,11 +33,13 @@ export default function Menu() { }, [userInfo.loggedIn, dispatch, userInfo.token, router]); return ( -
+
MathRoom | Menu + +
) diff --git a/styles/variables.scss b/styles/variables.scss index 15f5f22..98d7be5 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -1,4 +1,5 @@ @import url("https://fonts.googleapis.com/css2?family=Aldrich&display=swap"); +@import url("https://fonts.googleapis.com/css2?family=Aldrich&family=Righteous&display=swap"); $mathRoomGrey: #474747; $mathRoomLightGrey: #EBEBEB; @@ -12,4 +13,5 @@ $mathRoomRed: #C7465D; $mathRoomGreen: #2D6D4E; $mathRoomYellow: #F1EC78; -$roomFont: "Aldrich", sans-serif; \ No newline at end of file +$roomFont: "Aldrich", sans-serif; +$menuFont: "Righteous", cursive; \ No newline at end of file From d4001908f448050e8c42e5ce3a21a30d07a92999 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 00:36:54 +0300 Subject: [PATCH 04/13] setting up components --- components/containers/menu/MenuContainer.tsx | 14 ++++++++- pages/instructions.tsx | 13 +++++++++ styles/menu/menu.scss | 30 ++++++++++++++++++++ styles/variables.scss | 6 +++- 4 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 pages/instructions.tsx diff --git a/components/containers/menu/MenuContainer.tsx b/components/containers/menu/MenuContainer.tsx index 6c40fd1..1eea12c 100644 --- a/components/containers/menu/MenuContainer.tsx +++ b/components/containers/menu/MenuContainer.tsx @@ -1,9 +1,21 @@ +import { useRouter } from 'next/dist/client/router'; import React from 'react' +import { useSelector } from 'react-redux'; +import { selectUser } from '../../../redux/slices/userSlice'; function MenuContainer() { + const userInfo = useSelector(selectUser); + const router = useRouter(); + return (
- +

MATHROOM

+ +
+ + + {!userInfo.loggedIn || !userInfo.token && ()} +
) } diff --git a/pages/instructions.tsx b/pages/instructions.tsx new file mode 100644 index 0000000..9fa9d7e --- /dev/null +++ b/pages/instructions.tsx @@ -0,0 +1,13 @@ +import Head from "next/head" +import Notification from "../components/notifications/Notification"; + +export default function Instructions() { + return ( +
+ + MathRoom | Instructions + + +
+ ) +} diff --git a/styles/menu/menu.scss b/styles/menu/menu.scss index e69de29..b0ac091 100644 --- a/styles/menu/menu.scss +++ b/styles/menu/menu.scss @@ -0,0 +1,30 @@ +@import "../variables.scss"; + +.menu{ + width: 100%; + height: 100vh; + display: flex; + align-items: center; + justify-content: center; + background-color: $mathRoomDarkerPurple; + + &__container{ + width: 700px; + display: flex; + align-items: center; + flex-direction: column; + + h1{ + font-size: $headingSize; + color: $mathRoomContainerBG; + font-family: $menuFont; + } + + &__options{ + margin-top: 100px; + display: flex; + align-items: center; + flex-direction: column; + } + } +} \ No newline at end of file diff --git a/styles/variables.scss b/styles/variables.scss index 98d7be5..2462a67 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -12,6 +12,10 @@ $mathRoomBlackText: #000000; $mathRoomRed: #C7465D; $mathRoomGreen: #2D6D4E; $mathRoomYellow: #F1EC78; +$mathRoomDarkPurple: #35293A; +$mathRoomDarkerPurple: #2B222F; $roomFont: "Aldrich", sans-serif; -$menuFont: "Righteous", cursive; \ No newline at end of file +$menuFont: "Righteous", cursive; + +$headingSize: 90px; \ No newline at end of file From b51a4dea9118d9ce6d3371587e6d19930ab86656 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 00:37:34 +0300 Subject: [PATCH 05/13] removing codee --- pages/index.tsx | 25 ------------------------- pages/instructions.tsx | 1 + 2 files changed, 1 insertion(+), 25 deletions(-) diff --git a/pages/index.tsx b/pages/index.tsx index aacb02f..70e00ff 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,36 +1,11 @@ import { useRouter } from "next/dist/client/router"; import Head from "next/head" import { useEffect } from "react"; -import { useDispatch, useSelector } from "react-redux"; import Notification from "../components/notifications/Notification"; -import { getSocket, selectSocket, setSocket } from "../redux/slices/socketSlice"; -import { selectUser } from "../redux/slices/userSlice"; -import { checkForLogin } from "../requests/auth/requests"; export default function Home() { - const userInfo = useSelector(selectUser); - const socketInfo = useSelector(selectSocket); - const dispatch = useDispatch(); const router = useRouter(); -// useEffect(() => { -// const socket = getSocket(); - -// if(!socketInfo.connected || !socket){ -// dispatch(setSocket(true)); -// } -// }, [socketInfo.connected]); - -// useEffect(() => { -// if(!userInfo.loggedIn || !userInfo.token){ -// const token = window.localStorage.getItem("refreshtoken"); - -// if(token){ -// checkForLogin(dispatch, router); -// } -// } -// }, [userInfo.loggedIn, dispatch, userInfo.token, router]); - useEffect(() => { router.push("/menu"); }, []) diff --git a/pages/instructions.tsx b/pages/instructions.tsx index 9fa9d7e..df3e6b0 100644 --- a/pages/instructions.tsx +++ b/pages/instructions.tsx @@ -7,6 +7,7 @@ export default function Instructions() { MathRoom | Instructions +
) From 7d411a9f4b3ccbd50ecebf1e74232e42dd568e19 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 00:47:04 +0300 Subject: [PATCH 06/13] basic styles --- components/containers/menu/MenuContainer.tsx | 11 +++++--- pages/index.tsx | 2 +- styles/menu/menu.scss | 27 ++++++++++++++++++++ styles/variables.scss | 3 ++- 4 files changed, 37 insertions(+), 6 deletions(-) diff --git a/components/containers/menu/MenuContainer.tsx b/components/containers/menu/MenuContainer.tsx index 1eea12c..ffd3d4b 100644 --- a/components/containers/menu/MenuContainer.tsx +++ b/components/containers/menu/MenuContainer.tsx @@ -1,10 +1,13 @@ import { useRouter } from 'next/dist/client/router'; import React from 'react' -import { useSelector } from 'react-redux'; +import { useDispatch, useSelector } from 'react-redux'; +import { setNotification } from '../../../redux/slices/notificationSlice'; import { selectUser } from '../../../redux/slices/userSlice'; function MenuContainer() { const userInfo = useSelector(selectUser); + + const dispatch = useDispatch(); const router = useRouter(); return ( @@ -12,9 +15,9 @@ function MenuContainer() {

MATHROOM

- - - {!userInfo.loggedIn || !userInfo.token && ()} + + + {!userInfo.loggedIn || !userInfo.token && ()}
) diff --git a/pages/index.tsx b/pages/index.tsx index 70e00ff..203e1b2 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -8,7 +8,7 @@ export default function Home() { useEffect(() => { router.push("/menu"); - }, []) + }, []); return (
diff --git a/styles/menu/menu.scss b/styles/menu/menu.scss index b0ac091..f204a5b 100644 --- a/styles/menu/menu.scss +++ b/styles/menu/menu.scss @@ -6,6 +6,7 @@ display: flex; align-items: center; justify-content: center; + font-family: $roomFont; background-color: $mathRoomDarkerPurple; &__container{ @@ -25,6 +26,32 @@ display: flex; align-items: center; flex-direction: column; + + .button{ + width: 300px; + height: 40px; + margin: 0 0 20px 0; + border-radius: 5px; + border: none; + outline: none; + cursor: pointer; + transition: all 0.3s ease; + font-size: $buttonText; + color: $mathRoomContainerBG; + background-color: $mathRoomButton; + + &:hover{ + background-color: $mathRoomButtonHover; + } + + &__play{ + background-color: $mathRoomRed; + + &:hover{ + background-color: $mathRoomRed; + } + } + } } } } \ No newline at end of file diff --git a/styles/variables.scss b/styles/variables.scss index 2462a67..d37a946 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -18,4 +18,5 @@ $mathRoomDarkerPurple: #2B222F; $roomFont: "Aldrich", sans-serif; $menuFont: "Righteous", cursive; -$headingSize: 90px; \ No newline at end of file +$headingSize: 90px; +$buttonText: 20px; \ No newline at end of file From f1b6c16b36ce21dc0b1149366c05e2da211ea093 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 00:47:56 +0300 Subject: [PATCH 07/13] margin styles --- styles/menu/menu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/menu/menu.scss b/styles/menu/menu.scss index f204a5b..f4d97d0 100644 --- a/styles/menu/menu.scss +++ b/styles/menu/menu.scss @@ -22,7 +22,7 @@ } &__options{ - margin-top: 100px; + margin-top: 50px; display: flex; align-items: center; flex-direction: column; From e45807530f0ba48b404a244e4da3873905603485 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 00:50:39 +0300 Subject: [PATCH 08/13] resources --- public/svg/clock.svg | 13 +++++++++++++ public/svg/sandClock.svg | 10 ++++++++++ public/svg/timer.svg | 8 ++++++++ 3 files changed, 31 insertions(+) create mode 100644 public/svg/clock.svg create mode 100644 public/svg/sandClock.svg create mode 100644 public/svg/timer.svg diff --git a/public/svg/clock.svg b/public/svg/clock.svg new file mode 100644 index 0000000..eac2c9e --- /dev/null +++ b/public/svg/clock.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/public/svg/sandClock.svg b/public/svg/sandClock.svg new file mode 100644 index 0000000..019ae8f --- /dev/null +++ b/public/svg/sandClock.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/svg/timer.svg b/public/svg/timer.svg new file mode 100644 index 0000000..2083ed6 --- /dev/null +++ b/public/svg/timer.svg @@ -0,0 +1,8 @@ + + + + + + + + From 4876b46e2742cbe620dc33b768706d7561f9dc7a Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 01:04:48 +0300 Subject: [PATCH 09/13] adding customs --- components/containers/menu/MenuContainer.tsx | 14 +++ styles/menu/menu.scss | 112 +++++++++++++++++++ 2 files changed, 126 insertions(+) diff --git a/components/containers/menu/MenuContainer.tsx b/components/containers/menu/MenuContainer.tsx index ffd3d4b..0617582 100644 --- a/components/containers/menu/MenuContainer.tsx +++ b/components/containers/menu/MenuContainer.tsx @@ -19,6 +19,20 @@ function MenuContainer() { {!userInfo.loggedIn || !userInfo.token && ()}
+ +
+ sand clock ticking in blue color slightly rotated to right side + clock with two arrows in red color slightly rotated to left side + purple timer ticking +
+
+
+
+
+
+
+
+
) } diff --git a/styles/menu/menu.scss b/styles/menu/menu.scss index f4d97d0..f7dca77 100644 --- a/styles/menu/menu.scss +++ b/styles/menu/menu.scss @@ -6,16 +6,19 @@ display: flex; align-items: center; justify-content: center; + overflow: hidden; font-family: $roomFont; background-color: $mathRoomDarkerPurple; &__container{ width: 700px; display: flex; + overflow: hidden; align-items: center; flex-direction: column; h1{ + z-index: 2; font-size: $headingSize; color: $mathRoomContainerBG; font-family: $menuFont; @@ -26,6 +29,7 @@ display: flex; align-items: center; flex-direction: column; + z-index: 2; .button{ width: 300px; @@ -53,5 +57,113 @@ } } } + + &__decorations{ + overflow: hidden; + + .image{ + z-index: 2; + position: absolute; + + &1{ + left: 100px; + bottom: 200px; + } + + &2{ + right: 100px; + bottom: 100px; + } + + &3{ + top: 50px; + right: 500px; + } + } + + .line{ + position: absolute; + background-color: $mathRoomDarkPurple; + + &1{ + width: 153.38px; + height: 839.03px; + left: -37.91px; + top: 351.93px; + background: #35293A; + transform: matrix(0.95, 0.28, -0.3, 0.96, 0, 0); + } + + &2{ + width: 189.55px; + height: 896.91px; + left: 194.46px; + top: 254px; + + background: #35293A; + transform: matrix(0.95, 0.28, -0.3, 0.96, 0, 0); + } + + &3{ + width: 153.38px; + height: 839.03px; + left: 337.09px; + top: 561px; + + background: #35293A; + transform: matrix(0.95, 0.28, -0.3, 0.96, 0, 0); + } + + &4{ + width: 153.38px; + height: 839.03px; + left: 577.8px; + top: 447.69px; + + background: #35293A; + transform: matrix(0.95, 0.28, -0.3, 0.96, 0, 0); + } + + &5{ + width: 271.03px; + height: 839.03px; + left: 801.09px; + top: 372px; + + background: #35293A; + transform: matrix(0.95, 0.28, -0.3, 0.96, 0, 0); + } + + &6{ + width: 153.38px; + height: 793.87px; + left: 1050.57px; + top: 612px; + + background: #35293A; + transform: matrix(0.95, 0.28, -0.3, 0.96, 0, 0); + } + + &7{ + width: 153.38px; + height: 839.03px; + left: 1351.09px; + top: 308px; + + background: #35293A; + transform: matrix(0.95, 0.28, -0.3, 0.96, 0, 0); + } + + &8{ + width: 153.38px; + height: 793.87px; + left: 1461.57px; + top: 624px; + + background: #35293A; + transform: matrix(0.95, 0.28, -0.3, 0.96, 0, 0); + } + } + } } } \ No newline at end of file From 90ce3622a5a3c43088b9e8ea47c45869cd66ad7f Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 01:05:15 +0300 Subject: [PATCH 10/13] redirect back to menu --- components/containers/rooms/RoomContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/containers/rooms/RoomContainer.tsx b/components/containers/rooms/RoomContainer.tsx index 7f4e444..806978e 100644 --- a/components/containers/rooms/RoomContainer.tsx +++ b/components/containers/rooms/RoomContainer.tsx @@ -92,7 +92,7 @@ const RoomContainer: React.FC = () => { return (
- +

Join room

From 551f33ac7813efdaf9b8574d461c488e4d411018 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 01:07:17 +0300 Subject: [PATCH 11/13] fixing overflow --- styles/menu/menu.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/styles/menu/menu.scss b/styles/menu/menu.scss index f7dca77..cd0ac0d 100644 --- a/styles/menu/menu.scss +++ b/styles/menu/menu.scss @@ -59,6 +59,11 @@ } &__decorations{ + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 100%; overflow: hidden; .image{ From 0a3c78220a716fa6442439fe494e14624cc5ddcb Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 01:16:38 +0300 Subject: [PATCH 12/13] mobile responsive menu --- styles/menu/menu.scss | 103 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 103 insertions(+) diff --git a/styles/menu/menu.scss b/styles/menu/menu.scss index cd0ac0d..d11c2e2 100644 --- a/styles/menu/menu.scss +++ b/styles/menu/menu.scss @@ -171,4 +171,107 @@ } } } + + @media screen and (max-width: 1375px){ + &__container{ + + &__decorations{ + .image{ + &2{ + right: 50px; + } + + &3{ + right: 300px; + } + } + } + } + } + + @media screen and (max-width: 1245px){ + &__container{ + &__decorations{ + .image{ + &1{ + left: 50px; + bottom: 50px; + } + + &2{ + right: 20px; + bottom: 50px; + } + } + } + } + } + + @media screen and (max-width: 1125px){ + &__container{ + &__decorations{ + .image{ + &2{ + right: 50px; + width: 300px; + bottom: 80px; + } + + &3{ + right: 200px; + } + } + } + } + } + + @media screen and (max-width: 955px){ + &__container{ + &__decorations{ + .image{ + &1{ + width: 200px; + } + + &2{ + right: 50px; + width: 250px; + bottom: 80px; + } + + &3{ + right: 200px; + } + } + } + } + } + + @media screen and (max-width: 695px){ + &__container{ + h1{ + font-size: 60px; + } + + &__decorations{ + .image{ + display: none; + } + } + } + } + + @media screen and (max-width: 400px){ + &__container{ + h1{ + font-size: 45px; + } + + &__options{ + .button{ + width: 270px; + } + } + } + } } \ No newline at end of file From 8f8372faabff31cc82d734c1df53f070ce79b169 Mon Sep 17 00:00:00 2001 From: Rob Date: Sat, 30 Oct 2021 01:18:36 +0300 Subject: [PATCH 13/13] codefactor enhancement --- styles/menu/menu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/styles/menu/menu.scss b/styles/menu/menu.scss index d11c2e2..d5f3d53 100644 --- a/styles/menu/menu.scss +++ b/styles/menu/menu.scss @@ -34,7 +34,7 @@ .button{ width: 300px; height: 40px; - margin: 0 0 20px 0; + margin: 0 0 20px; border-radius: 5px; border: none; outline: none;