From 766801826c16559ac42423abe813343c4424b1c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com> Date: Sat, 27 Sep 2025 17:51:29 -0500 Subject: [PATCH] fix: canvases --- packages/varuna/src/index.ts | 2 -- packages/website/src/components/PWA.astro | 4 ++++ .../TankSandbox/components/Lighting.tsx | 4 +++- .../Tankopedia/HeroSection/index.tsx | 4 +++- packages/website/src/core/blitzkit/pwa.ts | 0 .../src/pages/[...locale]/guess/_index.tsx | 21 +++++++++++++------ .../src/pages/[...locale]/guess/index.astro | 13 ++++++------ 7 files changed, 31 insertions(+), 17 deletions(-) create mode 100644 packages/website/src/core/blitzkit/pwa.ts diff --git a/packages/varuna/src/index.ts b/packages/varuna/src/index.ts index 50f4e2ff7..8e3dafa52 100644 --- a/packages/varuna/src/index.ts +++ b/packages/varuna/src/index.ts @@ -36,8 +36,6 @@ export class Varuna { } useInitialization(...args: Arguments[]) { - if (this.initialized) return; - const initializedThisMount = useRef(false); if (initializedThisMount.current) return; diff --git a/packages/website/src/components/PWA.astro b/packages/website/src/components/PWA.astro index 1b1fcbea1..71d45c2eb 100644 --- a/packages/website/src/components/PWA.astro +++ b/packages/website/src/components/PWA.astro @@ -18,6 +18,10 @@ import { pwaInfo } from "virtual:pwa-info"; onOfflineReady() { console.log("PWA offline ready"); }, + + onNeedRefresh() { + document.documentElement.classList.add("pwa-refresh"); + }, }); pwaInstallHandler.addListener((canInstall) => { diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx index ee4c1ef0f..a69311b48 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting.tsx @@ -5,6 +5,7 @@ import { useRef, useState } from "react"; import { Color, SpotLight, SpotLightHelper } from "three"; import { degToRad } from "three/src/math/MathUtils.js"; import { isHalloween } from "../../../../../../core/blitzkit/isHalloween"; +import { Tankopedia } from "../../../../../../stores/tankopedia"; import { HelpingSpotLight } from "../../../../../HelpingSpotLight"; const LIGHTS_COUNT = 5; @@ -18,6 +19,7 @@ const TARGET_FRAME_RATE = 30; export function Lighting() { const [cast, setCast] = useState(true); + const revealed = Tankopedia.use((state) => state.revealed); const topLight = useRef(null!); const frontLight = useRef(null!); @@ -29,7 +31,7 @@ export function Lighting() { const samples = useRef([]); useFrame(({ clock }) => { - if (!cast) return; + if (!cast || !revealed) return; const dt = clock.elapsedTime - last.current; last.current = clock.elapsedTime; diff --git a/packages/website/src/components/Tankopedia/HeroSection/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/index.tsx index f2f749ae6..c96a2d9e6 100644 --- a/packages/website/src/components/Tankopedia/HeroSection/index.tsx +++ b/packages/website/src/components/Tankopedia/HeroSection/index.tsx @@ -140,7 +140,9 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) { }} > - + {!skeleton && ( + + )} diff --git a/packages/website/src/core/blitzkit/pwa.ts b/packages/website/src/core/blitzkit/pwa.ts new file mode 100644 index 000000000..e69de29bb diff --git a/packages/website/src/pages/[...locale]/guess/_index.tsx b/packages/website/src/pages/[...locale]/guess/_index.tsx index 86a2b046b..7282e7bbc 100644 --- a/packages/website/src/pages/[...locale]/guess/_index.tsx +++ b/packages/website/src/pages/[...locale]/guess/_index.tsx @@ -4,6 +4,7 @@ import { GuessBackground } from "../../../components/GuessBackground"; import { Guesser } from "../../../components/Guesser"; import { GuessRenderer } from "../../../components/GuessRenderer"; import { GuessRendererLoader } from "../../../components/GuessRendererLoader"; +import { PageWrapper } from "../../../components/PageWrapper"; import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions"; import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions"; import { @@ -14,6 +15,7 @@ import { import { Duel } from "../../../stores/duel"; import { Guess, GuessState } from "../../../stores/guess"; import { Tankopedia } from "../../../stores/tankopedia"; +import type { MaybeSkeletonComponentProps } from "../../../types/maybeSkeletonComponentProps"; const [tankDefinitions, modelDefinitions] = await Promise.all([ awaitableTankDefinitions, @@ -22,7 +24,10 @@ const [tankDefinitions, modelDefinitions] = await Promise.all([ const ids = Object.keys(tankDefinitions.tanks); -export function Page({ locale }: LocaleAcceptorProps) { +export function Page({ + locale, + skeleton, +}: LocaleAcceptorProps & MaybeSkeletonComponentProps) { const id = Number(ids[Math.floor(Math.random() * ids.length)]); const tank = tankDefinitions.tanks[id]; @@ -30,22 +35,26 @@ export function Page({ locale }: LocaleAcceptorProps) { return ( - + ); } -function Container() { +function Container({ skeleton }: MaybeSkeletonComponentProps) { const tank = Guess.use((state) => state.tank); const model = modelDefinitions.models[tank.id]; Tankopedia.useInitialization(model); Duel.useInitialization({ tank, model }); - return ; + return ( + + + + ); } -function Content() { +function Content({ skeleton }: MaybeSkeletonComponentProps) { const { unwrap } = useLocale(); const tank = Guess.use((state) => state.tank); const guessState = Guess.use((state) => state.guessState); @@ -85,7 +94,7 @@ function Content() { style={{ transitionDuration }} > }> - + {!skeleton && } diff --git a/packages/website/src/pages/[...locale]/guess/index.astro b/packages/website/src/pages/[...locale]/guess/index.astro index 91532d3cf..3708bf7fc 100644 --- a/packages/website/src/pages/[...locale]/guess/index.astro +++ b/packages/website/src/pages/[...locale]/guess/index.astro @@ -1,15 +1,14 @@ --- -import { PageWrapper } from '../../../components/PageWrapper'; -import BaseLayout from '../../../layouts/BaseLayout.astro'; -import { Page } from './_index'; +import BaseLayout from "../../../layouts/BaseLayout.astro"; +import { Page } from "./_index"; -export { getStaticPaths } from '../index.astro'; +export { getStaticPaths } from "../index.astro"; const { locale } = Astro.params; --- - - - + + +