diff --git a/packages/website/public/assets/images/tools/blitz-analysis.webp b/packages/website/public/assets/images/tools/blitz-analysis.webp deleted file mode 100644 index 227a2b1f5..000000000 Binary files a/packages/website/public/assets/images/tools/blitz-analysis.webp and /dev/null differ diff --git a/packages/website/public/assets/images/tools/blitz-insider.webp b/packages/website/public/assets/images/tools/blitz-insider.webp deleted file mode 100644 index c90de3bbf..000000000 Binary files a/packages/website/public/assets/images/tools/blitz-insider.webp and /dev/null differ diff --git a/packages/website/public/assets/images/tools/mixer.webp b/packages/website/public/assets/images/tools/mixer.webp new file mode 100644 index 000000000..61f9c9596 Binary files /dev/null and b/packages/website/public/assets/images/tools/mixer.webp differ diff --git a/packages/website/src/components/MixerScene/components/MixerFallback.tsx b/packages/website/src/components/MixerScene/components/MixerFallback.tsx new file mode 100644 index 000000000..707e37c6b --- /dev/null +++ b/packages/website/src/components/MixerScene/components/MixerFallback.tsx @@ -0,0 +1,13 @@ +import { Progress } from "@radix-ui/themes"; +import { Html } from "@react-three/drei"; +import { useStableProgress } from "../../../hooks/useStableProgress"; + +export function MixerFallback() { + const progress = useStableProgress(); + + return ( + + + + ); +} diff --git a/packages/website/src/components/MixerScene/index.tsx b/packages/website/src/components/MixerScene/index.tsx index dbfca417d..80d0fe0da 100644 --- a/packages/website/src/components/MixerScene/index.tsx +++ b/packages/website/src/components/MixerScene/index.tsx @@ -2,22 +2,31 @@ import { OrbitControls } from "@react-three/drei"; import { Canvas } from "@react-three/fiber"; import { Suspense } from "react"; import { Lighting } from "../Tankopedia/HeroSection/components/TankSandbox/components/Lighting"; +import { SceneProps } from "../Tankopedia/HeroSection/components/TankSandbox/components/SceneProps"; +import { MixerFallback } from "./components/MixerFallback"; import { Model } from "./components/Model"; export function MixerScene() { return ( - + + - + }> diff --git a/packages/website/src/components/Navbar.astro b/packages/website/src/components/Navbar.astro index 7180e3b95..becb4cb59 100644 --- a/packages/website/src/components/Navbar.astro +++ b/packages/website/src/components/Navbar.astro @@ -17,8 +17,8 @@ export interface Props { } const { integrated = false } = Astro.props; -const toolsFiltered = Object.entries(tools).filter( - ([, tool]) => !tool.href && !tool.disabled +const toolsFiltered = Object.values(tools).filter( + (tool) => !tool.href && !tool.disabled ); const { locale } = Astro.params; const branchName = resolveBranchName(locale); @@ -78,11 +78,7 @@ const strings = getStrings(locale); }); -{ - !integrated && ( - - ) -} + { - toolsFiltered.map(([id, tool]) => { + toolsFiltered.map((tool) => { const selected = Astro.url.pathname.includes(`/${tool.id}`); const toolStrings = strings.website.tools[ - (tool.strings ?? id) as keyof typeof strings.website.tools + (tool.strings ?? + tool.id) as keyof typeof strings.website.tools ]; return ( @@ -203,10 +200,10 @@ const strings = getStrings(locale); display={{ initial: "flex", sm: "none" }} > { - toolsFiltered.map(([id, tool]) => { + toolsFiltered.map(( tool) => { const toolStrings = strings.website.tools[ - (tool.strings ?? id) as keyof typeof strings.website.tools + (tool.strings ?? tool.id) as keyof typeof strings.website.tools ]; return ( diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/components/Tracker.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/components/Tracker.tsx index d60379abb..2b6d7071d 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/components/Tracker.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/Title/components/Tracker.tsx @@ -1,13 +1,12 @@ -import { Box, Progress } from '@radix-ui/themes'; -import { useProgress } from '@react-three/drei'; +import { Box, Progress } from "@radix-ui/themes"; +import { useStableProgress } from "../../../../../../../hooks/useStableProgress"; interface Props { fontSize?: string; } export function Tracker({ fontSize }: Props) { - const { loaded, total } = useProgress(); - const progress = total === 0 ? 0 : (loaded / total) * 100; + const progress = useStableProgress(); return ( ); } diff --git a/packages/website/src/constants/tools.ts b/packages/website/src/constants/tools.ts index 643e9a5ac..6188a1b19 100644 --- a/packages/website/src/constants/tools.ts +++ b/packages/website/src/constants/tools.ts @@ -10,7 +10,7 @@ export interface Tool { href?: string; } -export const tools = { +export const tools: Record = { tanks: { id: "tanks", strings: "tankopedia", @@ -41,8 +41,7 @@ export const tools = { }, mixer: { id: "mixer", - disabled: true, - button: "red", + button: "gray", }, gallery: { id: "gallery", @@ -76,4 +75,4 @@ export const tools = { href: "https://discord.gg/nDt7AjGJQH", button: "plum", }, -} satisfies Record; +}; diff --git a/packages/website/src/hooks/useStableProgress.ts b/packages/website/src/hooks/useStableProgress.ts new file mode 100644 index 000000000..332ded1d0 --- /dev/null +++ b/packages/website/src/hooks/useStableProgress.ts @@ -0,0 +1,14 @@ +import { useProgress } from "@react-three/drei"; +import { useRef } from "react"; + +export function useStableProgress() { + const { loaded, total } = useProgress(); + const progress = useRef(0); + + progress.current = Math.max( + progress.current, + total === 0 ? 0 : (loaded / total) * 100 + ); + + return progress.current; +} diff --git a/packages/website/src/pages/[...locale]/mixer/_index.tsx b/packages/website/src/pages/[...locale]/mixer/_index.tsx index 8b8d5a50e..36966b01d 100644 --- a/packages/website/src/pages/[...locale]/mixer/_index.tsx +++ b/packages/website/src/pages/[...locale]/mixer/_index.tsx @@ -1,7 +1,7 @@ import { Box } from "@radix-ui/themes"; import { useRef } from "react"; import { MixerScene } from "../../../components/MixerScene"; -import { PageWrapper } from "../../../components/PageWrapper"; +import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions"; import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions"; import { LocaleProvider, @@ -10,7 +10,14 @@ import { import { Mixer } from "../../../stores/mixer"; const tankDefinitions = await awaitableTankDefinitions; -const tanks = Object.values(tankDefinitions.tanks); +const modelDefinitions = await awaitableModelDefinitions; +const tanks = Object.values(tankDefinitions.tanks).filter((tank) => { + const tankModel = modelDefinitions.models[tank.id]; + const turret = tank.turrets.at(-1)!; + const turretModel = tankModel.turrets[turret.id]; + + return tank.tier >= 10 && !turretModel.yaw; +}); export function Page({ locale }: LocaleAcceptorProps) { const hull = useRef(tanks[Math.floor(Math.random() * tanks.length)]); @@ -51,12 +58,10 @@ export function Page({ locale }: LocaleAcceptorProps) { function Content() { return ( - - - - - + + + - + ); } diff --git a/packages/website/src/pages/[...locale]/mixer/index.astro b/packages/website/src/pages/[...locale]/mixer/index.astro index ec26fd5f3..340362892 100644 --- a/packages/website/src/pages/[...locale]/mixer/index.astro +++ b/packages/website/src/pages/[...locale]/mixer/index.astro @@ -1,15 +1,15 @@ --- -import { PageWrapper } from '../../../components/PageWrapper'; -import BaseLayout from '../../../layouts/BaseLayout.astro'; -import { Page } from './_index'; +import { PageWrapper } from "../../../components/PageWrapper"; +import BaseLayout from "../../../layouts/BaseLayout.astro"; +import { Page } from "./_index"; -export { getStaticPaths } from '../index.astro'; +export { getStaticPaths } from "../index.astro"; const { locale } = Astro.params; --- - - + +