Turn info

apps/web/src/components/AnimatedPopup/AnimatedPopup.tsx

@@ -26,7 +26,7 @@ const AnimatedPopup: React.FC<Props> = ({
   useEffect(() => {
     setTimeout(() => {
       setShowPopup(false);
-    }, 2000);
+    }, 2200);
   }, [setShowPopup]);
 
   return (

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}>

apps/web/src/components/AnimatedPopup/style.module.css

@@ -1,11 +1,11 @@
 .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;
+  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% {

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);

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[] = [];