fix: tabs linked to url + animation changes

Pwnzer0tt1 · Jun 19, 2024 · 49b0411 · 49b0411
1 parent 2606dfa
commit 49b0411
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 34 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -66,6 +66,7 @@ export default function App() {
               <BrowserRouter>
                   <Routes>
                     <Route path="/" element={<HomePage />} />
+                    <Route path="/:page" element={<HomePage />} />
                     <Route path="*" element={<Title order={1}>404 Not Found</Title>} />
                   </Routes>
               </BrowserRouter>

diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx
@@ -1,16 +1,18 @@
 import { statusQuery } from "@/utils/queries";
 import { Alert, Box, ScrollArea, Space, Tabs } from "@mantine/core";
-import { Fragment } from "react";
+import { Fragment, useEffect } from "react";
 import { MdErrorOutline } from "react-icons/md";
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import { AiOutlineWarning } from "react-icons/ai";
 import { IoFlagSharp } from "react-icons/io5";
 import { FlagsScreen } from "./Pages/FlagsScreen";
 import { PiSwordBold } from "react-icons/pi";
 import { MdGroups } from "react-icons/md";
+import { useNavigate, useParams } from "react-router";
 
 export const HomePage = () => {
-
+    const { page } = useParams()
+    const navigate = useNavigate()
     const status = statusQuery()
     const messages = (status.data?.messages??[]).map((msg, i) => {
         const lvl = msg.level??"warning"
@@ -28,11 +30,21 @@ export const HomePage = () => {
         </Fragment>
     })
 
+    useEffect(() => {
+        if (page == undefined || !["flags", "attacks", "teams"].includes(page)){
+            navigate("/flags")
+        }
+    }, [page])
+
+    const onTabChange = (page:string|null) => {
+        navigate("/"+page)
+    }
+
     return <Box style={{
         width: "100%",
     }}>
         {messages?<>{messages}<Space h="lg" /></>:null}
-        <Tabs variant="pills" radius="xl" orientation="horizontal" defaultValue="gallery">
+        <Tabs variant="pills" radius="xl" orientation="horizontal" defaultValue="gallery" value={page} onChange={onTabChange} >
             <Tabs.List>
                 <Tabs.Tab value="flags" leftSection={<IoFlagSharp />} color="red"> Flags </Tabs.Tab>
                 <Tabs.Tab value="attacks" leftSection={<PiSwordBold />} color="green"> Attacks </Tabs.Tab>

diff --git a/frontend/src/components/WelcomeTitle.tsx b/frontend/src/components/WelcomeTitle.tsx
@@ -7,7 +7,6 @@ import LaptopIcon from "@/svg/laptop.svg"
 import ServerIcon from "@/svg/server.svg"
 import ConnectedServerIcon from "@/svg/connected-server.svg"
 import JoyStickIcon from "@/svg/joystick.svg"
-import { useEffect, useState } from "react"
 
 export const WelcomeTitle = (
     { title, description, showAnimation }:
@@ -40,12 +39,9 @@ export const WelcomeTitle = (
 export const WelcomeAnimation = () => {
 
     const time = useTime()
-    const [animationDuration, setAnimationDuration] = useState(1)
     const time_loop = motionValue(0)
 
-    time.on("change", (v) => {
-        time_loop.set(v%animationDuration)
-    })
+
 
     const tArr = (times: number[]): [number[], number] => {
         let accumulator = 0
@@ -87,14 +83,14 @@ export const WelcomeAnimation = () => {
             { clamp: false, ease: animate_timing},
         ),
     }
-    const init_bomb_time = end_middle_icons_scale_time+200
+    const init_bomb_time = end_middle_icons_scale_time+600
     const [inital_bomb_scale_time, end_inital_bomb_scale_time] = tArr(
         [init_bomb_time, 200, 300]
     )
     const [bomb_rotate_time, end_bomb_rotate_time] = tArr(
         [init_bomb_time, 400, 400, 400]
     )
-    const end_enter_time = Math.max(end_inital_bomb_scale_time, end_bomb_rotate_time)
+    const end_enter_time = Math.max(end_inital_bomb_scale_time, end_bomb_rotate_time)+800
     const [bomb_x_time, end_bomb_x_time] = tArr(
         [end_enter_time, 800]
     )
@@ -207,14 +203,20 @@ export const WelcomeAnimation = () => {
         [final_init_plus_1_time+1200, 200, 300]
     )
 
-    const [rotate_plus_1_time, end_rotate_plus_1_time] = tArr(
-        [final_init_plus_1_time, 400, 400, 200]
+    const [fade_plus_1_time, end_fade_plus_1_time] = tArr(
+        [final_init_plus_1_time, 400, 400, 400, 400]
     )
 
-    const end_plus_1_time = Math.max(end_final_plus_1_time, end_rotate_plus_1_time)
+    const end_plus_1_time = Math.max(end_final_plus_1_time, end_fade_plus_1_time)
 
     const plus_1_animation: MotionStyle = {
-        opacity: useTransform(time_loop,[0, init_plus_1_time-1, init_plus_1_time],[0, 0, 1],
+        opacity: useTransform(
+            time_loop,
+            [
+                0, init_plus_1_time-1, init_plus_1_time,
+                ...fade_plus_1_time
+            ],
+            [0, 0, 1, 1, 0.4, 1, 0.4, 1],
             { clamp: false, ease: animate_timing},
         ),
         scale: useTransform(
@@ -226,12 +228,6 @@ export const WelcomeAnimation = () => {
             [0, 1.2, 1, 1, 1.2, 0],
             { clamp: false, ease: animate_timing},
         ),
-        rotate: useTransform(
-            time_loop,
-            rotate_plus_1_time,
-            [0, 10, -10, 0],
-            { clamp: false, ease: animate_timing},
-        ),
         y: useTransform(
             time_loop,
             up_plus_1_time,
@@ -240,29 +236,24 @@ export const WelcomeAnimation = () => {
         ),
     }
 
-    const [ending_animate_all, end_time] = tArr(
-        [end_plus_1_time+800, 150]
-    )
-
     const spaceBetween = 70
+    const end_time_delay = 800
+
+    time.on("change", (v) => {
+        if (v > end_plus_1_time+end_time_delay)
+            time_loop.set((v%(end_plus_1_time-init_bomb_time+end_time_delay))+init_bomb_time)
+        else
+            time_loop.set(v)
+    })
 
-    useEffect(() => {
-        setAnimationDuration(end_time+300)
-    }, [end_time])
 
     return <motion.div
         className="center-flex"
         style={{
             padding: 30,
             paddingTop:70,
             paddingBottom:70,
-            position: "relative",
-            opacity: useTransform(
-                time_loop,
-                ending_animate_all,
-                [1, 0],
-                { clamp: false, ease: animate_timing},
-            ),
+            position: "relative"
         }}
     >
         <motion.img src={ConnectedServerIcon} width={100} style={initial_icons} />