basic tankopedia layout

.vscode/extensions.json

@@ -1,4 +0,0 @@
-{
-  "recommendations": ["astro-build.astro-vscode"],
-  "unwantedRecommendations": []
-}

.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
-      "request": "launch",
-      "type": "node-terminal"
-    }
-  ]
-}

.vscode/settings.json

@@ -1,270 +0,0 @@
-{
-  // "js/ts.experimental.useTsgo": true,
-  "protobuf.includes": ["${workspaceFolder}/path/to/protos"],
-  "cSpell.words": [
-    "AABBOX",
-    "Abhi",
-    "absarc",
-    "accountinfo",
-    "adsense",
-    "aeson",
-    "alphatest",
-    "analyticsdata",
-    "analyticsreporting",
-    "APAC",
-    "apcr",
-    "appinfo",
-    "applypatches",
-    "artefacts",
-    "astrojs",
-    "astrolib",
-    "atgm",
-    "autocrop",
-    "Autoloader",
-    "Autoreloader",
-    "AYUV",
-    "battleresults",
-    "bbox",
-    "beforeinstallprompt",
-    "bepaint",
-    "betakrieg",
-    "BINORMAL",
-    "Binormals",
-    "bkni",
-    "BKRL",
-    "BKRTS",
-    "BKRTSMANIFEST",
-    "bkwd",
-    "blitzkit",
-    "blitzrinth",
-    "blitzstars",
-    "bufbuild",
-    "cacheable",
-    "Callouts",
-    "Camo",
-    "Carro",
-    "catalogitemaccessor",
-    "CCPAOPTOUT",
-    "CDON",
-    "clanid",
-    "classname",
-    "cleandist",
-    "closedkrieg",
-    "cockroackdb",
-    "Coef",
-    "Combattimento",
-    "cooldown",
-    "corelations",
-    "corsproxy",
-    "CUBEMAP",
-    "CUBETEXCOORD",
-    "customperiod",
-    "datasource",
-    "Dava",
-    "dbid",
-    "Ddpf",
-    "Ddsd",
-    "deadrail",
-    "DEBUFF",
-    "debugflags",
-    "deburr",
-    "deburred",
-    "decalmask",
-    "decompressor",
-    "décor",
-    "dedup",
-    "defence",
-    "degressive",
-    "devkrieg",
-    "diacriticless",
-    "DIDS",
-    "donotremove",
-    "drei",
-    "Droodles",
-    "dvpd",
-    "dvpl",
-    "DVPLCRC",
-    "dvpm",
-    "dxgi",
-    "easimon",
-    "echarts",
-    "Everytime",
-    "FASTNAME",
-    "favicons",
-    "filelist",
-    "flexdirection",
-    "fontsource",
-    "FOURCC",
-    "frameloop",
-    "fsformat",
-    "Fullscreen",
-    "fullstats",
-    "fuzzysort",
-    "gamemode",
-    "gameplay",
-    "glsl",
-    "GLTF",
-    "GSOR",
-    "gtag",
-    "haha",
-    "Herdbreaker",
-    "Hetz",
-    "highp",
-    "iife",
-    "imgur",
-    "immer",
-    "Inclusivity",
-    "JOINTINDEX",
-    "JOINTWEIGHT",
-    "kranvagn",
-    "krieg",
-    "Leaderboard",
-    "leaderboards",
-    "lerp",
-    "LINEARSIZE",
-    "linktarget",
-    "lmao",
-    "loadouts",
-    "loddist",
-    "lods",
-    "lossrate",
-    "Maddoxkkm",
-    "malum",
-    "mantlets",
-    "mediump",
-    "metallicness",
-    "metalness",
-    "minitelrose",
-    "Minotauro",
-    "MIPMAPCOUNT",
-    "mišek",
-    "mmnow",
-    "modeltransform",
-    "MURICA",
-    "nanostores",
-    "NEGATIVEX",
-    "NEGATIVEY",
-    "NEGATIVEZ",
-    "networkidle",
-    "NITROPAY",
-    "nivo",
-    "nmatname",
-    "noout",
-    "normalmap",
-    "oneof",
-    "Oodle",
-    "oopsies",
-    "Oopsy",
-    "opentest",
-    "OPTML",
-    "otemp",
-    "outdir",
-    "outfile",
-    "ownedtanks",
-    "padder",
-    "partytown",
-    "patchnotes",
-    "PIXELFORMAT",
-    "playerachievements",
-    "playerinfo",
-    "playform",
-    "Playtest",
-    "pngjs",
-    "POSITIVEX",
-    "POSITIVEY",
-    "POSITIVEZ",
-    "precompute",
-    "Promisable",
-    "proto",
-    "protobuf",
-    "protoc",
-    "protos",
-    "proxyclient",
-    "prunestrings",
-    "Pyogenics",
-    "ratingleaderboard",
-    "raycaster",
-    "Redirector",
-    "REGEN",
-    "Relogin",
-    "researchable",
-    "Resvg",
-    "rizz",
-    "roboto",
-    "rtsc",
-    "RTSM",
-    "SCPG",
-    "scroller",
-    "searchclans",
-    "searchplayers",
-    "searchtanks",
-    "SHAREDEXP",
-    "Skia",
-    "SKLLD",
-    "sluggify",
-    "smoothstep",
-    "Smri",
-    "Specularity",
-    "SSAO",
-    "stackable",
-    "startcase",
-    "statkit",
-    "statsfull",
-    "steamapps",
-    "Stringifying",
-    "struct",
-    "structs",
-    "strvk",
-    "subnation",
-    "Synx",
-    "tankaverages",
-    "Tankerch",
-    "tankmen",
-    "tankopedia",
-    "tankopedias",
-    "tankstats",
-    "tauri",
-    "texconv",
-    "TEXCOORD",
-    "tresabhi",
-    "tungstentip",
-    "Turretless",
-    "TYPELESS",
-    "uasset",
-    "ubjson",
-    "Unicum",
-    "UNLOCALIZED",
-    "UNORM",
-    "unpickled",
-    "Unregistering",
-    "unrotate",
-    "unwrapper",
-    "userns",
-    "usmap",
-    "vercel",
-    "vickers",
-    "vitepress",
-    "Vovko",
-    "wargaming",
-    "webp",
-    "wgpkg",
-    "whitespaces",
-    "WHSS",
-    "winrate",
-    "wireframe",
-    "Woah",
-    "wooorm",
-    "WOTB",
-    "wotblitz",
-    "wotbreplay",
-    "WOTINSPECTOR",
-    "xffn",
-    "xkdkw",
-    "XMLDVPL",
-    "YAMLDVPL",
-    "yolo",
-    "youtuber",
-    "youtubers",
-    "zoomable"
-  ]
-}

