From c9d5b46ae8c727ec9e40db40df276beb9322b704 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 1 Jan 2024 15:16:28 -0600
Subject: [PATCH] feat: omition

---
 src/app/tools/tankopedia/[id]/page.tsx | 122 ++++++++++++-------------
 src/core/blitzkrieg/resolveJsxTree.tsx |  36 ++++++++
 2 files changed, 97 insertions(+), 61 deletions(-)
 create mode 100644 src/core/blitzkrieg/resolveJsxTree.tsx

diff --git a/src/app/tools/tankopedia/[id]/page.tsx b/src/app/tools/tankopedia/[id]/page.tsx
index 302fbf22f..3837d6587 100644
--- a/src/app/tools/tankopedia/[id]/page.tsx
+++ b/src/app/tools/tankopedia/[id]/page.tsx
@@ -33,6 +33,7 @@ import { Flag } from '../../../../components/Flag';
 import { ModuleButtons } from '../../../../components/ModuleButton';
 import PageWrapper from '../../../../components/PageWrapper';
 import { asset } from '../../../../core/blitzkrieg/asset';
+import { resolveJsxTree } from '../../../../core/blitzkrieg/resolveJsxTree';
 import {
   TIER_ROMAN_NUMERALS,
   tankDefinitions,
@@ -131,32 +132,32 @@ export default function Page({ params }: { params: { id: string } }) {
                   </EffectComposer>
 
                   <group ref={model} rotation={[-Math.PI / 2, 0, 0]}>
-                    {Object.entries(gltf.nodes).map(([name, node]) => (
+                    {gltf.scene.children[0].children.map((child) => (
                       <mesh
                         visible={
-                          name === 'hull' ||
-                          name.startsWith('chassis_track_') ||
-                          name.startsWith('chassis_wheel_') ||
-                          (name.startsWith('turret_') &&
-                            name ===
+                          child.name === 'hull' ||
+                          child.name.startsWith('chassis_track_') ||
+                          child.name.startsWith('chassis_wheel_') ||
+                          (child.name.startsWith('turret_') &&
+                            child.name ===
                               `turret_${turret.model
                                 .toString()
                                 .padStart(2, '0')}`) ||
-                          (name.startsWith('gun_') &&
-                            name ===
+                          (child.name.startsWith('gun_') &&
+                            child.name ===
                               `gun_${gun.model.toString().padStart(2, '0')}`) ||
-                          name ===
+                          child.name ===
                             `gun_${gun.model.toString().padStart(2, '0')}_mask`
                         }
-                        name={name}
-                        key={node.id}
+                        children={resolveJsxTree(child as Mesh)}
+                        key={child.uuid}
                         castShadow
                         receiveShadow
-                        geometry={(node as Mesh).geometry}
-                        material={(node as Mesh).material}
-                        position={node.position}
-                        rotation={node.rotation}
-                        scale={node.scale}
+                        geometry={(child as Mesh).geometry}
+                        material={(child as Mesh).material}
+                        position={child.position}
+                        rotation={child.rotation}
+                        scale={child.scale}
                       />
                     ))}
                   </group>
@@ -172,6 +173,50 @@ export default function Page({ params }: { params: { id: string } }) {
             </Flex>
           </Card>
 
+          <Theme radius="small">
+            <Flex gap="4">
+              <Flex gap="1">
+                {tank.turrets.map((thisTurret) => {
+                  return (
+                    <Tooltip content={thisTurret.name}>
+                      <Button
+                        onClick={() => setTurret(thisTurret)}
+                        variant={turret.id === thisTurret.id ? 'solid' : 'soft'}
+                      >
+                        <img
+                          src={asset('icons/modules/turret.webp')}
+                          width={32}
+                          height={32}
+                        />
+                        {TIER_ROMAN_NUMERALS[thisTurret.tier]}
+                      </Button>
+                    </Tooltip>
+                  );
+                })}
+              </Flex>
+
+              <Flex gap="1">
+                {turret.guns.map((thisGun, index) => {
+                  return (
+                    <Tooltip content={thisGun.name}>
+                      <Button
+                        onClick={() => setGun(thisGun)}
+                        variant={gun.id === thisGun.id ? 'solid' : 'soft'}
+                      >
+                        <img
+                          src={asset('icons/modules/gun.webp')}
+                          width={32}
+                          height={32}
+                        />
+                        {TIER_ROMAN_NUMERALS[thisGun.tier]}
+                      </Button>
+                    </Tooltip>
+                  );
+                })}
+              </Flex>
+            </Flex>
+          </Theme>
+
           {mode === 'armor' && (
             <Card>
               <Flex align="center" justify="between" gap="2">
@@ -396,51 +441,6 @@ export default function Page({ params }: { params: { id: string } }) {
             <Heading size="5" weight="regular">
               Modules
             </Heading>
-            <Theme radius="small">
-              <Flex gap="4">
-                <Flex gap="1">
-                  {tank.turrets.map((thisTurret) => {
-                    return (
-                      <Tooltip content={thisTurret.name}>
-                        <Button
-                          onClick={() => setTurret(thisTurret)}
-                          variant={
-                            turret.id === thisTurret.id ? 'solid' : 'soft'
-                          }
-                        >
-                          <img
-                            src="/images/modules/turret.png"
-                            width={32}
-                            height={32}
-                          />
-                          {TIER_ROMAN_NUMERALS[thisTurret.tier]}
-                        </Button>
-                      </Tooltip>
-                    );
-                  })}
-                </Flex>
-
-                <Flex gap="1">
-                  {turret.guns.map((thisGun, index) => {
-                    return (
-                      <Tooltip content={thisGun.name}>
-                        <Button
-                          onClick={() => setGun(thisGun)}
-                          variant={gun.id === thisGun.id ? 'solid' : 'soft'}
-                        >
-                          <img
-                            src="/images/modules/gun.png"
-                            width={32}
-                            height={32}
-                          />
-                          {TIER_ROMAN_NUMERALS[thisGun.tier]}
-                        </Button>
-                      </Tooltip>
-                    );
-                  })}
-                </Flex>
-              </Flex>
-            </Theme>
           </Flex>
 
           <Flex gap="2" direction="column">
diff --git a/src/core/blitzkrieg/resolveJsxTree.tsx b/src/core/blitzkrieg/resolveJsxTree.tsx
new file mode 100644
index 000000000..c4800d64d
--- /dev/null
+++ b/src/core/blitzkrieg/resolveJsxTree.tsx
@@ -0,0 +1,36 @@
+import { Mesh, Object3D } from 'three';
+
+export function resolveJsxTree(parent: Object3D) {
+  return parent.children.map((child) => {
+    if (child.type === 'Mesh') {
+      return (
+        <mesh
+          key={child.uuid}
+          castShadow
+          receiveShadow
+          geometry={(child as Mesh).geometry}
+          material={(child as Mesh).material}
+          position={child.position}
+          rotation={child.rotation}
+          scale={child.scale}
+          children={resolveJsxTree(child)}
+        />
+      );
+    }
+    if (child.type === 'Object3D') {
+      return (
+        <group
+          key={child.uuid}
+          position={child.position}
+          rotation={child.rotation}
+          scale={child.scale}
+          children={resolveJsxTree(child)}
+        />
+      );
+    }
+
+    throw new TypeError(
+      `Unhandled three jsx type ${child.type} (${child.name})`,
+    );
+  });
+}