@v12-engine/create 0.1.1 → 0.4.0

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

@@ -0,0 +1,167 @@
+/**
+ * Babylon's GUI on the screen: a panel of the game's own drawn into the client's full-screen GUI layer (`client.gui`,
+ * an `AdvancedDynamicTexture`), with Babylon's controls (`@babylonjs/gui`). It reads the battle from the snapshots the
+ * screen is sent, and acts by commands and the client's settings. Everything added is taken away as the example is left
+ */
+import { Button } from '@babylonjs/gui/2D/controls/button.js'
+import { Checkbox } from '@babylonjs/gui/2D/controls/checkbox.js'
+import { Control } from '@babylonjs/gui/2D/controls/control.js'
+import { Rectangle } from '@babylonjs/gui/2D/controls/rectangle.js'
+import { Slider } from '@babylonjs/gui/2D/controls/sliders/slider.js'
+import { StackPanel } from '@babylonjs/gui/2D/controls/stackPanel.js'
+import { TextBlock } from '@babylonjs/gui/2D/controls/textBlock.js'
+import type { GameClientApi } from '@v12-engine/client'
+import { ENEMY, PLAYER } from '../common/units'
+import { charge, resetCamp } from './index'
+
+const GOLD = '#d9b45a'
+const INK = '#f1e4c3'
+const FONT = 'Georgia, serif'
+
+/** Words in the panel */
+function words(text: string, size: number, color = INK, height = size + 10): TextBlock {
+	const block = new TextBlock(undefined, text)
+	block.color = color
+	block.fontSize = size
+	block.fontFamily = FONT
+	block.height = `${height}px`
+	block.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT
+	return block
+}
+
+/** A button of the panel: dark, gold-edged, lighter as the pointer is over it */
+function panelButton(name: string, text: string, run: () => void): Button {
+	const made = Button.CreateSimpleButton(name, text)
+	made.height = '36px'
+	made.width = '254px'
+	made.color = GOLD
+	made.background = '#2a2214'
+	made.cornerRadius = 6
+	made.thickness = 1.5
+	made.fontFamily = FONT
+	made.fontSize = 16
+	made.paddingTop = '6px'
+	if (made.textBlock) made.textBlock.color = INK
+	made.onPointerEnterObservable.add(() => (made.background = '#46381c'))
+	made.onPointerOutObservable.add(() => (made.background = '#2a2214'))
+	made.onPointerUpObservable.add(run)
+	return made
+}
+
+/** A bar for a side's strength: a frame and a fill as wide as the share left */
+function strengthBar(color: string): { bar: Rectangle; set: (share: number) => void } {
+	const bar = new Rectangle()
+	bar.height = '14px'
+	bar.thickness = 1
+	bar.color = '#00000088'
+	bar.background = '#00000066'
+	bar.cornerRadius = 3
+	const fill = new Rectangle()
+	fill.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT
+	fill.thickness = 0
+	fill.background = color
+	bar.addControl(fill)
+	return { bar, set: (share) => (fill.width = `${Math.max(0, Math.min(1, share)) * 100}%`) }
+}
+
+/** Puts the panel up on the client's GUI layer; gives back what takes it down */
+export function babylonPanel(client: GameClientApi): () => void {
+	const panel = new Rectangle('gui.panel')
+	panel.width = '290px'
+	panel.adaptHeightToChildren = true
+	panel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT
+	panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP
+	panel.left = '24px'
+	panel.top = '90px'
+	panel.background = 'rgba(14, 16, 24, 0.86)'
+	panel.color = GOLD
+	panel.thickness = 2
+	panel.cornerRadius = 10
+	panel.shadowBlur = 16
+	panel.shadowColor = '#000'
+	panel.isPointerBlocker = true
+
+	const column = new StackPanel()
+	column.paddingLeft = column.paddingRight = '16px'
+	column.paddingTop = '12px'
+	column.paddingBottom = '14px'
+	panel.addControl(column)
+
+	column.addControl(words('War council', 22, GOLD, 34))
+	column.addControl(words('Drawn by Babylon GUI, in the canvas', 12, '#9c927a', 22))
+
+	const yours = words('', 15)
+	const ours = strengthBar('#4f9cff')
+	const theirs = words('', 15)
+	const enemy = strengthBar('#e2513c')
+	for (const control of [yours, ours.bar, theirs, enemy.bar]) column.addControl(control)
+
+	column.addControl(panelButton('gui.charge', 'Charge', () => client.session.send(charge.make({}))))
+	column.addControl(panelButton('gui.reset', 'Lay it out again', () => client.session.send(resetCamp.make({}))))
+
+	// the camera's height, a slider over the camera's distance
+	const height = words('', 14, INK, 30)
+	const slider = new Slider('gui.height')
+	slider.minimum = 14
+	slider.maximum = 60
+	slider.value = client.camera.pose().distance
+	slider.height = '20px'
+	slider.color = GOLD
+	slider.background = '#3a3020'
+	slider.thumbColor = INK
+	slider.borderColor = '#00000000'
+	const showHeight = (distance: number) => (height.text = `Camera ${Math.round(distance)} away`)
+	showHeight(slider.value)
+	slider.onValueChangedObservable.add((distance) => {
+		client.camera.setPose({ ...client.camera.pose(), distance })
+		showHeight(distance)
+	})
+	column.addControl(height)
+	column.addControl(slider)
+
+	// bars over every unit, not just the hurt: the client's own setting (Alt held does the same)
+	const row = new StackPanel()
+	row.isVertical = false
+	row.height = '34px'
+	row.paddingTop = '10px'
+	const box = new Checkbox('gui.bars')
+	box.width = box.height = '20px'
+	box.color = GOLD
+	box.background = '#2a2214'
+	box.isChecked = client.showAllBars
+	box.onIsCheckedChangedObservable.add((on) => (client.showAllBars = on))
+	const label = words('  Bars over everyone', 15, INK, 24)
+	label.width = '220px'
+	row.addControl(box)
+	row.addControl(label)
+	column.addControl(row)
+
+	client.gui.addControl(panel)
+
+	// the battle's numbers, read twice a second from the snapshot the screen has
+	// the most health each side had since it was laid out: what its bar is full at (the fallen are gone from the snapshot)
+	const most = new Map<number, number>()
+	const count = () => {
+		const { entities } = client.session.snapshot()
+		const side = (owner: number) => {
+			const alive = entities.filter((each) => each.owner === owner && each.health > 0)
+			const health = alive.reduce((sum, each) => sum + each.health, 0)
+			const full = alive.reduce((sum, each) => sum + (each.maxHealth ?? each.health), 0)
+			if (health >= (most.get(owner) ?? 0) || full > (most.get(owner) ?? 0)) most.set(owner, full)
+			return { alive: alive.length, share: health / (most.get(owner) || 1) }
+		}
+		const mine = side(PLAYER)
+		const others = side(ENEMY)
+		yours.text = `Yours: ${mine.alive} standing`
+		theirs.text = `Theirs: ${others.alive} standing`
+		ours.set(mine.share)
+		enemy.set(others.share)
+	}
+	count()
+	const timer = setInterval(count, 500)
+	return () => {
+		clearInterval(timer)
+		client.gui.removeControl(panel)
+		panel.dispose()
+	}
+}

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

