From 097f2792ae52428f1cabd88889c54b54238a6be4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 31 Jul 2025 20:51:54 -0500
Subject: [PATCH] feat: cursor

---
 .../components/Cursor.tsx                     | 66 +++++++++++++++++++
 .../AssaultRangesVisualizer/index.tsx         |  5 +-
 2 files changed, 70 insertions(+), 1 deletion(-)
 create mode 100644 packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/components/Cursor.tsx

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/components/Cursor.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/components/Cursor.tsx
new file mode 100644
index 000000000..3ed0c304a
--- /dev/null
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/components/Cursor.tsx
@@ -0,0 +1,66 @@
+import { DragHandleDots2Icon } from '@radix-ui/react-icons';
+import { Box, Flex, Text } from '@radix-ui/themes';
+import { useState } from 'react';
+import { Var } from '../../../../../../../../core/radix/var';
+
+export function AssaultCursor() {
+  const [x, setX] = useState(0.5);
+
+  return (
+    <Box
+      position="absolute"
+      top="0"
+      left={`${x * 100}%`}
+      height="100%"
+      width="3pt"
+      style={{
+        transform: 'translateX(-50%)',
+        backgroundColor: Var('accent-11'),
+      }}
+    >
+      <Flex
+        align="center"
+        direction="column"
+        position="absolute"
+        left="50%"
+        bottom="100%"
+        style={{ transform: 'translateX(-50%)', cursor: 'grab' }}
+      >
+        <Flex
+          align="center"
+          justify="center"
+          style={{
+            width: '1.5rem',
+            height: '1.5rem',
+            backgroundColor: Var('accent-9'),
+            borderRadius: `50% 50% ${Var('radius-1')} ${Var('radius-1')}`,
+          }}
+        >
+          <Text style={{ display: 'flex' }} highContrast color="purple">
+            <DragHandleDots2Icon />
+          </Text>
+        </Flex>
+
+        <Box
+          height="0.5rem"
+          width="2px"
+          style={{
+            backgroundColor: Var('accent-9'),
+          }}
+        />
+      </Flex>
+
+      <Box
+        position="absolute"
+        left="50%"
+        top="0"
+        height="100%"
+        width="1pt"
+        style={{
+          transform: 'translateX(-50%)',
+          backgroundColor: Var('accent-9'),
+        }}
+      />
+    </Box>
+  );
+}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/index.tsx
index 503ffe64c..b0602c2e6 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/index.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/AssaultRangesVisualizer/index.tsx
@@ -5,6 +5,7 @@ import { clamp } from 'three/src/math/MathUtils.js';
 import type { TankCharacteristics } from '../../../../../../../core/blitzkit/tankCharacteristics';
 import { Var } from '../../../../../../../core/radix/var';
 import { useLocale } from '../../../../../../../hooks/useLocale';
+import { AssaultCursor } from './components/Cursor';
 
 interface Props {
   ranges: AssaultRanges;
@@ -43,7 +44,7 @@ export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
         <Flex
           direction="column"
           p="3"
-          pt="5"
+          pt="8"
           pr="5"
           style={{ backgroundColor: Var('gray-1') }}
           flexGrow="1"
@@ -101,6 +102,8 @@ export function AssaultRangesVisualizer({ ranges: _ranges, stats }: Props) {
                   }}
                 />
               ))}
+
+              <AssaultCursor />
             </Flex>
           </Flex>