From 840bc2764616f3a297607c98e3bb86812bd56192 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Tue, 8 Sep 2026 13:02:28 -0400
Subject: [PATCH] feat(opord): add draining timer bar to the 2s unlock
 countdown

---
 src/components/frontend/opord/OpordGame.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/frontend/opord/OpordGame.tsx b/src/components/frontend/opord/OpordGame.tsx
index 83acfd0..2b7d455 100644
--- a/src/components/frontend/opord/OpordGame.tsx
+++ b/src/components/frontend/opord/OpordGame.tsx
@@ -655,9 +655,17 @@ export function OpordGame({
           />
 
           {unlockRemainingMs > 0 && lastAnswerWasCorrect === null && (
-            <p className="font-mono text-xs uppercase tracking-wider text-muted-foreground">
-              Answering opens in {Math.ceil(unlockRemainingMs / 1000)}s
-            </p>
+            <div className="mx-auto w-full max-w-xs space-y-1">
+              <p className="text-center font-mono text-xs uppercase tracking-wider text-muted-foreground">
+                Answering opens in {Math.ceil(unlockRemainingMs / 1000)}s
+              </p>
+              <div className="h-1 w-full overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full rounded-full bg-amber-400 transition-[width] duration-100 ease-linear"
+                  style={{ width: `${(unlockRemainingMs / QUESTION_UNLOCK_DELAY_MS) * 100}%` }}
+                />
+              </div>
+            </div>
           )}
 
           <p className="text-center text-lg font-semibold">{question.prompt}</p>