From 8446e3fbbd7b6c0683e9618966d17b99750d2075 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Fri, 22 Aug 2025 12:40:26 -0500
Subject: [PATCH] feat: flashes

---
 .../components/ReloadVisualizer/index.css     |  9 +++++++
 .../components/ReloadVisualizer/index.tsx     | 26 ++++++++++++++++++-
 2 files changed, 34 insertions(+), 1 deletion(-)
 create mode 100644 packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.css

diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.css b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.css
new file mode 100644
index 000000000..127d787dc
--- /dev/null
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.css
@@ -0,0 +1,9 @@
+#reload-visualizer-flash {
+  background: transparent;
+  transition-duration: 200ms;
+}
+
+#reload-visualizer-flash.go {
+  background: var(--white-a3);
+  transition: none;
+}
diff --git a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx
index 70b46034d..0375827d9 100644
--- a/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx
+++ b/packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx
@@ -1,12 +1,13 @@
 import { Box, Code } from '@radix-ui/themes';
 import { times } from 'lodash-es';
 import { Quicklime, type QuicklimeCallback } from 'quicklime';
-import { useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 import { Var } from '../../../../../../../core/radix/var';
 import type { StatsAcceptorProps } from '../TraverseVisualizer';
 import { VisualizerCard } from '../VisualizerCard';
 import { Shell } from './components/Shell';
 import { Target } from './components/Target';
+import './index.css';
 
 const PRECISION = 2;
 
@@ -26,6 +27,16 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
 
   const state = useRef(0);
 
+  const shoot = useCallback(() => {
+    const element = document.getElementById('reload-visualizer-flash');
+
+    console.log('shoot');
+
+    element?.classList.add('go');
+    void element?.offsetWidth;
+    element?.classList.remove('go');
+  }, []);
+
   useEffect(() => {
     let cancel = false;
     let lastT = Date.now() / 1000;
@@ -66,6 +77,8 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
         progressTime.current.innerHTML = ((1 - reload) * shellReload).toFixed(
           PRECISION,
         );
+
+        if (state.current >= reloadThreshold) shoot();
       } else if (state.current < stats.shells + reloadThreshold - 1) {
         let interval;
 
@@ -99,6 +112,8 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
         progressTime.current.innerHTML = ((1 - reload) * interval).toFixed(
           PRECISION,
         );
+
+        if (lastState % 1 > state.current % 1) shoot();
       } else {
         state.current = 0;
         reload = 0;
@@ -264,6 +279,15 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
         times(stats.shells, (index) => (
           <Shell stats={stats} index={index} key={index} />
         ))}
+
+      <Box
+        id="reload-visualizer-flash"
+        position="absolute"
+        top="0"
+        left="0"
+        width="100%"
+        height="100%"
+      />
     </VisualizerCard>
   );
 }