legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-16 01:21:20 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

description popup goes away when you move now

Browse Source
This commit is contained in:
legop3
2026-05-13 12:30:29 -04:00
parent 794dbc9a96
commit e3aa907486
7 changed files with 58 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-BzPO2VIl.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-CYSD7A1h.js → server/public/assets/index-CeIZBaVQ.js
+10 -10
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-D-TUqmtz.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/index.html
+2 -2
View File
@@ -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-CYSD7A1h.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D-TUqmtz.css">
<script type="module" crossorigin src="/assets/index-CeIZBaVQ.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-BzPO2VIl.css">
</head>
<body>
<div id="root"></div>
webui/src/components/DriverVideoPanel/index.jsx
+1
View File
@@ -200,6 +200,7 @@ export default function DriverVideoPanel({ layoutFormat = 'desktop' }) {
notTurnCountdownText={notTurnCountdownText}
showPreviewReason={shouldUsePreview}
notTurnFlashAt={notTurnFlashAt}
controlIntentAt={lastControlIntentAt}
/>
) : (
<div className="panel-muted content-center text-center text-sm text-slate-400 aspect-[4/3]">
webui/src/components/VideoTile/RoverDescriptionOverlay.jsx
+42 -13
View File
@@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { useEffect, useRef, useState } from 'react';
const LARGE_VISIBLE_MS = 6000;
const DISMISS_AFTER_INPUT_MS = 5000;
const LARGE_FADE_MS = 700;
export default function RoverDescriptionOverlay({
@@ -8,25 +8,52 @@ export default function RoverDescriptionOverlay({
variant = 'default',
mobileHud = false,
displayKey = '',
controlIntentAt = 0,
}) {
const [largeVisible, setLargeVisible] = useState(false);
const [largeFading, setLargeFading] = useState(false);
const baselineIntentRef = useRef(0);
const fadeTimerRef = useRef(null);
const hideTimerRef = useRef(null);
useEffect(
() => () => {
clearTimeout(fadeTimerRef.current);
clearTimeout(hideTimerRef.current);
},
[],
);
useEffect(() => {
if (variant !== 'default' || !description) {
setLargeVisible(false);
setLargeFading(false);
clearTimeout(fadeTimerRef.current);
clearTimeout(hideTimerRef.current);
return undefined;
}
clearTimeout(fadeTimerRef.current);
clearTimeout(hideTimerRef.current);
setLargeVisible(true);
setLargeFading(false);
const fadeTimer = setTimeout(() => setLargeFading(true), LARGE_VISIBLE_MS);
const hideTimer = setTimeout(() => setLargeVisible(false), LARGE_VISIBLE_MS + LARGE_FADE_MS);
return () => {
clearTimeout(fadeTimer);
clearTimeout(hideTimer);
};
}, [description, displayKey, variant]);
baselineIntentRef.current = Number(controlIntentAt) || 0;
return undefined;
}, [controlIntentAt, description, displayKey, variant]);
useEffect(() => {
if (variant !== 'default' || !description || !largeVisible || largeFading) return;
const nextIntent = Number(controlIntentAt) || 0;
if (nextIntent <= baselineIntentRef.current) return;
if (fadeTimerRef.current || hideTimerRef.current) return;
fadeTimerRef.current = setTimeout(() => {
setLargeFading(true);
fadeTimerRef.current = null;
}, DISMISS_AFTER_INPUT_MS);
hideTimerRef.current = setTimeout(() => {
setLargeVisible(false);
hideTimerRef.current = null;
}, DISMISS_AFTER_INPUT_MS + LARGE_FADE_MS);
}, [controlIntentAt, description, largeFading, largeVisible, variant]);
if (!description) return null;
@@ -43,14 +70,16 @@ export default function RoverDescriptionOverlay({
if (variant !== 'default' || !largeVisible) return null;
return (
<div className="pointer-events-none absolute inset-x-0 top-2 z-50 flex justify-center">
<div className="pointer-events-none absolute inset-0 z-50 flex items-center justify-center">
<div
className={`surface max-w-[94%] border border-slate-500/85 px-2 py-1 text-center font-semibold text-slate-100 shadow-2xl transition-opacity duration-700 ${
className={`surface max-w-[94%] border border-slate-400/70 bg-neutral-900/45 px-2 py-1 text-center font-semibold text-slate-100 shadow-xl transition-opacity duration-700 ${
largeFading ? 'opacity-0' : 'opacity-100'
} ${mobileHud ? 'text-[1rem] leading-tight' : 'text-[1.5rem] leading-tight'}`}
>
<p>Just so you know, this rover</p>
{description}
<p>{description}</p>
<p className={`${mobileHud ? 'text-[0.58rem]' : 'text-[0.72rem]'} mt-0.5 font-normal text-slate-300`}>
This fades 5 seconds after your first control input.
</p>
</div>
</div>
);
webui/src/components/VideoTile/index.jsx
+2
View File
@@ -53,6 +53,7 @@ export default function VideoTile({
notTurnCountdownText = null,
showPreviewReason = false,
notTurnFlashAt = 0,
controlIntentAt = 0,
}) {
const discordUrl = useSessionSelector((state) => {
const socials = state.session?.socials || [];
@@ -640,6 +641,7 @@ export default function VideoTile({
variant={hudVariant}
mobileHud={mobileHud}
displayKey={descriptionDisplayKey}
controlIntentAt={controlIntentAt}
/>
) : null}
{!noHud ? (