Update Result rank text

socket/src/utils/round.js

@@ -73,10 +73,9 @@ export const startRound = async (game, io, socket) => {
     game.players.find((p) => p.id === player.id).points += points
 
     setTimeout(() => {
-      let rank =
+      let sortPlayers = game.players.sort((a, b) => b.points - a.points)
-        game.players
+
-          .sort((a, b) => b.points - a.points)
+      let rank = sortPlayers.findIndex((p) => p.id === player.id) + 1
-          .findIndex((p) => p.id === player.id) + 1
 
       io.to(player.id).emit("game:status", {
         name: "SHOW_RESULT",
@@ -86,7 +85,10 @@ export const startRound = async (game, io, socket) => {
           points: points,
           myPoints: player.points,
           totalPlayer: game.players.length,
-          rank: rank,
+          rank,
+          aheadOfMe: sortPlayers[rank - 2]
+            ? sortPlayers[rank - 2].username
+            : null,
         },
       })
     }, 200)

src/components/game/states/Answers.jsx

@@ -99,12 +99,12 @@ export default function Answers({
 
       <div>
         {!responses && (
-          <div className="max-w-7xl mx-auto mb-4 rounded-full w-full flex justify-between gap-1 font-bold text-white text-lg md:text-xl px-2">
+          <div className="max-w-7xl mx-auto mb-4 w-full flex justify-between gap-1 font-bold text-white text-lg md:text-xl px-2">
-            <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex flex-col items-center text-lg">
+            <div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
               <span className="text-sm">Time</span>
               <span className="-translate-y-1">{cooldown}</span>
             </div>
-            <div className="bg-white shadow-inset text-black px-4 font-bold rounded-md flex flex-col items-center text-lg">
+            <div className="bg-black/40 px-4 font-bold rounded-full flex flex-col items-center text-lg">
               <span className="text-sm">Answers</span>
               <span className="-translate-y-1">{totalAnswer}</span>
             </div>

src/components/game/states/Question.jsx

@@ -7,7 +7,7 @@ export default function Question({ data: { question } }) {
   return (
     <section className="max-w-7xl mx-auto w-full flex-1 relative items-center flex flex-col px-4 h-full">
       <div className="flex items-center flex-1">
-        <h2 className="text-white text-5xl font-bold drop-shadow-lg text-center anim-show w-full justify-self-center">
+        <h2 className="text-white text-2xl md:text-4xl font-bold drop-shadow-lg text-center">
           {question}
         </h2>
       </div>

src/components/game/states/Result.jsx

@@ -4,7 +4,7 @@ import { usePlayerContext } from "@/context/player"
 import { useEffect } from "react"
 
 export default function Result({
-  data: { correct, message, points, myPoints, totalPlayer, rank },
+  data: { correct, message, points, myPoints, totalPlayer, rank, aheadOfMe },
 }) {
   const { dispatch } = usePlayerContext()
 
@@ -25,6 +25,9 @@ export default function Result({
       <h2 className="text-white font-bold text-4xl mt-1 drop-shadow-lg">
         {message}
       </h2>
+      <p className="text-white font-bold text-xl mt-1 drop-shadow-lg">
+        {`You are top ${rank}` + (aheadOfMe ? ", behind " + aheadOfMe : "")}
+      </p>
       {correct && (
         <span className="py-2 px-4 text-white font-bold text-2xl drop-shadow-lg bg-black/40 rounded mt-2">
           +{points}