feat(editor): F4.6b the command line on a computer's desktop
A new oracle, TerminalWindowRun, types into Java's own command line window: the window writes each line after its prompt, takes a blank line, cls, reset and exit itself, keeps the lines for the arrow keys, and keeps its text, history and working directory over a stop and a start. The room now holds a command line window per computer for everyone (TerminalWindow), kept over stops; the protocol carries its lines and the one way to read them (terminalScreen); the core goes on in the working directory of the run before (continueIn). The desktop opens programs in Java's frame, and the command line works with keyboard and finger: grey on black, the prompt hidden while a command runs, history, chips for the commands, Ctrl+C. The room's failure is now tested in the browser. Fixed: the room handed the engine the wall clock with fractions of a millisecond, and a ping hung after its first timeout. The engine and the room count whole milliseconds, as Java's clock does. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5.5
@@ -237,6 +237,121 @@ test.describe('on a phone', () => {
|
||||
const home = (await window.getByRole('button', { name: 'Startbildschirm' }).boundingBox())!;
|
||||
expect(home.height).toBeGreaterThanOrEqual(44);
|
||||
});
|
||||
|
||||
test("offers the command line's keys as buttons for a finger, and types without zooming", async ({ page }) => {
|
||||
await openEditor(page, server.base, 'internetwork_komplett.fls');
|
||||
await simulationButton(page).tap();
|
||||
await expect(page.locator('svg.filius-canvas')).toHaveAttribute('data-mode', 'simulation');
|
||||
await page.getByRole('button', { name: 'Alles zeigen' }).tap();
|
||||
const id = await deviceNamed(page, 'Notebook 1.10');
|
||||
const at = await onDevice(page, id);
|
||||
await page.touchscreen.tap(at.x, at.y);
|
||||
await desktop(page, id).locator('[data-program="commandPrompt"]').tap();
|
||||
const window = desktop(page, id).locator('[data-program-window="commandPrompt"]');
|
||||
for (const name of ['ipconfig', 'Vorheriger Befehl', 'Befehl abbrechen (Strg+C)']) {
|
||||
const box = (await window.getByRole('button', { name, exact: true }).boundingBox())!;
|
||||
expect(box.height, name).toBeGreaterThanOrEqual(44);
|
||||
}
|
||||
await expect(window.locator('input[name="terminalInput"]')).toHaveCSS('font-size', '16px');
|
||||
await window.getByRole('button', { name: 'ipconfig', exact: true }).tap();
|
||||
await window.locator('input[name="terminalInput"]').press('Enter');
|
||||
await expect(window.locator('.terminal-text')).toContainText('IP Adresse . . . : 141.99.1.10');
|
||||
});
|
||||
});
|
||||
|
||||
/** Opens a computer's command line on its desktop. */
|
||||
async function commandLine(page: Page, name: string) {
|
||||
const id = await deviceNamed(page, name);
|
||||
await tap(page, id);
|
||||
await desktop(page, id).locator('[data-program="commandPrompt"]').click();
|
||||
const window = desktop(page, id).locator('[data-program-window="commandPrompt"]');
|
||||
await expect(window.getByRole('heading')).toHaveText('Befehlszeile');
|
||||
return { id, window, input: window.locator('input[name="terminalInput"]'), text: window.locator('.terminal-text'), prompt: window.locator('.terminal-prompt') };
|
||||
}
|
||||
|
||||
test("types into a computer's command line as into Java's: the start screen, a line after its prompt, the history, a ping across the routers", async ({ page }) => {
|
||||
test.setTimeout(60_000);
|
||||
await openEditor(page, server.base, 'internetwork_komplett.fls');
|
||||
await start(page);
|
||||
const { window, input, text, prompt } = await commandLine(page, 'Notebook 1.10');
|
||||
await expect(text).toContainText("Verwende den Befehl 'help'");
|
||||
await expect(prompt).toHaveText('/>');
|
||||
await expect(input).toBeFocused();
|
||||
await input.fill('ipconfig');
|
||||
await input.press('Enter');
|
||||
await expect(text).toContainText('\n/> ipconfig\nIP Adresse . . . : 141.99.1.10');
|
||||
await expect(input).toHaveValue('');
|
||||
await input.press('ArrowUp');
|
||||
await expect(input).toHaveValue('ipconfig');
|
||||
await input.press('ArrowDown');
|
||||
await expect(input).toHaveValue('');
|
||||
// A chip puts its command into the line.
|
||||
await window.getByRole('button', { name: 'ping', exact: true }).click();
|
||||
await expect(input).toHaveValue('ping ');
|
||||
await input.pressSequentially('141.99.5.10');
|
||||
await input.press('Enter');
|
||||
// While the ping runs, Java hides the prompt.
|
||||
await expect(prompt).toHaveCSS('visibility', 'hidden');
|
||||
await expect(text).toContainText('4 Paket(e) gesendet, 4 Paket(e) empfangen', { timeout: 20_000 });
|
||||
await expect(prompt).toHaveCSS('visibility', 'visible');
|
||||
await window.getByRole('button', { name: 'Vorheriger Befehl' }).click();
|
||||
await expect(input).toHaveValue('ping 141.99.5.10');
|
||||
});
|
||||
|
||||
test('ends a command with Ctrl+C, from the keyboard and from its button', async ({ page }) => {
|
||||
test.setTimeout(60_000);
|
||||
await openEditor(page, server.base, 'internetwork_komplett.fls');
|
||||
await start(page);
|
||||
const { window, input, text, prompt } = await commandLine(page, 'Notebook 1.10');
|
||||
await input.fill('ping 141.99.9.9');
|
||||
await input.press('Enter');
|
||||
await expect(prompt).toHaveCSS('visibility', 'hidden');
|
||||
await input.press('Control+c');
|
||||
await expect(prompt).toHaveCSS('visibility', 'visible', { timeout: 20_000 });
|
||||
await expect(text).toContainText('Paketstatistik');
|
||||
await input.fill('ping 141.99.9.9');
|
||||
await input.press('Enter');
|
||||
await expect(prompt).toHaveCSS('visibility', 'hidden');
|
||||
await window.getByRole('button', { name: 'Befehl abbrechen (Strg+C)' }).click();
|
||||
await expect(prompt).toHaveCSS('visibility', 'visible', { timeout: 20_000 });
|
||||
});
|
||||
|
||||
test('keeps the command line over leaving it, over a return to the design, and exit closes it', async ({ page }) => {
|
||||
await openEditor(page, server.base, 'internetwork_komplett.fls');
|
||||
await start(page);
|
||||
const { id, window, input, text } = await commandLine(page, 'Notebook 1.10');
|
||||
await input.fill('pwd');
|
||||
await input.press('Enter');
|
||||
await expect(text).toContainText('\n/> pwd\n/');
|
||||
await desktop(page, id).getByRole('button', { name: 'Startbildschirm' }).click();
|
||||
await expect(window).toHaveCount(0);
|
||||
await desktop(page, id).locator('[data-program="commandPrompt"]').click();
|
||||
await expect(text).toContainText('\n/> pwd\n/');
|
||||
await designButton(page).click();
|
||||
await start(page);
|
||||
await expect(text).toContainText('\n/> pwd\n/');
|
||||
await input.fill('exit');
|
||||
await input.press('Enter');
|
||||
await expect(window).toHaveCount(0);
|
||||
await expect(desktop(page, id).locator('.desktop-icon').first()).toBeVisible();
|
||||
await desktop(page, id).locator('[data-program="commandPrompt"]').click();
|
||||
await expect(text).toContainText('\n/> exit\n');
|
||||
// An exit that was there when the window opened does not close it again: it takes the next line.
|
||||
await input.fill('ls');
|
||||
await input.press('Enter');
|
||||
await expect(text).toContainText('\n/> exit\n\n/> ls\n');
|
||||
await expect(window).toBeVisible();
|
||||
});
|
||||
|
||||
test('says so when the simulation fails, and goes back to the design', async ({ page }) => {
|
||||
// FILIUS' modem example: the core has no modems yet (remote links); a ping to the other side fails it.
|
||||
await openEditor(page, server.base, 'modem_beispiel.fls');
|
||||
await start(page);
|
||||
const { input } = await commandLine(page, 'Notebook 0.10');
|
||||
await input.fill('ping 192.168.0.11');
|
||||
await input.press('Enter');
|
||||
await expect(page.getByRole('alert')).toHaveText('Die Simulation ist auf einen Fehler gestoßen und wurde beendet.', { timeout: 20_000 });
|
||||
await expect(page.locator('svg.filius-canvas')).toHaveAttribute('data-mode', 'design');
|
||||
});
|
||||
|
||||
test('speaks English when asked', async ({ page }) => {
|
||||
|
||||
@@ -20,9 +20,10 @@ import { Palette, type PaletteKind } from './design/Palette.js';
|
||||
import { RouterDialog } from './design/RouterDialog.js';
|
||||
import { DeviceSheet } from './sheet/DeviceSheet.js';
|
||||
import { DesktopWindow } from './desktop/DesktopWindow.js';
|
||||
import type { DesktopProgram } from './desktop/programs.js';
|
||||
import { useTranslate } from './i18n/i18n.js';
|
||||
import { ModeBar } from './simulation/ModeBar.js';
|
||||
import { useSimulation, type Simulation, type SimHostFactory } from './simulation/useSimulation.js';
|
||||
import { useSimulation, type SimHostFactory } from './simulation/useSimulation.js';
|
||||
|
||||
/** The document's drawing, read anew after every change. */
|
||||
export function useTopologyView(doc: Y.Doc): TopologyView {
|
||||
@@ -79,6 +80,7 @@ interface OpenDesktop {
|
||||
readonly x: number;
|
||||
readonly y: number;
|
||||
readonly z: number;
|
||||
readonly program: DesktopProgram | null;
|
||||
}
|
||||
|
||||
/** Brings a desktop to the top by its stacking, not its place in the page: moved in the page, it would lose the press on it. */
|
||||
@@ -87,13 +89,6 @@ const toFront = (open: readonly OpenDesktop[], id: string): readonly OpenDesktop
|
||||
return open.some((each) => each.id === id && each.z === top) ? open : open.map((each) => (each.id === id ? { ...each, z: top + 1 } : each));
|
||||
};
|
||||
|
||||
/** A desktop that watches its computer's network while it is shown. */
|
||||
function WatchedDesktop({ simulation, ...props }: Omit<Parameters<typeof DesktopWindow>[0], 'settings'> & { readonly simulation: Simulation }) {
|
||||
const { watch } = simulation;
|
||||
useEffect(() => watch([`node:${props.id}`]), [watch, props.id]);
|
||||
return <DesktopWindow {...props} settings={simulation.nodes.get(props.id)} />;
|
||||
}
|
||||
|
||||
export function Editor({ doc, createSimHost }: { readonly doc: Y.Doc; readonly createSimHost?: SimHostFactory }) {
|
||||
const t = useTranslate();
|
||||
const view = useTopologyView(doc);
|
||||
@@ -146,7 +141,7 @@ export function Editor({ doc, createSimHost }: { readonly doc: Y.Doc; readonly c
|
||||
setDesktops((open) => {
|
||||
if (open.some((each) => each.id === id)) return toFront(open, id);
|
||||
// Java stacks a desktop that does not fit beside the others a little further on.
|
||||
return [...open, { id, x: 24 + 24 * open.length, y: 76 + 24 * open.length, z: Math.max(0, ...open.map((each) => each.z)) + 1 }];
|
||||
return [...open, { id, x: 24 + 24 * open.length, y: 76 + 24 * open.length, z: Math.max(0, ...open.map((each) => each.z)) + 1, program: null }];
|
||||
});
|
||||
}, []);
|
||||
|
||||
@@ -305,7 +300,7 @@ export function Editor({ doc, createSimHost }: { readonly doc: Y.Doc; readonly c
|
||||
</div>
|
||||
{simulating
|
||||
? desktops.map((desktop) => (
|
||||
<WatchedDesktop
|
||||
<DesktopWindow
|
||||
key={desktop.id}
|
||||
simulation={simulation}
|
||||
doc={doc}
|
||||
@@ -314,6 +309,8 @@ export function Editor({ doc, createSimHost }: { readonly doc: Y.Doc; readonly c
|
||||
x={desktop.x}
|
||||
y={desktop.y}
|
||||
z={desktop.z}
|
||||
program={desktop.program}
|
||||
onProgram={(program) => setDesktops((open) => open.map((each) => (each.id === desktop.id ? { ...each, program } : each)))}
|
||||
onMove={(x, y) => setDesktops((open) => open.map((each) => (each.id === desktop.id ? { ...each, x, y } : each)))}
|
||||
onFront={() => setDesktops((open) => toFront(open, desktop.id))}
|
||||
onClose={() => setDesktops((open) => open.filter((each) => each.id !== desktop.id))}
|
||||
|
||||
@@ -9,26 +9,29 @@
|
||||
// show; it is left out.
|
||||
//
|
||||
// On a wide screen the window lies over the surface and moves by its title
|
||||
// bar, as Java's windows do; on a phone it fills the surface. The programs'
|
||||
// windows follow (F4.6b on).
|
||||
// bar, as Java's windows do; on a phone it fills the surface. A program's
|
||||
// icon opens its window over the desktop (ProgramFrame), the home button
|
||||
// leaves it; so far the command line has one (F4.6b), the others follow.
|
||||
|
||||
import { useEffect, useState, type PointerEvent as ReactPointerEvent } from 'react';
|
||||
import { useCallback, useEffect, useState, type PointerEvent as ReactPointerEvent } from 'react';
|
||||
import type * as Y from 'yjs';
|
||||
import { desktopView } from '@mdg-filius/doc';
|
||||
import type { NodeSettings } from '@mdg-filius/protocol';
|
||||
import background from '../assets/desktop/hintergrundbild.png';
|
||||
import networkOff from '../assets/desktop/netzwek_aus.png';
|
||||
import networkOn from '../assets/desktop/netzwek_c.png';
|
||||
import { ICON_URLS } from '../canvas/icons.js';
|
||||
import { useLanguage, useTranslate } from '../i18n/i18n.js';
|
||||
import { desktopPrograms, INSTALLATION_ICON, JAVA_PROGRAMS } from './programs.js';
|
||||
import type { Simulation } from '../simulation/useSimulation.js';
|
||||
import { ProgramFrame } from './ProgramFrame.js';
|
||||
import { desktopPrograms, INSTALLATION_ICON, JAVA_PROGRAMS, type DesktopProgram } from './programs.js';
|
||||
import { TerminalPanel } from './TerminalPanel.js';
|
||||
import './desktop.css';
|
||||
|
||||
export interface DesktopWindowProps {
|
||||
readonly doc: Y.Doc;
|
||||
readonly id: string;
|
||||
/** The computer's network as the simulation runs it; undefined until the room has sent it. */
|
||||
readonly settings: NodeSettings | undefined;
|
||||
/** The room: the computer's network as it runs, its programs' windows. */
|
||||
readonly simulation: Simulation;
|
||||
/** Whether its cable carried a frame at the last tick. */
|
||||
readonly active: boolean;
|
||||
/** The window's top left corner on the surface. */
|
||||
@@ -36,11 +39,17 @@ export interface DesktopWindowProps {
|
||||
readonly y: number;
|
||||
/** Its place in the stack of desktops. */
|
||||
readonly z: number;
|
||||
/** The program whose window is open on it, kept by the editor over a return to the design (Java's desktop keeps it). */
|
||||
readonly program: DesktopProgram | null;
|
||||
readonly onProgram: (program: DesktopProgram | null) => void;
|
||||
readonly onMove: (x: number, y: number) => void;
|
||||
readonly onFront: () => void;
|
||||
readonly onClose: () => void;
|
||||
}
|
||||
|
||||
/** The programs whose windows are built so far. */
|
||||
const WITH_WINDOW: ReadonlySet<DesktopProgram> = new Set(['commandPrompt']);
|
||||
|
||||
/** The document's desktop of a computer, read anew after every change (a program installed, the label changed). */
|
||||
function useDesktopView(doc: Y.Doc, id: string) {
|
||||
const [view, setView] = useState(() => desktopView(doc, id));
|
||||
@@ -53,13 +62,20 @@ function useDesktopView(doc: Y.Doc, id: string) {
|
||||
return view;
|
||||
}
|
||||
|
||||
export function DesktopWindow({ doc, id, settings, active, x, y, z, onMove, onFront, onClose }: DesktopWindowProps) {
|
||||
export function DesktopWindow({ doc, id, simulation, active, x, y, z, program: open, onProgram: setOpen, onMove, onFront, onClose }: DesktopWindowProps) {
|
||||
const t = useTranslate();
|
||||
const language = useLanguage();
|
||||
const view = useDesktopView(doc, id);
|
||||
const { watch } = simulation;
|
||||
useEffect(() => watch([`node:${id}`]), [watch, id]);
|
||||
const settings = simulation.nodes.get(id);
|
||||
const [info, setInfo] = useState(false);
|
||||
const home = useCallback(() => setOpen(null), [setOpen]);
|
||||
const [drag, setDrag] = useState<{ readonly pointer: number; readonly dx: number; readonly dy: number; moved: boolean } | null>(null);
|
||||
if (view === undefined) return null;
|
||||
const programs = desktopPrograms(view.programs, language);
|
||||
// A program removed while its window was open: the desktop shows.
|
||||
const shown = open !== null && programs.includes(open) ? open : null;
|
||||
const address = settings?.ipAddress ?? '';
|
||||
const title = view.addressAsName ? view.label : `${view.label} - ${address}`;
|
||||
|
||||
@@ -98,21 +114,33 @@ export function DesktopWindow({ doc, id, settings, active, x, y, z, onMove, onFr
|
||||
<div className="desktop-screen" style={{ backgroundImage: `url(${background})` }}>
|
||||
<ul className="desktop-icons">
|
||||
<li>
|
||||
{/* The programs' windows come with the next steps. */}
|
||||
{/* The installation's window comes with F4.6c. */}
|
||||
<button type="button" className="desktop-icon" aria-disabled="true" title={t('desktop.installation')}>
|
||||
<img src={INSTALLATION_ICON} alt="" />
|
||||
<span>{t('desktop.installation')}</span>
|
||||
</button>
|
||||
</li>
|
||||
{desktopPrograms(view.programs, language).map((program) => (
|
||||
{programs.map((program) => (
|
||||
<li key={program}>
|
||||
<button type="button" className="desktop-icon" data-program={program} aria-disabled="true" title={t(`program.${program}`)}>
|
||||
<button
|
||||
type="button"
|
||||
className="desktop-icon"
|
||||
data-program={program}
|
||||
aria-disabled={WITH_WINDOW.has(program) ? undefined : 'true'}
|
||||
title={t(`program.${program}`)}
|
||||
onClick={() => WITH_WINDOW.has(program) && setOpen(program)}
|
||||
>
|
||||
<img src={JAVA_PROGRAMS[program].icon} alt="" />
|
||||
<span>{t(`program.${program}`)}</span>
|
||||
</button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{shown === null ? null : (
|
||||
<ProgramFrame icon={JAVA_PROGRAMS[shown].icon} title={t(`program.${shown}`)} program={shown}>
|
||||
{shown === 'commandPrompt' ? <TerminalPanel node={id} simulation={simulation} onExit={home} /> : null}
|
||||
</ProgramFrame>
|
||||
)}
|
||||
{info ? (
|
||||
// A press beside the panel closes it, as in Java.
|
||||
<div className="desktop-info-layer" onPointerDown={(event) => event.target === event.currentTarget && setInfo(false)}>
|
||||
@@ -129,7 +157,14 @@ export function DesktopWindow({ doc, id, settings, active, x, y, z, onMove, onFr
|
||||
</div>
|
||||
<footer className="desktop-taskbar">
|
||||
<span />
|
||||
<button type="button" className="desktop-home" onClick={() => setInfo(false)}>
|
||||
<button
|
||||
type="button"
|
||||
className="desktop-home"
|
||||
onClick={() => {
|
||||
setInfo(false);
|
||||
setOpen(null);
|
||||
}}
|
||||
>
|
||||
{t('desktop.home')}
|
||||
</button>
|
||||
<button type="button" className="desktop-network-icon" data-active={active ? 'true' : undefined} aria-label={t('desktop.network')} aria-expanded={info} title={address} onClick={() => setInfo(!info)}>
|
||||
|
||||
@@ -0,0 +1,20 @@
|
||||
// A program's window on a computer's desktop, after Java's
|
||||
// GUIApplicationWindow: it fills the desktop above the taskbar, with Java's
|
||||
// dark grey title bar — the program's icon small on the left, its name in
|
||||
// the middle. Java's window has no close button: the taskbar's home button
|
||||
// leaves it, and the program keeps its window for the next time.
|
||||
|
||||
import type { ReactNode } from 'react';
|
||||
|
||||
export function ProgramFrame({ icon, title, program, children }: { readonly icon: string; readonly title: string; readonly program: string; readonly children: ReactNode }) {
|
||||
return (
|
||||
<section className="program-window" aria-label={title} data-program-window={program}>
|
||||
<header className="program-titlebar">
|
||||
<img src={icon} alt="" />
|
||||
<h3>{title}</h3>
|
||||
<span />
|
||||
</header>
|
||||
<div className="program-content">{children}</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,125 @@
|
||||
// A computer's command line, after Java's GUIApplicationTerminalWindow: grey
|
||||
// text on black, the prompt before the input line and hidden while a command
|
||||
// runs on, Enter hands the line over, the arrow keys go through the lines
|
||||
// entered, Ctrl+C ends a command. The window itself is the room's — the same
|
||||
// for everyone who opens it, kept over stops (TerminalWindow) — and so is
|
||||
// what it shows; this panel only types into it.
|
||||
//
|
||||
// For a finger, under the window: the commands as chips (a tap puts the
|
||||
// command into the input line), the arrow keys and Ctrl+C as buttons.
|
||||
|
||||
import { useEffect, useLayoutEffect, useRef, useState, type KeyboardEvent } from 'react';
|
||||
import { historyLine, historyStep, terminalScreen, type TerminalLine } from '@mdg-filius/protocol';
|
||||
import { useTranslate } from '../i18n/i18n.js';
|
||||
import type { Simulation } from '../simulation/useSimulation.js';
|
||||
|
||||
/** The commands offered as chips: the network's first, as a lesson needs them. */
|
||||
export const COMMAND_CHIPS = ['ipconfig', 'ping', 'route', 'nslookup', 'host', 'traceroute', 'arp', 'netstat', 'ls', 'cd', 'cat', 'help'] as const;
|
||||
|
||||
const NO_LINES: readonly TerminalLine[] = [];
|
||||
|
||||
export function TerminalPanel({ node, simulation, onExit }: { readonly node: string; readonly simulation: Simulation; readonly onExit: () => void }) {
|
||||
const t = useTranslate();
|
||||
const topic = `app:${node}/terminal` as const;
|
||||
const { watch, act } = simulation;
|
||||
useEffect(() => watch([topic]), [watch, topic]);
|
||||
const app = simulation.apps.get(topic);
|
||||
const lines = (app?.lines as readonly TerminalLine[] | undefined) ?? NO_LINES;
|
||||
const screen = terminalScreen(lines);
|
||||
const [input, setInput] = useState('');
|
||||
const [pointer, setPointer] = useState(-1);
|
||||
const field = useRef<HTMLInputElement>(null);
|
||||
const scroller = useRef<HTMLDivElement>(null);
|
||||
|
||||
// exit closes the window — an exit typed now, by anyone; not one of the lines it had when it opened.
|
||||
const seen = useRef(lines.length);
|
||||
useEffect(() => {
|
||||
const from = Math.max(seen.current, app?.live ?? 0);
|
||||
seen.current = lines.length;
|
||||
if (lines.slice(from).some((line) => line.kind === 'exit')) onExit();
|
||||
}, [lines, app?.live, onExit]);
|
||||
|
||||
// The newest text in sight, as Java scrolls to the bottom.
|
||||
useLayoutEffect(() => {
|
||||
const element = scroller.current;
|
||||
if (element !== null) element.scrollTop = element.scrollHeight;
|
||||
}, [screen.text, screen.promptShown]);
|
||||
|
||||
useEffect(() => field.current?.focus(), []);
|
||||
|
||||
const enter = () => {
|
||||
act(node, 'terminal', 'enter', { line: input });
|
||||
setInput('');
|
||||
setPointer(-1);
|
||||
};
|
||||
const browse = (step: 'up' | 'down') => {
|
||||
const next = historyStep(pointer, step, screen.history.length);
|
||||
setPointer(next);
|
||||
setInput(historyLine(screen.history, next));
|
||||
};
|
||||
const interrupt = () => act(node, 'terminal', 'interrupt');
|
||||
const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault();
|
||||
enter();
|
||||
} else if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
|
||||
event.preventDefault();
|
||||
browse(event.key === 'ArrowUp' ? 'up' : 'down');
|
||||
} else if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'c' && event.currentTarget.selectionStart === event.currentTarget.selectionEnd) {
|
||||
// Ctrl+C with nothing marked ends the command, as in Java; with text marked it copies.
|
||||
event.preventDefault();
|
||||
interrupt();
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="terminal">
|
||||
<div className="terminal-screen" ref={scroller} onClick={() => field.current?.focus()}>
|
||||
<pre className="terminal-text">{screen.text}</pre>
|
||||
<div className="terminal-input">
|
||||
<span className="terminal-prompt" style={{ visibility: screen.promptShown ? 'visible' : 'hidden' }}>
|
||||
{screen.prompt}
|
||||
</span>
|
||||
<input
|
||||
ref={field}
|
||||
name="terminalInput"
|
||||
value={input}
|
||||
aria-label={t('terminal.input')}
|
||||
autoCapitalize="off"
|
||||
autoCorrect="off"
|
||||
autoComplete="off"
|
||||
spellCheck={false}
|
||||
enterKeyHint="send"
|
||||
onChange={(event) => setInput(event.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="terminal-keys" role="toolbar" aria-label={t('terminal.commands')}>
|
||||
{COMMAND_CHIPS.map((command) => (
|
||||
<button
|
||||
key={command}
|
||||
type="button"
|
||||
className="terminal-chip"
|
||||
onClick={() => {
|
||||
setInput(`${command} `);
|
||||
setPointer(-1);
|
||||
field.current?.focus();
|
||||
}}
|
||||
>
|
||||
{command}
|
||||
</button>
|
||||
))}
|
||||
<button type="button" className="terminal-chip" aria-label={t('terminal.previous')} title={t('terminal.previous')} onClick={() => browse('up')}>
|
||||
↑
|
||||
</button>
|
||||
<button type="button" className="terminal-chip" aria-label={t('terminal.next')} title={t('terminal.next')} onClick={() => browse('down')}>
|
||||
↓
|
||||
</button>
|
||||
<button type="button" className="terminal-chip" aria-label={t('terminal.interrupt')} title={t('terminal.interrupt')} onClick={interrupt}>
|
||||
{t('terminal.ctrlC')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -183,3 +183,115 @@
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
/* A program's window over the desktop (GUIApplicationWindow): Java's dark
|
||||
* grey title bar of 30 pixels with the icon at 16. */
|
||||
.program-window {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.program-titlebar {
|
||||
display: grid;
|
||||
grid-template-columns: 30px 1fr 30px;
|
||||
align-items: center;
|
||||
height: 30px;
|
||||
flex: none;
|
||||
background: rgb(64 64 64);
|
||||
}
|
||||
|
||||
.program-titlebar img {
|
||||
justify-self: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.program-titlebar h3 {
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
font: 13px Dialog, sans-serif;
|
||||
color: rgb(225 225 225);
|
||||
}
|
||||
|
||||
.program-content {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* The command line (GUIApplicationTerminalWindow): grey on black, the input
|
||||
* line right after the text in the same scrolling area. 16 pixels in the
|
||||
* input: Safari on the iPad zooms into smaller fields. */
|
||||
.terminal {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
.terminal-screen {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow-y: auto;
|
||||
padding: 5px 5px 5px;
|
||||
color: rgb(222 222 222);
|
||||
font: 14px ui-monospace, Menlo, Consolas, 'Courier New', monospace;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.terminal-text {
|
||||
margin: 0;
|
||||
font: inherit;
|
||||
white-space: pre-wrap;
|
||||
overflow-wrap: anywhere;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.terminal-input {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.terminal-prompt {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.terminal-input input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
color: rgb(222 222 222);
|
||||
caret-color: rgb(222 222 222);
|
||||
font: 16px ui-monospace, Menlo, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
|
||||
.terminal-keys {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex: none;
|
||||
overflow-x: auto;
|
||||
padding: 6px;
|
||||
background: rgb(32 32 32);
|
||||
}
|
||||
|
||||
.terminal-chip {
|
||||
flex: none;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid rgb(90 90 90);
|
||||
border-radius: 8px;
|
||||
background: rgb(48 48 48);
|
||||
color: rgb(222 222 222);
|
||||
font: 14px ui-monospace, Menlo, Consolas, monospace;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -154,6 +154,12 @@
|
||||
"sheet.title": "Einstellungen",
|
||||
"sheet.wireless": "Drahtlos (WLAN)",
|
||||
"sim.failed": "Die Simulation ist auf einen Fehler gestoßen und wurde beendet.",
|
||||
"terminal.commands": "Befehle",
|
||||
"terminal.ctrlC": "Strg+C",
|
||||
"terminal.input": "Befehl eingeben",
|
||||
"terminal.interrupt": "Befehl abbrechen (Strg+C)",
|
||||
"terminal.next": "Nächster Befehl",
|
||||
"terminal.previous": "Vorheriger Befehl",
|
||||
"zoom.fit": "Alles zeigen",
|
||||
"zoom.in": "Vergrößern",
|
||||
"zoom.level": "{percent} %",
|
||||
|
||||
@@ -154,6 +154,12 @@
|
||||
"sheet.title": "Settings",
|
||||
"sheet.wireless": "Wireless (Wi-Fi)",
|
||||
"sim.failed": "The simulation ran into an error and was stopped.",
|
||||
"terminal.commands": "Commands",
|
||||
"terminal.ctrlC": "Ctrl+C",
|
||||
"terminal.input": "Enter a command",
|
||||
"terminal.interrupt": "Stop the command (Ctrl+C)",
|
||||
"terminal.next": "Next command",
|
||||
"terminal.previous": "Previous command",
|
||||
"zoom.fit": "Show all",
|
||||
"zoom.in": "Zoom in",
|
||||
"zoom.level": "{percent} %",
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
// The editor's side of the simulation room (plan §6): its mode and speed,
|
||||
// the cables that carry frames, a computer's network as it runs. The room
|
||||
// the cables that carry frames, a computer's network as it runs, the lines
|
||||
// of the programs' windows and the actions taken in them. The room
|
||||
// runs behind a SimHost — in a worker of this page (LocalSimHost) until F
|
||||
// holds it (RemoteSimHost, F5); the editor keeps no simulation of its own.
|
||||
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import type * as Y from 'yjs';
|
||||
import type { NodeSettings, SimHost, SimMode, Topic } from '@mdg-filius/protocol';
|
||||
import type { AppKind, NodeSettings, SimHost, SimMode, Topic } from '@mdg-filius/protocol';
|
||||
import { LocalSimHost } from '@mdg-filius/sim';
|
||||
import SimWorker from '@mdg-filius/sim/worker?worker';
|
||||
|
||||
@@ -18,6 +19,12 @@ export const localSimHost: SimHostFactory = (doc) => {
|
||||
return new LocalSimHost(doc, worker, () => worker.terminate());
|
||||
};
|
||||
|
||||
/** A program window's lines as the room sent them; those before `live` came with the subscription, the rest as they happened. */
|
||||
export interface AppLines {
|
||||
readonly lines: readonly unknown[];
|
||||
readonly live: number;
|
||||
}
|
||||
|
||||
export interface Simulation {
|
||||
readonly mode: SimMode;
|
||||
/** Java's slider, 1 to 100 per cent. */
|
||||
@@ -26,6 +33,8 @@ export interface Simulation {
|
||||
readonly activeLinks: ReadonlySet<string>;
|
||||
/** Each watched computer's network as the simulation runs it. */
|
||||
readonly nodes: ReadonlyMap<string, NodeSettings>;
|
||||
/** Each watched program window's lines, by its topic. */
|
||||
readonly apps: ReadonlyMap<string, AppLines>;
|
||||
/** Whether the core failed and the room went back to design mode, since the last start. */
|
||||
readonly failed: boolean;
|
||||
start(): void;
|
||||
@@ -33,6 +42,8 @@ export interface Simulation {
|
||||
setSpeed(value: number): void;
|
||||
/** Watches these topics until the returned function is called; a topic two parts watch is sent for once. */
|
||||
watch(topics: readonly Topic[]): () => void;
|
||||
/** An action in a program's window (the room answers with its new lines). */
|
||||
act(node: string, app: AppKind, action: string, args?: Readonly<Record<string, unknown>>): void;
|
||||
}
|
||||
|
||||
const NO_LINKS: ReadonlySet<string> = new Set();
|
||||
@@ -45,6 +56,7 @@ export function useSimulation(doc: Y.Doc, createHost: SimHostFactory = localSimH
|
||||
const [activeLinks, setActiveLinks] = useState<ReadonlySet<string>>(NO_LINKS);
|
||||
const [nodes, setNodes] = useState<ReadonlyMap<string, NodeSettings>>(new Map());
|
||||
const [failed, setFailed] = useState(false);
|
||||
const [apps, setApps] = useState<ReadonlyMap<string, AppLines>>(new Map());
|
||||
|
||||
useEffect(() => {
|
||||
const made = createHost(doc);
|
||||
@@ -62,6 +74,15 @@ export function useSimulation(doc: Y.Doc, createHost: SimHostFactory = localSimH
|
||||
case 'node':
|
||||
setNodes((before) => new Map(before).set(message.node, message.settings));
|
||||
return;
|
||||
case 'app':
|
||||
setApps((before) => {
|
||||
const topic = `app:${message.node}/${message.app}`;
|
||||
const known = before.get(topic)?.lines ?? [];
|
||||
// From 0 the room sends a window anew (a subscription): all of it is what was before.
|
||||
const lines = message.from === 0 ? message.lines : [...known.slice(0, message.from), ...message.lines];
|
||||
return new Map(before).set(topic, { lines, live: message.from === 0 ? lines.length : (before.get(topic)?.live ?? 0) });
|
||||
});
|
||||
return;
|
||||
case 'error':
|
||||
if (message.code === 'engineFailed') setFailed(true);
|
||||
return;
|
||||
@@ -101,5 +122,9 @@ export function useSimulation(doc: Y.Doc, createHost: SimHostFactory = localSimH
|
||||
};
|
||||
}, []);
|
||||
|
||||
return { mode, speed, activeLinks, nodes, failed, start, stop, setSpeed, watch };
|
||||
const act = useCallback((node: string, app: AppKind, action: string, args: Readonly<Record<string, unknown>> = {}) => {
|
||||
host.current?.send({ v: 1, kind: 'input', node, app, action, args, reqId: crypto.randomUUID() });
|
||||
}, []);
|
||||
|
||||
return { mode, speed, activeLinks, nodes, apps, failed, start, stop, setSpeed, watch, act };
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user