src/lib/Room.svelte

@@ -7,13 +7,6 @@
 	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">
@@ -31,9 +24,6 @@
 				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,3 +1 @@
-<span class="inline-block"
-	><div class="h-[2px] w-4 rounded-full bg-current brightness-50"></div></span
->
+<div class="inline-block h-[2px] w-4 rounded-full bg-current brightness-50"></div>

src/lib/Team.svelte

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

src/lib/server/fetchData.ts

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

src/routes/+page.svelte

@@ -1,18 +1,26 @@
 <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);
 
-	data.archivedRooms.forEach((archivedRoom) =>
-		arrayPadEnd(archivedRoom.players, 4, {
-			name: 'CPU',
-			battleRank: 0,
-			rating: 0
-		})
+	async function refresh() {
+		data = await axios.get('/api/data').then((result) => result.data);
+	}
+
+	$effect(() =>
+		data.archivedRooms.forEach((archivedRoom) =>
+			arrayPadEnd(archivedRoom.players, 4, {
+				name: 'CPU',
+				battleRank: 0,
+				rating: 0
+			})
+		)
 	);
 </script>
 
@@ -20,8 +28,11 @@
 	<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

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