feat: sync active room players

chore: lowercase text
other: change description
2025-01-03 01:23:11 -08:00 · 2025-01-03 01:21:07 -08:00 · 2025-01-03 01:20:54 -08:00 · 2025-01-03 01:19:27 -08:00 · 2025-01-03 01:11:16 -08:00 · 2025-01-03 01:11:04 -08:00
20 changed files with 186 additions and 74 deletions
--- a/package.json
+++ b/package.json
@ -1,5 +1,5 @@
 {
-	"name": "chuni-national-matchmaking-webui",
+	"name": "yukiotoko",
 	"private": true,
 	"version": "0.0.1",
 	"type": "module",
--- a/src/app.html
+++ b/src/app.html
@ -7,7 +7,7 @@
    <title>yukiotoko</title>
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="bg-dark text-light">
+	<body data-sveltekit-preload-data="hover" class="bg-dark text-text">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/lib/BattleRank.svelte
+++ b/src/lib/BattleRank.svelte
@ -4,7 +4,7 @@

 	let { rank, ...rest }: { rank: number } & HTMLAttributes<HTMLDivElement> = $props();

-	const [xOffset, yOffset] = imageOffset(rank);
+	const [xOffset, yOffset] = $derived(imageOffset(rank));
 </script>

 <div {...rest}>
--- a/src/lib/Date.svelte
+++ b/src/lib/Date.svelte
@ -1,16 +1,31 @@
 <script lang="ts">
-	const { date }: { date: Date } = $props();
-	const difference = new Date().getTime() / 1000 - date.getTime() / 1000;
-	const seconds = ~~(difference % 60);
-	const minutes = ~~(difference / 60) % 60;
-	const hours = ~~(difference / 3600) % 24;
-	const days = ~~(difference / 86400);
+	let { date }: { date: Date } = $props();
+
+	let currentDate = $state(Date.now());
+	let difference = $derived(currentDate / 1000 - date.getTime() / 1000);
+	let seconds = $derived(~~(difference % 60));
+	let minutes = $derived(~~(difference / 60) % 60);
+	let hours = $derived(~~(difference / 3600) % 24);
+	let days = $derived(~~(difference / 86400));
+
+	setInterval(() => {
+		currentDate = Date.now();
+	});
 </script>

-<p class="group underline">
+<span class="group text-light underline">
 	<span class="group-hover:hidden">
 		about
-		{#if minutes == 0}
+		{#if days > 0}
+			<span>{days}d</span>
+		{:else if hours > 0}
+			<span>{hours}h</span>
+		{:else if minutes > 0}
+			<span>{minutes}m</span>
+		{:else}
+			<span>{seconds}s</span>
+		{/if}
+		<!-- {#if minutes == 0}
 			<span>{seconds}s</span>
 		{:else if hours == 0}
 			<span>{minutes}m</span>
@ -18,10 +33,10 @@
 			<span>{hours}h</span>
 		{:else}
 			<span>{days}d</span>
-		{/if}
+		{/if} -->
 		ago
 	</span>
 	<span class="hidden group-hover:block">
 		{date.toLocaleString()}
 	</span>
-</p>
+</span>
--- a/src/lib/Footer.svelte
+++ b/src/lib/Footer.svelte
@ -1,4 +1,4 @@
-<footer class="bg-medium">
+<footer class="bg-medium text-light">
 	<div class="mx-auto flex w-full max-w-screen-xl flex-col p-4 md:flex-row md:justify-between">
 		<p>
 			made with <a href="https://svelte.dev/">sveltekit</a>, powered by
@ -6,8 +6,8 @@
 		</p>

 		<p>
-			you can find the repo of the website <a href="https://tea.metatable.sh/meta/yukiotoko-webui"
-				>here</a
+			wana help out, or issue a bug? you can find the repo <a
+				href="https://tea.metatable.sh/meta/yukiotoko-webui">here</a
 			>
 		</p>
 	</div>
--- a/src/lib/GameVersion.svelte
+++ b/src/lib/GameVersion.svelte
@ -5,7 +5,7 @@

 	let { version, ...rest }: { version: string } & HTMLAttributes<HTMLImageElement> = $props();

-	const { minor } = fromVersionString(version);
+	const { minor } = $derived(fromVersionString(version));
 </script>

 <img src="/versions/{gameVersions[minor.toString()]}" alt={version} {...rest} />
--- a/src/lib/Pagination.svelte
+++ b/src/lib/Pagination.svelte
@ -0,0 +1,40 @@
+<script lang="ts" generics="T">
+	let {
+		items,
+		itemsPerPage,
+		pageItems = $bindable()
+	}: { items: Array<T>; itemsPerPage: number; pageItems: Array<T> } = $props();
+
+	let currentPage = $state(0);
+	let pageIndexStart = $derived(currentPage * itemsPerPage);
+	let pageIndexEnd = $derived(Math.min(itemsPerPage * (currentPage + 1), items.length));
+
+	$effect(() => {
+		currentPage = Math.min(Math.max(currentPage, 0), ~~(items.length / itemsPerPage));
+		pageItems = items.slice(pageIndexStart, pageIndexEnd);
+	});
+</script>
+
+<div class="flex flex-col gap-2">
+	<p>
+		showing <span class="font-bold text-light">{pageIndexStart + 1}</span> to
+		<span class="font-bold text-light">{pageIndexEnd}</span>
+		of <span class="font-bold text-light">{items.length}</span>
+		entires
+	</p>
+
+	<div class="flex divide-x divide-border">
+		<button class="rounded-bl-lg rounded-tl-lg text-light" onclick={() => currentPage--}
+			>prev</button
+		>
+		<button class="rounded-br-lg rounded-tr-lg text-light" onclick={() => currentPage++}
+			>next</button
+		>
+	</div>
+</div>
+
+<style>
+	button {
+		@apply bg-medium px-4 py-2 transition hover:brightness-150;
+	}
+</style>
--- a/src/lib/Player.svelte
+++ b/src/lib/Player.svelte
@ -9,13 +9,11 @@

 <div class="flex flex-col gap-2">
 	<div class="flex items-center justify-between">
-		<p>{player.name}</p>
+		<p class="font-bold text-light">{player.name}</p>
 		<div class="flex gap-2">
 			<Rating rating={player.rating} />
 			<BattleRank rank={player.battleRank} class="w-16" />
 		</div>
 	</div>
-	{#if player.team}
-		<Team team={player.team} />
-	{/if}
+	<Team team={player?.team ?? { name: 'No Team', rank: 0 }} />
 </div>
--- a/src/lib/Rating.svelte
+++ b/src/lib/Rating.svelte
@ -4,8 +4,8 @@

 	let { rating }: { rating: number } = $props();

-	const characters = rating.toString().padStart(4, '0');
-	const type = ratingType(rating);
+	const characters = $derived(rating.toString().padStart(4, '0'));
+	const type = $derived(ratingType(rating));
 </script>

 <div class="flex items-center">
--- a/src/lib/RatingCharacter.svelte
+++ b/src/lib/RatingCharacter.svelte
@ -8,7 +8,7 @@
 		...rest
 	}: { character: number | '.'; type: number } & HTMLAttributes<HTMLDivElement> = $props();

-	const [xOffset, yOffset] = imageOffset(character, type);
+	const [xOffset, yOffset] = $derived(imageOffset(character, type));
 </script>

 <div {...rest}>
--- a/src/lib/Room.svelte
+++ b/src/lib/Room.svelte
@ -1,20 +1,44 @@
 <script lang="ts">
 	import { User, Calendar } from 'lucide-svelte';
+	import { onMount } from 'svelte';
 	import Player from './Player.svelte';
 	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';

 	let { room }: { room: Room } = $props();

-	let secondsRemaining = $state(room.secondsRemaining);
+	let roomTimer = $state(room.secondsRemaining);
+	let players = $state(room.players);

-	const interval = setInterval(() => {
-		if (secondsRemaining <= 0 || room.finished) clearInterval(interval);
-		secondsRemaining--;
+	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;
+				players = updatedRoom.players;
+				if (updatedRoom.finished) {
+					console.log('killing invervals');
+					clearInterval(roomTimerUpdateInterval);
+					clearInterval(roomTimerSyncInterval);
+				}
+			}, 5000);
+		}
+	});
 </script>

 <div class="flex flex-col gap-8 rounded-lg bg-medium p-6">
@ -27,19 +51,19 @@
 		</div>

 		<div class="flex flex-col">
-			<p class="flex items-center gap-2 text-sub">game version <Separator /> {room.gameVersion}</p>
-			<p class="flex items-center gap-2 text-sub">
+			<p class="flex items-center gap-2">game version <Separator /> {room.gameVersion}</p>
+			<p class="flex items-center gap-2">
 				room battle rank <Separator />
 				{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>

 	<div class="flex flex-col gap-4">
-		<p class="flex items-center gap-2">
+		<p class="flex items-center gap-2 text-light">
 			<User class="inline-block w-6" />
 			{room.players.length} / 4
 			<Separator />
@ -48,7 +72,7 @@
 		</p>

 		<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 sm:grid-rows-2">
-			{#each room.players as player}
+			{#each players as player}
 				<Player {player} />
 			{/each}
 		</div>
--- a/src/lib/Separator.svelte
+++ b/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
->
+<span class="inline-block h-[2px] w-4 rounded-full bg-current brightness-50"></span>
--- a/src/lib/Team.svelte
+++ b/src/lib/Team.svelte
@ -11,7 +11,7 @@
 			? 'team-second'
 			: team.rank == 3
 				? 'team-third'
-				: ''}"
+				: 'text-light'}"
 >
 	<p>
 		{team.name}
--- a/src/lib/array.ts
+++ b/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));
+	}
 }
