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

colorcoding

Browse Source
This commit is contained in:
legop3
2026-03-23 03:39:36 -04:00
parent ad1b6b48f8
commit 20227cd0f8
27 changed files with 291 additions and 143 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/components/ChatMessageRow.jsx
+7 -1
View File
@@ -1,4 +1,5 @@
import { FaDiscord } from 'react-icons/fa';
import { roverBadgeStyle } from '../lib/roverColor.js';
function roleColors(role) {
switch (role) {
@@ -88,7 +89,12 @@ export function ChatIdentity({ message }) {
</span>
) : null}
{message.roverId && (
<span className="rounded bg-slate-800 px-1 text-[0.7rem]">{message.roverId}</span>
<span
className="rounded bg-slate-800 px-1 text-[0.7rem]"
style={roverBadgeStyle(message.roverColor, 0.14)}
>
{message.roverId}
</span>
)}
</>
);
webui/src/components/DriverVideoPanel.jsx
+1
View File
@@ -120,6 +120,7 @@ export default function DriverVideoPanel({layoutFormat = 'desktop'}) {
snapshotFeed={snapshotFeed}
audioSessionInfo={audioInfo}
label={roverLabel}
roverColor={batteryRecord?.color || null}
telemetryFrame={frame}
batteryConfig={batteryConfig}
layoutFormat={layoutFormat}
webui/src/components/ReplaySourcesPanel.jsx
+9
View File
@@ -1,6 +1,7 @@
import { useEffect, useMemo, useState } from 'react';
import { useSession } from '../context/SessionContext.jsx';
import { useSettingsNamespace } from '../settings/index.js';
import { roverSwatchStyle } from '../lib/roverColor.js';
function normalizeSources(list = []) {
return list
@@ -10,6 +11,7 @@ function normalizeSources(list = []) {
type: entry.type,
id: String(entry.id),
label: entry.label || String(entry.id),
color: entry.color || null,
key: `${entry.type}:${entry.id}`,
};
})
@@ -143,6 +145,13 @@ function GroupList({ title, items, selected, onToggle }) {
onChange={() => onToggle(item.key)}
className="accent-emerald-400"
/>
{item.type === 'rover' && item.color ? (
<span
className="inline-block h-2 w-2 rounded-full border border-white/30"
style={roverSwatchStyle(item.color)}
aria-hidden="true"
/>
) : null}
<span className="truncate">{item.label}</span>
</label>
))}
webui/src/components/RoverQueuesPanel.jsx
+4 -1
View File
@@ -1,5 +1,6 @@
import { useEffect, useMemo, useState } from 'react';
import { useSession } from '../context/SessionContext.jsx';
import { roverNameStyle } from '../lib/roverColor.js';
function classNames(...values) {
return values.filter(Boolean).join(' ');
@@ -131,7 +132,9 @@ 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">{rover.name}</p>
<p className="text-slate-200" style={roverNameStyle(rover.color)}>
{rover.name}
</p>
{showTimer ? (
<span className="rounded bg-slate-800 px-1 text-[0.7rem] text-slate-200">
{isSelfCurrent ? `${remainingSeconds}s left` : `Your turn in ${remainingSeconds}s`}
webui/src/components/RoverRoster.jsx
+5 -1
View File
@@ -1,3 +1,5 @@
import { roverNameStyle } from '../lib/roverColor.js';
function classNames(...values) {
return values.filter(Boolean).join(' ');
}
@@ -37,7 +39,9 @@ export default function RoverRoster({
)}
>
<div>
<p className="text-slate-200">{rover.name}</p>
<p className="text-slate-200" style={roverNameStyle(rover.color)}>
{rover.name}
</p>
<p className="text-xs text-slate-500 flex flex-wrap items-center gap-0.5">
<span>{rover.locked ? 'locked' : 'free'}</span>
{rover.lockReason && <span className="rounded bg-black/30 px-1">{rover.lockReason}</span>}
webui/src/components/UserListPanel.jsx
+12 -4
View File
@@ -2,6 +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';
export function NicknameEntryPanel({ compact = false }) {
return (
@@ -75,8 +76,8 @@ export default function UserListPanel({
[selfId, users],
);
const rosterName = useCallback(
(roverId) => roster.find((r) => String(r.id) === String(roverId))?.name || roverId,
const rosterEntry = useCallback(
(roverId) => roster.find((r) => String(r.id) === String(roverId)) || null,
[roster],
);
@@ -124,7 +125,12 @@ export default function UserListPanel({
>
<p className={`font-semibold ${roleColors(user.role)}`}>{formatLabel(user, selfId)}</p>
{user.roverId ? (
<span className="rounded bg-slate-800 px-1 text-[0.7rem]">rover {user.roverId}</span>
<span
className="rounded bg-slate-800 px-1 text-[0.7rem]"
style={roverBadgeStyle(rosterEntry(user.roverId)?.color, 0.12)}
>
rover {rosterEntry(user.roverId)?.name || user.roverId}
</span>
) : (
<span className="text-[0.7rem] text-slate-500">no rover</span>
)}
@@ -211,7 +217,9 @@ 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">{rosterName(roverId)}</p>
<p className="font-semibold text-slate-200" style={roverNameStyle(rosterEntry(roverId)?.color)}>
{rosterEntry(roverId)?.name || roverId}
</p>
{remaining != null && (
<span className="rounded bg-slate-800 px-1 text-[0.7rem]">
{remaining}s left
webui/src/components/VideoTile.jsx
+10 -2
View File
@@ -9,6 +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';
const RESTART_DELAY_MS = 2000;
const UNMUTE_RETRY_MS = 3000;
@@ -23,6 +24,7 @@ export default function VideoTile({
snapshotFeed = null,
qualityNotice = null,
label,
roverColor = null,
forceMute = false,
telemetryFrame,
batteryConfig,
@@ -606,6 +608,7 @@ export default function VideoTile({
frame={telemetryFrame}
sensors={sensors}
label={label}
roverColor={roverColor}
status={renderedStatus}
audioStatus={renderedAudioStatus}
levelStatus={levelIndicator}
@@ -721,6 +724,7 @@ function HudOverlay({
frame,
sensors,
label,
roverColor = null,
status,
audioStatus,
levelStatus,
@@ -845,7 +849,9 @@ function HudOverlay({
<div
className={`flex items-center gap-0.5 bg-black/80 text-slate-100 ${labelPadClass} ${labelTextClass}`}
>
<span className="font-semibold text-white">{label || 'Unnamed Rover'}</span>
<span className="font-semibold text-white" style={roverNameStyle(roverColor)}>
{label || 'Unnamed Rover'}
</span>
{driverLabel ? <span className="text-slate-300">• {driverLabel}</span> : null}
</div>
</div>
@@ -882,7 +888,9 @@ function HudOverlay({
) : null}
<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: "{label || 'Unnamed Rover'}"</span>
<span>
Rover: "<span style={roverNameStyle(roverColor)}>{label || 'Unnamed Rover'}</span>"
</span>
{/* <span>{pulse ? 'Sensors active' : 'No recent sensors'}</span> */}
</div>
</div>