@v12-engine/create 0.1.1 → 0.4.0

package/starters/examples/src/examples/gui/keys.ts

@@ -0,0 +1,91 @@
+/**
+ * Keys of the game's own: actions with a name, a label, a group and default keys (`ActionDef`), added to the client's
+ * while the game runs (`client.keys.define`; a game says them once in its view: `input.keys.actions.add`). The player
+ * can rebind them on the Keys screen of the pause menu as any of the client's; here a button rebinds one in code
+ * (`client.keys.bind`). A legend of the HUD's (`hud.widgets`) lists them with the keys they are on now, and follows a
+ * rebinding (`client.keys.onChange`)
+ */
+import type { GameClientApi, HudWidgetDef } from '@v12-engine/client'
+import { PLAYER } from '../common/units'
+import { gather } from './index'
+
+/** The example's actions, by id: what each does, and the keys it comes with */
+export const ACTIONS = [
+	{
+		id: 'gui.gather',
+		label: 'Gather the army where the camera looks',
+		default: ['KeyR'],
+		run: (client: GameClientApi) => {
+			const { x, z } = client.camera.pose()
+			client.session.send(gather.make({ at: { x, z } }))
+			client.ping(x, z, [0.4, 0.8, 1])
+		}
+	},
+	{
+		id: 'gui.cheer',
+		label: 'Everyone jumps for joy',
+		default: ['KeyC'],
+		run: (client: GameClientApi) => {
+			for (const unit of client.session.snapshot().entities) if (unit.owner === PLAYER && unit.health > 0) client.playClip(unit.id, 'Jump_Full_Short')
+		}
+	},
+	{
+		id: 'gui.hero',
+		label: 'Select the knight and look at him',
+		default: ['KeyZ'],
+		run: (client: GameClientApi) => {
+			const hero = client.session.snapshot().entities.find((each) => each.name === 'hero')
+			if (!hero) return
+			client.controller.select([hero.id])
+			client.camera.lookAt({ x: hero.x, z: hero.z }, { seconds: 0.5 })
+		}
+	}
+] as const
+
+/** Adds the actions to the client's keys; gives back what takes them away */
+export function defineKeys(client: GameClientApi): () => void {
+	for (const action of ACTIONS)
+		client.keys.define({ id: action.id, label: action.label, group: 'Examples', default: action.default, run: action.run })
+	return () => {
+		for (const action of ACTIONS) client.keys.forget(action.id)
+	}
+}
+
+/** The legend: each action with its keys as the player's keyboard shows them, drawn again when a binding changes */
+export function keysLegend(client: GameClientApi): HudWidgetDef {
+	return {
+		id: 'gui.keys',
+		place: 'left',
+		mount(element) {
+			const panel = document.createElement('div')
+			panel.style.cssText =
+				'pointer-events:auto;width:270px;padding:12px 14px;border-radius:8px;background:rgba(12,14,20,.88);border:1px solid #3c4252;color:#e8e2d0;font:13px/1.35 system-ui,sans-serif'
+			element.append(panel)
+			const draw = () => {
+				panel.innerHTML = '<div style="font:600 15px system-ui;color:#f2d58a;margin-bottom:8px">Your keys</div>'
+				for (const action of ACTIONS) {
+					const row = document.createElement('div')
+					row.style.cssText = 'display:flex;gap:10px;align-items:center;margin:6px 0'
+					const key = document.createElement('kbd')
+					key.textContent = client.keys.keys(action.id).join(' / ') || '—'
+					key.style.cssText =
+						'min-width:28px;text-align:center;padding:4px 7px;border-radius:5px;background:linear-gradient(#3a3f4c,#1d2028);border:1px solid #5a6070;box-shadow:0 2px 0 #0a0b0e;font:700 13px system-ui;color:#ffe9a8'
+					const words = document.createElement('span')
+					words.textContent = action.label
+					row.append(key, words)
+					panel.append(row)
+				}
+				const note = document.createElement('div')
+				note.style.cssText = 'margin-top:8px;color:#8a8f9c;font-size:11px'
+				note.textContent = 'Rebind them on the Keys screen of the menu (F10), or with the buttons on the card'
+				panel.append(note)
+			}
+			draw()
+			const stop = client.keys.onChange(draw)
+			return () => {
+				stop()
+				panel.remove()
+			}
+		}
+	}
+}

