Pablu/hitstarv2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: Working login, and creation of Lobby, aswell as showing new Users

Browse Source
This commit is contained in:
Pablu23
2025-10-10 16:02:32 +02:00
parent 9a44b91099
commit 9dffac4de3
11 changed files with 334 additions and 277 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/components/PlayerList.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts">
import type { Player } from '$lib/types';
let {players = [], maxPlayers = 8 }: { players: Player[], maxPlayers: number} = $props();
import type { User } from "../../app";
let {players = [], maxPlayers = 8, host }: { players: User[], maxPlayers: number, host: User} = $props();
</script>
<div class="bg-white rounded-lg shadow-sm p-5 border border-gray-100">
@@ -11,14 +11,14 @@
</div>
<ul class="space-y-2">
{#each players as player (player.id)}
<li class="flex items-center p-2 rounded-md {player.isHost ? 'bg-blue-50' : 'bg-gray-50'}">
{#each players as player (player.email)}
<li class="flex items-center p-2 rounded-md {player.email === host.email ? 'bg-blue-50' : 'bg-gray-50'}">
<div class="bg-gradient-to-br from-blue-500 to-indigo-600 h-8 w-8 rounded-full flex items-center justify-center text-white font-medium text-sm">
{player.name.substring(0, 2).toUpperCase()}
{player.username.substring(0, 2).toUpperCase()}
</div>
<span class="ml-2 text-gray-800 font-medium">{player.name}</span>
<span class="ml-2 text-gray-800 font-medium">{player.username}</span>
{#if player.isHost}
{#if player.email === host.email}
<span class="ml-auto flex items-center text-blue-600 text-sm font-medium">
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path d="M9.504 5.071a.5.5 0 01.992 0l1.5 10a.5.5 0 01-.992 0l-1.5-10zM8 9a1 1 0 100 2h4a1 1 0 100-2H8z" />

2
src/lib/types.ts
View File

@@ -1,5 +1,5 @@
export interface Player {
id: number;
id: string;
name: string;
isHost: boolean;
}

5
src/lib/websocketClient.svelte.ts
View File

@@ -1,8 +1,9 @@
import type { User } from '../app';
import type { Player, Settings, WebSocketMessage } from './types';
export class WebsocketClient {
connected = $state(false);
players: Player[] = $state([]);
players: User[] = $state([]);
gameSettings: Settings = $state({
maxPlayers: 8,
gameMode: 'classic',
@@ -40,7 +41,7 @@ export class WebsocketClient {
break;
case 'playerLeave':
this.players = this.players.filter((p) => p.id !== message.playerId);
this.players = this.players.filter((p) => p.email !== message.email);
break;
case 'playerList':