Merged PR 4249: Bug fix for Double rolling animation

This is a fix for the double-rolling animation. The animation played twice when a player was waiting for other players.

QA:
- start a game and let one player roll the dice and press the ready button
- One other player must do nothing and let the time run out.
- check if the rolling dice animation is not displaying

Related work items: #18857

frontend/src/components/roll-dice/roll-dice.tsx

@@ -14,6 +14,7 @@ import { FadeTransition } from "../page-transition";
 import { Timer } from "../timer";
 import { PrimaryButton } from "../../molecules";
 import { useClientTimer } from "../../hooks";
+import { WaitingForPlayers } from "./waiting-for-players";
 
 export const RollDice: FC = () => {
   const { sendMatchState } = useMatch();
@@ -26,7 +27,7 @@ export const RollDice: FC = () => {
   const isPlayerReady = useStore((state) => state.isPlayerReady);
   const dice = useStore((state) => state.diceValue);
 
-  const { count } = useClientTimer(hasRolledDice);
+  useClientTimer(hasRolledDice);
 
   if (!localPlayer) return <ErrorView />;
 
@@ -45,13 +46,7 @@ export const RollDice: FC = () => {
   };
 
   // In case of timeout player shouldn't be see this view.
-  if (hasRolledDice && isPlayerReady && count !== 0) {
-    return (
-      <BottomButtonWrapper>
-        <MatchHeading headingOne={text.powerUps.timeToWait} headingTwo={text.powerUps.waitForPlayers} isAnimated />
-      </BottomButtonWrapper>
-    );
-  }
+  if (isPlayerReady) return <WaitingForPlayers />;
 
   return (
     <FadeTransition>

frontend/src/components/roll-dice/waiting-for-players.tsx

@@ -0,0 +1,11 @@
+import { text } from "../../assets";
+import { BottomButtonWrapper } from "../../atoms";
+import { MatchHeading } from "../match-heading";
+
+export const WaitingForPlayers = () => {
+  return (
+    <BottomButtonWrapper>
+      <MatchHeading headingOne={text.powerUps.timeToWait} headingTwo={text.powerUps.waitForPlayers} isAnimated />
+    </BottomButtonWrapper>
+  );
+};

frontend/src/service/match.ts

@@ -169,9 +169,11 @@ export const useMatch = () => {
 
   const delayBroadcastPlayerReady = (delay: number) => {
     setSpinnerVisibility(true);
-    setPlayerReady(true);
 
-    const timeout = setTimeout(() => broadcastPlayerReady(), delay);
+    const timeout = setTimeout(() => {
+      setPlayerReady(true);
+      broadcastPlayerReady();
+    }, delay);
     return () => clearTimeout(timeout);
   };