@v12-engine/create 0.1.1 → 0.4.0

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

@@ -0,0 +1,721 @@
+/**
+ * The RTS examples on the client's side: how their units and buildings look (the shared art's characters, KayKit's,
+ * and its buildings, Quaternius's), the HUD's chips for gold and lumber, and each example's controls (`CategoryLooks`)
+ */
+import sizesByPath from '@v12-engine/assets/sizes.json'
+import { type AbilityLooks, type GameClientApi, type ModelDef, presetFx, type UnitLook } from '@v12-engine/client'
+import { cargo, snapshotOf } from '@v12-engine/engine'
+import { button, readout, type CategoryLooks } from '../../shell/look'
+import { character, hold, ONE_HANDED, person, TWO_HANDED } from '../common/looks'
+import { ENEMY, PLAYER, UNIT } from '../common/units'
+import { attackNow, HOME, resetAi, THEIRS } from './ai'
+import { backToWork, research, train } from './base'
+import { build, resetBuild } from './build'
+import { CARRY, carry } from './carry'
+import { attackCamp, pullBack, resetCreeps } from './creeps'
+import { RTS } from './data'
+import { resetAirlift } from './airlift'
+import { resetFerry } from './ferry'
+import { gnollsCome, resetGarrison, TOWER } from './garrison'
+import { giveXp, hunt, learnSpell, resetHero } from './hero'
+import { buy, resetShop } from './shop'
+import { toKeep } from './tech'
+import { rally, resetTrain, smithy } from './train'
+import { edgeAt, riverAt } from './waterside'
+
+const STONE: [number, number, number] = [0.66, 0.63, 0.58]
+const WOOD: [number, number, number] = [0.45, 0.31, 0.18]
+const GOLD: [number, number, number] = [1, 0.8, 0.2]
+const STRAW: [number, number, number] = [0.8, 0.66, 0.32]
+
+/** Every model of the shared art by its path, with its size in its own units: across, up, deep */
+const sizes = sizesByPath as Record<string, number[]>
+
+/** A building of the shared art made `width` across at its widest, a lamp over its door (the packs' buildings face +z) */
+function building(src: string, width: number): ModelDef {
+	const [across = 1, up = 1, deep = 1] = sizes[src] ?? []
+	return {
+		src,
+		scale: width / Math.max(across, deep),
+		lights: [{ name: 'door', offset: [0, up * 0.3, deep / 2 + 0.12], color: [1, 0.74, 0.45], intensity: 1.3, range: 5, flicker: 0.06 }],
+		// over its roof: where it smokes and burns when hurt
+		points: { roof: { offset: [0, up * 0.8, 0] } }
+	}
+}
+
+/** A building's look: its model, its parts while that loads, smoke and fire as it is hurt, rising as it is built, crumbling as it falls */
+const structure = (src: string, width: number, height: number, shapes: UnitLook['shapes']): UnitLook => ({
+	height,
+	model: building(src, width),
+	shapes,
+	damaged: [
+		{ below: 0.5, fx: 'smoke', at: 'roof', params: { size: 0.8, darkness: 0.6 } },
+		{ below: 0.25, fx: 'fire', at: 'roof', params: { size: 0.9, smoke: false } }
+	],
+	death: { collapse: { look: 'crumble', pieces: 18, dust: true } },
+	// it goes up from the ground with a glowing edge, dust as it is laid out and done, sparks off the hammers
+	construction: {
+		motion: 'reveal',
+		stages: [{ at: 0, fx: 'dust' }],
+		working: { fx: 'spark-burst', at: 'handslot.r', params: { count: 8, size: 0.6 } },
+		done: { fx: 'dust' }
+	}
+})
+
+/** The trees, by kind: oaks, pines and columnar trees of the Stylized Trees pack, one each in turn */
+const FOREST = ['oak_5', 'pine_1', 'columnar_1', 'columnar_2', 'pine_3', 'pine_4']
+const TREE_LOOKS: Record<string, ModelDef> = Object.fromEntries(
+	FOREST.map((kind, i) => [String(i + 1).padStart(3, '0'), { src: `trees/${kind}.glb`, scale: kind.startsWith('oak') ? 0.6 : 1 }])
+)
+
+const HULL: [number, number, number] = [0.36, 0.22, 0.13]
+const DECK: [number, number, number] = [0.62, 0.45, 0.27]
+const CANVAS: [number, number, number] = [0.93, 0.9, 0.8]
+const IRON: [number, number, number] = [0.25, 0.25, 0.27]
+/** How far the ship's sails are swung off square, as they are trimmed to a wind from the side */
+const TRIM = 0.45
+
+/** Solids made `k` times as big, and as far from the middle */
+const grown = (k: number, shapes: UnitLook['shapes']): UnitLook['shapes'] =>
+	shapes.map((each) => ({
+		...each,
+		size: [each.size[0] * k, each.size[1] * k, each.size[2] * k],
+		offset: [each.offset[0] * k, each.offset[1] * k, each.offset[2] * k]
+	}))
+
+/**
+ * The transport ship, built of solids, its bow to +z: a rounded hull half under the water, a deck and rails, a raised
+ * stern with its cabin, a mast with two sails (the lower in canvas, the upper in its side's colour), a bowsprit and a
+ * pennant. The shared art has no ship: a real model would be better
+ */
+const SHIP: UnitLook['shapes'] = grown(1.25, [
+	// the hull: a long rounded body, the bow narrowed by a second one forward
+	{ shape: 'sphere', size: [2, 1.3, 4.6], offset: [0, 0.2, -0.2], color: HULL },
+	{ shape: 'sphere', size: [1.5, 1.1, 2.4], offset: [0, 0.32, 1.5], color: HULL },
+	// a stripe of its side's colour along the hull, just over the water
+	{ shape: 'box', size: [2.02, 0.14, 3], offset: [0, 0.5, -0.3], color: 'team' },
+	// the deck, the rails along it
+	{ shape: 'box', size: [1.7, 0.1, 3.6], offset: [0, 0.78, -0.1], color: DECK },
+	{ shape: 'box', size: [0.08, 0.3, 3.4], offset: [0.86, 0.95, -0.2], color: HULL },
+	{ shape: 'box', size: [0.08, 0.3, 3.4], offset: [-0.86, 0.95, -0.2], color: HULL },
+	// the raised stern, its cabin and lantern
+	{ shape: 'box', size: [1.76, 0.5, 1.1], offset: [0, 1.05, -1.95], color: HULL },
+	{ shape: 'box', size: [1.2, 0.55, 0.8], offset: [0, 1.55, -1.9], color: DECK },
+	{ shape: 'pyramid', size: [1.4, 0.4, 1], offset: [0, 2.02, -1.9], color: 'team' },
+	{ shape: 'sphere', size: [0.18, 0.24, 0.18], offset: [0, 1.5, -2.55], color: [1, 0.8, 0.4] },
+	// the mast, its yards and crow's nest
+	{ shape: 'cylinder', size: [0.16, 4.2, 0.16], offset: [0, 2.9, 0.25], color: HULL },
+	{ shape: 'cylinder', size: [0.09, 2.3, 0.09], offset: [0, 3.65, 0.3], color: HULL, tilt: Math.PI / 2, turn: Math.PI / 2 + TRIM },
+	{ shape: 'cylinder', size: [0.08, 1.6, 0.08], offset: [0, 4.55, 0.3], color: HULL, tilt: Math.PI / 2, turn: Math.PI / 2 + TRIM },
+	{ shape: 'cylinder', size: [0.42, 0.22, 0.42], offset: [0, 4.95, 0.25], color: DECK },
+	// the sails: the big one in canvas, bellied forward a little; the top one in its side's colour
+	{ shape: 'box', size: [2.2, 1.9, 0.06], offset: [0, 2.68, 0.4], color: CANVAS, tilt: -0.08, turn: TRIM },
+	{ shape: 'box', size: [1.5, 0.85, 0.06], offset: [0, 4.12, 0.36], color: 'team', tilt: -0.06, turn: TRIM },
+	// the bowsprit, and a jib from it to the mast
+	{ shape: 'cylinder', size: [0.1, 1.7, 0.1], offset: [0, 1.05, 2.75], color: HULL, tilt: 1.15 },
+	{ shape: 'box', size: [0.05, 1.4, 1.2], offset: [0, 1.85, 1.85], color: CANVAS, tilt: -0.55 },
+	// a pennant at the masthead, and a few crates on deck
+	{ shape: 'box', size: [0.04, 0.24, 0.6], offset: [0, 5.2, -0.05], color: 'team' },
+	{ shape: 'box', size: [0.45, 0.4, 0.45], offset: [0.45, 1.03, -0.85], color: [0.55, 0.4, 0.22] },
+	{ shape: 'box', size: [0.4, 0.35, 0.4], offset: [-0.5, 1.0, 1.05], color: [0.55, 0.4, 0.22] },
+	{ shape: 'cylinder', size: [0.36, 0.45, 0.36], offset: [-0.45, 1.05, -0.85], color: [0.45, 0.3, 0.16] }
+])
+
+/**
+ * The zeppelin, built of solids, its nose to +z: a long canvas envelope ringed with bands of its side's colour, tail
+ * fins, a wooden gondola slung under it on struts, two engines with propellers either side. The shared art has no
+ * airship: a real model would be better
+ */
+const ZEPPELIN: UnitLook['shapes'] = [
+	// the envelope, its nose and tail rounded by smaller ones
+	{ shape: 'sphere', size: [2.3, 2.1, 5.4], offset: [0, 2.9, 0], color: CANVAS },
+	{ shape: 'cylinder', size: [2.36, 0.3, 2.16], offset: [0, 2.9, 1.2], color: 'team', tilt: Math.PI / 2 },
+	{ shape: 'cylinder', size: [2.36, 0.3, 2.16], offset: [0, 2.9, -1.2], color: 'team', tilt: Math.PI / 2 },
+	{ shape: 'sphere', size: [0.5, 0.5, 0.4], offset: [0, 2.9, 2.62], color: IRON },
+	// the tail fins: up, down and either side
+	{ shape: 'box', size: [0.07, 1.1, 1.1], offset: [0, 4.05, -2.3], color: 'team', tilt: -0.3 },
+	{ shape: 'box', size: [0.07, 0.9, 1], offset: [0, 1.85, -2.3], color: 'team', tilt: 0.3 },
+	{ shape: 'box', size: [3, 0.07, 1], offset: [0, 2.9, -2.35], color: 'team' },
+	// the gondola under it, its windows and the struts it hangs from
+	{ shape: 'box', size: [0.95, 0.6, 2.2], offset: [0, 1.05, 0.25], color: HULL },
+	{ shape: 'box', size: [1.02, 0.12, 2.3], offset: [0, 1.4, 0.25], color: DECK },
+	{ shape: 'box', size: [0.97, 0.18, 1.6], offset: [0, 1.15, 0.35], color: [1, 0.85, 0.5] },
+	{ shape: 'sphere', size: [0.95, 0.6, 0.7], offset: [0, 1.05, 1.32], color: HULL },
+	{ shape: 'cylinder', size: [0.06, 0.8, 0.06], offset: [0.4, 1.75, 1], color: IRON, tilt: -0.2 },
+	{ shape: 'cylinder', size: [0.06, 0.8, 0.06], offset: [-0.4, 1.75, 1], color: IRON, tilt: -0.2 },
+	{ shape: 'cylinder', size: [0.06, 0.8, 0.06], offset: [0.4, 1.75, -0.6], color: IRON, tilt: 0.2 },
+	{ shape: 'cylinder', size: [0.06, 0.8, 0.06], offset: [-0.4, 1.75, -0.6], color: IRON, tilt: 0.2 },
+	// the engines on outriggers, their propellers behind
+	{ shape: 'cylinder', size: [0.07, 1.6, 0.07], offset: [0, 1.6, -0.5], color: IRON, tilt: Math.PI / 2, turn: Math.PI / 2 },
+	{ shape: 'cylinder', size: [0.3, 0.6, 0.3], offset: [0.85, 1.6, -0.5], color: IRON, tilt: Math.PI / 2 },
+	{ shape: 'cylinder', size: [0.3, 0.6, 0.3], offset: [-0.85, 1.6, -0.5], color: IRON, tilt: Math.PI / 2 },
+	{ shape: 'box', size: [0.9, 0.08, 0.04], offset: [0.85, 1.6, -0.85], color: DECK, turn: 0 },
+	{ shape: 'box', size: [0.08, 0.9, 0.04], offset: [0.85, 1.6, -0.85], color: DECK },
+	{ shape: 'box', size: [0.9, 0.08, 0.04], offset: [-0.85, 1.6, -0.85], color: DECK },
+	{ shape: 'box', size: [0.08, 0.9, 0.04], offset: [-0.85, 1.6, -0.85], color: DECK }
+]
+
+/** How each unit and building of the RTS examples looks */
+const looks: Record<string, UnitLook> = {
+	[RTS.peasant]: {
+		height: 1.5,
+		model: character('barbarian', 0.58, { hold: [hold('axe_1handed')] }),
+		attacks: [ONE_HANDED],
+		shapes: [
+			{ shape: 'cylinder', size: [0.5, 0.8, 0.5], offset: [0, 0.4, 0], color: 'team' },
+			{ shape: 'sphere', size: [0.38, 0.38, 0.38], offset: [0, 0.98, 0], color: [0.87, 0.68, 0.53] },
+			{ shape: 'cone', size: [0.5, 0.22, 0.5], offset: [0, 1.22, 0], color: STRAW },
+			// what it carries home: a lump of gold, a log
+			{ shape: 'sphere', size: [0.42, 0.36, 0.42], offset: [0, 0.75, -0.34], color: GOLD, carrying: 'gold' },
+			{ shape: 'cylinder', size: [0.22, 0.9, 0.22], offset: [0, 0.8, -0.34], color: WOOD, tilt: Math.PI / 2, turn: Math.PI / 2, carrying: 'lumber' }
+		]
+	},
+	[RTS.footman]: {
+		height: 1.8,
+		model: character('knight', 0.7, { hold: [hold('sword_1handed'), hold('shield_round', 'l')] }),
+		attacks: [ONE_HANDED],
+		shapes: person(1.8)
+	},
+	[RTS.rifleman]: {
+		height: 1.8,
+		model: character('ranger', 0.7, { hold: [hold('crossbow_2handed')], animations: { attack: 'Ranged_2H_Shoot' } }),
+		shot: { color: [0.4, 0.4, 0.42], size: 0.18 },
+		shapes: person(1.8)
+	},
+	[RTS.paladin]: {
+		height: 2.3,
+		model: character('knight', 0.92, { hold: [hold('sword_2handed')], animations: { attack: 'Melee_2H_Attack_Chop' } }),
+		attacks: [TWO_HANDED],
+		shapes: person(2.3)
+	},
+	[RTS.gnoll]: {
+		height: 1.6,
+		model: character('rogue_hooded', 0.62, { hold: [hold('axe_1handed')] }),
+		attacks: [ONE_HANDED],
+		shapes: person(1.6, [0.5, 0.38, 0.22])
+	},
+	[RTS.brute]: {
+		height: 2,
+		model: character('barbarian', 0.82, { hold: [hold('axe_2handed')] }),
+		attacks: [TWO_HANDED],
+		shapes: person(2, [0.45, 0.33, 0.2])
+	},
+	[RTS.ogre]: {
+		height: 3,
+		model: character('skeleton_warrior', 1.2, {
+			hold: [
+				{ src: 'skeleton-gear/axe.glb', at: 'handslot.r' },
+				{ src: 'skeleton-gear/shield_large_a.glb', at: 'handslot.l' }
+			]
+		}),
+		attacks: [ONE_HANDED],
+		shapes: person(3, [0.62, 0.52, 0.4])
+	},
+	[RTS.townhall]: structure('rts/castle_2.glb', 3.9, 4.6, [
+		{ shape: 'box', size: [3.6, 1.9, 3.6], offset: [0, 0.95, 0], color: STONE },
+		{ shape: 'pyramid', size: [4.4, 1.7, 4.4], offset: [0, 2.75, 0], color: 'team' }
+	]),
+	[RTS.keep]: structure('rts/castle_fortress.glb', 4.1, 6.6, [
+		{ shape: 'box', size: [3.7, 2.4, 3.7], offset: [0, 1.2, 0], color: STONE },
+		{ shape: 'pyramid', size: [4.4, 1.7, 4.4], offset: [0, 3.25, 0], color: 'team' }
+	]),
+	[RTS.farm]: structure('rts/small_farm.glb', 2.1, 2.3, [
+		{ shape: 'box', size: [1.7, 0.9, 1.7], offset: [0, 0.45, 0], color: WOOD },
+		{ shape: 'pyramid', size: [2.1, 0.95, 2.1], offset: [0, 1.37, 0], color: STRAW }
+	]),
+	[RTS.barracks]: structure('rts/barracks.glb', 3, 3.4, [
+		{ shape: 'box', size: [2.7, 1.6, 2.7], offset: [0, 0.8, 0], color: STONE },
+		{ shape: 'box', size: [2.9, 0.35, 2.9], offset: [0, 1.75, 0], color: 'team' }
+	]),
+	[RTS.blacksmith]: structure('village/blacksmith.glb', 2.9, 3.3, [
+		{ shape: 'box', size: [2.7, 1.4, 2.7], offset: [0, 0.7, 0], color: STONE },
+		{ shape: 'pyramid', size: [3.1, 1, 3.1], offset: [0, 1.9, 0], color: [0.2, 0.19, 0.2] }
+	]),
+	[RTS.tower]: {
+		...structure('rts/watch_tower.glb', 1.7, 4.4, [
+			{ shape: 'cylinder', size: [1.5, 2.8, 1.5], offset: [0, 1.4, 0], color: STONE },
+			{ shape: 'cone', size: [2, 1, 2], offset: [0, 3.8, 0], color: 'team' }
+		]),
+		// its arrows leave from its top
+		model: { ...building('rts/watch_tower.glb', 1.7), points: { launch: { offset: [0, 3.6, 0] }, roof: { offset: [0, 3.5, 0] } } },
+		shot: { color: [0.85, 0.75, 0.55], size: 0.2 }
+	},
+	[RTS.altar]: structure('rts/temple_3.glb', 2.9, 3.2, [
+		{ shape: 'box', size: [2.8, 0.5, 2.8], offset: [0, 0.25, 0], color: STONE },
+		{ shape: 'sphere', size: [0.8, 0.8, 0.8], offset: [0, 1.6, 0], color: 'team' }
+	]),
+	[RTS.shop]: {
+		height: 2.2,
+		model: building('rts/market_stalls.glb', 3.2),
+		shapes: [
+			{ shape: 'box', size: [3, 0.9, 2], offset: [0, 0.45, 0], color: WOOD },
+			{ shape: 'pyramid', size: [3.2, 0.8, 2.4], offset: [0, 1.4, 0], color: [0.75, 0.3, 0.25] }
+		]
+	},
+	[RTS.goldmine]: {
+		height: 3.2,
+		model: building('rts/mine.glb', 3.9),
+		shapes: [
+			{ shape: 'pyramid', size: [3.9, 2.6, 3.9], offset: [0, 1.3, 0], color: [0.36, 0.33, 0.3] },
+			{ shape: 'sphere', size: [0.6, 0.5, 0.6], offset: [1.4, 0.25, -1.9], color: GOLD }
+		],
+		// over a mine: nothing
+		unitHud: { plates: [] }
+	},
+	[RTS.tree]: {
+		height: 3,
+		looks: TREE_LOOKS,
+		mix: Object.keys(TREE_LOOKS),
+		vary: { scale: 0.25, lean: 0.07 },
+		shapes: [
+			{ shape: 'cylinder', size: [0.3, 1, 0.3], offset: [0, 0.5, 0], color: [0.36, 0.25, 0.15] },
+			{ shape: 'cone', size: [1.5, 1.5, 1.5], offset: [0, 1.5, 0], color: [0.14, 0.36, 0.17] }
+		],
+		unitHud: { plates: [] }
+	},
+	[CARRY.ship]: {
+		height: 4.4,
+		// a little more than the client's rock: it is a small ship
+		motion: { rock: 0.09 },
+		shapes: SHIP,
+		// it goes down where it is, with a splash and smoke, and takes what it carries with it
+		death: {
+			collapse: { look: 'sink', time: 3.5 },
+			fx: [
+				{ fx: 'splash', params: { size: 2.2 } },
+				{ fx: 'smoke', delay: 0.2, params: { size: 1.4, darkness: 0.5 } },
+				{ fx: 'ripple', delay: 0.6, params: { size: 3 } }
+			]
+		}
+	},
+	[CARRY.zeppelin]: {
+		height: 4.2,
+		altitude: 3.4,
+		// a slow, deep bob, as something that big hangs on the air
+		motion: { bob: 0.25 },
+		shapes: ZEPPELIN,
+		death: {
+			collapse: { look: 'sink', time: 2.5 },
+			fx: [
+				{ fx: 'explosion', params: { size: 1.4 } },
+				{ fx: 'smoke', delay: 0.3, params: { size: 1.6 } }
+			]
+		}
+	},
+	[CARRY.tower]: {
+		...structure('rts/watch_tower.glb', 1.9, 4.6, [
+			{ shape: 'cylinder', size: [1.6, 3, 1.6], offset: [0, 1.5, 0], color: STONE },
+			{ shape: 'cone', size: [2.1, 1.1, 2.1], offset: [0, 4, 0], color: 'team' }
+		]),
+		// the garrison's arrows leave from its top
+		model: { ...building('rts/watch_tower.glb', 1.9), points: { launch: { offset: [0, 3.8, 0] }, roof: { offset: [0, 3.7, 0] } } },
+		shot: { color: [0.85, 0.75, 0.55], size: 0.22 }
+	}
+}
+
+/** The hero's spells: the colour each is drawn in */
+const spells: AbilityLooks = {
+	rtsHolyLight: { color: [1, 0.95, 0.45] },
+	rtsThunderClap: { color: [0.85, 0.75, 0.5] },
+	rtsDevotion: { color: [0.75, 0.85, 1] },
+	rtsStunned: { color: [1, 1, 0.3] },
+	rtsDrinkSalve: { color: [0.5, 1, 0.5] }
+}
+
+/** Looks down at a square of the field `size` cells across round a point: from far enough to see all of it */
+const view = (client: GameClientApi, x: number, z: number, size: number) =>
+	client.camera.frame({ minX: x - size / 2, minZ: z - size / 2, maxX: x + size / 2, maxZ: z + size / 2 })
+
+/** The player's state as the screen has it: resources, supply, upgrades */
+const own = (client: GameClientApi) => client.session.snapshot().players.find((each) => each.id === PLAYER)?.own
+/** The player's gold and lumber, and their supply, in a line */
+const purseLine = (client: GameClientApi) => {
+	const state = own(client)
+	return state
+		? `${Math.floor(state.resources.gold ?? 0)} gold · ${Math.floor(state.resources.lumber ?? 0)} lumber · ${state.supplyUsed}/${state.supplyCap} supply`
+		: '—'
+}
+/** The live units of `owner`'s, of a type or all */
+const unitsOf = (client: GameClientApi, owner: number, type?: string) =>
+	client.session.snapshot().entities.filter((each) => each.owner === owner && each.health > 0 && (type === undefined || each.type === type))
+/** Selects the first of the player's of a type: its card and its queue show in the HUD */
+const selectFirst = (client: GameClientApi, type: string) => {
+	const [first] = unitsOf(client, PLAYER, type)
+	if (first) client.controller.select([first.id])
+}
+/** A stat of the first of the player's of a type: what its type says, or what upgrades and items made it */
+const statOf = (client: GameClientApi, type: string, stat: 'attackDamage' | 'armor', base: number) => {
+	const [first] = unitsOf(client, PLAYER, type)
+	return first ? Math.round(first.stats?.[stat] ?? base) : '—'
+}
+
+/** The player's ship, zeppelin or tower as the screen has it */
+const transportOf = (client: GameClientApi) =>
+	unitsOf(client, PLAYER).find((each) => each.type === CARRY.ship || each.type === CARRY.zeppelin || each.type === CARRY.tower)
+/** How many are inside the player's transport, of how many it takes */
+const aboard = (client: GameClientApi, capacity: number, gone = 'sunk, and all it carried') => {
+	const transport = transportOf(client)
+	if (!transport) return gone
+	return `${snapshotOf(transport, cargo)?.passengers.length ?? 0} of ${capacity}`
+}
+/** The player's footmen, archers and mages out in the world, on this side of `x` and on the other */
+const sides = (client: GameClientApi, x: number) => {
+	const riders = unitsOf(client, PLAYER).filter((each) => each.type === UNIT.footman || each.type === UNIT.archer || each.type === UNIT.mage)
+	return `${riders.filter((each) => each.x < x).length} · ${riders.filter((each) => each.x >= x).length}`
+}
+/** Selects the player's transport: its card shows its Unload button, and a right-click sends it */
+const selectTransport = (client: GameClientApi) => {
+	const transport = transportOf(client)
+	if (transport) client.controller.select([transport.id])
+}
+
+export const category: CategoryLooks = {
+	view: (view) => ({
+		...view,
+		units: { ...view.units, looks: { ...view.units?.looks, ...looks } },
+		fx: {
+			...view.fx,
+			// the ready-made effects the buildings smoke, burn, go up and come down with: what another category gave first wins
+			defs: { ...presetFx(['smoke', 'fire', 'dust', 'spark-burst', 'splash', 'ripple', 'explosion']), ...view.fx?.defs },
+			abilities: { ...view.fx?.abilities, looks: { ...view.fx?.abilities?.looks, ...spells } }
+		},
+		hud: {
+			...view.hud,
+			resources: {
+				gold: { chip: 'background: radial-gradient(circle at 35% 30%, #fff3b8, #e8b52c 45%, #9c6f12)', color: '#ffd23c' },
+				lumber: {
+					chip: 'width: 14px; height: 10px; border-radius: 5px; background: linear-gradient(180deg, #c8935a, #7a4a22); box-shadow: inset -4px 0 0 #e2c08c',
+					color: '#1f4d25'
+				},
+				...view.hud?.resources
+			}
+		}
+	}),
+	looks: {
+		'rts-harvest': {
+			ready: (client) => view(client, 22, 24, 19),
+			controls: [
+				button(
+					'Train a peasant',
+					(client) => client.session.send(train.make({ unitType: RTS.peasant })),
+					'Queues a peasant at the town hall for 75 gold and 1 supply: it walks out when its bar fills'
+				),
+				button(
+					'Idle ones to work',
+					(client) => client.session.send(backToWork.make({})),
+					'Every peasant standing about goes back to work: half to the gold mine, half to the nearest tree'
+				),
+				readout('Yours', purseLine),
+				readout('Peasants', (client) => `${unitsOf(client, PLAYER, RTS.peasant).length}`)
+			]
+		},
+		'rts-train': {
+			ready: (client) => {
+				view(client, 27, 21, 20)
+				// the barracks selected: its queue shows in the HUD, and its card trains
+				selectFirst(client, RTS.barracks)
+			},
+			controls: [
+				button(
+					'Queue 5 footmen',
+					(client) => {
+						for (let i = 0; i < 5; i++) client.session.send(train.make({ unitType: RTS.footman }))
+					},
+					'Queues five footmen at the barracks, each paid for as it is queued: watch its queue in the HUD and the gold go down'
+				),
+				button('Queue a rifleman', (client) => client.session.send(train.make({ unitType: RTS.rifleman })), 'Refused until a blacksmith stands'),
+				button(
+					'Put up a blacksmith',
+					(client) => client.session.send(smithy.make({})),
+					'A blacksmith goes up by the barracks: once it stands, riflemen can be trained'
+				),
+				button('Rally to the field', (client) => client.session.send(rally.make({})), 'What comes out walks to the flag'),
+				button(
+					'Lay it out again',
+					(client) => {
+						client.session.send(resetTrain.make({}))
+						setTimeout(() => selectFirst(client, RTS.barracks), 300)
+					},
+					'Puts the base back as it started, its queue emptied and the barracks selected'
+				),
+				readout('Yours', purseLine),
+				readout('Footmen · riflemen', (client) => `${unitsOf(client, PLAYER, RTS.footman).length} · ${unitsOf(client, PLAYER, RTS.rifleman).length}`)
+			]
+		},
+		'rts-build': {
+			ready: (client) => view(client, 25, 21, 20),
+			controls: [
+				button('Build a farm', (client) => client.session.send(build.make({ unitType: RTS.farm })), '80 gold, 20 lumber: 6 supply'),
+				button('Build barracks', (client) => client.session.send(build.make({ unitType: RTS.barracks })), '160 gold, 60 lumber'),
+				button('Build a tower', (client) => client.session.send(build.make({ unitType: RTS.tower })), 'Needs a finished barracks'),
+				button(
+					'Lay it out again',
+					(client) => client.session.send(resetBuild.make({})),
+					'Takes down what was built and puts the peasants and the purse back'
+				),
+				readout('Yours', purseLine)
+			]
+		},
+		'rts-tech': {
+			ready: (client) => view(client, 25, 22, 18),
+			controls: [
+				button('Research Forged Swords', (client) => client.session.send(research.make({ upgrade: 'rtsSwords' })), '+4 damage a level'),
+				button('Research Iron Plating', (client) => client.session.send(research.make({ upgrade: 'rtsPlating' })), '+10 armor a level'),
+				button('Upgrade to Keep', (client) => client.session.send(toKeep.make({})), 'The second and third levels of swords need it'),
+				readout(
+					'Footman damage · armor',
+					(client) => `${statOf(client, RTS.footman, 'attackDamage', 12)} · ${statOf(client, RTS.footman, 'armor', 10)}`
+				),
+				readout('Researched', (client) => {
+					const state = own(client)
+					const levels = Object.entries(state?.upgrades ?? {}).map(([id, level]) => `${id === 'rtsSwords' ? 'Swords' : 'Plating'} ${level}`)
+					const going = state?.researching.length ? ` (researching ${state.researching.length})` : ''
+					return (levels.join(', ') || 'nothing yet') + going
+				})
+			]
+		},
+		'rts-hero': {
+			ready: (client) => {
+				view(client, 25, 26, 22)
+				selectFirst(client, RTS.paladin)
+			},
+			controls: [
+				button(
+					'Hunt the gnolls',
+					(client) => client.session.send(hunt.make({ camp: 'gnolls' })),
+					'The paladin goes for the gnolls, the easiest camp: watch its experience grow'
+				),
+				button(
+					'Hunt the brutes',
+					(client) => client.session.send(hunt.make({ camp: 'brutes' })),
+					'The paladin goes for the brutes: harder, and worth more experience'
+				),
+				button(
+					'Take on the ogre',
+					(client) => client.session.send(hunt.make({ camp: 'ogre' })),
+					'The paladin goes for the ogre lord: too much for it at a low level, it may fall'
+				),
+				button('Give 300 experience', (client) => client.session.send(giveXp.make({})), 'Each level gives a point to learn with'),
+				button(
+					'Learn Holy Light',
+					(client) => client.session.send(learnSpell.make({ ability: 'rtsHolyLight' })),
+					"Spends a point on Holy Light, a heal: it shows on the paladin's card once learned"
+				),
+				button(
+					'Learn Thunder Clap',
+					(client) => client.session.send(learnSpell.make({ ability: 'rtsThunderClap' })),
+					'Spends a point on Thunder Clap, a blow to everything round the paladin that stuns'
+				),
+				button(
+					'Learn Devotion Aura',
+					(client) => client.session.send(learnSpell.make({ ability: 'rtsDevotionAura' })),
+					'Spends a point on Devotion Aura: armor for the paladin and its side round it'
+				),
+				button(
+					'Lay it out again',
+					(client) => {
+						client.session.send(resetHero.make({}))
+						setTimeout(() => selectFirst(client, RTS.paladin), 300)
+					},
+					'A new paladin at level one, the camps back, the paladin selected'
+				),
+				readout('Paladin', (client) => {
+					const hero = own(client)?.heroes?.find((each) => each.type === RTS.paladin)
+					return hero ? `level ${hero.level} · ${hero.points} to learn${hero.alive ? '' : ' · fallen'}` : '—'
+				})
+			]
+		},
+		'rts-creeps': {
+			ready: (client) => view(client, 27, 24, 26),
+			controls: [
+				button('Attack the west camp', (client) => client.session.send(attackCamp.make({ camp: 'west' })), 'Three gnolls'),
+				button('Attack the east camp', (client) => client.session.send(attackCamp.make({ camp: 'east' })), 'A brute and two gnolls'),
+				button('Attack the middle', (client) => client.session.send(attackCamp.make({ camp: 'middle' })), 'The ogre and two brutes'),
+				button('Pull back', (client) => client.session.send(pullBack.make({})), 'They chase as far as their leash, then go home and heal'),
+				button('Bring the camps back', (client) => client.session.send(resetCreeps.make({})), 'The three camps and the army back as they started'),
+				readout('Creeps · yours', (client) => `${unitsOf(client, 90).length} · ${unitsOf(client, PLAYER).length}`)
+			]
+		},
+		'rts-shop': {
+			ready: (client) => {
+				view(client, 26, 23, 14)
+				selectFirst(client, RTS.paladin)
+			},
+			controls: [
+				button('Buy Claws of Attack', (client) => client.session.send(buy.make({ item: 'rtsClaws' })), '300 gold: +12 damage'),
+				button('Buy Ring of Protection', (client) => client.session.send(buy.make({ item: 'rtsRingOfProtection' })), '250 gold: +15 armor'),
+				button('Buy Gloves of Haste', (client) => client.session.send(buy.make({ item: 'rtsGlovesOfHaste' })), '200 gold: attacks 20% faster'),
+				button('Buy a Healing Salve', (client) => client.session.send(buy.make({ item: 'rtsHealingSalve' })), '100 gold: two drinks of 400'),
+				button(
+					'Lay it out again',
+					(client) => {
+						client.session.send(resetShop.make({}))
+						setTimeout(() => selectFirst(client, RTS.paladin), 300)
+					},
+					'The paladin without its items, the gold back, the paladin selected'
+				),
+				readout('Gold', (client) => `${Math.floor(own(client)?.resources.gold ?? 0)}`),
+				readout(
+					'Paladin damage · armor',
+					(client) => `${statOf(client, RTS.paladin, 'attackDamage', 30)} · ${statOf(client, RTS.paladin, 'armor', 25)}`
+				)
+			]
+		},
+		'rts-ferry': {
+			ready: (client) => view(client, riverAt(20), 21, 30),
+			controls: [
+				button(
+					'Board them all',
+					(client) => client.session.send(carry.make({ step: 'board' })),
+					'Everyone on the bank walks down to the water by the ship and steps aboard, out of the world: watch the count aboard go up'
+				),
+				button(
+					'Sail across',
+					(client) => client.session.send(carry.make({ step: 'across' })),
+					'The ship sails over the river to the far jetty with whoever is aboard'
+				),
+				button(
+					'Unload on the far bank',
+					(client) => client.session.send(carry.make({ step: 'unload' })),
+					'The ship sails to the east bank if it is not there yet and lets everyone out on the land nearest it, in a ring'
+				),
+				button(
+					'Sail back',
+					(client) => client.session.send(carry.make({ step: 'back' })),
+					'The ship sails back to the west jetty, to take on whoever is left there'
+				),
+				button(
+					'Sink it',
+					(client) => client.session.send(carry.make({ step: 'sink' })),
+					'The ship goes down where it is, and everyone aboard goes down with it: sink it loaded mid-river to see'
+				),
+				button(
+					'Select the ship',
+					selectTransport,
+					'Selects the ship: its card has an Unload button (lit when land is near), and a right-click on the land sends it there'
+				),
+				button(
+					'Lay it out again',
+					(client) => client.session.send(resetFerry.make({})),
+					'The squad back on the west bank and a new ship at the jetty'
+				),
+				readout('Aboard', (client) => aboard(client, 8), 'How many the ship carries, of the eight it takes'),
+				readout('West bank · east bank', (client) => sides(client, riverAt(20)), 'The squad standing on each bank, not counting those aboard')
+			]
+		},
+		'rts-zeppelin': {
+			ready: (client) => view(client, edgeAt(20) + 1, 21, 32),
+			controls: [
+				button(
+					'Board them all',
+					(client) => client.session.send(carry.make({ step: 'board' })),
+					'Everyone below the wall walks under the zeppelin and climbs aboard, out of the world: watch the count aboard go up'
+				),
+				button(
+					'Fly over the wall',
+					(client) => client.session.send(carry.make({ step: 'across' })),
+					'The zeppelin flies up over the cliff and hangs over the plateau'
+				),
+				button(
+					'Unload on the plateau',
+					(client) => client.session.send(carry.make({ step: 'unload' })),
+					'The zeppelin flies over the plateau if it is not there yet and sets everyone down on top, where no ramp leads'
+				),
+				button(
+					'Fly back',
+					(client) => client.session.send(carry.make({ step: 'back' })),
+					'The zeppelin flies back down over the field below the wall'
+				),
+				button(
+					'Try to walk up',
+					(client) => {
+						const below = unitsOf(client, PLAYER).filter((each) => each.type !== CARRY.zeppelin && each.x < edgeAt(each.z))
+						client.session.send({
+							type: 'order',
+							entities: below.map((each) => each.id),
+							order: { type: 'move', point: { x: edgeAt(20) + 8, z: 20 } }
+						})
+					},
+					'Sends those below the wall to the plateau on foot: with no ramp up, they get as far as the foot of the cliff and stop'
+				),
+				button(
+					'Shoot it down',
+					(client) => client.session.send(carry.make({ step: 'sink' })),
+					'The zeppelin comes down in flames, and everyone aboard with it: shoot it down loaded over the wall to see'
+				),
+				button(
+					'Select the zeppelin',
+					selectTransport,
+					'Selects the zeppelin: its card has an Unload button, and a right-click on the plateau flies it there'
+				),
+				button(
+					'Lay it out again',
+					(client) => client.session.send(resetAirlift.make({})),
+					'The squad back below the wall and the zeppelin over them'
+				),
+				readout('Aboard', (client) => aboard(client, 8, 'shot down, and all it carried'), 'How many the zeppelin carries, of the eight it takes'),
+				readout(
+					'Below · on the plateau',
+					(client) => sides(client, edgeAt(20)),
+					'The squad standing below the wall and up on the plateau, not counting those aboard'
+				)
+			]
+		},
+		'rts-garrison': {
+			ready: (client) => view(client, TOWER.x, TOWER.z + 2, 28),
+			controls: [
+				button(
+					'Garrison the tower',
+					(client) => client.session.send(carry.make({ step: 'board' })),
+					'The four soldiers walk into the tower and are out of reach inside: it shoots now, harder for each one in it'
+				),
+				button(
+					'Send in the gnolls',
+					(client) => client.session.send(gnollsCome.make({})),
+					'Six gnolls come down the road for the tower: an empty one does not shoot'
+				),
+				button(
+					'Let them out',
+					(client) => client.session.send(carry.make({ step: 'unload' })),
+					'Everyone inside comes out round the foot of the tower, and it stops shooting'
+				),
+				button(
+					'Bring the tower down',
+					(client) => client.session.send(carry.make({ step: 'sink' })),
+					'The tower falls: a building lets those inside out alive, where a ship takes them down with it'
+				),
+				button('Select the tower', selectTransport, 'Selects the tower: its card has an Unload button that lets them out'),
+				button(
+					'Lay it out again',
+					(client) => client.session.send(resetGarrison.make({})),
+					'The tower, the hall and the four soldiers back, the gnolls gone'
+				),
+				readout('Inside', (client) => aboard(client, 4, 'fallen: they came out'), 'How many are in the tower, of the four it takes'),
+				readout('Tower damage', (client) => `${statOf(client, CARRY.tower, 'attackDamage', 4)}`, 'Its arrows: 4, and 12 more for each one inside'),
+				readout('Gnolls', (client) => `${unitsOf(client, ENEMY).length}`, 'Gnolls still standing')
+			]
+		},
+		'rts-ai': {
+			ready: (client) => view(client, HOME.x, HOME.z + 4, 22),
+			controls: [
+				button('Look at your base', (client) => client.camera.panTo(HOME, 0.8), 'The camera pans to your base in the south west'),
+				button(
+					'Look at theirs',
+					(client) => client.camera.panTo(THEIRS, 0.8),
+					"The camera pans to the computer's base in the north east: watch it work and build"
+				),
+				button('Tell it to attack now', (client) => client.session.send(attackNow.make({})), 'What a mission script tells its computer'),
+				button('Start again', (client) => client.session.send(resetAi.make({})), 'Both bases back as they started, the computer seated again'),
+				readout('Yours', purseLine),
+				readout('Army: yours · theirs', (client) => {
+					const army = (owner: number) => unitsOf(client, owner).filter((each) => each.type === RTS.footman || each.type === RTS.rifleman).length
+					return `${army(PLAYER)} · ${army(ENEMY)}`
+				}),
+				readout(
+					'Their buildings',
+					(client) => `${unitsOf(client, ENEMY).filter((each) => ![RTS.peasant, RTS.footman, RTS.rifleman].includes(each.type as never)).length}`
+				)
+			]
+		}
+	}
+}