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

rewreaer

Browse Source
This commit is contained in:
legop3
2026-03-23 03:50:23 -04:00
parent 20227cd0f8
commit e311e67fc9
10 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/RoverQueuesPanel.jsx
+5 -3
View File
@@ -1,6 +1,6 @@
import { useEffect, useMemo, useState } from 'react';
import { useSession } from '../context/SessionContext.jsx';
import { roverNameStyle } from '../lib/roverColor.js';
import { roverNameChromeStyle } from '../lib/roverColor.js';
function classNames(...values) {
return values.filter(Boolean).join(' ');
@@ -132,8 +132,10 @@ export default function RoverQueuesPanel({ title = 'Rovers' }) {
<div className="flex min-w-0 flex-1 flex-col gap-0.5">
<div className="flex items-center justify-between gap-0.5">
<div className="flex items-center gap-0.5">
<p className="text-slate-200" style={roverNameStyle(rover.color)}>
{rover.name}
<p className="text-slate-200">
<span className="rounded px-1 py-[1px] border border-transparent" style={roverNameChromeStyle(rover.color, 0.16)}>
{rover.name}
</span>
</p>
{showTimer ? (
<span className="rounded bg-slate-800 px-1 text-[0.7rem] text-slate-200">
webui/src/components/RoverRoster.jsx
+5 -3
View File
@@ -1,4 +1,4 @@
import { roverNameStyle } from '../lib/roverColor.js';
import { roverNameChromeStyle } from '../lib/roverColor.js';
function classNames(...values) {
return values.filter(Boolean).join(' ');
@@ -39,8 +39,10 @@ export default function RoverRoster({
)}
>
<div>
<p className="text-slate-200" style={roverNameStyle(rover.color)}>
{rover.name}
<p className="text-slate-200">
<span className="rounded px-1 py-[1px] border border-transparent" style={roverNameChromeStyle(rover.color, 0.16)}>
{rover.name}
</span>
</p>
<p className="text-xs text-slate-500 flex flex-wrap items-center gap-0.5">
<span>{rover.locked ? 'locked' : 'free'}</span>
webui/src/components/UserListPanel.jsx
+8 -3
View File
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState, useCallback } from 'react';
import { useSession } from '../context/SessionContext.jsx';
import NicknameForm from './NicknameForm.jsx';
import SocialButtonsGrid from './SocialButtonsGrid.jsx';
import { roverBadgeStyle, roverNameStyle } from '../lib/roverColor.js';
import { roverBadgeStyle, roverNameChromeStyle } from '../lib/roverColor.js';
export function NicknameEntryPanel({ compact = false }) {
return (
@@ -217,8 +217,13 @@ export default function UserListPanel({
return (
<div key={roverId} className={`surface-muted flex flex-col gap-0.5 ${compact ? 'text-[0.8rem] py-0.25' : 'text-sm'}`}>
<div className="flex items-center gap-0.5">
<p className="font-semibold text-slate-200" style={roverNameStyle(rosterEntry(roverId)?.color)}>
{rosterEntry(roverId)?.name || roverId}
<p className="font-semibold text-slate-200">
<span
className="rounded px-1 py-[1px] border border-transparent"
style={roverNameChromeStyle(rosterEntry(roverId)?.color, 0.16)}
>
{rosterEntry(roverId)?.name || roverId}
</span>
</p>
{remaining != null && (
<span className="rounded bg-slate-800 px-1 text-[0.7rem]">
webui/src/components/VideoTile.jsx
+12 -3
View File
@@ -9,7 +9,7 @@ import { AUDIO_SETTINGS_DEFAULTS } from '../settings/namespaces.js';
import SocialButton from './SocialButton.jsx';
import BatteryBar from './BatteryBar.jsx';
import { buildBatteryVisual } from '../lib/battery.js';
import { roverNameStyle } from '../lib/roverColor.js';
import { roverNameChromeStyle } from '../lib/roverColor.js';
const RESTART_DELAY_MS = 2000;
const UNMUTE_RETRY_MS = 3000;
@@ -849,7 +849,10 @@ function HudOverlay({
<div
className={`flex items-center gap-0.5 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}
>
<span className="font-semibold text-white" style={roverNameStyle(roverColor)}>
<span
className="font-semibold text-white rounded px-1 py-[1px] border border-transparent"
style={roverNameChromeStyle(roverColor, 0.18)}
>
{label || 'Unnamed Rover'}
</span>
{driverLabel ? <span className="text-slate-300">• {driverLabel}</span> : null}
@@ -889,7 +892,13 @@ function HudOverlay({
<div className={`absolute ${labelPosClass} left-1/2`} style={labelWrapperStyle}>
<div className={`flex gap-0.5 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}>
<span>
Rover: "<span style={roverNameStyle(roverColor)}>{label || 'Unnamed Rover'}</span>"
Rover:{' '}
<span
className="rounded px-1 py-[1px] border border-transparent"
style={roverNameChromeStyle(roverColor, 0.18)}
>
"{label || 'Unnamed Rover'}"
</span>
</span>
{/* <span>{pulse ? 'Sensors active' : 'No recent sensors'}</span> */}
</div>
webui/src/lib/roverColor.js
+8 -3
View File
@@ -6,10 +6,16 @@ export function normalizeRoverColor(value) {
return raw.toUpperCase();
}
export function roverNameStyle(color) {
export function roverNameChromeStyle(color, alpha = 0.2) {
const normalized = normalizeRoverColor(color);
if (!normalized) return undefined;
return { color: normalized };
const safeAlpha = Number.isFinite(alpha) ? Math.max(0, Math.min(1, alpha)) : 0.2;
const rgb = hexToRgb(normalized);
if (!rgb) return undefined;
return {
borderColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.65)`,
backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${safeAlpha})`,
};
}
export function roverBadgeStyle(color, alpha = 0.2) {
@@ -21,7 +27,6 @@ export function roverBadgeStyle(color, alpha = 0.2) {
return {
borderColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.55)`,
backgroundColor: `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${safeAlpha})`,
color: normalized,
};
}
webui/src/mini/MiniSummaryApp.jsx
+5 -5
View File
@@ -10,7 +10,7 @@ import AlertFeed from '../components/AlertFeed.jsx';
import useDefaultNickname from '../hooks/useDefaultNickname.js';
import BatteryBar from '../components/BatteryBar.jsx';
import { buildBatteryVisual } from '../lib/battery.js';
import { roverNameStyle } from '../lib/roverColor.js';
import { roverNameChromeStyle } from '../lib/roverColor.js';
const ROTATE_MS = 20000;
const HARD_REFRESH_MS = 1 * 60 * 60 * 1000;
@@ -59,10 +59,10 @@ function InfoColumn({
<div className="relative z-10 flex min-w-0 flex-1 flex-col justify-between text-center">
<div className="min-w-0 bg-transparent px-0 py-0 leading-none">
<AutoFitText
className="font-semibold leading-none text-white"
className="font-semibold leading-none text-white rounded border border-transparent px-1 py-[1px]"
maxSize={1000}
minSize={18}
style={roverNameStyle(rover.color)}
style={roverNameChromeStyle(rover.color, 0.18)}
>
{rover.name || rover.id}
</AutoFitText>
@@ -89,10 +89,10 @@ function InfoColumn({
<div className="relative z-10 flex min-w-0 flex-col gap-1 text-center">
<div className="min-w-0 bg-transparent px-0 py-0 leading-none">
<AutoFitText
className="font-semibold leading-none text-white"
className="font-semibold leading-none text-white rounded border border-transparent px-1 py-[1px]"
maxSize={1000}
minSize={18}
style={roverNameStyle(rover.color)}
style={roverNameChromeStyle(rover.color, 0.18)}
>
{rover.name || rover.id}
</AutoFitText>