From dba421ecaf776ccff188808c8131a85df024198d Mon Sep 17 00:00:00 2001
From: tsiklic1 <toma.siklic@gmail.com>
Date: Wed, 12 Nov 2025 14:04:56 +0100
Subject: [PATCH 1/2] change AnimatedPopup styles

---
 .../components/AnimatedPopup/PopupImage.tsx    |  2 +-
 .../components/AnimatedPopup/style.module.css  |  4 ++--
 apps/web/src/hooks/game.ts                     | 18 ++++++++++++++++++
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/AnimatedPopup/PopupImage.tsx b/apps/web/src/components/AnimatedPopup/PopupImage.tsx
index b4f06a7..d847a90 100644
--- a/apps/web/src/components/AnimatedPopup/PopupImage.tsx
+++ b/apps/web/src/components/AnimatedPopup/PopupImage.tsx
@@ -37,7 +37,7 @@ const PopupImage: React.FC<Props> = ({ eventType, canvasSize }) => {
 
   return (
     <div
-      style={{ height: canvasSize * 0.2, width: canvasSize * 0.2 }}
+      style={{ height: canvasSize * 0.4, width: canvasSize * 0.4 }}
       className={c.imageWrapper}>
       {shouldShowCrossSign(eventType) && (
         <div className={c.crossSign}>
diff --git a/apps/web/src/components/AnimatedPopup/style.module.css b/apps/web/src/components/AnimatedPopup/style.module.css
index 9ad445c..dc06dd3 100644
--- a/apps/web/src/components/AnimatedPopup/style.module.css
+++ b/apps/web/src/components/AnimatedPopup/style.module.css
@@ -1,9 +1,9 @@
 .popup {
   position: fixed;
-  top: 10px;
+  top: 50%;
   left: 50%;
   z-index: 1000;
-  transform: translateX(-50%);
+  transform: translate(-50%, -50%);
   opacity: 0;
   animation: fadeInOut 2s ease-in-out forwards;
   display: flex;
diff --git a/apps/web/src/hooks/game.ts b/apps/web/src/hooks/game.ts
index c322884..5d5d0e6 100644
--- a/apps/web/src/hooks/game.ts
+++ b/apps/web/src/hooks/game.ts
@@ -117,6 +117,24 @@ export const useInitializeSockets = (
       setGameState(data.game);
     });
     socketRef.current.on('gameState', (data: GameData) => {
+      toast('Next move', {
+        style: {
+          background: '#1b1f2d',
+          color: '#f2e2b7',
+          fontSize: '20px',
+          fontWeight: 700,
+          padding: '14px 22px',
+          border: '2px solid #f2e2b7',
+          boxShadow: '0 10px 30px rgba(27,31,45,0.85)',
+          borderRadius: '12px',
+          minWidth: '280px',
+          textAlign: 'center',
+          letterSpacing: '0.4px',
+          zIndex: 99,
+        },
+        duration: 4000,
+      });
+
       const events: EventType[] = [];
       if ((data.moves + 1) % 6 === 0) {
         events.push(EventType.ZoneContraction);

From d3f88337de14d52bbe082ef050f54a903aa33b83 Mon Sep 17 00:00:00 2001
From: tsiklic1 <toma.siklic@gmail.com>
Date: Wed, 12 Nov 2025 14:16:28 +0100
Subject: [PATCH 2/2] change duration

---
 apps/web/src/components/AnimatedPopup/AnimatedPopup.tsx | 2 +-
 apps/web/src/components/AnimatedPopup/style.module.css  | 6 +++---
 apps/web/src/utils/calculation-utils.ts                 | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/AnimatedPopup/AnimatedPopup.tsx b/apps/web/src/components/AnimatedPopup/AnimatedPopup.tsx
index 427ac7a..940f973 100644
--- a/apps/web/src/components/AnimatedPopup/AnimatedPopup.tsx
+++ b/apps/web/src/components/AnimatedPopup/AnimatedPopup.tsx
@@ -26,7 +26,7 @@ const AnimatedPopup: React.FC<Props> = ({
   useEffect(() => {
     setTimeout(() => {
       setShowPopup(false);
-    }, 2000);
+    }, 2200);
   }, [setShowPopup]);
 
   return (
diff --git a/apps/web/src/components/AnimatedPopup/style.module.css b/apps/web/src/components/AnimatedPopup/style.module.css
index dc06dd3..9d81b9a 100644
--- a/apps/web/src/components/AnimatedPopup/style.module.css
+++ b/apps/web/src/components/AnimatedPopup/style.module.css
@@ -5,7 +5,7 @@
   z-index: 1000;
   transform: translate(-50%, -50%);
   opacity: 0;
-  animation: fadeInOut 2s ease-in-out forwards;
+  animation: fadeInOut 2.2s ease-in-out forwards;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -15,10 +15,10 @@
   0% {
     opacity: 0;
   }
-  30% {
+  35% {
     opacity: 0;
   }
-  45% {
+  50% {
     opacity: 0.9;
   }
   85% {
diff --git a/apps/web/src/utils/calculation-utils.ts b/apps/web/src/utils/calculation-utils.ts
index 866c88f..e4d63cd 100644
--- a/apps/web/src/utils/calculation-utils.ts
+++ b/apps/web/src/utils/calculation-utils.ts
@@ -5,7 +5,7 @@ import type { Player } from './Player';
 export const PI = 3.14159;
 export const GRID_RADIUS = 3;
 export const MOVE_DURATION_IN_SECONDS = 10;
-export const MOVE_ANIMATION_DURATION_IN_MS = 600;
+export const MOVE_ANIMATION_DURATION_IN_MS = 800;
 
 export function generateGrid(currentRadius: number) {
   const grid: Hex[] = [];