@@ -0,0 +1,191 @@
+/**
+ * Babylon's GUI in the world, two ways:
+ *
+ * - On the screen, tied to a point of the world: a name and a health bar over every unit, each a control of the
+ *   client's GUI layer linked to a node (`linkWithMesh`) that a phase of the frame keeps over its unit
+ *   (`client.frame.add`, the unit where it is drawn between two ticks: `state.get(id).at(alpha)`)
+ * - In the world itself: a signpost in the field, a plane with a GUI texture of its own (`CreateForMesh`), drawn in
+ *   perspective with the scene, with a button on it
+ *
+ * The client's own plates are taken off the units while it is up (`client.unitHud.defs.set(type, null)`)
+ */
+import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial.js'
+import { Color3 } from '@babylonjs/core/Maths/math.color.js'
+import { CreateCylinder } from '@babylonjs/core/Meshes/Builders/cylinderBuilder.js'
+import { CreatePlane } from '@babylonjs/core/Meshes/Builders/planeBuilder.js'
+import { TransformNode } from '@babylonjs/core/Meshes/transformNode.js'
+import { AdvancedDynamicTexture } from '@babylonjs/gui/2D/advancedDynamicTexture.js'
+import { Button } from '@babylonjs/gui/2D/controls/button.js'
+import { Control } from '@babylonjs/gui/2D/controls/control.js'
+import { Rectangle } from '@babylonjs/gui/2D/controls/rectangle.js'
+import { StackPanel } from '@babylonjs/gui/2D/controls/stackPanel.js'
+import { TextBlock } from '@babylonjs/gui/2D/controls/textBlock.js'
+import type { GameClientApi } from '@v12-engine/client'
+import { PLAYER, UNIT } from '../common/units'
+import { gather } from './index'
+
+/** How high over a unit's feet its plate is, in the world's units */
+const OVER = 2.4
+/** Where the signpost stands */
+export const POST = { x: 31, z: 21 }
+
+/** A unit's plate: a node over the unit, and the controls linked to it */
+interface Plate {
+	node: TransformNode
+	frame: Rectangle
+	fill: Rectangle
+	name: TextBlock
+}
+
+/** Makes a unit's plate: its name over a bar, in its side's colour */
+function makePlate(client: GameClientApi, id: number, label: string, mine: boolean): Plate {
+	const node = new TransformNode(`gui.plate.${id}`, client.scene)
+	const frame = new Rectangle()
+	frame.width = '86px'
+	frame.height = '30px'
+	frame.thickness = 0
+	frame.isPointerBlocker = false
+	const column = new StackPanel()
+	frame.addControl(column)
+	const name = new TextBlock(undefined, label)
+	name.height = '16px'
+	name.fontSize = 12
+	name.fontFamily = 'Georgia, serif'
+	name.color = mine ? '#cfe3ff' : '#ffd0c6'
+	name.outlineWidth = 3
+	name.outlineColor = '#000'
+	column.addControl(name)
+	const bar = new Rectangle()
+	bar.height = '8px'
+	bar.width = '70px'
+	bar.thickness = 1
+	bar.color = '#000'
+	bar.background = '#1a1a1acc'
+	bar.cornerRadius = 2
+	const fill = new Rectangle()
+	fill.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT
+	fill.thickness = 0
+	fill.background = mine ? '#4fd36b' : '#e2513c'
+	bar.addControl(fill)
+	column.addControl(bar)
+	client.gui.addControl(frame)
+	frame.linkWithMesh(node)
+	return { node, frame, fill, name }
+}
+
+/** The signpost's post: a log of the shared art (`resources/wood_log_a`, lying along z, 0.72 across and 1.35 long), stood on end */
+const POST_LOG = { id: 990_001, model: 'resources/wood_log_a.glb', thick: 0.26, long: 2.8 }
+
+/** The signpost: a post and a board, the board's face a GUI texture of its own with a button to gather the army there */
+function signpost(client: GameClientApi): () => void {
+	const { scene } = client
+	const wood = new StandardMaterial('gui.wood', scene)
+	wood.diffuseColor = new Color3(0.42, 0.29, 0.16)
+	// a plain post while the log loads, inside it once it has
+	const post = CreateCylinder('gui.post', { height: POST_LOG.long, diameter: POST_LOG.thick - 0.04 }, scene)
+	post.position.set(POST.x, POST_LOG.long / 2, POST.z + 0.3)
+	post.material = wood
+	// the log, scenery of this screen's alone (`client.doodads`), tipped up on end round its middle
+	const across = POST_LOG.thick / 0.72
+	client.doodads.add({
+		id: POST_LOG.id,
+		model: POST_LOG.model,
+		x: POST.x,
+		// a little behind the board's middle, which leans back over it
+		z: POST.z + 0.3,
+		y: POST_LOG.long / 2 - 0.15,
+		yaw: 0,
+		pitch: Math.PI / 2,
+		scale: [across, across, POST_LOG.long / 1.35]
+	})
+	const board = CreatePlane('gui.board', { width: 4, height: 2 }, scene)
+	board.position.set(POST.x, 3.4, POST.z)
+	// its face (a plane's is towards -z) to the camera's usual way, from the south, a little turned and leant back
+	board.rotation.set(0.6, -0.3, 0)
+	const texture = AdvancedDynamicTexture.CreateForMesh(board, 640, 320)
+	const face = new Rectangle()
+	face.background = '#2b2014'
+	face.color = '#d9b45a'
+	face.thickness = 10
+	face.cornerRadius = 18
+	texture.addControl(face)
+	const column = new StackPanel()
+	face.addControl(column)
+	const title = new TextBlock(undefined, 'RALLY POINT')
+	title.height = '90px'
+	title.fontSize = 64
+	title.fontFamily = 'Georgia, serif'
+	title.color = '#f1e4c3'
+	column.addControl(title)
+	const go = Button.CreateSimpleButton('gui.gatherHere', 'Gather here')
+	go.width = '400px'
+	go.height = '110px'
+	go.fontSize = 52
+	go.fontFamily = 'Georgia, serif'
+	go.color = '#d9b45a'
+	go.background = '#4a3418'
+	go.cornerRadius = 14
+	go.thickness = 6
+	go.paddingTop = '14px'
+	go.onPointerEnterObservable.add(() => (go.background = '#6a4c22'))
+	go.onPointerOutObservable.add(() => (go.background = '#4a3418'))
+	go.onPointerUpObservable.add(() => client.session.send(gather.make({ at: { x: POST.x - 2, z: POST.z - 2 } })))
+	column.addControl(go)
+	return () => {
+		client.doodads.remove(POST_LOG.id)
+		texture.dispose()
+		for (const each of [board, post]) each.dispose()
+		wood.dispose()
+	}
+}
+
+/** Puts the plates and the signpost up; gives back what takes them away and gives the units their own plates back */
+export function babylonWorld(client: GameClientApi): () => void {
+	const types = [UNIT.footman, UNIT.archer, UNIT.mage, UNIT.knight]
+	for (const type of types) client.unitHud.defs.set(type, null)
+	const plates = new Map<number, Plate>()
+	const names: Record<string, string> = { footman: 'Footman', archer: 'Archer', mage: 'Mage', knight: 'Knight' }
+	const stop = client.frame.add(
+		{
+			name: 'gui.plates',
+			run: (frame) => {
+				const seen = new Set<number>()
+				for (const entity of client.state.entities.values()) {
+					if (entity.hidden || !entity.inSight || entity.health <= 0) continue
+					seen.add(entity.id)
+					let plate = plates.get(entity.id)
+					if (!plate) {
+						const label =
+							entity.state.name === 'hero'
+								? 'Sir Aldwin'
+								: entity.state.name === 'warlord'
+									? 'The Warlord'
+									: (names[entity.state.type] ?? entity.state.type)
+						plate = makePlate(client, entity.id, label, entity.owner === PLAYER)
+						plates.set(entity.id, plate)
+					}
+					const at = entity.at(frame.alpha)
+					plate.node.position.set(at.x, OVER, at.z)
+					plate.fill.width = `${Math.max(0, entity.health / Math.max(1, entity.maxHealth)) * 100}%`
+				}
+				for (const [id, plate] of plates) {
+					if (seen.has(id)) continue
+					plate.frame.dispose()
+					plate.node.dispose()
+					plates.delete(id)
+				}
+			}
+		},
+		{ after: 'simulate' }
+	)
+	const post = signpost(client)
+	return () => {
+		stop()
+		post()
+		for (const plate of plates.values()) {
+			plate.frame.dispose()
+			plate.node.dispose()
+		}
+		for (const type of types) client.unitHud.defs.set(type, undefined)
+	}
+}

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

