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 = ({ useEffect(() => { setTimeout(() => { setShowPopup(false); - }, 2000); + }, 2200); }, [setShowPopup]); return ( 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 = ({ eventType, canvasSize }) => { return (
{shouldShowCrossSign(eventType) && (
diff --git a/apps/web/src/components/AnimatedPopup/style.module.css b/apps/web/src/components/AnimatedPopup/style.module.css index 9ad445c..9d81b9a 100644 --- a/apps/web/src/components/AnimatedPopup/style.module.css +++ b/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% { 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); 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[] = [];