package/starters/examples/src/examples/gui/layout.ts

@@ -0,0 +1,42 @@
+/**
+ * The HUD's own parts, changed while the game runs: the console laid out centred or in the corners
+ * (`client.hud.setConsole`), a theme by name (`client.theme.set`: the colours, the frames' metal, the typefaces),
+ * parts hidden and shown (`client.hud.hide`), the HUD's size (`client.hud.setScale`), the top bar's title
+ * (`client.hud.setTitle`), the minimap's size (`client.hud.setMinimap`), or the whole HUD hidden (`client.hideHud`).
+ * Each is put back as the example is left
+ */
+import type { GameClientApi } from '@v12-engine/client'
+
+/** The themes to pick from: the client's own (`themeNames()` lists every one, the editor's too) */
+export const THEMES = ['classic', 'stone', 'moonlight', 'plain', 'iron', 'bone', 'jade'] as const
+
+/**
+ * The parts the toggles hide, by the client's ids (`HUD_WIDGETS`), with their words: those this game shows. The top
+ * bar's clock and resources, and the messages, are hidden the same way (`'clock'`, `'resources'`, `'messages'`): this
+ * game keeps no resources nor time, and says nothing to show
+ */
+export const PARTS = [
+	['minimap', 'Minimap'],
+	['card', 'Command card'],
+	['selection', 'Selection']
+] as const
+
+/** What the example changed, to put back as it is left: the whole HUD hidden */
+const changed: { shown?: () => void } = {}
+
+/** Hides the whole HUD, or shows it again (`client.hideHud` gives back what shows it) */
+export function hideAll(client: GameClientApi, hidden: boolean): void {
+	changed.shown?.()
+	changed.shown = hidden ? client.hideHud() : undefined
+}
+
+/** Puts back everything the example changed: the HUD as the game's view says it */
+export function restoreHud(client: GameClientApi): void {
+	hideAll(client, false)
+	client.hud.setMinimap({ size: 212 })
+	client.hud.setConsole('centered')
+	client.theme.reset()
+	for (const [id] of PARTS) client.hud.hide(id, false)
+	client.hud.setScale(1)
+	client.hud.setTitle(undefined)
+}

package/starters/examples/src/examples/gui/looks.ts