--- a/src/lib/server/yukiotoko.ts
+++ b/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;
+}
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@ -56,7 +56,6 @@ export interface APIPlayer {
 }

 export interface Room {
-	id: string;
 	roomId: number;
 	createdAt: Date;
 	gameVersion: string;
--- a/src/routes/+page.server.ts
+++ b/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
+	};
 };
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -1,25 +1,20 @@
 <script lang="ts">
-	import { arrayPadEnd } from '$lib/array';
+	import Pagination from '$lib/Pagination.svelte';
 	import Room from '$lib/Room.svelte';
 	import type { PageData } from './$types';

-	let props: { data: PageData } = $props();
+	let { data }: { data: PageData } = $props();
+	let { activeRooms, archivedRooms } = data;

-	let data = $state(props.data);
-
-	data.archivedRooms.forEach((archivedRoom) =>
-		arrayPadEnd(archivedRoom.players, 4, {
-			name: 'CPU',
-			battleRank: 0,
-			rating: 0
-		})
-	);
+	let paginationArchivedRooms = $state([]);
 </script>

-<div class="mb-16 space-y-8">
+<div class="mb-8 space-y-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>
+		<h1 class="text-4xl font-bold text-light">yukiotoko webui</h1>
+		<p>
+			a frontend redesign for <a href="http://yukiotoko.chara.lol/">yukiotoko</a> made by metamethods
+		</p>
 		<p class="text-sub">refresh the page to fetch newer yukiotoko data</p>
 	</section>
 </div>
