feat: show room timer

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/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;