From 67f9147aac46186dfcb948a6e356bf0d5e8279e5 Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Mon, 2 Dec 2024 19:05:51 -0600
Subject: [PATCH] feat: circles

---
 .../SceneProps/components/TargetCircle.tsx    | 37 ++++++++++++++-----
 .../components/SceneProps/index.tsx           |  2 +-
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/components/TargetCircle.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/components/TargetCircle.tsx
index 1aee0bd99..724daf782 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/components/TargetCircle.tsx
+++ b/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%',
           }}
         />
diff --git a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx b/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx
index f2e41ffb3..a99709215 100644
--- a/packages/website/src/components/Tankopedia/HeroSection/components/TankSandbox/components/SceneProps/index.tsx
+++ b/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;