tweakings

2026-09-16 01:21:20 -04:00 · 2026-05-12 15:03:56 -04:00
parent c4f470b329
commit 13c5ce3157
7 changed files with 171 additions and 149 deletions
@@ -11,8 +11,8 @@
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Roomba Rover" />
    <title>Roomba Rover</title>
-    <script type="module" crossorigin src="/assets/index-BjZM2uht.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-CxKDohQn.css">
+    <script type="module" crossorigin src="/assets/index-CMqFLBAu.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-T_RLfU2D.css">
  </head>
  <body>
    <div id="root"></div>
@@ -82,19 +82,13 @@ export default function DriverVideoPanel({ layoutFormat = 'desktop' }) {
      ? Math.max(0, Math.ceil(msUntilIdleSkip / 1000))
      : null;
  const turnTimerText = useMemo(() => {
-    if (!isTurnsMode) return null;
-    if (isActiveDriver) {
-      return turnSeconds != null ? `${turnSeconds}s left` : 'Your turn';
-    }
-    const parts = ['Not your turn'];
-    if (isNextDriver && turnSeconds != null) {
-      parts.push(`your turn in ${turnSeconds}s`);
-    }
-    if (shouldUsePreview) {
-      parts.push('preview to save upload bandwidth');
-    }
-    return parts.join(' • ');
-  }, [isTurnsMode, isActiveDriver, isNextDriver, turnSeconds, shouldUsePreview]);
+    if (!isTurnsMode || !isActiveDriver) return null;
+    return turnSeconds != null ? `${turnSeconds}s left` : 'Your turn';
+  }, [isTurnsMode, isActiveDriver, turnSeconds]);
+  const notTurnCountdownText = useMemo(() => {
+    if (!isNotYourTurn || !isNextDriver || turnSeconds == null) return null;
+    return `${turnSeconds} seconds until your turn.`;
+  }, [isNotYourTurn, isNextDriver, turnSeconds]);
  const entries = roverId
    ? [
        ...(shouldShowVideo ? [{ type: 'rover', id: roverId, key: roverId }] : []),
@@ -177,6 +171,8 @@ export default function DriverVideoPanel({ layoutFormat = 'desktop' }) {
          isActiveDriver={isActiveDriver}
          idleSkipSeconds={idleSkipSeconds}
          showNotTurnNotice={isNotYourTurn}
+          notTurnCountdownText={notTurnCountdownText}
+          showPreviewReason={shouldUsePreview}
          notTurnFlashAt={notTurnFlashAt}
        />
      ) : (
@@ -148,8 +148,10 @@ function HudOverlay({
      </div>
      {turnTimerText ? (
        <div
-          className={`absolute left-1/2 top-0.5 -translate-x-1/2 rounded transition-colors ${
-            turnTimerFlashActive ? 'bg-red-900/80 text-red-100' : 'bg-black/70 text-slate-100'
+          className={`absolute right-1 top-1 rounded border transition-colors ${
+            turnTimerFlashActive
+              ? 'border-red-300/90 bg-red-900/80 text-red-100'
+              : 'border-amber-300/80 bg-black/75 text-amber-200'
          } ${timerPadClass} ${timerTextClass}`}
        >
          {turnTimerText}
@@ -48,6 +48,8 @@ export default function VideoTile({
  isActiveDriver = false,
  idleSkipSeconds = null,
  showNotTurnNotice = false,
+  notTurnCountdownText = null,
+  showPreviewReason = false,
  notTurnFlashAt = 0,
 }) {
  const discordUrl = useSessionSelector((state) => {
@@ -687,6 +689,28 @@ export default function VideoTile({
            </div>
          </div>
        ) : null}
+        {!noHud && showNotTurnNotice ? (
+          <div className="pointer-events-none absolute right-1 top-1 z-40">
+            <div
+              className={`max-w-[18rem] rounded border ${
+                noticeFlashActive
+                  ? 'border-red-300/90 bg-red-900/80 text-red-100'
+                  : 'border-amber-300/80 bg-black/75 text-amber-200'
+              } ${mobileHud ? 'px-2 py-1 text-[0.6rem]' : 'px-2.5 py-1.5 text-[0.72rem]'}`}
+            >
+              <div className="font-semibold">Not your turn to drive!</div>
+              {notTurnCountdownText ? <div>{notTurnCountdownText}</div> : null}
+              {showPreviewReason ? <div>Video switched to preview mode to save bandwidth.</div> : null}
+              <div className="pointer-events-auto mt-0.5">
+                <SocialButton
+                  id="discord"
+                  label="Join our Discord while you wait!"
+                  url={discordUrl}
+                />
+              </div>
+            </div>
+          </div>
+        ) : null}
      </div>
      {!noHud && !showVerticalBattery && (
        <div className="space-y-0.5">