From a804f3c28015985d023bb3c691c677c274a204d1 Mon Sep 17 00:00:00 2001 From: Hewston Fox Date: Sat, 21 Mar 2026 02:56:15 +0200 Subject: [PATCH] feat: add assets --- src/components/icons/DropIcon.tsx | 24 + src/components/icons/HoneyIcon.tsx | 564 ++ src/components/icons/LockIcon.tsx | 38 + src/components/icons/MoneyIcon.tsx | 207 + src/routes/-/RootLayout/RootLayout.module.css | 11 + src/routes/-/RootLayout/RootLayout.tsx | 23 + src/routes/-/RootLayout/assets/main-bg.svg | 7781 +++++++++++++++++ .../components}/Header/Header.module.css | 0 .../components}/Header/Header.tsx | 0 .../components}/Header/assets/menu.svg | 0 .../components}/Header/assets/user-bar.svg | 0 .../components}/Header/index.ts | 0 .../Navigation/Navigation.module.css | 9 +- .../components}/Navigation/Navigation.tsx | 121 +- .../components}/Navigation/assets/apiary.svg | 0 .../Navigation/assets/cashdesk.svg | 0 .../Navigation/assets/earnings.svg | 0 .../components}/Navigation/assets/game.svg | 0 .../components}/Navigation/assets/menu.svg | 0 .../Navigation/assets/roulette.svg | 0 .../components}/Navigation/assets/shop.svg | 0 .../components}/Navigation/assets/tasks.svg | 0 .../components}/Navigation/index.ts | 0 src/routes/-/RootLayout/index.ts | 1 + src/routes/__root.tsx | 33 +- src/routes/apiary/-/ApiaryRoute.tsx | 26 +- src/routes/apiary/-/assets/bush.svg | 2051 +++++ src/routes/apiary/-/assets/hive-left.svg | 986 +++ src/routes/apiary/-/assets/hive-right.svg | 986 +++ src/routes/apiary/-/assets/jar-0.svg | 81 + src/routes/apiary/-/assets/jar-1.svg | 110 + src/routes/apiary/-/assets/jar-100.svg | 126 + src/routes/apiary/-/assets/jar-25.svg | 130 + src/routes/apiary/-/assets/jar-60.svg | 118 + src/routes/apiary/-/assets/jar-75.svg | 130 + .../-/components/MovingBees/MovingBees.tsx | 90 + .../-/components/MovingBees/bees/Bee1.tsx | 188 + .../-/components/MovingBees/bees/Bee2.tsx | 193 + .../-/components/MovingBees/bees/Bee3.tsx | 193 + .../-/components/MovingBees/bees/Bee4.tsx | 193 + .../-/components/MovingBees/bees/Bee5.tsx | 193 + .../-/components/MovingBees/bees/Bee6.tsx | 193 + .../apiary/-/components/MovingBees/index.ts | 1 + src/routes/game/-/GameRoute.tsx | 16 - src/routes/game/-/assets/bee.png | Bin 0 -> 5661 bytes src/routes/game/-/assets/wood-background.svg | 429 + src/routes/roulette/-/assets/bg.svg | 2646 ++++++ src/routes/roulette/-/assets/fg.svg | 3489 ++++++++ src/routes/roulette/-/assets/wheel.svg | 265 + 49 files changed, 21548 insertions(+), 97 deletions(-) create mode 100644 src/components/icons/DropIcon.tsx create mode 100644 src/components/icons/HoneyIcon.tsx create mode 100644 src/components/icons/LockIcon.tsx create mode 100644 src/components/icons/MoneyIcon.tsx create mode 100644 src/routes/-/RootLayout/RootLayout.module.css create mode 100644 src/routes/-/RootLayout/RootLayout.tsx create mode 100644 src/routes/-/RootLayout/assets/main-bg.svg rename src/routes/-/{ => RootLayout/components}/Header/Header.module.css (100%) rename src/routes/-/{ => RootLayout/components}/Header/Header.tsx (100%) rename src/routes/-/{ => RootLayout/components}/Header/assets/menu.svg (100%) rename src/routes/-/{ => RootLayout/components}/Header/assets/user-bar.svg (100%) rename src/routes/-/{ => RootLayout/components}/Header/index.ts (100%) rename src/routes/-/{ => RootLayout/components}/Navigation/Navigation.module.css (95%) rename src/routes/-/{ => RootLayout/components}/Navigation/Navigation.tsx (59%) rename src/routes/-/{ => RootLayout/components}/Navigation/assets/apiary.svg (100%) rename src/routes/-/{ => RootLayout/components}/Navigation/assets/cashdesk.svg (100%) rename src/routes/-/{ => RootLayout/components}/Navigation/assets/earnings.svg (100%) rename src/routes/-/{ => RootLayout/components}/Navigation/assets/game.svg (100%) rename src/routes/-/{ => RootLayout/components}/Navigation/assets/menu.svg (100%) rename src/routes/-/{ => RootLayout/components}/Navigation/assets/roulette.svg (100%) rename src/routes/-/{ => RootLayout/components}/Navigation/assets/shop.svg (100%) rename src/routes/-/{ => RootLayout/components}/Navigation/assets/tasks.svg (100%) rename src/routes/-/{ => RootLayout/components}/Navigation/index.ts (100%) create mode 100644 src/routes/-/RootLayout/index.ts create mode 100644 src/routes/apiary/-/assets/bush.svg create mode 100644 src/routes/apiary/-/assets/hive-left.svg create mode 100644 src/routes/apiary/-/assets/hive-right.svg create mode 100644 src/routes/apiary/-/assets/jar-0.svg create mode 100644 src/routes/apiary/-/assets/jar-1.svg create mode 100644 src/routes/apiary/-/assets/jar-100.svg create mode 100644 src/routes/apiary/-/assets/jar-25.svg create mode 100644 src/routes/apiary/-/assets/jar-60.svg create mode 100644 src/routes/apiary/-/assets/jar-75.svg create mode 100644 src/routes/apiary/-/components/MovingBees/MovingBees.tsx create mode 100644 src/routes/apiary/-/components/MovingBees/bees/Bee1.tsx create mode 100644 src/routes/apiary/-/components/MovingBees/bees/Bee2.tsx create mode 100644 src/routes/apiary/-/components/MovingBees/bees/Bee3.tsx create mode 100644 src/routes/apiary/-/components/MovingBees/bees/Bee4.tsx create mode 100644 src/routes/apiary/-/components/MovingBees/bees/Bee5.tsx create mode 100644 src/routes/apiary/-/components/MovingBees/bees/Bee6.tsx create mode 100644 src/routes/apiary/-/components/MovingBees/index.ts create mode 100644 src/routes/game/-/assets/bee.png create mode 100644 src/routes/game/-/assets/wood-background.svg create mode 100644 src/routes/roulette/-/assets/bg.svg create mode 100644 src/routes/roulette/-/assets/fg.svg create mode 100644 src/routes/roulette/-/assets/wheel.svg diff --git a/src/components/icons/DropIcon.tsx b/src/components/icons/DropIcon.tsx new file mode 100644 index 0000000..d27f1af --- /dev/null +++ b/src/components/icons/DropIcon.tsx @@ -0,0 +1,24 @@ +import { motion, type SVGMotionProps } from "motion/react"; +import clsx, { type ClassValue } from "clsx"; + +type Props = Omit, "className"> & { + className?: ClassValue; +}; + +export default function DropIcon(props: Props) { + return ( + + + + ); +} diff --git a/src/components/icons/HoneyIcon.tsx b/src/components/icons/HoneyIcon.tsx new file mode 100644 index 0000000..c1ceb1b --- /dev/null +++ b/src/components/icons/HoneyIcon.tsx @@ -0,0 +1,564 @@ +import { motion, type SVGMotionProps } from "motion/react"; +import clsx, { type ClassValue } from "clsx"; + +type Props = Omit, "className"> & { + className?: ClassValue; +}; + +export default function HoneyIcon(props: Props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/components/icons/LockIcon.tsx b/src/components/icons/LockIcon.tsx new file mode 100644 index 0000000..a8a1ac6 --- /dev/null +++ b/src/components/icons/LockIcon.tsx @@ -0,0 +1,38 @@ +import { motion, type SVGMotionProps } from "motion/react"; +import clsx, { type ClassValue } from "clsx"; + +type Props = Omit, "className"> & { + className?: ClassValue; +}; + +export default function LockIcon(props: Props) { + return ( + + + + + + + + + + + + ); +} diff --git a/src/components/icons/MoneyIcon.tsx b/src/components/icons/MoneyIcon.tsx new file mode 100644 index 0000000..a21e87f --- /dev/null +++ b/src/components/icons/MoneyIcon.tsx @@ -0,0 +1,207 @@ +import { motion, type SVGMotionProps } from "motion/react"; +import clsx, { type ClassValue } from "clsx"; + +type Props = Omit, "className"> & { + className?: ClassValue; +}; + +export default function MoneyIcon(props: Props) { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} diff --git a/src/routes/-/RootLayout/RootLayout.module.css b/src/routes/-/RootLayout/RootLayout.module.css new file mode 100644 index 0000000..10f5d94 --- /dev/null +++ b/src/routes/-/RootLayout/RootLayout.module.css @@ -0,0 +1,11 @@ +@layer base { + .rootLayout { + position: relative; + height: 100%; + width: 100%; + + background-image: url("./assets/main-bg.svg"); + background-size: auto 101%; + background-position: center; + } +} diff --git a/src/routes/-/RootLayout/RootLayout.tsx b/src/routes/-/RootLayout/RootLayout.tsx new file mode 100644 index 0000000..0a4a303 --- /dev/null +++ b/src/routes/-/RootLayout/RootLayout.tsx @@ -0,0 +1,23 @@ +import type { ReactNode } from "react"; +import Header from "./components/Header"; +import Navigation from "./components/Navigation"; +import classes from "./RootLayout.module.css"; + +type Props = { + hideControls?: boolean; + children?: ReactNode; +}; + +export default function RootLayout({ children, hideControls }: Props) { + return ( +
+ {!hideControls &&
} + +
+ {children} +
+ + {!hideControls && } +
+ ); +} diff --git a/src/routes/-/RootLayout/assets/main-bg.svg b/src/routes/-/RootLayout/assets/main-bg.svg new file mode 100644 index 0000000..d4ef7db --- /dev/null +++ b/src/routes/-/RootLayout/assets/main-bg.svg @@ -0,0 +1,7781 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/-/Header/Header.module.css b/src/routes/-/RootLayout/components/Header/Header.module.css similarity index 100% rename from src/routes/-/Header/Header.module.css rename to src/routes/-/RootLayout/components/Header/Header.module.css diff --git a/src/routes/-/Header/Header.tsx b/src/routes/-/RootLayout/components/Header/Header.tsx similarity index 100% rename from src/routes/-/Header/Header.tsx rename to src/routes/-/RootLayout/components/Header/Header.tsx diff --git a/src/routes/-/Header/assets/menu.svg b/src/routes/-/RootLayout/components/Header/assets/menu.svg similarity index 100% rename from src/routes/-/Header/assets/menu.svg rename to src/routes/-/RootLayout/components/Header/assets/menu.svg diff --git a/src/routes/-/Header/assets/user-bar.svg b/src/routes/-/RootLayout/components/Header/assets/user-bar.svg similarity index 100% rename from src/routes/-/Header/assets/user-bar.svg rename to src/routes/-/RootLayout/components/Header/assets/user-bar.svg diff --git a/src/routes/-/Header/index.ts b/src/routes/-/RootLayout/components/Header/index.ts similarity index 100% rename from src/routes/-/Header/index.ts rename to src/routes/-/RootLayout/components/Header/index.ts diff --git a/src/routes/-/Navigation/Navigation.module.css b/src/routes/-/RootLayout/components/Navigation/Navigation.module.css similarity index 95% rename from src/routes/-/Navigation/Navigation.module.css rename to src/routes/-/RootLayout/components/Navigation/Navigation.module.css index f383d43..a2ccb18 100644 --- a/src/routes/-/Navigation/Navigation.module.css +++ b/src/routes/-/RootLayout/components/Navigation/Navigation.module.css @@ -11,7 +11,7 @@ bottom: 0; left: 0; z-index: 10; - max-width: 320px; + max-width: 500px; margin: auto; display: flex; align-items: flex-end; @@ -27,6 +27,7 @@ align-items: center; justify-content: flex-start; padding-bottom: var(--navigation-padding); + cursor: pointer; } .safeContent { @@ -52,13 +53,10 @@ -webkit-text-stroke: 1px #331b01; text-shadow: 0px 2px 2px #0000008c; line-height: 1; - } - - .labelInactive { color: white; } - .labelActive { + .active .label { color: #ffbd42; } @@ -89,6 +87,7 @@ align-items: center; justify-content: flex-start; padding-right: 20px; + cursor: pointer; } .menuBarContent { diff --git a/src/routes/-/Navigation/Navigation.tsx b/src/routes/-/RootLayout/components/Navigation/Navigation.tsx similarity index 59% rename from src/routes/-/Navigation/Navigation.tsx rename to src/routes/-/RootLayout/components/Navigation/Navigation.tsx index 6985004..04b473b 100644 --- a/src/routes/-/Navigation/Navigation.tsx +++ b/src/routes/-/RootLayout/components/Navigation/Navigation.tsx @@ -1,4 +1,4 @@ -import { useMatchRoute, useNavigate } from "@tanstack/react-router"; +import { type AnyRoute, useMatchRoute, useNavigate } from "@tanstack/react-router"; import { useTranslation } from "react-i18next"; import { AnimatePresence } from "motion/react"; @@ -22,6 +22,15 @@ import menuIcon from "./assets/menu.svg"; import rouletteIcon from "./assets/roulette.svg"; import tasksIcon from "./assets/tasks.svg"; import earningsIcon from "./assets/earnings.svg"; +import tg from "@/tg"; + +const ANIMATION_DURATION = 0.2; +const SPRING_ANIMATION = { + type: "spring", + stiffness: 400, + damping: 20, + duration: ANIMATION_DURATION, +} as const; const BAR_HEIGHT = 64; const ACTIVE_BAR_HEIGHT = 74; @@ -52,40 +61,40 @@ type BarProps = { function NavBar({ labelKey, icon, active, entranceDelay, onClick }: BarProps) { const { t } = useTranslation(); - const isInitial = useRef(true); + const isInitial = useRef(true); useEffect(() => { isInitial.current = false; }, []); + const height = active ? ACTIVE_BAR_HEIGHT : BAR_HEIGHT; return (
- - {t(labelKey)} - + {t(labelKey)}
); @@ -94,38 +103,55 @@ function NavBar({ labelKey, icon, active, entranceDelay, onClick }: BarProps) { type MenuBarProps = { labelKey: string; icon: string; + active: boolean; delay: number; onClick: () => void; }; -const MENU_SPRING = { type: "spring" as const, stiffness: 400, damping: 20 }; +const MENU_BAR_WIDTH = 94; +const ACTIVE_MENU_BAR_WIDTH = 104; +const OFFSCREEN_MENU_BAR_OFFSET = 20; -function MenuBar({ labelKey, icon, delay, onClick }: MenuBarProps) { +function MenuBar({ labelKey, icon, delay, active, onClick }: MenuBarProps) { const { t } = useTranslation(); + const [isReady, setIsReady] = useState(false); + + const width = active ? ACTIVE_MENU_BAR_WIDTH : MENU_BAR_WIDTH; return ( variant === "visible" && setIsReady(true)} initial="hidden" - animate="visible" + animate={isReady ? "ready" : "visible"} exit="exit" whileTap={{ scale: 0.95 }} onClick={onClick} >
- {t(labelKey)} + {t(labelKey)}
); @@ -134,12 +160,12 @@ function MenuBar({ labelKey, icon, delay, onClick }: MenuBarProps) { export default function Navigation() { const matchRoute = useMatchRoute(); const navigate = useNavigate(); - const [menuOpen, setMenuOpen] = useState(false); + const [menuOpen, setMenuOpen] = useState(0); const navRef = useRef(null); const handleOutsideClick = useCallback((e: MouseEvent) => { if (navRef.current && !navRef.current.contains(e.target as Node)) { - setMenuOpen(false); + setMenuOpen(0); } }, []); @@ -150,6 +176,16 @@ export default function Navigation() { } }, [menuOpen, handleOutsideClick]); + const navigateRoute = async (route: AnyRoute, wait = false) => { + tg.hapticFeedback.click(); + const redirection = navigate({ to: route.to }); + if (wait) { + await new Promise((resolve) => setTimeout(resolve, 1000 * ANIMATION_DURATION - 100)); + await redirection; + } + setMenuOpen(0); + }; + return (
@@ -157,21 +193,19 @@ export default function Navigation() { {menuOpen && MENU_ITEMS.map((item) => ( { - setMenuOpen(false); - navigate({ to: item.route.to }); - }} + onClick={() => navigateRoute(item.route, true)} /> ))}