legop3/MultiRoombaRover
1
0
Fork 0
mirror of https://github.com/legop3/MultiRoombaRover.git synced 2026-09-17 01:50:47 -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-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Roomba Rover" /> <meta name="apple-mobile-web-app-title" content="Roomba Rover" />
<title>Roomba Rover</title> <title>Roomba Rover</title>
<script type="module" crossorigin src="/assets/index-CYSD7A1h.js"></script> <script type="module" crossorigin src="/assets/index-CeIZBaVQ.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-D-TUqmtz.css"> <link rel="stylesheet" crossorigin href="/assets/index-BzPO2VIl.css">
</head> </head>
<body> <body>
<div id="root"></div> <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} notTurnCountdownText={notTurnCountdownText}
showPreviewReason={shouldUsePreview} showPreviewReason={shouldUsePreview}
notTurnFlashAt={notTurnFlashAt} notTurnFlashAt={notTurnFlashAt}
controlIntentAt={lastControlIntentAt}
/> />
) : ( ) : (
<div className="panel-muted content-center text-center text-sm text-slate-400 aspect-[4/3]"> <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; const LARGE_FADE_MS = 700;
export default function RoverDescriptionOverlay({ export default function RoverDescriptionOverlay({
@@ -8,25 +8,52 @@ export default function RoverDescriptionOverlay({
variant = 'default', variant = 'default',
mobileHud = false, mobileHud = false,
displayKey = '', displayKey = '',
controlIntentAt = 0,
}) { }) {
const [largeVisible, setLargeVisible] = useState(false); const [largeVisible, setLargeVisible] = useState(false);
const [largeFading, setLargeFading] = 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(() => { useEffect(() => {
if (variant !== 'default' || !description) { if (variant !== 'default' || !description) {
setLargeVisible(false); setLargeVisible(false);
setLargeFading(false); setLargeFading(false);
clearTimeout(fadeTimerRef.current);
clearTimeout(hideTimerRef.current);
return undefined; return undefined;
} }
clearTimeout(fadeTimerRef.current);
clearTimeout(hideTimerRef.current);
setLargeVisible(true); setLargeVisible(true);
setLargeFading(false); setLargeFading(false);
const fadeTimer = setTimeout(() => setLargeFading(true), LARGE_VISIBLE_MS); baselineIntentRef.current = Number(controlIntentAt) || 0;
const hideTimer = setTimeout(() => setLargeVisible(false), LARGE_VISIBLE_MS + LARGE_FADE_MS); return undefined;
return () => { }, [controlIntentAt, description, displayKey, variant]);
clearTimeout(fadeTimer);
clearTimeout(hideTimer); useEffect(() => {
}; if (variant !== 'default' || !description || !largeVisible || largeFading) return;
}, [description, displayKey, variant]); 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; if (!description) return null;
@@ -43,14 +70,16 @@ export default function RoverDescriptionOverlay({
if (variant !== 'default' || !largeVisible) return null; if (variant !== 'default' || !largeVisible) return null;
return ( 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 <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' largeFading ? 'opacity-0' : 'opacity-100'
} ${mobileHud ? 'text-[1rem] leading-tight' : 'text-[1.5rem] leading-tight'}`} } ${mobileHud ? 'text-[1rem] leading-tight' : 'text-[1.5rem] leading-tight'}`}
> >
<p>Just so you know, this rover</p> <p>{description}</p>
{description} <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>
</div> </div>
); );
webui/src/components/VideoTile/index.jsx
+2
View File
@@ -53,6 +53,7 @@ export default function VideoTile({
notTurnCountdownText = null, notTurnCountdownText = null,
showPreviewReason = false, showPreviewReason = false,
notTurnFlashAt = 0, notTurnFlashAt = 0,
controlIntentAt = 0,
}) { }) {
const discordUrl = useSessionSelector((state) => { const discordUrl = useSessionSelector((state) => {
const socials = state.session?.socials || []; const socials = state.session?.socials || [];
@@ -640,6 +641,7 @@ export default function VideoTile({
variant={hudVariant} variant={hudVariant}
mobileHud={mobileHud} mobileHud={mobileHud}
displayKey={descriptionDisplayKey} displayKey={descriptionDisplayKey}
controlIntentAt={controlIntentAt}
/> />
) : null} ) : null}
{!noHud ? ( {!noHud ? (