@ -27,14 +22,14 @@
 <div class="flex flex-col gap-8">
 	<section class="flex flex-col gap-4">
 		<div>
-			<h1 class="text-2xl font-bold">
-				active rooms <span class="text-sub">({data.activeRooms.length})</span>
+			<h1 class="text-2xl font-bold text-light">
+				active rooms <span class="text-sub">({activeRooms.length})</span>
 			</h1>
 			<p class="text-sub">all of the currently matchmaking rooms</p>
 		</div>

 		<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
-			{#each data.activeRooms as activeRoom}
+			{#each activeRooms as activeRoom}
 				<Room room={activeRoom} />
 			{/each}
 		</div>
@ -42,14 +37,16 @@

 	<section class="flex flex-col gap-4">
 		<div>
-			<h1 class="text-2xl font-bold">
+			<h1 class="text-2xl font-bold text-light">
 				archived rooms <span class="text-sub">({data.archivedRooms.length})</span>
 			</h1>
 			<p class="text-sub">rooms that were created from the last 24 hours</p>
 		</div>

+		<Pagination items={archivedRooms} itemsPerPage={20} bind:pageItems={paginationArchivedRooms} />
+
 		<div class="grid grid-cols-1 gap-4 xl:grid-cols-2">
-			{#each data.archivedRooms as archivedRoom}
+			{#each paginationArchivedRooms as archivedRoom}
 				<Room room={archivedRoom} />
 			{/each}
 		</div>
--- a/src/routes/api/room/[roomId]/+server.ts
+++ b/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);
+}
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -7,11 +7,12 @@ export default {
 	theme: {
 		extend: {
 			colors: {
-				dark: '#060710',
-				medium: '#0A0B17',
+				dark: '#111117',
+				medium: '#1F2128',
 				light: '#CFD3FA',
-				sub: '#4D4D80',
-				accent: '#7E61FF'
+				text: '#9B9FC0',
+				accent: '#8D74FF',
+				border: '#353741'
 			},

 			fontFamily: {
Author	SHA1	Message	Date
metamethods	6a49c361a0	feat: sync active room players	2025-01-03 01:23:11 -08:00
metamethods	0a947d8bdd	chore: lowercase text	2025-01-03 01:21:07 -08:00
metamethods	403d82adba	other: change description	2025-01-03 01:20:54 -08:00
metamethods	008fc75f7b	feat: pagination on archived rooms	2025-01-03 01:19:27 -08:00
metamethods	2a20947f59	other: change ui theme	2025-01-03 01:11:16 -08:00
metamethods	5b3f9f4d88	fix: fix date component showing the incorrect value	2025-01-03 01:11:04 -08:00
metamethods	4fab4dbfb8	other: change footer message	2025-01-03 01:10:23 -08:00
metamethods	162638eb0b	chore: use text color	2025-01-03 01:09:49 -08:00
metamethods	95e42a9df2	chore: use derive for reactivity	2025-01-03 01:09:19 -08:00
metamethods	090b541056	refactor: replace const with let	2025-01-03 00:09:19 -08:00
metamethods	ba15468eba	feat: room timer now syncs with api every 5 seconds	2025-01-03 00:07:08 -08:00
metamethods	86c620cafc	fix: remove div within span element	2025-01-03 00:06:22 -08:00
metamethods	26103814ac	feat: date component updates in realtime	2025-01-03 00:06:08 -08:00
metamethods	827b7ef98a	chore: remove unused imports	2025-01-03 00:05:57 -08:00
metamethods	745b860b0e	other: remove id field in Room type	2025-01-02 23:55:05 -08:00
metamethods	533d7c52a4	other: fill empty slots in archived rooms with cpus on the server	2025-01-02 23:53:10 -08:00
metamethods	9cd64e43b2	other: change name in package.json	2025-01-02 23:52:25 -08:00