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

scanner page simplifications

Browse Source
This commit is contained in:
legop3
2026-06-09 14:42:54 -04:00
parent 4c9219ddd6
commit 5b6c47b917
5 changed files with 14 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
server/public/assets/index-Djpv3bOo.css
+1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-lG2-eOU9.css
-1
View File
File diff suppressed because one or more lines are too long
server/public/assets/index-DVfLdX5k.js → server/public/assets/index-lHlhzRkR.js
+7 -7
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-DVfLdX5k.js"></script> <script type="module" crossorigin src="/assets/index-lHlhzRkR.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-lG2-eOU9.css"> <link rel="stylesheet" crossorigin href="/assets/index-Djpv3bOo.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
webui/src/scanner/ScannerApp/ScannerContent.jsx
+4 -18
View File
@@ -3,10 +3,10 @@
// Scope: Captures keyboard-style scanner input, emits raw scans, renders server state, and plays local beep/TTS output. // Scope: Captures keyboard-style scanner input, emits raw scans, renders server state, and plays local beep/TTS output.
import { useCallback, useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { useSocket } from '../../context/SocketContext.jsx'; import { useSocket } from '../../context/SocketContext.jsx';
import { useSessionSelector } from '../../context/SessionContext.jsx';
import { useSpectatorMode } from '../../hooks/useSpectatorMode.js'; import { useSpectatorMode } from '../../hooks/useSpectatorMode.js';
import useDefaultNickname from '../../hooks/useDefaultNickname.js'; import useDefaultNickname from '../../hooks/useDefaultNickname.js';
import useUserIdentitySync from '../../hooks/useUserIdentitySync.js'; import useUserIdentitySync from '../../hooks/useUserIdentitySync.js';
import SocketConnectionPill from '../../components/SocketConnectionPill/index.jsx';
import useScannerSpeech from './useScannerSpeech.js'; import useScannerSpeech from './useScannerSpeech.js';
const EMPTY_SCANNER_STATE = { const EMPTY_SCANNER_STATE = {
@@ -43,10 +43,8 @@ function playSubmitBeep() {
export default function ScannerContent() { export default function ScannerContent() {
const socket = useSocket(); const socket = useSocket();
const connected = useSessionSelector((state) => state.connected);
const inputRef = useRef(null); const inputRef = useRef(null);
const [scannerState, setScannerState] = useState(EMPTY_SCANNER_STATE); const [scannerState, setScannerState] = useState(EMPTY_SCANNER_STATE);
const [focused, setFocused] = useState(false);
useDefaultNickname(); useDefaultNickname();
useUserIdentitySync(); useUserIdentitySync();
@@ -96,9 +94,6 @@ export default function ScannerContent() {
const lastScan = scannerState.lastScan; const lastScan = scannerState.lastScan;
const label = lastScan?.label || 'waiting'; const label = lastScan?.label || 'waiting';
const code = lastScan?.code || '';
const statusText = !connected ? 'offline' : focused ? 'scanner ready' : 'click page';
const showCode = Boolean(code && label !== 'waiting');
return ( return (
<main <main
@@ -113,27 +108,18 @@ export default function ScannerContent() {
autoComplete="off" autoComplete="off"
autoCorrect="off" autoCorrect="off"
spellCheck={false} spellCheck={false}
onBlur={() => setFocused(false)}
onFocus={() => setFocused(true)}
onKeyDown={(event) => { onKeyDown={(event) => {
if (event.key !== 'Enter') return; if (event.key !== 'Enter') return;
event.preventDefault(); event.preventDefault();
submitScan(); submitScan();
}} }}
/> />
<section className="flex min-h-0 w-full flex-1 flex-col items-center justify-center"> <section className="flex min-h-screen w-full items-center justify-center">
<h1 className="max-w-full break-words text-[6rem] font-black leading-none tracking-normal text-white md:text-[9rem] lg:text-[11rem]"> <h1 className="max-w-full break-words text-[18vw] font-black leading-none tracking-normal text-white">
{label} {label}
</h1> </h1>
{showCode ? (
<p className="mt-8 text-[3rem] font-bold leading-none tracking-normal text-white md:text-[4rem]">
{code}
</p>
) : null}
</section> </section>
<footer className="flex h-20 w-full items-center justify-center text-[2rem] font-bold leading-none tracking-normal text-white"> <SocketConnectionPill />
{statusText}
</footer>
</main> </main>
); );
} }