feat: show room timer

svelte is doing some weird reactivity stuff when you use this lool

src/lib/Room.svelte

@@ -7,6 +7,13 @@
 	import type { Room } from './types';
 
 	let { room }: { room: Room } = $props();
+
+	let secondsRemaining = $state(room.secondsRemaining);
+
+	const interval = setInterval(() => {
+		if (secondsRemaining <= 0 || room.finished) clearInterval(interval);
+		secondsRemaining--;
+	}, 1000);
 </script>
 
 <div class="flex flex-col gap-8 rounded-lg bg-medium p-6">
@@ -24,6 +31,9 @@
 				room battle rank <Separator />
 				{room.roomBattleRank}
 			</p>
+			{#if !room.finished}
+				<p class="flex items-center gap-2">seconds remaining <Separator /> {secondsRemaining}s</p>
+			{/if}
 		</div>
 	</div>
 

src/lib/Separator.svelte

@@ -1 +1,3 @@
-<div class="inline-block h-[2px] w-4 rounded-full bg-current brightness-50"></div>
+<span class="inline-block"
+	><div class="h-[2px] w-4 rounded-full bg-current brightness-50"></div></span
+>

src/lib/Team.svelte

@@ -17,7 +17,7 @@
 		{team.name}
 	</p>
 
-	{#if team.rank <= 5}
+	{#if team.rank <= 5 && team.rank !== 0}
 		<p class="font-bold">
 			#{team.rank}
 		</p>

src/lib/server/fetchData.ts

@@ -25,6 +25,8 @@ function toRoom(apiRoom: APIRoom): Room {
 		createdAt: new Date(apiRoom.updatedAt),
 		gameVersion: apiRoom.dataVersion,
 		roomBattleRank: apiRoom.roomRanking,
+		secondsRemaining: apiRoom.restMSec,
+		finished: apiRoom.isFinished,
 		players: apiRoom.matchingMemberInfoList.map((apiPlayer) => toPlayer(apiPlayer))
 	};
 }

src/lib/types.ts

@@ -60,6 +60,8 @@ export interface Room {
 	createdAt: Date;
 	gameVersion: string;
 	roomBattleRank: number;
+	secondsRemaining: number;
+	finished: boolean;
 	players: Player[];
 }
 
@@ -69,7 +71,7 @@ export interface APIRoom {
 	dataVersion: string;
 	romVersion: string;
 	roomRanking: number;
-	roomMSec: number;
+	restMSec: number;
 	isFull: boolean;
 	matchingMemberInfoList: APIPlayer[];
 	isFinished: boolean;

src/routes/+page.svelte

@@ -1,26 +1,18 @@
 <script lang="ts">
 	import { arrayPadEnd } from '$lib/array';
 	import Room from '$lib/Room.svelte';
-	import axios from 'axios';
 	import type { PageData } from './$types';
 
 	let props: { data: PageData } = $props();
 
 	let data = $state(props.data);
-	let refreshTimer = $state(60);
 
-	async function refresh() {
+	data.archivedRooms.forEach((archivedRoom) =>
-		data = await axios.get('/api/data').then((result) => result.data);
+		arrayPadEnd(archivedRoom.players, 4, {
-	}
+			name: 'CPU',
-
+			battleRank: 0,
-	$effect(() =>
+			rating: 0
-		data.archivedRooms.forEach((archivedRoom) =>
+		})
-			arrayPadEnd(archivedRoom.players, 4, {
-				name: 'CPU',
-				battleRank: 0,
-				rating: 0
-			})
-		)
 	);
 </script>
 
@@ -28,11 +20,8 @@
 	<section>
 		<h1 class="text-4xl font-bold">yukiotoko webui</h1>
 		<p>a frontend redesign for <a href="http://yukiotoko.chara.lol/">yukiotoko</a></p>
+		<p class="text-sub">refresh the page to fetch newer yukiotoko data</p>
 	</section>
-	<div>
-		<button class="bg-accent rounded-lg px-3 py-2" onclick={refresh}>Refresh</button>
-		<p class="text-sub">load the current data from yukiotoko</p>
-	</div>
 </div>
 
 <div class="flex flex-col gap-8">

src/routes/api/data/+server.ts

@@ -1,5 +0,0 @@
-import { fetchData } from '$lib/server/fetchData';
-
-export async function GET({}) {
-	return new Response(JSON.stringify(await fetchData()));
-}