feat: circles

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

@@ -1,23 +1,40 @@
 import { imgur } from '@blitzkit/core';
 import { Box, type BoxProps } from '@radix-ui/themes';
+import { times } from 'lodash-es';
 import { forwardRef } from 'react';
 import { Var } from '../../../../../../../../core/radix/var';
 
+const DOTS = 32;
+
 export const TargetCircle = forwardRef<HTMLDivElement, BoxProps>(
-  ({ style, ...props }, ref) => {
+  ({ ...props }, ref) => {
     return (
       <Box
         ref={ref}
-        width="10em"
-        height="10em"
-        style={{
-          borderRadius: '50%',
-          border: `0.125rem solid ${Var('green-9')}`,
-          ...style,
-        }}
         position="relative"
         {...props}
+        minWidth="23px"
+        minHeight="23px"
       >
+        {times(DOTS, (index) => {
+          const angle = 2 * Math.PI * (index / DOTS);
+
+          return (
+            <Box
+              key={index}
+              style={{
+                borderRadius: '50%',
+                background: Var('grass-11'),
+                transform: `translate(-50%, -50%)`,
+                position: 'absolute',
+              }}
+              top={`${(0.5 * Math.sin(angle) + 0.5) * 100}%`}
+              left={`${(0.5 * Math.cos(angle) + 0.5) * 100}%`}
+              width={`${1 / 6}rem`}
+              height={`${1 / 6}rem`}
+            />
+          );
+        })}
         <Box
           width="1rem"
           height="1rem"
@@ -25,9 +42,9 @@ export const TargetCircle = forwardRef<HTMLDivElement, BoxProps>(
           top="50%"
           left="50%"
           style={{
-            backgroundImage: `url(${imgur('kU9Xejd')})`,
+            backgroundImage: `url(${imgur('27Gwth4')})`,
             backgroundSize: 'contain',
-            transform: 'translateX(-50%) scale(90%)',
+            transform: 'translateX(-50%)',
             borderRadius: '50%',
           }}
         />

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

@@ -208,7 +208,7 @@ export function SceneProps() {
       2 * Math.tan(degToRad((camera as PerspectiveCamera).fov) / 2);
     const screenSpaceSize =
       gl.domElement.clientHeight * (angularSize / verticalScreenSize);
-    const targetCircleDotsSize = `${Math.max(38, screenSpaceSize)}px`;
+    const targetCircleDotsSize = `${screenSpaceSize}px`;
 
     targetCircle.current.style.width = targetCircleDotsSize;
     targetCircle.current.style.height = targetCircleDotsSize;