ux tweaks

PaulKreft · Feb 19, 2024 · 4fee9b3 · 4fee9b3
1 parent 5a5fdac
commit 4fee9b3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 9 deletions.
diff --git a/frontend/src/components/MultiplayerLobby.tsx b/frontend/src/components/MultiplayerLobby.tsx
@@ -31,13 +31,15 @@ export const MultiplayerLobby: React.FC<MultiplayerLobbyProps> = ({
 
           {lobby.host.id !== player.id && (
             <div className="mt-5 flex gap-5">
-              <div>
+              <div className="flex flex-col items-center">
                 <span className="font-light">Streak to win </span>
-                <span className="font-bold">{lobby.difficulty}</span>
+                <span className="font-bold">{lobby.streakToWin ?? "1"}</span>
               </div>
-              <div>
+              <div className="flex flex-col items-center">
                 <span className="font-light">Difficulty </span>
-                <span className="font-bold">{lobby.streakToWin ?? "1"}</span>
+                <span className="font-bold">
+                  {lobby.difficulty === 1 ? "Easy" : lobby.difficulty === 2 ? "Medium" : "Hard"}
+                </span>
               </div>
             </div>
           )}
@@ -46,7 +48,7 @@ export const MultiplayerLobby: React.FC<MultiplayerLobbyProps> = ({
             {lobby.players.map((player) => (
               <div key={player.id}>
                 <div> {player.name}</div>
-                <div className="w-full h-[1px] mt-1 mb-1 bg-gradient-to-r from-white via-black to-white"/>
+                <div className="mb-1 mt-1 h-[1px] w-full bg-gradient-to-r from-white via-black to-white" />
               </div>
             ))}
           </div>
@@ -80,21 +82,22 @@ export const MultiplayerLobby: React.FC<MultiplayerLobbyProps> = ({
               />
             </div>
           </div>
-          {lobby.players.length < 2 && (
+          {lobby.players.length < 2 && lobby.host.id === player.id && (
             <div className="mt-12 flex flex-col items-center gap-2">
               Waiting for players <Spinner size="sm" />
             </div>
           )}
 
-          {lobby.players.length > 1 && lobby.host.id === player.id ? (
+          {lobby.players.length > 1 && lobby.host.id === player.id && (
             <button
               className="mt-6 h-max items-center rounded-lg border-2 border-black bg-black px-9 py-3 text-xl font-light text-white hover:bg-white hover:text-black disabled:border-transparent disabled:bg-black/70 disabled:text-white/80"
               onClick={startGame}
               disabled={!lobby.streakToWin}
             >
               Start Game
             </button>
-          ) : (
+          )}
+          {lobby.host.id !== player.id && (
             <div className="mt-12 flex flex-col items-center gap-2">
               Waiting for host <Spinner size="sm" />
             </div>

diff --git a/frontend/src/components/MultiplayerSession.tsx b/frontend/src/components/MultiplayerSession.tsx
@@ -165,9 +165,11 @@ export const MultiplayerSession: React.FC<ActiveLobbyProps> = ({ user }) => {
   if (lobby.losers.length && lobby.losers.length >= lobby.players.length - 1) {
     return (
       <div className="flex flex-1 flex-col items-center justify-center gap-5">
-        <div className="mb-16 text-5xl font-light">
+        <div className="text-center text-5xl font-light">
           <span className="font-extrabold">{lobby.winner?.name}</span> won!
         </div>
+
+        <div className="mb-16 mt-3 text-2xl font-thin">in <span className="font light">{((lobby.timeToBeat ?? 0) / 1000).toFixed(3)}</span> seconds</div>
         {lobby.host.id === player.id ? (
           <button
             className="h-max items-center rounded-2xl border-2 border-black bg-black px-12 py-4 text-3xl font-light text-white hover:bg-white hover:text-black"