From 49b041154ef4b90a108167ff76f1f6d7fe07adfb Mon Sep 17 00:00:00 2001 From: Domingo Dirutigliano Date: Wed, 19 Jun 2024 16:02:34 +0200 Subject: [PATCH] fix: tabs linked to url + animation changes --- frontend/src/App.tsx | 1 + frontend/src/components/HomePage.tsx | 18 ++++++-- frontend/src/components/WelcomeTitle.tsx | 53 ++++++++++-------------- 3 files changed, 38 insertions(+), 34 deletions(-) diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 6416b06..723c469 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -66,6 +66,7 @@ export default function App() { } /> + } /> 404 Not Found} /> diff --git a/frontend/src/components/HomePage.tsx b/frontend/src/components/HomePage.tsx index e9e62e9..3ff2f65 100644 --- a/frontend/src/components/HomePage.tsx +++ b/frontend/src/components/HomePage.tsx @@ -1,6 +1,6 @@ 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"; @@ -8,9 +8,11 @@ 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 = () => { }) + useEffect(() => { + if (page == undefined || !["flags", "attacks", "teams"].includes(page)){ + navigate("/flags") + } + }, [page]) + + const onTabChange = (page:string|null) => { + navigate("/"+page) + } + return {messages?<>{messages}:null} - + } color="red"> Flags } color="green"> Attacks diff --git a/frontend/src/components/WelcomeTitle.tsx b/frontend/src/components/WelcomeTitle.tsx index 70a9355..cedba73 100644 --- 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,15 +236,16 @@ 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 { padding: 30, paddingTop:70, paddingBottom:70, - position: "relative", - opacity: useTransform( - time_loop, - ending_animate_all, - [1, 0], - { clamp: false, ease: animate_timing}, - ), + position: "relative" }} >