@@ -0,0 +1,270 @@
+/**
+ * The interface examples on the client's side: their controls, and what each puts up as it is opened (`ready`) and
+ * takes down as it is left. Each interface is a file of its own beside this one: Babylon's GUI on the screen
+ * (`babylonScreen.ts`) and in the world (`babylonWorld.ts`), a HUD part in Solid (`solidPart.ts`) and one in plain HTML
+ * (`htmlPart.ts`), the HUD's own parts rearranged (`layout.ts`), plates over units (`plates.ts`), a minimap
+ * (`minimap.ts`), a radial menu (`radial.ts`), a whole interface of the game's own (`ownInterface.ts`) and keys
+ * (`keys.ts`)
+ */
+import type { GameClientApi } from '@v12-engine/client'
+import { button, type CategoryLooks, select, slider, toggle } from '../../shell/look'
+import { aim } from '../cinematics/looks'
+import { babylonPanel } from './babylonScreen'
+import { babylonWorld, POST } from './babylonWorld'
+import { rosterPart } from './htmlPart'
+import { charge, gather, resetCamp } from './index'
+import { ACTIONS, defineKeys, keysLegend } from './keys'
+import { hideAll, PARTS, restoreHud, THEMES } from './layout'
+import { minimapLayer, ownMinimap } from './minimap'
+import { ownInterface } from './ownInterface'
+import { DESIGNS, restorePlates, setDesign } from './plates'
+import { closeRadial, radialRightClick } from './radial'
+import { armyPart } from './solidPart'
+
+/** The camp from the south, both sides in the picture */
+const overTheCamp = (client: GameClientApi, distance = 30) => aim(client, { x: 24, z: 23 }, distance)
+
+/** The two buttons every camp has: the battle, and the camp laid out again */
+const battle = [
+	button(
+		'Charge',
+		(client) => client.session.send(charge.make({})),
+		'Sends both camps at each other: watch the interface follow the fight, health falling and units dying.'
+	),
+	button(
+		'Lay it out again',
+		(client) => client.session.send(resetCamp.make({})),
+		'Puts both camps back as they started, everyone whole, for another charge.'
+	)
+]
+
+/** What the minimap example has up now: the game's own minimap, or a layer on the client's */
+const minimapNow: { off?: () => void } = {}
+
+/** The interface of the game's own while it is up: what takes it down */
+const own: { off?: () => void } = {}
+
+export const category: CategoryLooks = {
+	looks: {
+		'gui-babylon-screen': {
+			controls: battle,
+			ready: (client) => {
+				overTheCamp(client)
+				return babylonPanel(client)
+			}
+		},
+		'gui-babylon-world': {
+			controls: [
+				...battle,
+				button(
+					'Gather at the sign',
+					(client) => client.session.send(gather.make({ at: { x: POST.x - 2, z: POST.z - 2 } })),
+					'Sends your army to the signpost: the same as clicking the button on the sign itself, which is Babylon GUI drawn in the world.'
+				)
+			],
+			ready: (client) => {
+				overTheCamp(client, 28)
+				return babylonWorld(client)
+			}
+		},
+		'gui-solid': {
+			controls: battle,
+			ready: (client) => {
+				overTheCamp(client)
+				return client.hud.widgets.add(armyPart(client))
+			}
+		},
+		'gui-html': {
+			controls: battle,
+			ready: (client) => {
+				overTheCamp(client)
+				return client.hud.widgets.add(rosterPart(client))
+			}
+		},
+		'gui-hud-layout': {
+			controls: [
+				select(
+					'Console',
+					['centered', 'corners'],
+					'centered',
+					(client, layout) => client.hud.setConsole(layout as 'centered' | 'corners'),
+					'How the bottom console is laid out: one centred bar, or the minimap and the card apart in the corners.'
+				),
+				select(
+					'Theme',
+					THEMES,
+					'classic',
+					(client, theme) => client.theme.set(theme),
+					'The HUD’s theme: its colours, the metal of its frames and its typefaces change at once.'
+				),
+				slider(
+					'Size',
+					{ min: 0.7, max: 1.3, step: 0.05, value: 1 },
+					(client, size) => client.hud.setScale(size),
+					'How big the whole HUD is drawn, from 70% to 130%.'
+				),
+				slider(
+					'Minimap size',
+					{ min: 150, max: 320, step: 10, value: 212 },
+					(client, size) => client.hud.setMinimap({ size }),
+					'How big the minimap is, in pixels: the console makes room for it.'
+				),
+				...PARTS.map(([id, words]) =>
+					toggle(
+						words,
+						true,
+						(client, on) => client.hud.hide(id, !on),
+						`Shows or hides this one part of the HUD, the ${words.toLowerCase()}: the rest stays where it is.`
+					)
+				),
+				button('Title: “The Camp”', (client) => client.hud.setTitle('The Camp'), 'Sets the title the top bar shows to “The Camp”.'),
+				toggle(
+					'Hide the whole HUD',
+					false,
+					(client, on) => hideAll(client, on),
+					'Hides the whole HUD at once, for a clean picture (client.hideHud); off, it comes back as it was.'
+				),
+				button('Put it all back', (client) => restoreHud(client), 'Undoes every change above: the HUD as the game’s view says it.')
+			],
+			ready: (client) => {
+				overTheCamp(client)
+				// the knight selected: the selection's panel has him to show
+				const hero = client.session.snapshot().entities.find((each) => each.name === 'hero')
+				if (hero) client.controller.select([hero.id])
+				return () => restoreHud(client)
+			}
+		},
+		'gui-plates': {
+			controls: [
+				select(
+					'Design',
+					Object.keys(DESIGNS),
+					'Hero card',
+					(client, design) => setDesign(client, design),
+					'What the plate over each unit shows: a thin bar only while hurt, a name over a bar, a hero’s card… Charge to see the bars fall.'
+				),
+				select(
+					'Drawn as',
+					['canvas', 'dom', 'gui'],
+					'canvas',
+					(client, render) => (client.unitHud.look.render = render as 'canvas' | 'dom' | 'gui'),
+					'What draws the plates: one canvas over the picture, an HTML element each, or Babylon GUI. They look the same; what it costs differs.'
+				),
+				toggle(
+					'Bars over everyone',
+					false,
+					(client, on) => (client.showAllBars = on),
+					'Shows the plates over every unit, not only the selected, hovered or hurt, as holding Alt does: plain to see with the Bars when hurt design, which shows none till then.'
+				),
+				...battle
+			],
+			ready: (client) => {
+				overTheCamp(client, 24)
+				setDesign(client, 'Hero card')
+				return () => restorePlates(client)
+			}
+		},
+		'gui-minimap': {
+			controls: [
+				select(
+					'Minimap',
+					['ours', 'the client’s with a layer', 'the client’s'],
+					'ours',
+					(client, which) => {
+						minimapNow.off?.()
+						minimapNow.off = which === 'ours' ? ownMinimap(client) : which === 'the client’s' ? undefined : minimapLayer(client)
+					},
+					'Which minimap shows, bottom left: one the game draws itself, the client’s with the camps and a ring round the knight drawn on it, or the client’s as it is.'
+				),
+				...battle
+			],
+			ready: (client) => {
+				overTheCamp(client)
+				minimapNow.off = ownMinimap(client)
+				return () => {
+					minimapNow.off?.()
+					minimapNow.off = undefined
+				}
+			}
+		},
+		'gui-radial': {
+			view: (view) => ({ ...view, input: { ...view.input, onRightClick: radialRightClick } }),
+			controls: [
+				button(
+					'Select your army',
+					(client) =>
+						client.controller.select(
+							client.session
+								.snapshot()
+								.entities.filter((each) => each.owner === client.session.playerId)
+								.map((each) => each.id)
+						),
+					'Selects all your units: then right-click the ground to open the radial menu of orders round the pointer.'
+				),
+				...battle
+			],
+			ready: (client) => {
+				overTheCamp(client)
+				client.controller.select(
+					client.session
+						.snapshot()
+						.entities.filter((each) => each.owner === client.session.playerId)
+						.map((each) => each.id)
+				)
+				return () => closeRadial()
+			}
+		},
+		'gui-own-interface': {
+			controls: [
+				toggle(
+					'Ours in place of the HUD',
+					true,
+					(client, on) => {
+						own.off?.()
+						own.off = on ? ownInterface(client) : undefined
+					},
+					'Whether the game’s own interface replaces the client’s HUD: off, the client’s HUD is back.'
+				),
+				...battle
+			],
+			ready: (client) => {
+				overTheCamp(client)
+				own.off = ownInterface(client)
+				return () => {
+					own.off?.()
+					own.off = undefined
+				}
+			}
+		},
+		'gui-keys': {
+			controls: [
+				...ACTIONS.map((action) =>
+					button(
+						action.label,
+						(client) => client.keys.press(action.id),
+						`Runs this action as pressing its key does (${action.default[0].slice(3)} at first): the legend lists each with its key.`
+					)
+				),
+				button(
+					'Put Gather on G',
+					(client) => client.keys.bind('gui.gather', ['KeyG']),
+					'Moves the Gather action from R to G, in code (client.keys.bind): the legend changes, and G now gathers.'
+				),
+				button(
+					'Keys back',
+					(client) => ACTIONS.forEach((action) => client.keys.reset(action.id)),
+					'Puts every action back on its first key: the legend follows.'
+				)
+			],
+			ready: (client) => {
+				overTheCamp(client)
+				const forget = defineKeys(client)
+				const legend = client.hud.widgets.add(keysLegend(client))
+				return () => {
+					legend()
+					forget()
+				}
+			}
+		}
+	}
+}

