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( - ({ style, ...props }, ref) => { + ({ ...props }, ref) => { return ( + {times(DOTS, (index) => { + const angle = 2 * Math.PI * (index / DOTS); + + return ( + + ); + })} ( 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;