fix: canvases

packages/varuna/src/index.ts

@@ -36,8 +36,6 @@ export class Varuna<Type, Arguments = void> {
   }
 
   useInitialization(...args: Arguments[]) {
-    if (this.initialized) return;
-
     const initializedThisMount = useRef(false);
 
     if (initializedThisMount.current) return;

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) => {

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<SpotLight>(null!);
   const frontLight = useRef<SpotLight>(null!);
@@ -29,7 +31,7 @@ export function Lighting() {
   const samples = useRef<number[]>([]);
 
   useFrame(({ clock }) => {
-    if (!cast) return;
+    if (!cast || !revealed) return;
 
     const dt = clock.elapsedTime - last.current;
     last.current = clock.elapsedTime;

packages/website/src/components/Tankopedia/HeroSection/index.tsx

@@ -140,7 +140,9 @@ export function HeroSection({ skeleton }: MaybeSkeletonComponentProps) {
                 }}
               >
                 <Suspense>
-                  <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
+                  {!skeleton && (
+                    <TankSandbox ref={canvas} thicknessRange={thicknessRange} />
+                  )}
                 </Suspense>
               </Box>
             </Box>

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 (
     <LocaleProvider locale={locale}>
-      <Container />
+      <Container skeleton={skeleton} />
     </LocaleProvider>
   );
 }
 
-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 <Content />;
+  return (
+    <PageWrapper p="0" maxWidth="unset" color="cyan">
+      <Content skeleton={skeleton} />
+    </PageWrapper>
+  );
 }
 
-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 }}
       >
         <Suspense fallback={<GuessRendererLoader />}>
-          <GuessRenderer />
+          {!skeleton && <GuessRenderer />}
         </Suspense>
       </Box>
 

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;
 ---
 
 <BaseLayout noFooter>
-  <PageWrapper p="0" maxWidth="unset" color="cyan">
-    <Page {locale} client:load />
-  </PageWrapper>
+  <Page {locale} client:only="react">
+    <Page {locale} skeleton slot="fallback" />
+  </Page>
 </BaseLayout>