add progress bar timer

apps/api/src/game/game-utils.ts

@@ -2,7 +2,7 @@ import { Hex } from './Hex';
 
 export const MAX_PLAYERS = 4;
 export const START_GRID_RADIUS = 3;
-export const MOVE_DURATION_IN_SECONDS = 15;
+export const MOVE_DURATION_IN_SECONDS = 10;
 
 export function isNeighbor(hex: Hex, other: Hex) {
   return hex.neighbors().some((n) => n.equals(other));

apps/web/src/components/Game/GameStatus.tsx

@@ -5,12 +5,7 @@ import { useGame } from '../../providers/GameProvider';
 import { useLocation } from 'wouter';
 import DarkContainer from '../DarkContainer';
 import PlayerTagContainer from '../PlayerTag';
-
-const getColor = (time: number) => {
-  if (time > 5000) return 'lightgreen';
-  if (time > 2000) return 'orange';
-  return 'red';
-};
+import ProgressBarTimer from '../ProgressBarTimer';
 
 export const GameStatus = () => {
   const queryClient = useQueryClient();
@@ -38,11 +33,7 @@ export const GameStatus = () => {
   return (
     <div className={c.statusWrapper}>
       {gameState?.started && !gameState.draw && !gameContainsWinner && (
-        <span
-          className={c.timerText}
-          style={{ color: getColor(timeRemaining) }}>
-          {Math.round(timeRemaining / 1000)}
-        </span>
+        <ProgressBarTimer timeRemaining={timeRemaining} />
       )}
       {!gameState?.started && (
         <DarkContainer className={c.fixedTop}>

apps/web/src/components/ProgressBarTimer/ProgressBarTimer.tsx

@@ -0,0 +1,20 @@
+import { MOVE_DURATION_IN_SECONDS } from '../../utils/calculation-utils';
+import c from './style.module.css';
+
+type Props = {
+  timeRemaining: number;
+};
+
+const ProgressBarTimer: React.FC<Props> = ({ timeRemaining }) => {
+  return (
+    <div className={c.wrapper}>
+      <div
+        style={{
+          width: `${timeRemaining / ((MOVE_DURATION_IN_SECONDS * 1000) / 100)}%`,
+        }}
+        className={c.bar}></div>
+    </div>
+  );
+};
+
+export default ProgressBarTimer;

apps/web/src/components/ProgressBarTimer/index.ts

@@ -0,0 +1,3 @@
+import ProgressBarTimer from './ProgressBarTimer';
+
+export default ProgressBarTimer;

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

@@ -0,0 +1,16 @@
+.wrapper {
+  position: fixed;
+  top: 100px;
+  left: 50%;
+  transform: translateX(-50%);
+  max-width: 400px;
+  width: 100%;
+  height: 20px;
+  background: #1b1f2d;
+  border: 4px solid #1b1f2d;
+}
+
+.bar {
+  background: #f2e2b7;
+  height: 100%;
+}

apps/web/src/hooks/game.ts

@@ -118,11 +118,6 @@ export const useInitializeSockets = (
     });
     socketRef.current.on('gameState', (data: GameData) => {
       const events: EventType[] = [];
-
-      // if ((data.moves + 1) % 6 === 0) {
-      //   toast.success('Zone contracting on next move!');
-      // }
-
       if ((data.moves + 1) % 6 === 0) {
         events.push(EventType.ZoneContraction);
       }
@@ -227,7 +222,7 @@ export const useTimer = (
           setCountdownStarted(false);
         }
         setTimeRemaining(remainingTime);
-      }, 1000);
+      }, 10);
 
       return () => clearInterval(countdownInterval);
     }

apps/web/src/utils/calculation-utils.ts

@@ -4,7 +4,7 @@ import type { Player } from './Player';
 
 export const PI = 3.14159;
 export const GRID_RADIUS = 3;
-export const MOVE_DURATION_IN_SECONDS = 15;
+export const MOVE_DURATION_IN_SECONDS = 10;
 export const MOVE_ANIMATION_DURATION_IN_MS = 600;
 
 export function generateGrid(currentRadius: number) {