other: fill empty slots in archived rooms with cpus on the server

src/lib/array.ts

@@ -1,3 +1,5 @@
 export function arrayPadEnd<T>(array: T[], amount: number, data: T) {
-	for (let i = 0; i < amount - array.length; i++) array.push(data);
+	if (amount > array.length) {
+		array.push(...Array(amount - array.length).fill(data));
+	}
 }

src/routes/+page.server.ts

@@ -1,6 +1,20 @@
-import type { PageServerLoad } from './$types';
 import { fetchRooms } from '$lib/server/yukiotoko';
+import { arrayPadEnd } from '$lib/array';
+import type { PageServerLoad } from './$types';
 
 export const load: PageServerLoad = async ({ fetch }) => {
-	return await fetchRooms();
+	const { activeRooms, archivedRooms } = await fetchRooms();
+
+	archivedRooms.forEach((archivedRoom) =>
+		arrayPadEnd(archivedRoom.players, 4, {
+			name: 'CPU',
+			battleRank: 0,
+			rating: 0
+		})
+	);
+
+	return {
+		activeRooms,
+		archivedRooms
+	};
 };

src/routes/+page.svelte

@@ -1,19 +1,12 @@
 <script lang="ts">
-	import { arrayPadEnd } from '$lib/array';
 	import Room from '$lib/Room.svelte';
+	import axios from 'axios';
 	import type { PageData } from './$types';
+	import { onMount } from 'svelte';
 
 	let props: { data: PageData } = $props();
 
 	let data = $state(props.data);
-
-	data.archivedRooms.forEach((archivedRoom) =>
-		arrayPadEnd(archivedRoom.players, 4, {
-			name: 'CPU',
-			battleRank: 0,
-			rating: 0
-		})
-	);
 </script>
 
 <div class="mb-16 space-y-8">