feat: update

components/Logs.tsx

@@ -66,7 +66,7 @@ export const Logs = () => {
                 key={playerId}
               >
                 <div className="header">
-                  {isInspecting ? <>{`P${index}`}&nbsp;</> : ""} Logs
+                  {isInspecting ? <>{`P${index + 1}`}&nbsp;</> : ""} Logs
                 </div>
                 <div className="content">
                   {historyByPlayer[playerId].length > 0 ? (

components/Map.tsx

@@ -209,7 +209,11 @@ export const Map = () => {
                 }}
               >
                 <div className="nametag">
-                  {player.id === currentPlayer?.id ? "You" : <>P{index + 1}</>}
+                  {player.id === currentPlayer?.id ? (
+                    "You"
+                  ) : (
+                    <>{player.name ? player.name : `P${index + 1}`}</>
+                  )}
                   <br />
                   {player.points}
                 </div>

components/StartScreen.tsx

@@ -3,12 +3,16 @@ import { useGameContext } from "../contexts/game";
 import { client } from "../libs/apis";
 
 export const StartScreen = () => {
+  const playerNameInputRef = useRef<HTMLInputElement>(null);
   const gameIdInputRef = useRef<HTMLInputElement>(null);
+
   const { gameState, setGameId, setPlayerToken } = useGameContext();
   const [inspecting, setInspecting] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
   const onNewGame = async () => {
+    const playerName = playerNameInputRef.current?.value || "";
+
     try {
       setIsLoading(true);
 
@@ -17,7 +21,7 @@ export const StartScreen = () => {
       const gameId = newGameResponse.data.id;
 
       // Join the game
-      const joinGameResponse = await client.joinGame(gameId);
+      const joinGameResponse = await client.joinGame(gameId, playerName);
       const playerToken = joinGameResponse.data.token;
 
       setGameId(gameId);
@@ -32,6 +36,7 @@ export const StartScreen = () => {
   const onJoin = async (event: FormEvent<HTMLFormElement>) => {
     event.preventDefault();
 
+    const playerName = playerNameInputRef.current?.value || "";
     const gameId = gameIdInputRef.current?.value || "";
 
     if (!gameId) {
@@ -43,7 +48,7 @@ export const StartScreen = () => {
 
       if (!inspecting) {
         // Join the game
-        const joinGameResponse = await client.joinGame(gameId);
+        const joinGameResponse = await client.joinGame(gameId, playerName);
         const playerToken = joinGameResponse.data.token;
         setPlayerToken(playerToken);
       }
@@ -62,6 +67,15 @@ export const StartScreen = () => {
 
   return (
     <div className="start-screen">
+      <input
+        name="playerName"
+        ref={playerNameInputRef}
+        placeholder="Enter your name"
+        style={{
+          color: "black",
+        }}
+        maxLength={10}
+      />
       <button
         type="submit"
         className="play-button"

libs/apis.ts

@@ -1,7 +1,7 @@
 import { Game, MoveType, Player } from "../types/game";
 import fetcher from "./fetcher";
 
-const BASE_URL = process.env.BASE_URL || "http://51.79.240.41:4000";
+const BASE_URL = process.env.BASE_URL || "https://hunger.fly.dev";
 
 export interface Response<T> {
   data: T;
@@ -37,12 +37,15 @@ class Client {
     });
   }
 
-  public joinGame(id: string) {
+  public joinGame(id: string, name?: string) {
     return fetcher<Response<Player>>(`${BASE_URL}/api/game/${id}/player`, {
       method: "POST",
       headers: {
         ...this.headers,
       },
+      body: JSON.stringify({
+        name,
+      }),
     });
   }
 

styles/globals.css

@@ -250,8 +250,10 @@ input[type=number] {
 }
 
 .nametag {
+  padding: 0.125rem;
   font-size: 0.375rem;
-  width: 1.25rem;
+  min-width: 1.5rem;
+  max-width: 3rem;
   height: 0.75rem;
   box-shadow: 0 0 0.05rem black;
   border-radius: 0.1rem;
@@ -264,6 +266,7 @@ input[type=number] {
   top: -0.5rem;
   left: 50%;
   transform: translateX(-50%);
+  white-space: nowrap;
 }
 
 .nametag:hover {

types/game.ts

@@ -42,6 +42,7 @@ export interface Player {
   points: number;
   status: PlayerStatus;
   token: string;
+  name?: string;
 }
 
 export interface MoveHistory {