From 6687dd943ca51bfbd37369b193a970fb9dfeccba Mon Sep 17 00:00:00 2001
From: Mauro Eijsenring <mauro@kryha.io>
Date: Wed, 17 May 2023 14:29:29 +0000
Subject: [PATCH] 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       | 11 +++--------
 .../src/components/roll-dice/waiting-for-players.tsx  | 11 +++++++++++
 frontend/src/service/match.ts                         |  6 ++++--
 3 files changed, 18 insertions(+), 10 deletions(-)
 create mode 100644 frontend/src/components/roll-dice/waiting-for-players.tsx

diff --git a/frontend/src/components/roll-dice/roll-dice.tsx b/frontend/src/components/roll-dice/roll-dice.tsx
index 3186e312..2f03df63 100644
--- a/frontend/src/components/roll-dice/roll-dice.tsx
+++ b/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>
diff --git a/frontend/src/components/roll-dice/waiting-for-players.tsx b/frontend/src/components/roll-dice/waiting-for-players.tsx
new file mode 100644
index 00000000..db850104
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/frontend/src/service/match.ts b/frontend/src/service/match.ts
index ab03f41c..5444d992 100644
--- a/frontend/src/service/match.ts
+++ b/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);
   };