bun.lock

@@ -201,12 +201,12 @@
         "@fontsource-variable/roboto-mono": "^5.2.8",
         "@radix-ui/colors": "^3.0.0",
         "@radix-ui/react-icons": "^1.3.2",
-        "@react-three/drei": "^10.7.6",
+        "@react-three/drei": "^10.7.7",
-        "@react-three/fiber": "^9.4.0",
+        "@react-three/fiber": "^9.6.1",
         "@types/lodash-es": "^4.17.12",
         "@types/react": "^19.2.2",
         "@types/react-dom": "^19.2.2",
-        "@types/three": "^0.180.0",
+        "@types/three": "^0.184.1",
         "@vite-pwa/astro": "^1.1.0",
         "@wooorm/starry-night": "^3.9.0",
         "astro": "^5.14.4",
@@ -229,8 +229,8 @@
         "react-markdown": "^10.1.0",
         "react-promise-suspense": "^0.3.4",
         "sharp": "^0.34.5",
-        "three": "^0.180.0",
+        "three": "^0.184.0",
-        "three-stdlib": "^2.36.0",
+        "three-stdlib": "^2.36.1",
         "typescript": "^5.9.3",
         "varuna": "workspace:*",
         "vite": "^7.1.9",
@@ -3079,12 +3079,18 @@
 
     "@blitzkit/website/vite": ["[email protected]", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="],
 
+    "@blitzkit/website-ue/@react-three/fiber": ["@react-three/[email protected]", "", { "dependencies": { "@babel/runtime": "^7.17.8", "@types/webxr": "*", "base64-js": "^1.5.1", "buffer": "^6.0.3", "its-fine": "^2.0.0", "react-use-measure": "^2.1.7", "scheduler": "^0.27.0", "suspend-react": "^0.1.3", "use-sync-external-store": "^1.4.0", "zustand": "^5.0.3" }, "peerDependencies": { "expo": ">=43.0", "expo-asset": ">=8.4", "expo-file-system": ">=11.0", "expo-gl": ">=11.0", "react": ">=19 <19.3", "react-dom": ">=19 <19.3", "react-native": ">=0.78", "three": ">=0.156" }, "optionalPeers": ["expo", "expo-asset", "expo-file-system", "expo-gl", "react-dom", "react-native"] }, "sha512-zF0rsKcVYpcJwbFEnv2HkHX9cvOEgsfQo/X8lwmR2dn13S4qEQJXir9fxf5js2LQFoXqxOY7MDkOkYx2uZ4gSg=="],
+
+    "@blitzkit/website-ue/@types/three": ["@types/[email protected]", "", { "dependencies": { "@dimforge/rapier3d-compat": "~0.12.0", "@tweenjs/tween.js": "~23.1.3", "@types/stats.js": "*", "@types/webxr": ">=0.5.17", "fflate": "~0.8.2", "meshoptimizer": "~1.1.1" } }, "sha512-6q4VdiqVsrTRqmk62/BnlcAvIrnDM0zf2ZDVKI5kZiniWrSaOHaQzmbp+BNzoggc/8tgW412pL//wZIxu2PPTA=="],
+
     "@blitzkit/website-ue/googleapis": ["[email protected]", "", { "dependencies": { "google-auth-library": "^10.2.0", "googleapis-common": "^8.0.0" } }, "sha512-xybFL2SmmUgIifgsbsRQYRdNrSAYwxWZDmkZTGjUIaRnX5jPqR8el/cEvo6rCqh7iaZx6MfEPS/lrDgZ0bymkg=="],
 
     "@blitzkit/website-ue/react": ["[email protected]", "", {}, "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q=="],
 
     "@blitzkit/website-ue/react-dom": ["[email protected]", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.6" } }, "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g=="],
 
+    "@blitzkit/website-ue/three": ["[email protected]", "", {}, "sha512-wtTRjG92pM5eUg/KuUnHsqSAlPM296brTOcLgMRqEeylYTh/CdtvKUvCyyCQTzFuStieWxvZb8mVTMvdPyUpxg=="],
+
     "@blitzkit/website-ue/vite": ["[email protected]", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="],
 
     "@discordjs/rest/@discordjs/collection": ["@discordjs/[email protected]", "", {}, "sha512-LiSusze9Tc7qF03sLCujF5iZp7K+vRNEDBZ86FT9aQAv3vxMLihUvKvpsCWiQ2DJq1tVckopKm1rxomgNUc9hg=="],
@@ -3253,6 +3259,8 @@
 
     "yaml-language-server/yaml": ["[email protected]", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-10ULxpnOCQXxJvBgxsn9ptjq6uviG/htZKk9veJGhlqn3w/DxQ631zFF+nlQXLwmImeS5amR2dl2U8sg6U9jsQ=="],
 
+    "@blitzkit/website-ue/@types/three/meshoptimizer": ["[email protected]", "", {}, "sha512-oRFNWJRDA/WTrVj7NWvqa5HqE1t9MYDj2VaWirQCzCCrAd2GHrqR/sQezCxiWATPNlKTcRaPRHPJwIRoPBAp5g=="],
+
     "@blitzkit/website-ue/vite/esbuild": ["[email protected]", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.3", "@esbuild/android-arm": "0.27.3", "@esbuild/android-arm64": "0.27.3", "@esbuild/android-x64": "0.27.3", "@esbuild/darwin-arm64": "0.27.3", "@esbuild/darwin-x64": "0.27.3", "@esbuild/freebsd-arm64": "0.27.3", "@esbuild/freebsd-x64": "0.27.3", "@esbuild/linux-arm": "0.27.3", "@esbuild/linux-arm64": "0.27.3", "@esbuild/linux-ia32": "0.27.3", "@esbuild/linux-loong64": "0.27.3", "@esbuild/linux-mips64el": "0.27.3", "@esbuild/linux-ppc64": "0.27.3", "@esbuild/linux-riscv64": "0.27.3", "@esbuild/linux-s390x": "0.27.3", "@esbuild/linux-x64": "0.27.3", "@esbuild/netbsd-arm64": "0.27.3", "@esbuild/netbsd-x64": "0.27.3", "@esbuild/openbsd-arm64": "0.27.3", "@esbuild/openbsd-x64": "0.27.3", "@esbuild/openharmony-arm64": "0.27.3", "@esbuild/sunos-x64": "0.27.3", "@esbuild/win32-arm64": "0.27.3", "@esbuild/win32-ia32": "0.27.3", "@esbuild/win32-x64": "0.27.3" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg=="],
 
     "@blitzkit/website/vite/esbuild": ["[email protected]", "", { "optionalDependencies": { "@esbuild/aix-ppc64": "0.27.3", "@esbuild/android-arm": "0.27.3", "@esbuild/android-arm64": "0.27.3", "@esbuild/android-x64": "0.27.3", "@esbuild/darwin-arm64": "0.27.3", "@esbuild/darwin-x64": "0.27.3", "@esbuild/freebsd-arm64": "0.27.3", "@esbuild/freebsd-x64": "0.27.3", "@esbuild/linux-arm": "0.27.3", "@esbuild/linux-arm64": "0.27.3", "@esbuild/linux-ia32": "0.27.3", "@esbuild/linux-loong64": "0.27.3", "@esbuild/linux-mips64el": "0.27.3", "@esbuild/linux-ppc64": "0.27.3", "@esbuild/linux-riscv64": "0.27.3", "@esbuild/linux-s390x": "0.27.3", "@esbuild/linux-x64": "0.27.3", "@esbuild/netbsd-arm64": "0.27.3", "@esbuild/netbsd-x64": "0.27.3", "@esbuild/openbsd-arm64": "0.27.3", "@esbuild/openbsd-x64": "0.27.3", "@esbuild/openharmony-arm64": "0.27.3", "@esbuild/sunos-x64": "0.27.3", "@esbuild/win32-arm64": "0.27.3", "@esbuild/win32-ia32": "0.27.3", "@esbuild/win32-x64": "0.27.3" }, "bin": { "esbuild": "bin/esbuild" } }, "sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg=="],

cspell.json

@@ -0,0 +1,6 @@
+{
+  "words": [
+    "gltf",
+    "amogos"
+  ]
+}

packages/website-ue/package.json

@@ -23,12 +23,12 @@
     "@fontsource-variable/roboto-mono": "^5.2.8",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-icons": "^1.3.2",
-    "@react-three/drei": "^10.7.6",
+    "@react-three/drei": "^10.7.7",
-    "@react-three/fiber": "^9.4.0",
+    "@react-three/fiber": "^9.6.1",
     "@types/lodash-es": "^4.17.12",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.2",
-    "@types/three": "^0.180.0",
+    "@types/three": "^0.184.1",
     "@vite-pwa/astro": "^1.1.0",
     "@wooorm/starry-night": "^3.9.0",
     "astro": "^5.14.4",
@@ -51,8 +51,8 @@
     "react-markdown": "^10.1.0",
     "react-promise-suspense": "^0.3.4",
     "sharp": "^0.34.5",
-    "three": "^0.180.0",
+    "three": "^0.184.0",
-    "three-stdlib": "^2.36.0",
+    "three-stdlib": "^2.36.1",
     "typescript": "^5.9.3",
     "varuna": "workspace:*",
     "vite": "^7.1.9",

packages/website-ue/src/components/TankopediaLoadout/index.tsx

@@ -50,11 +50,11 @@ export function TankopediaLoadout({ characteristics }: TankopediaLoadoutProps) {
   );
 
   return (
-    <Section>
+    <>
       {showModules && <Modules />}
       <Equipment />
-      <Consumables characteristics={characteristics} />
+      {/*<Consumables characteristics={characteristics} />*/}
-    </Section>
+    </>
   );
 }
 

packages/website-ue/src/components/TankopediaSandbox/index.module.css

@@ -0,0 +1,7 @@
+.sandbox {
+  position: relative;
+  height: 100%;
+
+  .canvas {
+  }
+}

packages/website-ue/src/components/TankopediaSandbox/index.tsx

@@ -0,0 +1,36 @@
+import { Canvas, useLoader } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import styles from "./index.module.css";
+import { GLTFLoader } from "three-stdlib";
+
+export function TankopediaSandbox() {
+  return (
+    <div className={styles.sandbox}>
+      <Canvas shadows className={styles.canvas}>
+        {!import.meta.env.SSR && <Content />}
+      </Canvas>
+    </div>
+  );
+}
+
+function Content() {
+  const gltf = useLoader(GLTFLoader, "/amogos.glb");
+
+  return (
+    <>
+      <group scale={4}>
+        <primitive object={gltf.scene} />
+      </group>
+
+      <ambientLight />
+      <pointLight castShadow position={[3, 10, 5]} intensity={1000} />
+
+      <mesh receiveShadow position={[0, -1, 0]} rotation={[-Math.PI / 2, 0, 0]}>
+        <planeGeometry args={[30, 30]} />
+        <meshStandardMaterial color="green" />
+      </mesh>
+
+      <OrbitControls />
+    </>
+  );
+}

packages/website-ue/src/layouts/BaseLayout.astro

@@ -77,6 +77,6 @@ const { accent, locale } = Astro.props;
       <slot />
     </div>
 
-    <Footer {locale} />
+    <!-- <Footer {locale} /> -->
   </body>
 </html>

packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.module.css

@@ -0,0 +1,17 @@
+.page {
+  flex-grow: 1;
+  display: flex;
+
+  .sandbox {
+    flex-grow: 1;
+    background-color: black;
+  }
+
+  .stats {
+    display: flex;
+    flex-direction: column;
+
+    gap: var(--space-5);
+    padding: var(--space-5);
+  }
+}

packages/website-ue/src/pages/[...locale]/tanks/[slug]/_index.tsx

@@ -9,12 +9,48 @@ import { useEquipment } from "../../../../hooks/useEquipment";
 import { Tankopedia } from "../../../../stores/tankopedia";
 import { characteristicsOrder } from "../../../../tankopedia/characteristicsOrder";
 import { computeCharacteristics } from "../../../../tankopedia/computeCharacteristics";
+import styles from "./_index.module.css";
+import { TankopediaSandbox } from "../../../../components/TankopediaSandbox";
 
 interface PageProps {
   id: string;
 }
 
 export const Page = withErrorWrapper(
+  withLocale<PageProps>(({ id }) => {
+    const protagonistTank = useAwait(() => api.tank(id), `tank-${id}`);
+
+    Tankopedia.useInitialization(protagonistTank);
+
+    // const renderCharacteristic = useCharacteristicRenderer();
+
+    const protagonist = Tankopedia.use((state) => state.protagonist);
+    const protagonistEquipment = useEquipment(protagonistTank.tank!);
+
+    const { characteristics } = useMemo(
+      () =>
+        computeCharacteristics(
+          protagonistTank,
+          protagonistEquipment,
+          protagonist,
+        ),
+      [protagonist],
+    );
+
+    return (
+      <div className={styles.page}>
+        <div className={styles.sandbox}>
+          <TankopediaSandbox />
+        </div>
+        <div className={styles.stats}>
+          <TankopediaLoadout characteristics={characteristics} />
+        </div>
+      </div>
+    );
+  }),
+);
+
+export const _Page = withErrorWrapper(
   withLocale<PageProps>(({ id }) => {
     const protagonistTank = useAwait(() => api.tank(id), `tank-${id}`);
 

packages/website-ue/src/pages/[...locale]/tanks/[slug]/index.astro

@@ -21,6 +21,5 @@ const { id, locale } = Astro.props;
 
 <BaseLayout {locale} accent="violet">
   <ColorScale color="red" />
-
   <Page {locale} {id} client:load />
 </BaseLayout>