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) => (
))}
+
+
);
}