package/starters/examples/src/examples/gui/minimap.ts

@@ -0,0 +1,127 @@
+/**
+ * A minimap of the game's own, two ways:
+ *
+ * - In the client's place: the client's hidden (`client.hud.hide('minimap')`) and a widget of the game's own with a
+ *   `mount`, drawing a canvas of its own every frame (the field, the units as dots in their side's colour, the frame
+ *   of what the camera sees) and turning a click into a look at that spot
+ * - Over the client's: a layer drawn on the client's own minimap (`client.hud.addMinimapLayer`), here the two camps'
+ *   grounds and a ring pulsing round the knight
+ */
+import type { GameClientApi } from '@v12-engine/client'
+import { PLAYER } from '../common/units'
+
+/** The field's size in cells: the examples' field (`exampleField`) */
+const SIZE = 48
+/** The minimap's size in pixels */
+const PIXELS = 220
+
+/** The minimap of the game's own, in the place of the client's; gives back what takes it away */
+export function ownMinimap(client: GameClientApi): () => void {
+	// the client's minimap and its buttons hidden, and the game's own put over the map in the bottom left
+	client.hud.hide('minimap')
+	const remove = client.hud.widgets.add({
+		id: 'gui.minimap',
+		place: 'bottom-left',
+		mount(element) {
+			const canvas = document.createElement('canvas')
+			canvas.width = canvas.height = PIXELS * devicePixelRatio
+			canvas.style.cssText = `width:${PIXELS}px;height:${PIXELS}px;border-radius:50%;cursor:crosshair;pointer-events:auto;display:block;
+				box-shadow:0 0 0 3px #0e1118,0 0 0 5px #c9a35a,0 8px 20px rgba(0,0,0,.6)`
+			element.append(canvas)
+			const context = canvas.getContext('2d')!
+			const scale = canvas.width / SIZE
+			// north up: the map's z grows up the minimap
+			const toMap = (x: number, z: number) => ({ x: x * scale, y: canvas.height - z * scale })
+
+			let frame = 0
+			const draw = () => {
+				frame = requestAnimationFrame(draw)
+				const { width, height } = canvas
+				context.save()
+				context.clearRect(0, 0, width, height)
+				// round, like a radar
+				context.beginPath()
+				context.arc(width / 2, height / 2, width / 2, 0, Math.PI * 2)
+				context.clip()
+				const ground = context.createRadialGradient(width / 2, height / 2, 0, width / 2, height / 2, width / 2)
+				ground.addColorStop(0, '#3d6b2e')
+				ground.addColorStop(1, '#1d3418')
+				context.fillStyle = ground
+				context.fillRect(0, 0, width, height)
+				// a grid every 8 cells
+				context.strokeStyle = 'rgba(255,255,255,.07)'
+				context.lineWidth = 1
+				for (let cell = 8; cell < SIZE; cell += 8) {
+					context.beginPath()
+					context.moveTo(cell * scale, 0)
+					context.lineTo(cell * scale, height)
+					context.moveTo(0, cell * scale)
+					context.lineTo(width, cell * scale)
+					context.stroke()
+				}
+				// the units: a dot each, bigger for the knights
+				for (const unit of client.session.snapshot().entities) {
+					if (unit.health <= 0) continue
+					const at = toMap(unit.x, unit.z)
+					context.fillStyle = unit.owner === PLAYER ? '#5fb0ff' : '#ff5a44'
+					context.beginPath()
+					context.arc(at.x, at.y, (unit.type === 'knight' ? 4.5 : 2.6) * devicePixelRatio, 0, Math.PI * 2)
+					context.fill()
+				}
+				// what the camera sees, near enough: a box round where it looks, as wide as it is far away
+				const pose = client.camera.pose()
+				const half = pose.distance * 0.62
+				const corner = toMap(pose.x - half, pose.z + half * 0.6)
+				context.strokeStyle = '#fff'
+				context.lineWidth = 1.5 * devicePixelRatio
+				context.strokeRect(corner.x, corner.y, half * 2 * scale, half * 1.2 * scale)
+				context.restore()
+			}
+			draw()
+
+			// a click: the camera looks there
+			canvas.onpointerdown = (event) => {
+				const box = canvas.getBoundingClientRect()
+				const x = ((event.clientX - box.left) / box.width) * SIZE
+				const z = (1 - (event.clientY - box.top) / box.height) * SIZE
+				client.camera.lookAt({ x, z }, { seconds: 0.4 })
+			}
+			return () => {
+				cancelAnimationFrame(frame)
+				canvas.remove()
+			}
+		}
+	})
+	return () => {
+		remove()
+		client.hud.hide('minimap', false)
+	}
+}
+
+/** A layer on the client's own minimap: the camps' grounds, and a ring round the knight; gives back what takes it away */
+export function minimapLayer(client: GameClientApi): () => void {
+	return client.hud.addMinimapLayer({
+		id: 'gui.camps',
+		at: 'units',
+		draw: (context, frame) => {
+			const zone = (x: number, z: number, color: string) => {
+				const at = frame.toMap(x, z)
+				context.fillStyle = color
+				context.beginPath()
+				context.ellipse(at.x, at.y, 8 * frame.scale.x, 6 * frame.scale.y, 0, 0, Math.PI * 2)
+				context.fill()
+			}
+			zone(24, 16, 'rgba(80,160,255,.28)')
+			zone(24, 32, 'rgba(255,80,60,.28)')
+			const hero = frame.client.session.snapshot().entities.find((each) => each.name === 'hero')
+			if (!hero) return
+			const at = frame.toMap(hero.x, hero.z)
+			const pulse = (frame.now / 1000) % 1
+			context.strokeStyle = `rgba(255,220,90,${1 - pulse})`
+			context.lineWidth = 2
+			context.beginPath()
+			context.arc(at.x, at.y, (3 + pulse * 6) * frame.scale.x, 0, Math.PI * 2)
+			context.stroke()
+		}
+	})
+}

