feat: sizing

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

@@ -32,6 +32,7 @@ export function SceneProps() {
     (state) => state.showGrid && !state.showEnvironment,
   );
   const targetCircle = useRef<Group>(null);
+  const targetCircleDots = useRef<HTMLDivElement>(null);
   const texture = useLoader(TextureLoader, 'https://i.imgur.com/C28Z8nU.png');
 
   texture.anisotropy = 2;
@@ -93,7 +94,8 @@ export function SceneProps() {
       !playground.current ||
       !shellPathHelper.current ||
       !targetCircle.current ||
-      DEBUG_disable
+      DEBUG_disable ||
+      !targetCircleDots.current
     ) {
       return;
     }
@@ -171,6 +173,10 @@ export function SceneProps() {
 
     targetCircle.current.position.copy(gunTarget);
 
+    const targetCircleDotsSize = `${gunTarget.distanceTo(shellOrigin)}px`;
+    targetCircleDots.current.style.width = targetCircleDotsSize;
+    targetCircleDots.current.style.height = targetCircleDotsSize;
+
     // window.addEventListener('keydown', (event) => {
     //   if (event.key === 'Enter') {
     //     DEBUG_disable = true;
@@ -192,7 +198,6 @@ export function SceneProps() {
           <arrowHelper ref={shellPathHelper} position={shellOrigin} />
 
           <group ref={targetCircle}>
-            <mesh>
             {/* <sphereGeometry args={[0.1, 32, 32]} />
               <meshStandardMaterial
                 depthTest={false}
@@ -202,6 +207,7 @@ export function SceneProps() {
 
             <Html center occlude={false}>
               <Box
+                ref={targetCircleDots}
                 width="10em"
                 height="10em"
                 style={{
@@ -210,7 +216,6 @@ export function SceneProps() {
                 }}
               />
             </Html>
-            </mesh>
           </group>
 
           <group ref={playground}>