feat: even more robust

packages/website/src/components/Tankopedia/CharacteristicsSection/components/Characteristics/components/ReloadVisualizer/index.tsx

@@ -18,36 +18,48 @@ export function ReloadVisualizer({ stats }: StatsAcceptorProps) {
   const reloadCircle = useRef<HTMLDivElement>(null);
   const reloadCore = useRef<HTMLDivElement>(null);
   const reloadGlow = useRef<HTMLDivElement>(null);
-  const t = useRef(0);
+
+  /**
+   * 3-shell gun example:
+   *
+   * 0-1: clip reload
+   * ~~~: shell shot
+   * 1-2: intra-clip
+   * ~~~: shell shot
+   * 2-3: intra-clip
+   * ~~~: shell shot & reset to 0
+   *
+   * intra-clip time = intraClip * (n - 1)
+   */
+  const state = useRef(0);
 
   useEffect(() => {
     let cancel = false;
     let lastT = Date.now() / 1000;
-    const period =
+    const shellArray = new Array(stats.shells);
-      stats.shellReload! +
-      (stats.intraClip ? stats.intraClip * (stats.shells - 1) : 0);
 
     function frame() {
       const now = Date.now() / 1000;
       const dt = now - lastT;
-      t.current = (t.current + dt) % period;
+      let reload;
+      let shells;
 
-      // clipReloadProgress.current =
+      if (state.current < 1) {
-      //   (clipReloadProgress.current + dt / stats.shellReload!) % 1;
+        state.current = Math.min(1, state.current + dt / stats.shellReload!);
-
+        reload = state.current;
-      const reload =
+        shells = shellArray.fill(reload);
-        t.current < stats.shellReload!
+      } else if (state.current < stats.shells) {
-          ? t.current / stats.shellReload!
+        state.current = Math.min(
-          : ((t.current - stats.shellReload!) % stats.intraClip!) /
+          stats.shells,
-            stats.intraClip!;
+          state.current + dt / stats.intraClip!,
-      const shells =
+        );
-        t.current < stats.shellReload!
+        shells = times(stats.shells, (index) => index > state.current - 1);
-          ? Array(stats.shells).fill(reload)
+        reload = state.current % 1;
-          : times(stats.shells, (index) =>
+      } else {
-              index < (t.current - stats.shellReload!) / stats.intraClip!
+        state.current = 0;
-                ? 0
+        reload = 0;
-                : 1,
+        shells = shellArray.fill(0);
-            );
+      }
 
       reloadUpdate.dispatch({ reload, shells });