From 6fa3d727b05d365dcb0c67b2060cc721a58d7231 Mon Sep 17 00:00:00 2001 From: Neshura Date: Sun, 4 Dec 2022 16:42:25 +0100 Subject: [PATCH 1/6] Add vscode folder to gitignore --- .gitignore | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/.gitignore b/.gitignore index ddb6132..c29dfdc 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,9 @@ # do not track installed modules -/node_modules +node_modules/ # do not track built files -/.next +.vscode/ +.next/ *.tsbuildinfo next-env.d.ts @@ -13,6 +14,6 @@ yarn-error.log* .pnpm-debug.log* # production -/build -/data -/confs +build/ +data/ +confs/ From 8177802bb3581ad67e9102ba5026d0e05e4c313c Mon Sep 17 00:00:00 2001 From: Neshura Date: Sun, 4 Dec 2022 16:42:49 +0100 Subject: [PATCH 2/6] Extract windowsize function from map script --- components/sidebar.tsx | 11 +++++++---- components/windowsize.tsx | 24 ++++++++++++++++++++++++ pages/[map].tsx | 26 ++------------------------ 3 files changed, 33 insertions(+), 28 deletions(-) create mode 100644 components/windowsize.tsx diff --git a/components/sidebar.tsx b/components/sidebar.tsx index 113c438..ccf3a7f 100644 --- a/components/sidebar.tsx +++ b/components/sidebar.tsx @@ -4,7 +4,8 @@ import { useRouter } from 'next/router' import useSWR from 'swr'; import ReadyOrNotMap from '../interfaces/ReadyOrNot'; import React, { useState } from 'react'; -import Image from 'next/image' +import Image from 'next/image'; +import useWindowSize from '../components/windowsize'; const fetcher = (url: string) => fetch(url).then((res) => res.json()) @@ -12,11 +13,13 @@ function stopPropagation(e: any) { e.stopPropagation(); } - const Sidebar = () => { + const isMobile = useWindowSize(); + console.log(isMobile); // DEBUG const router = useRouter(); - const [active, setActive] = useState(true); + const [active, setActive] = useState(!isMobile); const { maps, isLoading, isError } = useNavbar(); + if (isError) { return (
) } else if (isLoading) { @@ -40,7 +43,7 @@ const Sidebar = () => { ))}
- > + {active" : "<" }/>
); diff --git a/components/windowsize.tsx b/components/windowsize.tsx new file mode 100644 index 0000000..27cb575 --- /dev/null +++ b/components/windowsize.tsx @@ -0,0 +1,24 @@ +import { useEffect, useState } from "react"; + +export default function useWindowSize() { + const [windowSize, setWindowSize] = useState({ + width: 0, + height: 0, + }); + + useEffect(() => { + function handleResize() { + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + + window.addEventListener("resize", handleResize); + + handleResize(); + + return () => window.removeEventListener("resize", handleResize); + }, []); + return windowSize.width <= 1080; +} \ No newline at end of file diff --git a/pages/[map].tsx b/pages/[map].tsx index 5676b61..922df1d 100644 --- a/pages/[map].tsx +++ b/pages/[map].tsx @@ -6,34 +6,12 @@ import { NextPageWithLayout } from './_app'; import React from 'react'; import useSWR, { KeyedMutator, mutate } from 'swr'; import { useRouter } from 'next/router'; -import Image from 'next/image' +import Image from 'next/image'; import ReadyOrNotMap from '../interfaces/ReadyOrNot'; +import useWindowSize from '../components/windowsize'; const fetcher = (url: string) => fetch(url).then((res) => res.json()) -function useWindowSize() { - const [windowSize, setWindowSize] = useState({ - width: 0, - height: 0, - }); - - useEffect(() => { - function handleResize() { - setWindowSize({ - width: window.innerWidth, - height: window.innerHeight, - }); - } - - window.addEventListener("resize", handleResize); - - handleResize(); - - return () => window.removeEventListener("resize", handleResize); - }, []); - return windowSize.width <= 1080; -} - const ReadyOrNotMaps: NextPageWithLayout = () => { const [floor, setFloor] = useState(0); const { mapInfo, isLoadingInfo, isErrorInfo } = useMap(useRouter().query.map?.toString() || "a_lethal_obsession") From 9cba3c50c937f35ec40bca98ebc9e20c2562b326 Mon Sep 17 00:00:00 2001 From: Neshura Date: Sun, 4 Dec 2022 16:43:10 +0100 Subject: [PATCH 3/6] Changed Arrow color and added flipped verison --- public/sidebar_arrow.webp | Bin 532 -> 704 bytes public/sidebar_arrow_flipped.webp | Bin 0 -> 696 bytes resources/sidebar_arrow.svg | 6 +++--- resources/sidebar_arrow.webp | Bin 532 -> 704 bytes resources/sidebar_arrow_flipped.webp | Bin 0 -> 696 bytes 5 files changed, 3 insertions(+), 3 deletions(-) create mode 100644 public/sidebar_arrow_flipped.webp create mode 100644 resources/sidebar_arrow_flipped.webp diff --git a/public/sidebar_arrow.webp b/public/sidebar_arrow.webp index a78f7505e69e2f0349f751708fdf6b50d7f08a66..9c008891c8a0508e59fe80395d5f5a8a8b720154 100644 GIT binary patch delta 697 zcmV;q0!ICm1i%GtGS4BclR!}%hs{#N3FCV}c5O3okl4Mtz`5AEXU1Aaq z7|6VTOA_HAl58iMAqOY8#3UNdK)%mg2a#ku(F{2_!6hcqa0c>y-a>5KNRk{Z+Ex4C z)d83!j^}AT4yWs~9!JiPht^sS`>wT?Wm#OFPxCx`{r|gv-?nV`ovO+(44%KAs>(17 zfZOhS`@Yw8og_(;uIsecIt)XAYpu2K`&FAHz$JOA1zJ_Qt^>5HbX`aNuPRBZO0udX zQ30n)k|b3(NdaorBzda^F3GB!q`(7s1AqliE${)ZssK>~02Tm5m4v!g6*Yh)Q3s$- zRZ$0^P7+Bq`~j*Y06+lhBmr5sZ5?~FVmr0n)MjeiZEPpc|G$3U?{ti_iu;KEJ968| zk%XOmTXs+Q0+Epuk)Q;B007X@Z@cwMw=--jS9KqBvj=P&+$BT)1MZY;|+{^Nmf{Dcjz)dgE+g*E!n@^Ht7vXt~-*+qYHH_QqtMQ!_`SljE1)^=n?+rBA(*7o9Wwu9;VmbLAR zV&~7PNo(6Sqir8E4HB>v4M7wGgiy z&EKEml^@ONK80odZhmqv#QWR6ba&Q6@A7Kj!m@BFy&Q_8Vs#+hcpOzP(@WF$_@|#v zcVxzzKG>9|%|ESp>9GlG`e;j-m4m>u7;_ro-gvf fu%0in%2dCXUbbxw*k0QA>XvQ*004mh<%0kKMU!a~ literal 532 zcmV+v0_*)!Nk&Et0ssJ4MM6+kP&iEg0RR9mAHWw7FGG-RQ-AF55D^U9ws9PLSt;Mu zwr#^WWv1V70D#;Fl!&Cz3J?KBQ&F@f0RnyyDi(x_ptz`&qH#fKy7j2B;(rYQ-wKd! z+t#r+E2`U|wvpOQZM*&K=l-wZeZP}2&MN*#^xu)&Mvf%x#0000000000 z0000000000000000001hjXP|&U+X3-wsKAPQP(P?>SrJgl+Q7R=S&QtyNoj zt?R9*rU$OtDqCIqK)%&xowD85uNThtO`Ws7*sgN6%e`tLZQoT%+nd$N(so~Uz}kK* z*7m_L{66J76gJiM^QBnZJKAPyS8aPsUq8EI&GVvo;B30<>&DK;bRWVrev+PccjA#_`TJ8m@^d!b z=P(WK;D97)sJ zU)J<^!bG{61Anr_wC%Y|kz zy)T~2alr2tMN{)!kEW(*Y6_<6y(E~b_o85`nwq-zs;Q}KYU--57x`XTUoW!CRKJ&A Wv5gmPuk3sE+!g=;0D%AHg8%^e84@@E diff --git a/public/sidebar_arrow_flipped.webp b/public/sidebar_arrow_flipped.webp new file mode 100644 index 0000000000000000000000000000000000000000..482d5dbdac05592a0dd25e6015132c062e97b66c GIT binary patch literal 696 zcmV;p0!RH)Nk&Gn0ssJ4MM6+kP&iDZ0ssInAHWw7H{&>xY^T}5U&%iNg5%_o-pC}u zwvi-7)A#6p{vmvDZ!v7MZ6rz2^gX(te+VDkTMXL{+qRM9q$MZWy(g1IWm#9(ZF620 zwte@09$(+*G|#-g&$jFO{(t*n;CbI^yY5t<_hlGIU*AX58t?x-*aEy{bUp z|4-X>qdrx20O}-Z5`j~v?YdSKNjAx&0{p6qrnLZl|GxkLNlb!D)7nr~pX<5ET_5NdQt+00F2ffF$7$ z>9%bhd$VHOR_!*mZ6%HE`@e;bZ@*(atN0($e@AW`Ig%!AJh6MW_X_|30000000000 z000000000000000000000000$N3-qaqCDDrWdj?TFx{&itLKDiTz5K!Y4paJ){f0f!ZfZMy}~s5AWY*p zxGqeiUqiw)`esd!?uq%5&qu_3iN4fH)5F`=bZt;?Hn?f zg=s$TDmTsNueIsCFwN)9()8r9FwN%^*7SRwG~K^pOk=*4n@%q!T6qmCIcBbw&xi*{ zIp)e6U9F7S^8HhO@m6`)c4GfrUiVhQ4VUk4bI#r^??Qg~M_qAkm3zim`Q`a(t>gPx z+n@E;c4^Ys#?XDJZPy!xZ9bi{wx>^wZI0e1Yr8z7ZJ%Oow_A*De0fgWzChUK(>7xp zgKNRqR_;#1HYaGOv5on6zPz5_w)wj*Y%3YtOxfnT#MoxWHdD5_t}?cnvW<10v8`lm eGc$j3U21GIW1AV diff --git a/resources/sidebar_arrow.webp b/resources/sidebar_arrow.webp index a78f7505e69e2f0349f751708fdf6b50d7f08a66..9c008891c8a0508e59fe80395d5f5a8a8b720154 100644 GIT binary patch delta 697 zcmV;q0!ICm1i%GtGS4BclR!}%hs{#N3FCV}c5O3okl4Mtz`5AEXU1Aaq z7|6VTOA_HAl58iMAqOY8#3UNdK)%mg2a#ku(F{2_!6hcqa0c>y-a>5KNRk{Z+Ex4C z)d83!j^}AT4yWs~9!JiPht^sS`>wT?Wm#OFPxCx`{r|gv-?nV`ovO+(44%KAs>(17 zfZOhS`@Yw8og_(;uIsecIt)XAYpu2K`&FAHz$JOA1zJ_Qt^>5HbX`aNuPRBZO0udX zQ30n)k|b3(NdaorBzda^F3GB!q`(7s1AqliE${)ZssK>~02Tm5m4v!g6*Yh)Q3s$- zRZ$0^P7+Bq`~j*Y06+lhBmr5sZ5?~FVmr0n)MjeiZEPpc|G$3U?{ti_iu;KEJ968| zk%XOmTXs+Q0+Epuk)Q;B007X@Z@cwMw=--jS9KqBvj=P&+$BT)1MZY;|+{^Nmf{Dcjz)dgE+g*E!n@^Ht7vXt~-*+qYHH_QqtMQ!_`SljE1)^=n?+rBA(*7o9Wwu9;VmbLAR zV&~7PNo(6Sqir8E4HB>v4M7wGgiy z&EKEml^@ONK80odZhmqv#QWR6ba&Q6@A7Kj!m@BFy&Q_8Vs#+hcpOzP(@WF$_@|#v zcVxzzKG>9|%|ESp>9GlG`e;j-m4m>u7;_ro-gvf fu%0in%2dCXUbbxw*k0QA>XvQ*004mh<%0kKMU!a~ literal 532 zcmV+v0_*)!Nk&Et0ssJ4MM6+kP&iEg0RR9mAHWw7FGG-RQ-AF55D^U9ws9PLSt;Mu zwr#^WWv1V70D#;Fl!&Cz3J?KBQ&F@f0RnyyDi(x_ptz`&qH#fKy7j2B;(rYQ-wKd! z+t#r+E2`U|wvpOQZM*&K=l-wZeZP}2&MN*#^xu)&Mvf%x#0000000000 z0000000000000000001hjXP|&U+X3-wsKAPQP(P?>SrJgl+Q7R=S&QtyNoj zt?R9*rU$OtDqCIqK)%&xowD85uNThtO`Ws7*sgN6%e`tLZQoT%+nd$N(so~Uz}kK* z*7m_L{66J76gJiM^QBnZJKAPyS8aPsUq8EI&GVvo;B30<>&DK;bRWVrev+PccjA#_`TJ8m@^d!b z=P(WK;D97)sJ zU)J<^!bG{61Anr_wC%Y|kz zy)T~2alr2tMN{)!kEW(*Y6_<6y(E~b_o85`nwq-zs;Q}KYU--57x`XTUoW!CRKJ&A Wv5gmPuk3sE+!g=;0D%AHg8%^e84@@E diff --git a/resources/sidebar_arrow_flipped.webp b/resources/sidebar_arrow_flipped.webp new file mode 100644 index 0000000000000000000000000000000000000000..482d5dbdac05592a0dd25e6015132c062e97b66c GIT binary patch literal 696 zcmV;p0!RH)Nk&Gn0ssJ4MM6+kP&iDZ0ssInAHWw7H{&>xY^T}5U&%iNg5%_o-pC}u zwvi-7)A#6p{vmvDZ!v7MZ6rz2^gX(te+VDkTMXL{+qRM9q$MZWy(g1IWm#9(ZF620 zwte@09$(+*G|#-g&$jFO{(t*n;CbI^yY5t<_hlGIU*AX58t?x-*aEy{bUp z|4-X>qdrx20O}-Z5`j~v?YdSKNjAx&0{p6qrnLZl|GxkLNlb!D)7nr~pX<5ET_5NdQt+00F2ffF$7$ z>9%bhd$VHOR_!*mZ6%HE`@e;bZ@*(atN0($e@AW`Ig%!AJh6MW_X_|30000000000 z000000000000000000000000$N3-qaqCDDrWdj?TFx{&itLKDiTz5K!Y4paJ){f0f!ZfZMy}~s5AWY*p zxGqeiUqiw)`esd!?uq%5&qu_3iN4fH)5F`=bZt;?Hn?f zg=s$TDmTsNueIsCFwN)9()8r9FwN%^*7SRwG~K^pOk=*4n@%q!T6qmCIcBbw&xi*{ zIp)e6U9F7S^8HhO@m6`)c4GfrUiVhQ4VUk4bI#r^??Qg~M_qAkm3zim`Q`a(t>gPx z+n@E;c4^Ys#?XDJZPy!xZ9bi{wx>^wZI0e1Yr8z7ZJ%Oow_A*De0fgWzChUK(>7xp zgKNRqR_;#1HYaGOv5on6zPz5_w)wj*Y%3YtOxfnT#MoxWHdD5_t}?cnvW<10v8`lm eGc$j3U21GIW1AV Date: Fri, 9 Dec 2022 18:28:23 +0100 Subject: [PATCH 4/6] Added undefined Size state to useWindowsize --- components/windowsize.tsx | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/components/windowsize.tsx b/components/windowsize.tsx index 27cb575..063fae5 100644 --- a/components/windowsize.tsx +++ b/components/windowsize.tsx @@ -1,9 +1,14 @@ import { useEffect, useState } from "react"; -export default function useWindowSize() { - const [windowSize, setWindowSize] = useState({ - width: 0, - height: 0, +interface ScreenSize { + width: number | undefined; + height: number | undefined; +} + +export default function useWindowSize(): boolean | undefined { + const [windowSize, setWindowSize] = useState({ + width: undefined, + height: undefined, }); useEffect(() => { @@ -20,5 +25,10 @@ export default function useWindowSize() { return () => window.removeEventListener("resize", handleResize); }, []); - return windowSize.width <= 1080; + if(typeof(windowSize.width) === "number") { + return windowSize.width <= 1080; + } + else { + return undefined; + } } \ No newline at end of file From fbc815e776abf2510221b491569dd6d0c1d74887 Mon Sep 17 00:00:00 2001 From: Neshura Date: Fri, 9 Dec 2022 18:28:58 +0100 Subject: [PATCH 5/6] Moved Sidebarplaceholder to sidebar component Potentially equal size to the sidebar in the future --- components/layout.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/layout.tsx b/components/layout.tsx index 699bf27..6163070 100644 --- a/components/layout.tsx +++ b/components/layout.tsx @@ -26,7 +26,6 @@ const LayoutReadyOrNot = ({ children }: { children: React.ReactNode }) => { -
{children}
From 758cb6a9f036f0dc2af436b57012dc08e87d4479 Mon Sep 17 00:00:00 2001 From: Neshura Date: Fri, 9 Dec 2022 18:29:47 +0100 Subject: [PATCH 6/6] Various changes Removed debug logging, implemented Issue #7 --- components/sidebar.tsx | 58 ++++++++++++++++++++++++++---------------- 1 file changed, 36 insertions(+), 22 deletions(-) diff --git a/components/sidebar.tsx b/components/sidebar.tsx index ccf3a7f..35386ec 100644 --- a/components/sidebar.tsx +++ b/components/sidebar.tsx @@ -15,37 +15,51 @@ function stopPropagation(e: any) { const Sidebar = () => { const isMobile = useWindowSize(); - console.log(isMobile); // DEBUG const router = useRouter(); - const [active, setActive] = useState(!isMobile); - const { maps, isLoading, isError } = useNavbar(); - + const [active, setActive] = useState(isMobile); + const { maps, isLoading, isError }:{ maps: ReadyOrNotMap[], isLoading: boolean, isError: boolean} = useNavbar(); - if (isError) { return () } + if(typeof(isMobile) === "boolean" && typeof(active) === "undefined") { + setActive(!isMobile); + } + + if (isError) { + return ( + <> + +
+ + ) + } else if (isLoading) { return ( -
- -
+ <> +
+ +
+
+ ) } else { - // > is a placeholder return ( -
setActive(!active)}> - -
- {active" : "<" }/> + <> +
setActive(!active)}> + +
+ {active" : "<"} /> +
-
+
+ ); } }