chat messages styling

client/src/components/game/GamePage.tsx

@@ -447,7 +447,22 @@ export default function GamePage({ initialLobby }: { initialLobby: Game }) {
             >
               {chatMessages.map((m, i) => (
                 <li className="max-w-[30rem]" key={i}>
-                  {m.author.name}: {m.message}
+                  <span
+                    className={
+                      !m.author.id && m.author.name === "server" ? "bg-base-content p-2" : ""
+                    }
+                  >
+                    {m.author.id && (
+                      <span>
+                        <span className="font-bold">{m.author.name}</span>:{" "}
+                      </span>
+                    )}
+                    <span
+                      className={!m.author.id && m.author.name === "server" ? "text-base-300" : ""}
+                    >
+                      {m.message}
+                    </span>
+                  </span>
                 </li>
               ))}
             </ul>

client/src/components/game/handlers.ts

@@ -123,11 +123,11 @@ export function initSocket(
             winnerSide?: string;
         }) => {
             const m = {
-                author: { name: "game" }
+                author: { name: "server" }
             } as Message;
 
             if (reason === "checkmate") {
-                m.message = `${winnerName}(${winnerSide}) has won by checkmate.`;
+                m.message = `${winnerName} (${winnerSide}) has won by checkmate.`;
             } else {
                 let message = "The game has ended in a draw";
                 if (reason === "repetition") {