feat: room timer now syncs with api every 5 seconds

src/lib/Room.svelte

@@ -4,17 +4,38 @@
 	import BattleRank from './BattleRank.svelte';
 	import GameVersion from './GameVersion.svelte';
 	import Separator from './Separator.svelte';
-	import type { Room } from './types';
 	import Date from './Date.svelte';
+	import axios from 'axios';
+	import type { Room } from './types';
+	import { onMount } from 'svelte';
 
 	let { room }: { room: Room } = $props();
 
-	let secondsRemaining = $state(room.secondsRemaining);
+	let roomTimer = $state(room.secondsRemaining);
 
-	const interval = setInterval(() => {
-		if (secondsRemaining <= 0 || room.finished) clearInterval(interval);
-		secondsRemaining--;
-	}, 1000);
+	onMount(() => {
+		if (!room.finished) {
+			const roomTimerUpdateInterval = setInterval(() => {
+				if (roomTimer <= 0) {
+					roomTimer = 0;
+					return;
+				}
+				roomTimer--;
+			}, 1000);
+
+			const roomTimerSyncInterval = setInterval(async () => {
+				console.log('updating');
+				const updatedRoom = await axios
+					.get<Room>(`/api/room/${room.roomId}`)
+					.then((result) => result.data);
+				roomTimer = updatedRoom.secondsRemaining;
+				if (updatedRoom.finished) {
+					clearInterval(roomTimerUpdateInterval);
+					clearInterval(roomTimerSyncInterval);
+				}
+			}, 5000);
+		}
+	});
 </script>
 
 <div class="flex flex-col gap-8 rounded-lg bg-medium p-6">
@@ -33,7 +54,7 @@
 				{room.roomBattleRank}
 			</p>
 			{#if !room.finished}
-				<p class="flex items-center gap-2">seconds remaining <Separator /> {secondsRemaining}s</p>
+				<p class="flex items-center gap-2">seconds remaining <Separator /> {roomTimer}s</p>
 			{/if}
 		</div>
 	</div>

src/lib/server/yukiotoko.ts

@@ -20,7 +20,6 @@ function toPlayer(apiPlayer: APIPlayer): Player {
 
 function toRoom(apiRoom: APIRoom): Room {
 	return {
-		id: apiRoom.id,
 		roomId: apiRoom.roomId,
 		createdAt: new Date(apiRoom.updatedAt),
 		gameVersion: apiRoom.dataVersion,
@@ -31,10 +30,12 @@ function toRoom(apiRoom: APIRoom): Room {
 	};
 }
 
+function validRoom(room: Room): boolean {
+	return !greaterThan(fromVersionString(room.gameVersion), fromVersionString(env.MAX_VERSION));
+}
+
 function filterRooms(rooms: Room[]): Room[] {
-	return rooms.filter(
-		(room) => !greaterThan(fromVersionString(room.gameVersion), fromVersionString(env.MAX_VERSION))
-	);
+	return rooms.filter((room) => validRoom(room));
 }
 
 export async function fetchRooms() {
@@ -56,7 +57,20 @@ export async function fetchRooms() {
 	};
 }
 
-// TODO!
-// export async function fetchRoom(roomId: string): Promise<Room> {
-//   return new Promise()
-// }
+export async function fetchRoom(roomId: number | string): Promise<Room | undefined> {
+	const result = await axios.get<APIRoom[]>(`http://yukiotoko.chara.lol:9000/api/get/${roomId}`, {
+		headers: {
+			Authorization: env.YUKIOTOKO_API_TOKEN
+		}
+	});
+
+	const apiRoom = result.data[0];
+
+	if (!apiRoom) return;
+
+	const room = toRoom(apiRoom);
+
+	if (!validRoom(room)) return;
+
+	return room;
+}

src/routes/api/room/[roomId]/+server.ts

@@ -0,0 +1,10 @@
+import { fetchRoom } from '$lib/server/yukiotoko';
+import { error, json } from '@sveltejs/kit';
+
+export async function GET({ params }) {
+	const room = await fetchRoom(params.roomId);
+
+	if (!room) return error(404);
+
+	return json(room);
+}