feat: upgrade Mixer

packages/website/src/components/MixerScene/components/Model.tsx

@@ -1,14 +1,14 @@
-import { awaitableModelDefinitions } from '../../../core/awaitables/modelDefinitions';
+import { awaitableModelDefinitions } from "../../../core/awaitables/modelDefinitions";
-import { jsxTree } from '../../../core/blitzkit/jsxTree';
+import { jsxTree } from "../../../core/blitzkit/jsxTree";
-import { useModel } from '../../../hooks/useModel';
+import { useModel } from "../../../hooks/useModel";
-import { MixerEphemeral } from '../../../stores/mixerEphemeral';
+import { Mixer } from "../../../stores/mixer";
 
 const modelDefinitions = await awaitableModelDefinitions;
 
 export function Model() {
-  const hull = MixerEphemeral.use((state) => state.hull);
+  const hull = Mixer.use((state) => state.hull);
-  const turret = MixerEphemeral.use((state) => state.turret);
+  const turret = Mixer.use((state) => state.turret);
-  const gun = MixerEphemeral.use((state) => state.gun);
+  const gun = Mixer.use((state) => state.gun);
 
   const hullGltf = useModel(hull.id);
   const turretGltf = useModel(turret.tank.id);
@@ -34,9 +34,9 @@ export function Model() {
   return (
     <group rotation={[-Math.PI / 2, 0, 0]}>
       {hullNodes.map((node) => {
-        const isHull = node.name === 'hull';
+        const isHull = node.name === "hull";
-        const isWheel = node.name.startsWith('chassis_wheel_');
+        const isWheel = node.name.startsWith("chassis_wheel_");
-        const isTrack = node.name.startsWith('chassis_track_');
+        const isTrack = node.name.startsWith("chassis_track_");
         const isVisible = isHull || isWheel || isTrack;
 
         if (!isVisible) return null;
@@ -67,7 +67,7 @@ export function Model() {
         {turretNodes.map((node) => {
           const isCurrentTurret =
             node.name ===
-            `turret_${turretModel.model_id.toString().padStart(2, '0')}`;
+            `turret_${turretModel.model_id.toString().padStart(2, "0")}`;
           const isVisible = isCurrentTurret;
 
           if (!isVisible) return null;
@@ -104,10 +104,10 @@ export function Model() {
           {gunNodes.map((node) => {
             const isCurrentMantlet =
               node.name ===
-              `gun_${gunModel.model_id.toString().padStart(2, '0')}_mask`;
+              `gun_${gunModel.model_id.toString().padStart(2, "0")}_mask`;
             const isCurrentGun =
               node.name ===
-              `gun_${gunModel.model_id.toString().padStart(2, '0')}`;
+              `gun_${gunModel.model_id.toString().padStart(2, "0")}`;
             const isVisible = isCurrentGun || isCurrentMantlet;
 
             if (!isVisible) return null;

packages/website/src/components/MixerScene/index.tsx

@@ -1,12 +1,13 @@
-import { OrbitControls } from '@react-three/drei';
+import { OrbitControls } from "@react-three/drei";
-import { Canvas } from '@react-three/fiber';
+import { Canvas } from "@react-three/fiber";
-import { Suspense } from 'react';
+import { Suspense } from "react";
-import { Model } from './components/Model';
+import { Lighting } from "../Tankopedia/HeroSection/components/TankSandbox/components/Lighting";
+import { Model } from "./components/Model";
 
 export function MixerScene() {
   return (
     <Canvas
-      shadows
+      shadows="soft"
       camera={{
         fov: 45,
         position: [5, 5, -5],
@@ -14,8 +15,7 @@ export function MixerScene() {
     >
       <OrbitControls />
 
-      <directionalLight position={[10, 10, 10]} intensity={5} castShadow />
+      <Lighting />
-      <directionalLight position={[-10, -10, -10]} intensity={3} castShadow />
 
       <Suspense fallback={null}>
         <Model />

packages/website/src/pages/[...locale]/mixer/_index.tsx

@@ -1,13 +1,13 @@
-import { Box } from '@radix-ui/themes';
+import { Box } from "@radix-ui/themes";
-import { useRef } from 'react';
+import { useRef } from "react";
-import { MixerScene } from '../../../components/MixerScene';
+import { MixerScene } from "../../../components/MixerScene";
-import { PageWrapper } from '../../../components/PageWrapper';
+import { PageWrapper } from "../../../components/PageWrapper";
-import { awaitableTankDefinitions } from '../../../core/awaitables/tankDefinitions';
+import { awaitableTankDefinitions } from "../../../core/awaitables/tankDefinitions";
 import {
   LocaleProvider,
   type LocaleAcceptorProps,
-} from '../../../hooks/useLocale';
+} from "../../../hooks/useLocale";
-import { MixerEphemeral } from '../../../stores/mixerEphemeral';
+import { Mixer } from "../../../stores/mixer";
 
 const tankDefinitions = await awaitableTankDefinitions;
 const tanks = Object.values(tankDefinitions.tanks);
@@ -18,35 +18,33 @@ export function Page({ locale }: LocaleAcceptorProps) {
   const turret = useRef(
     turretTank.current.turrets[
       Math.floor(Math.random() * turretTank.current.turrets.length)
-    ],
+    ]
   );
   const gunTank = useRef(tanks[Math.floor(Math.random() * tanks.length)]);
   const gunTurret = useRef(
     gunTank.current.turrets[
       Math.floor(Math.random() * gunTank.current.turrets.length)
-    ],
+    ]
   );
   const gun = useRef(
     gunTurret.current.guns[
       Math.floor(Math.random() * gunTurret.current.guns.length)
-    ],
+    ]
   );
 
+  Mixer.useInitialization({
+    hull: hull.current,
+    turret: { tank: turretTank.current, turret: turret.current },
+    gun: {
+      tank: gunTank.current,
+      turret: gunTurret.current,
+      gun: gun.current,
+    },
+  });
+
   return (
     <LocaleProvider locale={locale}>
-      <MixerEphemeral.Provider
+      <Content />
-        data={{
-          hull: hull.current,
-          turret: { tank: turretTank.current, turret: turret.current },
-          gun: {
-            tank: gunTank.current,
-            turret: gunTurret.current,
-            gun: gun.current,
-          },
-        }}
-      >
-        <Content />
-      </MixerEphemeral.Provider>
     </LocaleProvider>
   );
 }

packages/website/src/stores/mixer.ts

@@ -0,0 +1,21 @@
+import type {
+  GunDefinition,
+  TankDefinition,
+  TurretDefinition,
+} from "@blitzkit/core";
+import { Varuna } from "varuna";
+
+export interface Mixer {
+  hull: TankDefinition;
+  turret: {
+    tank: TankDefinition;
+    turret: TurretDefinition;
+  };
+  gun: {
+    tank: TankDefinition;
+    turret: TurretDefinition;
+    gun: GunDefinition;
+  };
+}
+
+export const Mixer = new Varuna<Mixer, Mixer>((data) => data);

packages/website/src/stores/mixerEphemeral.ts

@@ -1,24 +0,0 @@
-import type {
-  GunDefinition,
-  TankDefinition,
-  TurretDefinition,
-} from '@blitzkit/core';
-import { create } from 'zustand';
-import { createContextualStore } from '../core/zustand/createContextualStore';
-
-export interface MixerEphemeral {
-  hull: TankDefinition;
-  turret: {
-    tank: TankDefinition;
-    turret: TurretDefinition;
-  };
-  gun: {
-    tank: TankDefinition;
-    turret: TurretDefinition;
-    gun: GunDefinition;
-  };
-}
-
-export const MixerEphemeral = createContextualStore((data: MixerEphemeral) =>
-  create<MixerEphemeral>()(() => data),
-);