feat: some baswork

packages/i18n/strings/en.json

@@ -853,6 +853,13 @@
     },
 
     "tools": {
+      "guess": {
+        "name": "Guess the tank",
+        "button": "Guess away",
+        "description": "Silhouette mini-game",
+        "seo_description": "Play a tank guessing game with a silhouette in World of Tanks Blitz"
+      },
+
       "tankopedia": {
         "name": "Tankopedia",
         "button": "Find tanks",

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

@@ -33,9 +33,17 @@ const ARCADE_MODE_FOV = 54;
 
 interface ControlsProps {
   naked?: boolean;
+  autoRotate?: boolean;
+  zoomable?: boolean;
+  enableRotate?: boolean;
 }
 
-export function Controls({ naked }: ControlsProps) {
+export function Controls({
+  naked,
+  autoRotate = true,
+  zoomable = true,
+  enableRotate = true,
+}: ControlsProps) {
   const mutateTankopediaEphemeral = TankopediaEphemeral.useMutation();
   const display = TankopediaEphemeral.use((state) => state.display);
   const duelStore = Duel.useStore();
@@ -342,12 +350,14 @@ export function Controls({ naked }: ControlsProps) {
 
   return (
     <OrbitControls
+      enableRotate={enableRotate}
       maxDistance={20}
       minDistance={5}
+      zoomSpeed={zoomable ? undefined : 0}
       ref={orbitControls}
       enabled={tankopediaEphemeralStore.getState().controlsEnabled}
       enableDamping={false}
-      autoRotate={!disturbed}
+      autoRotate={autoRotate && !disturbed}
       autoRotateSpeed={1 / 4}
     />
   );

packages/website/src/constants/tools.ts

@@ -117,6 +117,12 @@ export const chartsTool: Tool = {
   button: {
     color: 'bronze',
   },
+  branches: ['main', 'dev'],
+};
+
+export const guessTool: Tool = {
+  id: 'guess',
+  button: { color: 'cyan' },
   branches: ['main', 'dev', 'opentest', 'preview'],
 };
 
@@ -124,6 +130,7 @@ export const TOOLS: Tool[] = [
   tankopediaTool,
   compareTool,
   performanceTool,
+  guessTool,
   // chartsTool,
   galleryTool,
   sessionTool,

packages/website/src/pages/[...locale]/index.astro

@@ -17,6 +17,7 @@ import {
   discordTool,
   embedTool,
   galleryTool,
+  guessTool,
   moreTool,
   performanceTool,
   sessionTool,
@@ -118,21 +119,22 @@ export const getStaticPaths = (() => {
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <!-- <ToolCard tool={chartsTool} /> -->
+        <ToolCard tool={guessTool} />
         <ToolCard tool={galleryTool} />
+      </Flex>
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={sessionTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={discordTool} />
+      </Flex>
+
+      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={tierListTool} />
-      </Flex>
-
-      <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
         <ToolCard tool={embedTool} />
-        <ToolCard tool={moreTool} />
       </Flex>
 
       <Flex gap="4" direction={{ initial: 'column', sm: 'row' }}>
+        <ToolCard tool={moreTool} />
         <Box flexGrow="1" />
       </Flex>
 

packages/website/src/pages/[...locale]/tools/guess/_index.tsx

@@ -0,0 +1,92 @@
+import { Box, Flex } from '@radix-ui/themes';
+import { awaitableModelDefinitions } from '../../../../core/awaitables/modelDefinitions';
+import { awaitableProvisionDefinitions } from '../../../../core/awaitables/provisionDefinitions';
+import { awaitableTankDefinitions } from '../../../../core/awaitables/tankDefinitions';
+import { Var } from '../../../../core/radix/var';
+import { Duel } from '../../../../stores/duel';
+import { TankopediaEphemeral } from '../../../../stores/tankopediaEphemeral';
+import { GuessRenderer } from './components/GuessRenderer';
+
+const [tankDefinitions, modelDefinitions, provisionDefinitions] =
+  await Promise.all([
+    awaitableTankDefinitions,
+    awaitableModelDefinitions,
+    awaitableProvisionDefinitions,
+  ]);
+
+const ids = Object.keys(tankDefinitions.tanks);
+
+export function Page() {
+  const id = Number(ids[Math.floor(Math.random() * ids.length)]);
+  const tank = tankDefinitions.tanks[id];
+  const model = modelDefinitions.models[id];
+
+  return (
+    <TankopediaEphemeral.Provider data={model}>
+      <Duel.Provider data={{ tank, model, provisionDefinitions }}>
+        <Content />
+      </Duel.Provider>
+    </TankopediaEphemeral.Provider>
+  );
+}
+
+function Content() {
+  return (
+    <Flex
+      flexGrow="1"
+      position="relative"
+      style={{
+        backgroundColor: Var('cyan-3'),
+      }}
+    >
+      <Flex flexGrow="2" position="relative">
+        <Box
+          position="absolute"
+          width="100%"
+          height="100%"
+          top="0"
+          left="0"
+          style={
+            {
+              // backgroundImage:
+              //   'url(https://images.pexels.com/photos/3052361/pexels-photo-3052361.jpeg)',
+              // backgroundSize: 'cover',
+              // backgroundPosition: 'center',
+            }
+          }
+        >
+          <Box
+            position="absolute"
+            width="100%"
+            height="100%"
+            top="0"
+            left="0"
+            style={{
+              backgroundImage: `
+                radial-gradient(circle, ${Var('white-a1')} 20%, transparent 20%),
+                radial-gradient(circle at 0 0, ${Var('white-a1')} 10%, transparent 10%),
+                radial-gradient(circle at 100% 0, ${Var('white-a1')} 10%, transparent 10%),
+                radial-gradient(circle at 0 100%, ${Var('white-a1')} 10%, transparent 10%),
+                radial-gradient(circle at 100% 100%, ${Var('white-a1')} 10%, transparent 10%)
+              `,
+              backgroundSize: '4rem 4rem',
+              // background: `radial-gradient(circle, ${Var('cyan-a1')} 15%, ${Var('cyan-a3')}, ${Var('cyan-a1')}, ${Var('gray-1')} 50%)`,
+              // background: `linear-gradient(90deg, ${Var('black-a3')}, ${Var('black-a9')} 66%)`,
+            }}
+          />
+
+          <GuessRenderer />
+        </Box>
+      </Flex>
+
+      <Flex
+        flexGrow="1"
+        style={{
+          background: Var('color-panel-solid'),
+        }}
+      >
+        b
+      </Flex>
+    </Flex>
+  );
+}

packages/website/src/pages/[...locale]/tools/guess/components/GuessRenderer.tsx

@@ -0,0 +1,56 @@
+import { Canvas, invalidate } from '@react-three/fiber';
+import { useCallback, useEffect, useRef } from 'react';
+import { Fog } from 'three';
+import { Controls } from '../../../../../components/Tankopedia/HeroSection/components/TankSandbox/components/Control';
+import { Lighting } from '../../../../../components/Tankopedia/HeroSection/components/TankSandbox/components/Lighting';
+import { TankModel } from '../../../../../components/Tankopedia/HeroSection/components/TankSandbox/components/TankModel';
+import { Var } from '../../../../../core/radix/var';
+import { TankopediaDisplay } from '../../../../../stores/tankopediaPersistent/constants';
+
+const nearConcealed = -40;
+const farConcealed = 22;
+const nearRevealed = 20;
+const farRevealed = 22;
+const animationDuration = 1;
+
+export function GuessRenderer() {
+  const fog = useRef(new Fog('black', nearConcealed, farConcealed));
+  const reveal = useCallback(() => {
+    const t0 = Date.now() / 1000;
+
+    function frame() {
+      const t = Date.now() / 1000;
+      const x = (t - t0) / animationDuration;
+      const y = Math.sqrt(x);
+      const near = nearConcealed * (1 - y) + nearRevealed * y;
+      const far = farConcealed * (1 - y) + farRevealed * y;
+
+      fog.current.near = near;
+      fog.current.far = far;
+
+      invalidate();
+
+      if (y < 1) requestAnimationFrame(frame);
+    }
+
+    requestAnimationFrame(frame);
+  }, []);
+
+  useEffect(() => {
+    setTimeout(reveal, 2000);
+  }, []);
+
+  return (
+    <Canvas
+      style={{
+        filter: `drop-shadow(0 0 1rem ${Var('black-a11')})`,
+      }}
+      camera={{ position: [-5, 5, -5] }}
+      scene={{ fog: fog.current }}
+    >
+      <Controls zoomable={false} />
+      <Lighting display={TankopediaDisplay.Model} />
+      <TankModel />
+    </Canvas>
+  );
+}

packages/website/src/pages/[...locale]/tools/guess/index.astro

@@ -0,0 +1,13 @@
+---
+import { PageWrapper } from '../../../../components/PageWrapper';
+import BaseLayout from '../../../../layouts/BaseLayout.astro';
+import { Page } from './_index';
+
+export { getStaticPaths } from '../../index.astro';
+---
+
+<BaseLayout noFooter>
+  <PageWrapper p="0" maxWidth="unset">
+    <Page client:load />
+  </PageWrapper>
+</BaseLayout>