make pulses random order

Author: skedwards88

src/components/Stats.js

@@ -20,19 +20,26 @@ function StatsNumber({number, text}) {
   );
 }
 
+function pickRandomIntBetween(int1, int2) {
+  const min = Math.min(int1, int2);
+  const max = Math.max(int1, int2);
+
+  // To make it inclusive, need max + 1
+  return Math.floor(min + Math.random() * (max + 1 - min));
+}
+
 export default function Stats({stats, setDisplay}) {
-  let pulseOrder = 0;
+  const maxPulseOrder = stats.collectedSwatchIndexes.length;
+
   const swatches = palette.map((colors, index) => {
     const isColored = stats.collectedSwatchIndexes.includes(index);
 
-    if (isColored) {
-      pulseOrder++;
-    }
-
     return isColored ? (
       <Swatch
         color={calculateMixedColor(colors)}
-        pulseOrder={pulseOrder}
+        // Doing pulseOrder like this to give the possibility of having multiple swatches pulse at the same time.
+        // The animation is fast enough that the pause if that happens still looks cohesive.
+        pulseOrder={pickRandomIntBetween(1, maxPulseOrder)}
         key={colors}
       ></Swatch>
     ) : (