From 34429f9d0a6a5f2644da504c9164326f135d1896 Mon Sep 17 00:00:00 2001
From: tsiklic1 <toma.siklic@gmail.com>
Date: Wed, 12 Nov 2025 10:58:03 +0100
Subject: [PATCH] add progress bar timer

---
 apps/api/src/game/game-utils.ts               |  2 +-
 apps/web/src/components/Game/GameStatus.tsx   | 13 ++----------
 .../ProgressBarTimer/ProgressBarTimer.tsx     | 20 +++++++++++++++++++
 .../src/components/ProgressBarTimer/index.ts  |  3 +++
 .../ProgressBarTimer/style.module.css         | 16 +++++++++++++++
 apps/web/src/hooks/game.ts                    |  7 +------
 apps/web/src/utils/calculation-utils.ts       |  2 +-
 7 files changed, 44 insertions(+), 19 deletions(-)
 create mode 100644 apps/web/src/components/ProgressBarTimer/ProgressBarTimer.tsx
 create mode 100644 apps/web/src/components/ProgressBarTimer/index.ts
 create mode 100644 apps/web/src/components/ProgressBarTimer/style.module.css

diff --git a/apps/api/src/game/game-utils.ts b/apps/api/src/game/game-utils.ts
index 532543f..dd3a716 100644
--- a/apps/api/src/game/game-utils.ts
+++ b/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));
diff --git a/apps/web/src/components/Game/GameStatus.tsx b/apps/web/src/components/Game/GameStatus.tsx
index 405b22c..e965c19 100644
--- a/apps/web/src/components/Game/GameStatus.tsx
+++ b/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}>
diff --git a/apps/web/src/components/ProgressBarTimer/ProgressBarTimer.tsx b/apps/web/src/components/ProgressBarTimer/ProgressBarTimer.tsx
new file mode 100644
index 0000000..b075983
--- /dev/null
+++ b/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;
diff --git a/apps/web/src/components/ProgressBarTimer/index.ts b/apps/web/src/components/ProgressBarTimer/index.ts
new file mode 100644
index 0000000..b904e90
--- /dev/null
+++ b/apps/web/src/components/ProgressBarTimer/index.ts
@@ -0,0 +1,3 @@
+import ProgressBarTimer from './ProgressBarTimer';
+
+export default ProgressBarTimer;
diff --git a/apps/web/src/components/ProgressBarTimer/style.module.css b/apps/web/src/components/ProgressBarTimer/style.module.css
new file mode 100644
index 0000000..3f988a4
--- /dev/null
+++ b/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%;
+}
diff --git a/apps/web/src/hooks/game.ts b/apps/web/src/hooks/game.ts
index 07f1d4d..c322884 100644
--- a/apps/web/src/hooks/game.ts
+++ b/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);
     }
diff --git a/apps/web/src/utils/calculation-utils.ts b/apps/web/src/utils/calculation-utils.ts
index d5caa89..866c88f 100644
--- a/apps/web/src/utils/calculation-utils.ts
+++ b/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) {