@@ -0,0 +1,95 @@
+/**
+ * A part of the HUD in plain HTML: no framework, an element the HUD gives (`HudWidgetDef.mount`) and the part fills,
+ * keeps up to date and empties again when it is taken away. A roster of the player's army: a row a unit, its health
+ * as a bar, the selected ones lit. A click on a row selects the unit and looks at it. What it shows it reads from the
+ * snapshot (the units) and from the HUD's own state (`client.ui.watch(() => client.ui.selection(), …)`)
+ */
+import type { GameClientApi, HudWidgetDef } from '@v12-engine/client'
+
+const STYLE = `
+.gui-roster { pointer-events: auto; width: 230px; padding: 10px 10px 8px; border-radius: 8px; background: rgba(12, 14, 20, 0.88);
+	border: 1px solid #3c4252; color: #e8e2d0; font: 13px/1.2 system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.45) }
+.gui-roster h3 { margin: 0 0 2px; font: 600 15px system-ui, sans-serif; color: #f2d58a }
+.gui-roster small { display: block; margin-bottom: 8px; color: #8a8f9c; font-size: 11px }
+.gui-roster ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; max-height: 360px; overflow: auto }
+.gui-roster li { display: grid; grid-template-columns: 1fr 70px; gap: 8px; align-items: center; padding: 4px 6px; border-radius: 5px; cursor: pointer }
+.gui-roster li:hover { background: #262b38 }
+.gui-roster li.picked { background: #33405e; box-shadow: inset 0 0 0 1px #6f8fd6 }
+.gui-roster .bar { height: 6px; border-radius: 3px; background: #1b1d24; overflow: hidden }
+.gui-roster .bar i { display: block; height: 100%; background: linear-gradient(90deg, #3fae5a, #7fdc6e) }
+.gui-roster li.low .bar i { background: linear-gradient(90deg, #c0392b, #e67e22) }
+`
+
+/** The roster as a part of the HUD: on the left over the map */
+export function rosterPart(client: GameClientApi): HudWidgetDef {
+	return {
+		id: 'gui.roster',
+		place: 'left',
+		mount(element) {
+			const style = document.createElement('style')
+			style.textContent = STYLE
+			const panel = document.createElement('div')
+			panel.className = 'gui-roster'
+			panel.innerHTML = '<h3>Roster</h3><small>Plain HTML: a click selects and looks</small><ol></ol>'
+			const list = panel.querySelector('ol')!
+			element.append(style, panel)
+
+			/** The rows by unit, made as units come and taken away as they go */
+			const rows = new Map<number, { row: HTMLLIElement; fill: HTMLElement }>()
+			let picked = new Set<number>()
+
+			const draw = () => {
+				const mine = client.session.snapshot().entities.filter((each) => each.owner === client.session.playerId && each.health > 0)
+				const seen = new Set<number>()
+				for (const unit of mine) {
+					seen.add(unit.id)
+					let shown = rows.get(unit.id)
+					if (!shown) {
+						const row = document.createElement('li')
+						const name = document.createElement('span')
+						name.textContent = unit.name === 'hero' ? 'Sir Aldwin' : (client.session.registry.unit(unit.type)?.name ?? unit.type)
+						const bar = document.createElement('div')
+						bar.className = 'bar'
+						const fill = document.createElement('i')
+						bar.append(fill)
+						row.append(name, bar)
+						row.onclick = () => {
+							client.controller.select([unit.id])
+							const now = client.session.snapshot().entities.find((each) => each.id === unit.id)
+							if (now) client.camera.lookAt({ x: now.x, z: now.z }, { seconds: 0.5 })
+						}
+						list.append(row)
+						shown = { row, fill }
+						rows.set(unit.id, shown)
+					}
+					const share = unit.health / Math.max(1, unit.maxHealth ?? unit.health)
+					shown.fill.style.width = `${share * 100}%`
+					shown.row.classList.toggle('low', share < 0.35)
+					shown.row.classList.toggle('picked', picked.has(unit.id))
+				}
+				for (const [id, shown] of rows) {
+					if (seen.has(id)) continue
+					shown.row.remove()
+					rows.delete(id)
+				}
+			}
+
+			// the health from the snapshot, four times a second; the selection as the HUD's state changes
+			draw()
+			const timer = setInterval(draw, 250)
+			const stop = client.ui.watch(
+				() => client.ui.selection(),
+				(selection) => {
+					picked = new Set(selection.map((item) => item.id))
+					draw()
+				}
+			)
+			return () => {
+				clearInterval(timer)
+				stop()
+				panel.remove()
+				style.remove()
+			}
+		}
+	}
+}

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

