Centralised player labels- leaderboard now gets colors and icons

hopperelec · Mar 26, 2024 · b3be615 · b3be615
1 parent df1b3e9
commit b3be615
Show file tree

Hide file tree

Showing 10 changed files with 109 additions and 117 deletions.
diff --git a/src/lib/Kickable.svelte → src/lib/KickablePlayerLabel.svelte b/src/lib/Kickable.svelte → src/lib/KickablePlayerLabel.svelte
@@ -1,19 +1,28 @@
 <script lang="ts">
-  export let userId: number;
+  import PlayerLabel from "$lib/PlayerLabel.svelte";
+  import type { PlayerLabelProps } from "$lib/types";
+
+  export let currentUserId: number;
+  export let allowKicking = false;
+  export let player: PlayerLabelProps;
 
   async function kickPlayer(userId: number) {
     const res = await fetch("../kick/" + userId + "/", { method: "POST" });
     if (!res.ok) alert((await res.json()).message);
   }
 </script>
 
-<button
-  on:click={async () => await kickPlayer(userId)}
-  tabindex="0"
-  type="button"
->
-  <slot />
-</button>
+{#if allowKicking && player.id !== currentUserId && !player.isHost}
+  <button
+    on:click={async () => await kickPlayer(player.id)}
+    tabindex="0"
+    type="button"
+  >
+    <PlayerLabel {player} {currentUserId} />
+  </button>
+{:else}
+  <PlayerLabel {player} {currentUserId} />
+{/if}
 
 <style>
   button {

diff --git a/src/lib/Leaderboard.svelte b/src/lib/Leaderboard.svelte
@@ -1,23 +1,17 @@
 <script lang="ts">
-  import type { LeaderboardPlayer } from "$lib/types";
-  import Kickable from "$lib/Kickable.svelte";
+  import type { PlayerLabelProps } from "$lib/types";
+  import KickablePlayerLabel from "$lib/KickablePlayerLabel.svelte";
 
-  export let orderedPlayers: LeaderboardPlayer[];
+  export let currentUserId: number;
+  export let allowKicking = false;
+  export let orderedPlayers: PlayerLabelProps[];
 </script>
 
 <h3>Leaderboard</h3>
 <ol>
   {#each orderedPlayers as player}
     <li>
-      {#if player.kickable}
-        <Kickable userId={player.id}>
-          <span>{player.name}</span> -
-          <span>{player.points} point{player.points === 1 ? "" : "s"}</span>
-        </Kickable>
-      {:else}
-        <span>{player.name}</span> -
-        <span>{player.points} point{player.points === 1 ? "" : "s"}</span>
-      {/if}
+      <KickablePlayerLabel {currentUserId} {allowKicking} {player} />
     </li>
   {/each}
 </ol>
@@ -31,11 +25,13 @@
   }
 
   ol {
+    font-size: 24px;
     overflow-y: auto;
-    margin-left: 10px; /* Counter li padding */
+    margin: 0 0 0 10px; /* Counter li padding */
   }
 
   li {
+    padding: 5px 0;
     margin-right: 10px; /* Prevent overflow for Kickable hover */
   }
 </style>
diff --git a/src/lib/PlayerLabel.svelte b/src/lib/PlayerLabel.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { PlayerLabelProps } from "$lib/types";
+  import { DEFAULT_USER_ICON } from "$lib/constants";
+
+  export let currentUserId: number;
+  export let player: PlayerLabelProps;
+  let name = player.name || "User " + player.id;
+</script>
+
+<div
+  class:current-user={player.id === currentUserId}
+  class:host={player.isHost}
+  id="label-container"
+>
+  <img
+    alt="{name}'s picture"
+    height="32"
+    src={player.picture || DEFAULT_USER_ICON}
+    width="32"
+  />
+  <span>{name}</span>
+  {#if player.points}<span> - </span><span>{player.points} points</span>{/if}
+</div>
+
+<style>
+  #label-container {
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    font-size: 24px;
+
+    & > img {
+      clip-path: inset(0% round 50%);
+    }
+
+    & > span {
+      margin-left: 10px;
+      margin-right: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .host {
+    color: orange;
+  }
+
+  .current-user {
+    color: blue;
+  }
+</style>
diff --git a/src/lib/get-display-name.ts b/src/lib/get-display-name.ts
diff --git a/src/lib/types.d.ts b/src/lib/types.d.ts
@@ -1,7 +1,8 @@
 export type LocalDoor = { svgRef1: number; svgRef2: number };
-export type LeaderboardPlayer = {
+export type PlayerLabelProps = {
   id: number;
-  name: string;
-  points: number;
-  kickable?: boolean;
+  name: string | null;
+  picture: string | null;
+  points?: number;
+  isHost: boolean;
 };
diff --git a/src/routes/game/[gameId=id]/end/+page.server.ts b/src/routes/game/[gameId=id]/end/+page.server.ts
@@ -1,7 +1,7 @@
 import prisma from "$lib/server/prisma";
 import { error } from "@sveltejs/kit";
 import ablyServer from "$lib/server/ably-server";
-import getDisplayName from "$lib/get-display-name";
+import type { PlayerLabelProps } from "$lib/types";
 
 async function endGame(gameId: number) {
   await prisma.game.update({
@@ -45,6 +45,7 @@ export const load = async ({ params, locals }) => {
       },
       players: {
         select: {
+          isHost: true,
           points: true,
           user: { select: { id: true, name: true, picture: true } },
           currRoom: { select: { svgRef: true } },
@@ -65,12 +66,7 @@ export const load = async ({ params, locals }) => {
     mapImgURL: string;
     leaderboardPosition: number;
     claimedRooms: number[];
-    players: {
-      points: number;
-      name: string;
-      picture: string | null;
-      currSvgRef: number;
-    }[];
+    players: (PlayerLabelProps & { currSvgRef: number })[];
   } = {
     mapImgURL: ret.map.imgURL,
     leaderboardPosition: ret._count.players + 1,
@@ -79,9 +75,8 @@ export const load = async ({ params, locals }) => {
     ),
     players: ret.players.map((player) => {
       return {
-        points: player.points,
-        name: getDisplayName(player.user),
-        picture: player.user.picture,
+        ...player,
+        ...player.user,
         currSvgRef: player.currRoom.svgRef,
       };
     }),

diff --git a/src/routes/game/[gameId=id]/end/+page.svelte b/src/routes/game/[gameId=id]/end/+page.svelte
@@ -49,7 +49,7 @@
   <h2>Game over!</h2>
   <p>You {getCardinal(data.leaderboardPosition)}!</p>
   <div id="leaderboard-container">
-    <Leaderboard orderedPlayers={data.players} />
+    <Leaderboard currentUserId={data.userId} orderedPlayers={data.players} />
   </div>
   <div id="map-container">
     <SVGMap bind:this={map} imgURL={data.mapImgURL} onSuccess={onMapSuccess} />

diff --git a/src/routes/game/[gameId=id]/leaderboard/+page.server.ts b/src/routes/game/[gameId=id]/leaderboard/+page.server.ts
@@ -13,7 +13,7 @@ export const load = async ({ params, locals }) => {
           players: {
             where: { kicked: false },
             select: {
-              user: { select: { id: true, name: true } },
+              user: { select: { id: true, name: true, picture: true } },
               points: true,
               isHost: true,
             },
@@ -32,11 +32,11 @@ export const load = async ({ params, locals }) => {
     isHost: ret.isHost,
     players: ret.game.players.map((player) => {
       return {
-        points: player.points,
+        ...player,
+        ...player.user,
         kickable: ret.isHost
           ? !player.isHost && player.user.id != locals.user.id
           : undefined,
-        ...player.user,
       };
     }),
   };

diff --git a/src/routes/game/[gameId=id]/leaderboard/+page.svelte b/src/routes/game/[gameId=id]/leaderboard/+page.svelte
@@ -3,20 +3,16 @@
   import { getChannel } from "$lib/ably-client";
   import { page } from "$app/stores";
   import "$lib/button.css";
-  import getDisplayName from "$lib/get-display-name";
-  import type { LeaderboardPlayer } from "$lib/types";
+  import type { PlayerLabelProps } from "$lib/types";
 
   export let data;
 
   let players = data.players.reduce(
     (acc, player) => {
-      acc[player.id] = {
-        ...player,
-        name: getDisplayName(player),
-      };
+      acc[player.id] = player;
       return acc;
     },
-    {} as { [key: number]: LeaderboardPlayer },
+    {} as { [key: number]: PlayerLabelProps & { points: number } },
   );
   $: orderedPlayers = Object.values(players).sort(
     (a, b) => b.points - a.points,
@@ -31,9 +27,8 @@
       case "create":
         players[$pointsMessage.data.userId] = {
           id: $pointsMessage.data.userId,
-          name: getDisplayName($pointsMessage.data),
+          ...$pointsMessage.data,
           points: 0,
-          kickable: data.isHost,
         };
     }
   }
@@ -51,7 +46,7 @@
 {#if data.isHost}<a id="end" class="button" href="../end">End game</a>{/if}
 <div id="page-container">
   <div id="leaderboard-container">
-    <Leaderboard {orderedPlayers} />
+    <Leaderboard allowKicking currentUserId={data.userId} {orderedPlayers} />
   </div>
   <a class="button" href="../">Back to game</a>
 </div>

diff --git a/src/routes/game/[gameId=id]/lobby/+page.svelte b/src/routes/game/[gameId=id]/lobby/+page.svelte
@@ -1,27 +1,21 @@
 <script lang="ts">
   import PlayerPicturePreloader from "$lib/PlayerPicturePreloader.svelte";
-  import getDisplayName from "$lib/get-display-name";
   import { DEFAULT_USER_ICON } from "$lib/constants";
   import "$lib/button.css";
   import { getChannel } from "$lib/ably-client";
   import { page } from "$app/stores";
   import { goto } from "$app/navigation";
-  import Kickable from "$lib/Kickable.svelte";
+  import type { PlayerLabelProps } from "$lib/types";
+  import KickablePlayerLabel from "$lib/KickablePlayerLabel.svelte";
 
   export let data;
 
   let players = data.players.reduce(
     (acc, player) => {
-      acc[player.id] = {
-        name: getDisplayName(player),
-        picture: player.picture || DEFAULT_USER_ICON,
-        isHost: player.isHost,
-      };
+      acc[player.id] = player;
       return acc;
     },
-    {} as {
-      [key: number]: { name: string; picture: string | null; isHost: boolean };
-    },
+    {} as { [key: number]: PlayerLabelProps },
   );
   let isHost = players[data.userId].isHost;
 
@@ -38,6 +32,7 @@
         break;
       case "join":
         players[$lobbyMessage.data.id] = {
+          id: $lobbyMessage.data.id,
           name: $lobbyMessage.data.name,
           picture: $lobbyMessage.data.picture || DEFAULT_USER_ICON,
           isHost: false,
@@ -98,35 +93,13 @@
     </div>
     <ul>
       {#each Object.entries(players) as [id, player]}
-        {#if isHost && data.userId !== +id && !player.isHost}
-          <li>
-            <Kickable userId={+id}>
-              <div class="player-container">
-                <img
-                  width="32"
-                  height="32"
-                  src={player.picture}
-                  alt="{player.name}'s picture"
-                />
-                <span>{player.name}</span>
-              </div>
-            </Kickable>
-          </li>
-        {:else}
-          <li
-            class="player-container"
-            class:host={player.isHost}
-            class:current-user={data.userId === +id}
-          >
-            <img
-              width="32"
-              height="32"
-              src={player.picture}
-              alt="{player.name}'s picture"
-            />
-            <span>{player.name}</span>
-          </li>
-        {/if}
+        <li>
+          <KickablePlayerLabel
+            currentUserId={data.userId}
+            allowKicking={isHost}
+            {player}
+          />
+        </li>
       {/each}
     </ul>
   </div>
@@ -173,30 +146,4 @@
     list-style-type: none;
     padding: 5px 0;
   }
-
-  .player-container {
-    display: flex;
-    align-items: center;
-    font-size: 24px;
-
-    & > img {
-      clip-path: inset(0% round 50%);
-    }
-
-    & > span {
-      margin-left: 10px;
-      margin-right: 20px;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  .host {
-    color: orange;
-  }
-
-  .current-user {
-    color: blue;
-  }
 </style>