feat: reenable mixer

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 (
+    <Html center>
+      <Progress value={progress} style={{ width: "10rem" }} />
+    </Html>
+  );
+}

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 (
     <Canvas
       shadows="soft"
+      style={{ background: "black" }}
       camera={{
         fov: 45,
-        position: [5, 5, -5],
+        position: [-4, 4, -7],
       }}
     >
-      <OrbitControls />
+      <OrbitControls
+        maxDistance={20}
+        minDistance={5}
+        enableDamping={false}
+        target={[0, 0.5, 0]}
+      />
 
       <Lighting />
+      <SceneProps />
 
-      <Suspense fallback={null}>
+      <Suspense fallback={<MixerFallback />}>
         <Model />
       </Suspense>
     </Canvas>

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);
   });
 </script>
 
-{
-  !integrated && (
-    <Box className="padder" height={{ initial: "3.5rem", sm: "3rem" }} />
-  )
-}
+<Box className="padder" height={{ initial: "3.5rem", sm: "3rem" }} />
 
 <Flex
   direction="column"
@@ -138,11 +134,12 @@ const strings = getStrings(locale);
           className="tools"
         >
           {
-            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 (

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 (
     <Box

packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/Control.tsx

@@ -266,7 +266,6 @@ export function Controls({
       ref={orbitControls}
       enabled={Tankopedia.state.controlsEnabled}
       enableDamping={false}
-      autoRotateSpeed={1 / 4}
     />
   );
 }

packages/website/src/constants/tools.ts

@@ -10,7 +10,7 @@ export interface Tool {
   href?: string;
 }
 
-export const tools = {
+export const tools: Record<string, Tool> = {
   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<string, Tool>;
+};

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;
+}

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 (
-    <PageWrapper p="0">
-      <Box flexGrow="1" position="relative">
-        <Box position="absolute" width="100%" height="100%" top="0" left="0">
-          <MixerScene />
-        </Box>
+    <Box flexGrow="1" position="relative">
+      <Box position="absolute" width="100%" height="100%" top="0" left="0">
+        <MixerScene />
       </Box>
-    </PageWrapper>
+    </Box>
   );
 }

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;
 ---
 
-<BaseLayout>
-  <PageWrapper p="0" maxWidth="unset">
+<BaseLayout integrated>
+  <PageWrapper color="gray" p="0" maxWidth="unset">
     <Page {locale} client:load />
   </PageWrapper>
 </BaseLayout>