Fix shuffled 31x81 buttons

package-lock.json

@@ -8,6 +8,7 @@
 			"name": "website-frontend",
 			"version": "0.0.1",
 			"dependencies": {
+				"d3-array": "^3.2.4",
 				"highlight.js": "^11.10.0",
 				"marked": "^13.0.2",
 				"marked-emoji": "^1.4.1",
@@ -21,6 +22,7 @@
 				"@sveltejs/adapter-node": "^5.2.0",
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
+				"@types/d3-array": "^3.2.1",
 				"@types/qs": "^6.9.15",
 				"mdsvex": "^0.11.2",
 				"prettier": "^3.3.2",
@@ -445,6 +447,12 @@
 			"integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==",
 			"dev": true
 		},
+		"node_modules/@types/d3-array": {
+			"version": "3.2.1",
+			"resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.1.tgz",
+			"integrity": "sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==",
+			"dev": true
+		},
 		"node_modules/@types/estree": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -707,6 +715,17 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/d3-array": {
+			"version": "3.2.4",
+			"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+			"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+			"dependencies": {
+				"internmap": "1 - 2"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/debug": {
 			"version": "4.3.5",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz",
@@ -1071,6 +1090,14 @@
 			"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
 			"dev": true
 		},
+		"node_modules/internmap": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+			"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+			"engines": {
+				"node": ">=12"
+			}
+		},
 		"node_modules/is-binary-path": {
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",

package.json

@@ -15,6 +15,7 @@
 		"@sveltejs/adapter-node": "^5.2.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
+		"@types/d3-array": "^3.2.1",
 		"@types/qs": "^6.9.15",
 		"mdsvex": "^0.11.2",
 		"prettier": "^3.3.2",
@@ -28,6 +29,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"d3-array": "^3.2.4",
 		"highlight.js": "^11.10.0",
 		"marked": "^13.0.2",
 		"marked-emoji": "^1.4.1",

src/components/molecules/Buttons.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">
-  import { shuffle } from "$lib";
   import Button8831 from "../atoms/Button8831.svelte";
   import allButtons from "$lib/buttons";
+  import * as d3 from "d3-array";
+  import { onMount } from "svelte";
 
-  const buttons = $derived.by(() => {
+  const buttons = $state([...allButtons]);
-    const newList = [...allButtons];
+  onMount(() => {
-    shuffle(newList);
+    d3.shuffle(buttons);
-    return newList;
   });
 </script>
 
 <div class="buttons">
-  {#each buttons as button}
+  {#key buttons}
+    {#each buttons as button (button.src)}
       <Button8831 src={button.src} alt={button.alt} href={button.href} />
     {/each}
+  {/key}
 </div>
 
 <style lang="scss">
@@ -26,6 +28,21 @@
       flex-direction: row;
       flex-wrap: wrap;
       justify-content: center;
+
+      animation-name: fade-in;
+      animation-duration: 2s;
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+    25% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
     }
   }
 </style>

src/lib/index.ts

@@ -14,22 +14,6 @@ export function randInt(min: number, max: number): number {
 	return Math.floor(Math.random() * (max - min + 1) + min);
 }
 
-export function shuffle<T>(array: T[]) {
-	let currentIndex = array.length;
-
-	// While there remain elements to shuffle...
-	while (currentIndex !== 0) {
-		// Pick a remaining element...
-		const randomIndex = Math.floor(Math.random() * currentIndex);
-		currentIndex--;
-
-		// And swap it with the current element.
-		[array[currentIndex], array[randomIndex]] = [
-			array[randomIndex],
-			array[currentIndex],
-		];
-	}
-}
 export type ImageMetadata = {
 	caption?: string;
 	altText?: string;