package/starters/examples/src/examples/gui/ownInterface.ts

@@ -0,0 +1,129 @@
+/**
+ * An interface of the game's own in place of the whole HUD: the client's hidden (`client.hideHud()`, which gives back
+ * what shows it again), and a layer of plain HTML over the world in its place (`client.addLayer`). It has a bar across
+ * the top with the battle's numbers, a card for what is selected (from the HUD's state: `client.ui.selection()`), order
+ * buttons that send what the client's card would, and a log of the fallen. The selection, orders and camera are the
+ * client's as ever: only the drawing is the game's
+ */
+import type { GameClientApi } from '@v12-engine/client'
+import { ENEMY, PLAYER } from '../common/units'
+import { charge, gather, resetCamp } from './index'
+
+const STYLE = `
+.gui-own { position: absolute; inset: 0; pointer-events: none; font: 14px/1.3 'Trebuchet MS', system-ui, sans-serif; color: #eef3f7 }
+.gui-own .glass { pointer-events: auto; background: linear-gradient(180deg, rgba(20, 34, 48, .92), rgba(8, 14, 22, .92)); border: 1px solid #4fd1c5;
+	box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 18px rgba(79, 209, 197, .25); border-radius: 4px }
+.gui-own .top { position: absolute; top: 12px; left: 16px; display: flex; gap: 18px; align-items: center; padding: 8px 16px }
+.gui-own .top b { color: #4fd1c5; letter-spacing: .18em; font-size: 13px }
+.gui-own .top .num { font: 700 20px 'Trebuchet MS', sans-serif }
+.gui-own .top .ours { color: #7cc4ff } .gui-own .top .theirs { color: #ff8b78 }
+.gui-own .card { position: absolute; left: 16px; bottom: 16px; width: 300px; padding: 12px 14px }
+.gui-own .card h4 { margin: 0 0 6px; font-size: 18px; color: #fff }
+.gui-own .card .bar { height: 10px; border-radius: 5px; background: #0b1118; border: 1px solid #27404f; overflow: hidden; margin: 6px 0 }
+.gui-own .card .bar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #4fd1c5) }
+.gui-own .card small { color: #93a8b8 }
+.gui-own .orders { position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); display: flex; gap: 8px; padding: 8px }
+.gui-own .orders button { pointer-events: auto; cursor: pointer; width: 74px; height: 64px; border-radius: 4px; border: 1px solid #2c5a66;
+	background: #0e1a24; color: #dff; font: 600 12px 'Trebuchet MS', sans-serif; display: grid; place-items: center; gap: 2px }
+.gui-own .orders button em { font-style: normal; font-size: 22px; color: #4fd1c5 }
+.gui-own .orders button:hover { border-color: #4fd1c5; background: #12303a }
+.gui-own .log { position: absolute; right: 16px; bottom: 16px; width: 260px; max-height: 180px; overflow: hidden; padding: 10px 12px;
+	display: flex; flex-direction: column-reverse; gap: 3px; font-size: 12px }
+.gui-own .log div { color: #b9cad6 } .gui-own .log div.foe { color: #ffb4a6 }
+`
+
+/** The card's words for what is selected: the first one's name and health, and how many more */
+function cardOf(client: GameClientApi): string {
+	const selection = client.ui.selection()
+	if (!selection.length) return '<h4>Nothing selected</h4><small>Click a unit, or drag a box round several</small>'
+	const first = selection[0]
+	const share = first.health / Math.max(1, first.maxHealth)
+	const stats = first.stats
+		.slice(0, 3)
+		.map((line) => `${line.label} ${line.value}`)
+		.join(' · ')
+	return `<h4>${first.name}${selection.length > 1 ? ` <small>and ${selection.length - 1} more</small>` : ''}</h4>
+		<div class="bar"><i style="width:${share * 100}%"></i></div>
+		<small>${Math.round(first.health)} / ${Math.round(first.maxHealth)} health${stats ? ` · ${stats}` : ''}</small>`
+}
+
+/** Hides the client's HUD and puts the game's own up; gives back what takes it down and shows the client's again */
+export function ownInterface(client: GameClientApi): () => void {
+	const showHud = client.hideHud()
+	const root = document.createElement('div')
+	root.className = 'gui-own'
+	root.innerHTML = `<style>${STYLE}</style>
+		<div class="top glass"><b>ELMBROOK GARRISON</b>
+			<span>Yours <span class="num ours" data-ours>0</span></span>
+			<span>Theirs <span class="num theirs" data-theirs>0</span></span>
+			<span data-time>0:00</span></div>
+		<div class="card glass" data-card></div>
+		<div class="orders glass" data-orders></div>
+		<div class="log glass" data-log><div>The armies stand ready.</div></div>`
+	const removeLayer = client.addLayer(root, { under: 'hud' })
+	const $ = (name: string) => root.querySelector<HTMLElement>(`[data-${name}]`)!
+
+	/** The selected units of the player's own */
+	const mine = () =>
+		client.ui
+			.selection()
+			.filter((item) => item.own)
+			.map((item) => item.id)
+	const orders: [string, string, () => void][] = [
+		['⚔', 'Charge', () => client.session.send(charge.make({}))],
+		['■', 'Stop', () => client.session.send({ type: 'order', entities: mine(), order: { type: 'stop' } })],
+		['⛨', 'Hold', () => client.session.send({ type: 'order', entities: mine(), order: { type: 'hold' } })],
+		[
+			'✺',
+			'Gather',
+			() => {
+				const pose = client.camera.pose()
+				client.session.send(gather.make({ at: { x: pose.x, z: pose.z } }))
+			}
+		],
+		['↺', 'Again', () => client.session.send(resetCamp.make({}))]
+	]
+	for (const [glyph, label, run] of orders) {
+		const button = document.createElement('button')
+		button.type = 'button'
+		button.innerHTML = `<em>${glyph}</em>${label}`
+		button.onclick = run
+		$('orders').append(button)
+	}
+
+	// the selection's card, drawn again as the HUD's state changes
+	const stopCard = client.ui.watch(
+		() => cardOf(client),
+		(words) => ($('card').innerHTML = words),
+		{ immediate: true }
+	)
+
+	// the numbers, the clock and the log, from the snapshot
+	let known = new Map<number, { owner: number; name: string }>()
+	const tick = () => {
+		const { entities, tick } = client.session.snapshot()
+		const alive = entities.filter((each) => each.health > 0)
+		$('ours').textContent = String(alive.filter((each) => each.owner === PLAYER).length)
+		$('theirs').textContent = String(alive.filter((each) => each.owner === ENEMY).length)
+		const seconds = Math.floor(tick / client.session.tickRate)
+		$('time').textContent = `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`
+		const now = new Map(alive.map((each) => [each.id, { owner: each.owner, name: client.session.registry.unit(each.type)?.name ?? each.type }]))
+		for (const [id, was] of known) {
+			if (now.has(id)) continue
+			const line = document.createElement('div')
+			line.className = was.owner === PLAYER ? '' : 'foe'
+			line.textContent = `${was.owner === PLAYER ? 'Your' : 'An enemy'} ${was.name.toLowerCase()} fell.`
+			$('log').prepend(line)
+			while ($('log').children.length > 9) $('log').lastElementChild!.remove()
+		}
+		known = now
+	}
+	tick()
+	const timer = setInterval(tick, 300)
+	return () => {
+		clearInterval(timer)
+		stopCard()
+		removeLayer()
+		showHud()
+	}
+}