new front

packages/client/src/app/page.tsx

@@ -27,15 +27,22 @@ export default function HomePage() {
   />
   return (
     <main className="flex h-full select-none flex-col items-center justify-center">
-      <div className="absolute right-0 bg-gray-400 p-4">
-        <div className="font-bold">Score</div>
-        <ul>
+      <div className="absolute right-0 top-0 bg-white/10 backdrop-blur-md rounded-lg text-white flex flex-col gap-2 p-4 m-4 pointer-events-none">
+        <h2 className="font-bold text-xl">Leaderboard</h2>
+        <div className="flex flex-col gap-2 w-80">
           {api.scores?.map((player) => (
-            <li key={player.name + player.score}>
-              {player.name}: {player.score}
-            </li>
+            <div key={player.name} className="flex justify-between gap-8 text-white/70">
+              <div className="flex justify-between max-w-60">
+                <span className='truncate'>
+                {player.name}
+                </span>
+              </div>
+              <div className="flex justify-between font-bold max-w-20 truncate">
+                {Math.round(player.score)}
+              </div>
+            </div>
           ))}
-        </ul>
+        </div>
       </div>
       {api.scene && <Canvas centered />}
     </main>

packages/client/src/lib/Game.ts

@@ -194,17 +194,17 @@ export class Game {
     });
 
     // show fps top right
-    this.c.fillStyle = "white";
+    this.c.fillStyle = "hsla(0, 10%, 74%, 0.753)";
     this.c.font = "16px Arial";
-    this.c.textAlign = "right";
+    this.c.textAlign = "left";
     this.c.fillText(
       `FPS: ${Math.round(this.time.fps).toString()}`,
-      this.screen.width - 10,
+      10,
       20,
     );
     this.c.fillText(
       `TPS: ${Math.round(this.time.tps).toString()}`,
-      this.screen.width - 10,
+      10,
       40,
     );
   }

packages/client/src/lib/Player.ts

@@ -71,9 +71,9 @@ export class Player extends Entity {
     if (!head) return;
     const screenHead = worldToScreen(head, this.game.camera);
     c.font = "20px Arial";
-    c.fillStyle = "white";
+    c.fillStyle = "hsla(0, 10%, 74%, 0.753)";
     c.textAlign = "center";
-    c.fillText(this.name, screenHead.x, screenHead.y - 20);
+    c.fillText(this.name, screenHead.x, screenHead.y - 40);
   }
 
   interpolate() {