@@ -0,0 +1,143 @@
+/**
+ * The interface examples on the rules' side. An interface is the screen's (`./looks.ts` and the files beside it): the
+ * rules here only lay out a camp to look at, two small armies facing each other, and the commands the interfaces'
+ * buttons send (charge, lay it out again, gather). Everything the interfaces show they read from the snapshots the
+ * screen is sent, and everything they do goes back as a command, as a click on the HUD's own card does
+ */
+import { defineCommand, exactMath, type Game, point, type World } from '@v12-engine/engine'
+import { ENEMY, PLAYER, UNIT } from '../common/units'
+import { type ExampleCategory, exampleField } from '../define'
+
+/** Where each side stands */
+const OURS = { x: 24, z: 17 }
+const THEIRS = { x: 24, z: 32 }
+
+/** The camp: a knight with footmen, archers and a mage on one side; footmen, archers and a knight on the other */
+export function camp(world: World): void {
+	world.spawn(UNIT.knight, { at: { x: OURS.x, z: OURS.z + 2 }, owner: PLAYER, facing: 0, name: 'hero' })
+	world.spawn(UNIT.mage, { at: { x: OURS.x + 3, z: OURS.z - 2.5 }, owner: PLAYER, facing: 0 })
+	for (let i = 0; i < 6; i++) world.spawn(UNIT.footman, { at: { x: OURS.x - 3.5 + i * 1.4, z: OURS.z }, owner: PLAYER, facing: 0 })
+	for (let i = 0; i < 4; i++) world.spawn(UNIT.archer, { at: { x: OURS.x - 2.1 + i * 1.4, z: OURS.z - 2 }, owner: PLAYER, facing: 0 })
+	world.spawn(UNIT.knight, { at: { x: THEIRS.x, z: THEIRS.z - 2 }, owner: ENEMY, facing: Math.PI, name: 'warlord' })
+	for (let i = 0; i < 6; i++) world.spawn(UNIT.footman, { at: { x: THEIRS.x - 3.5 + i * 1.4, z: THEIRS.z }, owner: ENEMY, facing: Math.PI })
+	for (let i = 0; i < 4; i++) world.spawn(UNIT.archer, { at: { x: THEIRS.x - 2.1 + i * 1.4, z: THEIRS.z + 2 }, owner: ENEMY, facing: Math.PI })
+}
+
+/** Both sides at each other, fighting what they meet */
+export const charge = defineCommand('gui.charge', {}, (world) => {
+	for (const unit of world.units.values()) {
+		if (!unit.alive || (unit.owner !== PLAYER && unit.owner !== ENEMY)) continue
+		unit.order('attackMove', { x: unit.pos.x, z: unit.owner === PLAYER ? THEIRS.z + 4 : OURS.z - 4 })
+	}
+})
+
+/** Every unit taken away and the camp laid out again */
+export const resetCamp = defineCommand('gui.reset', {}, (world) => {
+	for (const unit of [...world.units.values()]) if (unit.alive) world.kill(unit, undefined, false, 'removed')
+	camp(world)
+})
+
+/** The player's units gathered round a spot, in a loose ring: what the interfaces' own Gather buttons and keys send */
+export const gather = defineCommand('gui.gather', { at: point }, (world, player, { at }) => {
+	const mine = world.find({ owner: player }).filter((unit) => unit.alive)
+	mine.forEach((unit, i) => {
+		const ring = Math.floor(Math.sqrt(i))
+		const angle = i * 2.4
+		unit.order('move', { x: at.x + exactMath.cos(angle) * ring * 1.3, z: at.z + exactMath.sin(angle) * ring * 1.3 })
+	})
+})
+
+/** Every map of the interface examples: the camp's field, two sides, a little room round them */
+const field = (name: string) => () => exampleField({ name, players: 2 })
+
+/** An example of the category: the camp on a field, its words and its files */
+const example = (id: string, title: string, summary: string, tags: string[], files: string[] = []) => ({
+	id: `gui-${id}`,
+	category: 'gui' as const,
+	title,
+	summary,
+	tags,
+	map: field(title),
+	start: (world: World) => camp(world),
+	source: ['examples/gui/index.ts', 'examples/gui/looks.ts', ...files.map((file) => `examples/gui/${file}`)]
+})
+
+export const category: ExampleCategory = {
+	rules: (game: Game<any>) => {
+		game.command(charge)
+		game.command(resetCamp)
+		game.command(gather)
+	},
+	examples: [
+		example(
+			'babylon-screen',
+			'Babylon GUI on the screen',
+			'A panel drawn with Babylon’s own GUI (@babylonjs/gui) on the game’s full-screen layer: text that follows the battle, buttons, a slider and a checkbox, all in the canvas.',
+			['babylon', 'gui', 'AdvancedDynamicTexture', 'fullscreen', 'button', 'slider', 'checkbox', 'canvas'],
+			['babylonScreen.ts']
+		),
+		example(
+			'babylon-world',
+			'Babylon GUI in the world',
+			'Babylon GUI tied to the 3D world: a name and a health bar over every unit (linkWithMesh), and a signpost in the field with a panel on it you can click (a texture on a mesh).',
+			['babylon', 'gui', 'linkWithMesh', 'CreateForMesh', 'world space', 'health bar', 'name plate', '3D panel'],
+			['babylonWorld.ts']
+		),
+		example(
+			'solid',
+			'A HUD part in Solid',
+			'A part of the HUD written as a Solid component (solid-js/html, no JSX build step) with the client’s kit: each side’s strength as a meter, the selection by type, buttons that select and send.',
+			['solid', 'component', 'hud widget', 'kit', 'signals', 'Meter', 'Button', 'html'],
+			['solidPart.ts']
+		),
+		example(
+			'html',
+			'A HUD part in plain HTML',
+			'A roster of your army drawn with plain DOM, no framework: health bars kept up to date, a click on a row selects the unit and looks at it.',
+			['html', 'dom', 'mount', 'hud widget', 'roster', 'vanilla', 'ui.watch'],
+			['htmlPart.ts']
+		),
+		example(
+			'hud-layout',
+			'The HUD rearranged',
+			'The HUD’s own parts moved, hidden and restyled while the game runs: the console centred or in the corners, a theme, parts on and off, its size and the minimap’s, or none of it at all.',
+			['hud', 'layout', 'console', 'corners', 'theme', 'skin', 'hide', 'scale', 'places'],
+			['layout.ts']
+		),
+		example(
+			'plates',
+			'Plates over units',
+			'The plates over units’ heads, from bars when hurt to a hero card with a face, a level and mana: pick a design and how it is drawn (canvas, HTML or Babylon GUI).',
+			['unit hud', 'plates', 'health bar', 'name plate', 'unitHud', 'UnitHudDef', 'nameplate'],
+			['plates.ts']
+		),
+		example(
+			'minimap',
+			'A minimap of your own',
+			'The HUD’s minimap replaced by one drawn on a canvas of your own: the field, the units as dots, the view’s frame; click it to look there. Or keep the client’s and draw a layer on it.',
+			['minimap', 'canvas', 'radar', 'map', 'addMinimapLayer', 'replace a part'],
+			['minimap.ts']
+		),
+		example(
+			'radial',
+			'A radial command menu',
+			'Right-click the ground with units selected: a ring of orders opens where you clicked (move, attack there, hold, stop, gather). Your own menu in place of the smart order.',
+			['radial', 'pie menu', 'command menu', 'right click', 'orders', 'onRightClick', 'attach'],
+			['radial.ts']
+		),
+		example(
+			'own-interface',
+			'An interface of your own',
+			'The whole HUD gone and an interface of the game’s own in its place: a top bar, a unit card for what is selected, order buttons, and a log of what happened.',
+			['custom hud', 'own interface', 'hideHud', 'replace the hud', 'selection', 'card', 'html'],
+			['ownInterface.ts']
+		),
+		example(
+			'keys',
+			'Keys of your own',
+			'Actions of the game’s own on keys the player can rebind: R gathers your army, C makes it cheer, Z looks at the hero. A legend shows the keys; rebind one and it follows.',
+			['keys', 'hotkeys', 'actions', 'bindings', 'rebind', 'shortcuts', 'keyboard'],
+			['keys.ts']
+		)
+	]
+}