@v12-engine/create 0.0.0-stage → 0.1.0

package/starters/campaign/src/campaign/view/index.ts

@@ -0,0 +1,334 @@
+import {
+	type AbilityLooks,
+	FX_FILE,
+	type GameView,
+	hotView,
+	type HudClient,
+	type HudPartDef,
+	layFiles,
+	type ModelDef,
+	presetBuffMarker,
+	presetFx,
+	presetRallyFlag,
+	presetSpellStyles,
+	presetWeather,
+	readCinematic,
+	type StatusLine,
+	TILE_LOOKS,
+	viewListener,
+	type UnitLooks,
+	withHeroesView
+} from '@v12-engine/client'
+import { LOOKS_FILE } from '@v12-engine/client/looks-file'
+import looksFile from '../looks.json'
+import fxFile from '../fx.json'
+import introFile from '../cinematics/intro.json'
+import outroFile from '../cinematics/outro.json'
+import { ALDRIC, BRANN, type CampaignMessage, type CampaignResource, type CampaignUnit, VARGA } from '../ids'
+import { nextWave, siegeWaves, waveComing } from '../waves'
+import { PARLEY } from '../missions/warlord'
+import { parley } from './cinematics'
+import { holyFire } from './fire'
+import { bossName, towerKills } from './labels'
+import { rubble } from './rubble'
+import { waveLane } from './waveLane'
+
+/**
+ * How the campaign looks: its own view, next to its rules in `..`. Every unit and building is a model of the shared
+ * art (`@v12-engine/assets`, its `CREDITS.md` says whose): KayKit's adventurers with their clips and their gear in hand,
+ * Quaternius's buildings and trees. Each is drawn as its parts while its model loads
+ */
+
+/** A character of the shared art, `scale` times its size, with what it holds in its hands */
+const character = (name: string, scale: number, own: Partial<ModelDef> = {}): ModelDef => ({ src: `characters/${name}.glb`, scale, ...own })
+/** A piece of the adventurers' gear in a hand: the right one when not said */
+const hold = (name: string, hand: 'l' | 'r' = 'r') => ({ src: `gear/${name}.glb`, at: `handslot.${hand}` })
+/** A building of the shared art made `width` across: its size at scale 1 (across, up, deep) is in the package's `manifest.json` */
+const building = (src: string, size: [number, number, number], width: number, own: Partial<ModelDef> = {}): ModelDef => ({
+	src,
+	scale: width / Math.max(size[0], size[2]),
+	...own
+})
+
+const SKIN: [number, number, number] = [0.87, 0.68, 0.53]
+const STONE: [number, number, number] = [0.6, 0.58, 0.55]
+const WOOD: [number, number, number] = [0.45, 0.31, 0.18]
+const RED: [number, number, number] = [0.55, 0.12, 0.1]
+const GOLD: [number, number, number] = [1, 0.8, 0.2]
+
+/** A person, as parts: a body in a colour and a head */
+const person = (height: number, body: [number, number, number] | 'team') => [
+	{
+		shape: 'cylinder' as const,
+		size: [0.5, height * 0.6, 0.5] as [number, number, number],
+		offset: [0, height * 0.3, 0] as [number, number, number],
+		color: body
+	},
+	{
+		shape: 'sphere' as const,
+		size: [0.4, 0.4, 0.4] as [number, number, number],
+		offset: [0, height * 0.75, 0] as [number, number, number],
+		color: SKIN
+	}
+]
+
+/** The trees of the shared art's forest a tree is drawn as: a look of it each, by the model's name */
+const TREES = ['common_tree_1', 'common_tree_2', 'common_tree_3', 'common_tree_5', 'pine_1', 'pine_2', 'pine_3', 'pine_5']
+
+export const looks: UnitLooks<CampaignUnit> = {
+	peasant: { height: 1.5, model: character('barbarian', 0.58, { hold: [hold('axe_1handed')] }), parts: person(1.5, 'team') },
+	footman: { height: 1.8, model: character('knight', 0.7, { hold: [hold('sword_1handed'), hold('shield_round', 'l')] }), parts: person(1.8, 'team') },
+	archer: {
+		height: 1.7,
+		model: character('ranger', 0.68, { hold: [hold('bow')], animations: { attack: 'Ranged_2H_Shoot' } }),
+		shot: { color: [0.85, 0.75, 0.55], size: 0.2 },
+		parts: person(1.7, 'team')
+	},
+	knight: {
+		height: 2.2,
+		model: character('knight', 0.9, { hold: [hold('sword_2handed')], animations: { attack: 'Melee_2H_Attack_Chop' } }),
+		parts: person(2.2, 'team')
+	},
+	hall: {
+		height: 4.4,
+		model: building('rts/castle.glb', [6.31, 2.81, 5.87], 4.4),
+		parts: [{ shape: 'box', size: [3.8, 2.6, 3.8], offset: [0, 1.3, 0], color: STONE }]
+	},
+	farm: {
+		height: 2.2,
+		model: building('rts/small_farm.glb', [5.437, 3.211, 3.33], 2.6),
+		parts: [{ shape: 'box', size: [1.8, 1.4, 1.8], offset: [0, 0.7, 0], color: WOOD }]
+	},
+	barracks: {
+		height: 3.2,
+		model: building('rts/barracks.glb', [3.029, 2.158, 3.234], 3.2),
+		parts: [{ shape: 'box', size: [2.8, 2, 2.8], offset: [0, 1, 0], color: WOOD }]
+	},
+	tower: {
+		height: 4.8,
+		model: building('rts/watch_tower.glb', [1.515, 4.388, 1.558], 1.7, { points: { launch: { offset: [0, 3.6, 0] } } }),
+		shot: { color: [0.85, 0.75, 0.55], size: 0.25 },
+		parts: [{ shape: 'cylinder', size: [1.5, 3.5, 1.5], offset: [0, 1.75, 0], color: STONE }]
+	},
+	wall: {
+		height: 1.4,
+		model: building('rts/stone_wall.glb', [4.681, 1.338, 0.74], 2.2),
+		death: { collapse: { look: 'crumble', pieces: 8, dust: true } },
+		parts: [{ shape: 'box', size: [2, 1.2, 0.7], offset: [0, 0.6, 0], color: STONE }]
+	},
+	trader: {
+		height: 2.4,
+		model: building('village/market_stand.glb', [0.776, 1.563, 1.731], 2.2),
+		parts: [{ shape: 'box', size: [1.8, 1.6, 1.8], offset: [0, 0.8, 0], color: [0.7, 0.55, 0.3] }]
+	},
+	raider: {
+		height: 1.8,
+		model: character('barbarian', 0.72, { hold: [hold('axe_1handed'), hold('shield_round_barbarian', 'l')] }),
+		parts: person(1.8, RED)
+	},
+	warlock: {
+		height: 1.8,
+		model: character('mage', 0.72, { hold: [hold('staff')] }),
+		shot: { color: [1, 0.45, 0.15], size: 0.3 },
+		parts: person(1.8, RED)
+	},
+	brute: {
+		height: 2.5,
+		model: character('barbarian', 1.05, { hold: [hold('axe_2handed')], animations: { attack: 'Melee_2H_Attack_Chop' } }),
+		parts: person(2.5, RED)
+	},
+	warlord: {
+		height: 2.8,
+		model: character('barbarian', 1.2, { hold: [hold('sword_2handed')], animations: { attack: 'Melee_2H_Attack_Chop' } }),
+		unitHud: { show: 'always', items: [{ text: 'Varga', size: 13, color: 'owner' }] },
+		parts: person(2.8, RED)
+	},
+	gnoll: { height: 1.6, model: character('rogue_hooded', 0.62, { hold: [hold('dagger')] }), parts: person(1.6, [0.45, 0.4, 0.3]) },
+	prisoner: { height: 1.6, model: character('rogue', 0.62), parts: person(1.6, [0.5, 0.5, 0.5]) },
+	tree: {
+		height: 3,
+		looks: Object.fromEntries(TREES.map((look) => [look, { src: `forest/${look}.glb`, scale: 0.85 }])),
+		mix: TREES,
+		vary: { scale: 0.25, lean: 0.07 },
+		parts: [
+			{ 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.8, 1.5], offset: [0, 1.7, 0], color: [0.15, 0.38, 0.18] }
+		]
+	},
+	goldmine: {
+		height: 3.2,
+		model: building('rts/mine.glb', [3.853, 3.508, 4.084], 3.9),
+		parts: [
+			{ shape: 'box', size: [3.5, 2, 3.5], offset: [0, 1, 0], color: [0.4, 0.38, 0.35] },
+			{ shape: 'sphere', size: [1, 1, 1], offset: [0, 2.4, 0], color: GOLD }
+		]
+	}
+}
+
+export const effects: AbilityLooks = {
+	holyLight: { color: [1, 0.95, 0.45] },
+	warCry: { color: [1, 0.6, 0.2], style: 'burst', options: { count: 60, ring: 7, shape: 'about' } },
+	rallied: { color: [1, 0.6, 0.2], aura: 'glow' },
+	// drawn by a style of the game's own (`styles` below, made in fire.ts)
+	judgement: { color: [1, 0.85, 0.35], style: 'campaign.holyFire' },
+	drinkPotion: { color: [0.4, 1, 0.5] }
+}
+
+/** The lines on the HUD, from what the game reports: the wave, when the next one comes, who is still coming */
+function status(report: Record<string, unknown>): StatusLine[] {
+	const { wave, waves, phase, countdown, left } = report as { wave?: number; waves: number; phase: string; countdown: number; left: number }
+	if (wave === undefined) return []
+	const lines: StatusLine[] = [{ text: `Wave ${wave} of ${waves}` }]
+	if (phase === 'waiting') lines.push({ text: `comes in ${countdown}s`, title: 'Call it in now for as much gold as there are seconds left' })
+	else if (phase === 'over') return lines
+	else lines.push({ text: `${left} coming`, alarm: left > 0 && phase === 'fighting' })
+	return lines
+}
+
+/** A panel of the campaign's own: what the next wave brings, while the player waits for it (the siege) */
+const nextWavePanel: HudPartDef = {
+	id: 'campaign.nextWave',
+	place: 'top-right',
+	mount(element: HTMLElement, client: HudClient) {
+		element.className += ' panel px-3 py-2 text-[13px] text-foreground'
+		const show = () => {
+			const { phase, wave } = client.state.report as { phase?: string; wave?: number }
+			const coming = phase === 'waiting' ? siegeWaves(client.session)[(wave ?? 1) - 1] : undefined
+			element.style.display = coming ? '' : 'none'
+			if (!coming) return
+			const { registry } = client.session
+			element.textContent = `Next: ${coming.units.map(({ type, count }) => `${count} ${registry.unit(type).name}`).join(', ')}`
+		}
+		show()
+		const timer = setInterval(show, 250)
+		return () => clearInterval(timer)
+	}
+}
+
+export const campaignView: GameView<CampaignUnit, CampaignResource, CampaignMessage> = layFiles(
+	{
+		files: {
+			// its own folder of files (public/games/campaign, with an assets.json saying what is in it): where the editor puts
+			// what is taken in for the game
+			assets: 'games/campaign'
+		},
+		cinematics: {
+			// the cinematics, by the ids the rules play them by: two made in the editor's Cinematic panel, one in code
+			defs: {
+				'campaign.intro': { def: readCinematic(introFile), back: true },
+				'campaign.outro': { def: readCinematic(outroFile), skippable: false },
+				[PARLEY]: { play: parley, back: true }
+			},
+			// a lane of its own the cinematics may have: a wave called in at a moment (see `waveLane.ts`)
+			lanes: [waveLane],
+			speakers: {
+				[ALDRIC]: { name: 'Aldric', color: '#8fb8ff' },
+				[BRANN]: { name: 'Sergeant Brann', color: '#d7c38a' },
+				[VARGA]: { name: 'Varga', color: '#ff7a5a' }
+			}
+		},
+		// what the screen does as a wave sets out, besides the flare the rules fire: the camera feels it
+		on: [viewListener(waveComing, ({ x, z }, client) => client.camera.shake(x, z, 0.3))],
+		// the HUD's half of the heroes the rules take (`withHeroes`): the hero's panel, the heroes' portraits, the shop
+		packs: [withHeroesView()],
+		hud: {
+			parts: [nextWavePanel],
+			resources: { gold: { chip: 'background: radial-gradient(circle at 35% 30%, #fff3b8, var(--vg-gold) 45%, #9c6f12)' } },
+			status,
+			messages: {
+				objectiveRaze: 'Burn every building of the Red Hand camp',
+				objectiveHall: 'Keep the town hall standing',
+				objectiveCaravan: 'Find the lost caravan',
+				objectiveHold: 'Hold the fort: wave {wave} of {waves} beaten',
+				objectiveTowers: 'Lose no tower',
+				objectiveWarlord: 'Bring down Varga',
+				objectiveHero: 'Aldric must survive',
+				objectivePrisoners: 'Free the prisoners in the cells',
+				caravanFound: 'The caravan: {gold} gold recovered',
+				waveComing: 'Wave {wave} is coming',
+				waveBeaten: 'Wave {wave} beaten: {bonus} gold',
+				gateShut: 'The gate is shut',
+				gateOpen: 'The gate is open',
+				checkpointWave: 'wave {wave}',
+				heroFell: 'Aldric has fallen.',
+				hallFell: 'The town hall has fallen.',
+				homeStart: 'My lord, the Red Hand dug in past the woods while you were away. They raid the farms by night.',
+				homeCamp: 'Then we burn their camp. Get the barracks working, sergeant. Every man who can hold a sword.',
+				homeFord: 'Their tracks cross here. The camp is just beyond the trees: look.',
+				homeDone: 'The camp is ash. They will come back for this, and in numbers.',
+				siegeStart: 'They are massing in the war camp to the north, my lord. The whole Red Hand, by the look of the fires.',
+				siegeGate: 'Shut the gate when they come and open it between waves. Archers on the walls, towers at the corners.',
+				siegeHalfway: 'Half of them are down. Hold the line.',
+				siegeLast: 'This is the last of them, and the biggest. Everything we have, now.',
+				passStart: 'Varga fled up the pass with what is left. His hold is at the top. The prisoners from the villages are up there too.',
+				passShop: 'A trader keeps a stall by the road: potions, a better sword, boots. Spend what we took.',
+				passPrisoners: 'They are free, my lord. They will fight for you.',
+				passDuel: 'Just you and me, Varga.',
+				passCharge: 'For the village!'
+			},
+			outcome: { victory: 'The mission is accomplished.', defeat: 'The mission has failed.' },
+			actions: [
+				{
+					id: 'nextWave',
+					label: 'Next wave',
+					description: 'Calls the next wave in now, for as much gold as there are seconds left',
+					command: nextWave.make({}),
+					// only the siege reports waves: in the other missions the button is not there at all
+					visible: (report) => report.wave !== undefined,
+					enabled: (report) => report.phase === 'waiting'
+				}
+			]
+		},
+		// what it draws of its own with the client's toolkit: kills over the towers, Varga's name, earth thrown up where a
+		// brute's axe comes down (labels.ts, rubble.ts)
+		renderers: [towerKills, bossName, rubble],
+		fx: {
+			abilities: {
+				// spell styles of its own, by the names the effects' looks give (`effects` above)
+				styles: { ...presetSpellStyles(), 'campaign.holyFire': holyFire },
+				looks: effects
+			},
+			// the ready-made effects the maps and the rules use; what the editor's FX panel wrote is laid over them (`fx.json`)
+			defs: presetFx(['campfire', 'torch', 'dust', 'puff', 'spark-burst', 'explosion', 'glow'])
+		},
+		scene: {
+			// the ready-made rain and snow, a building's rally flag, the glow over a unit with a buff: the client draws none
+			// of them by itself
+			weather: presetWeather(),
+			// trees and scenery in front of the player's own units faded out
+			seeThrough: {}
+		},
+		units: {
+			rallyFlag: presetRallyFlag(),
+			buffMarker: presetBuffMarker(),
+			// what the editor's model setup wrote is laid over these (`looks.json`)
+			looks
+		},
+		ground: {
+			tiles: TILE_LOOKS
+		},
+		input: {
+			keys: {
+				actions: {
+					add: [
+						{
+							id: 'campaign.nextWave',
+							label: 'Call the next wave in now',
+							group: 'The siege',
+							default: ['N'],
+							run: (client) => client.runAction('nextWave')
+						}
+					]
+				}
+			}
+		}
+	},
+	// the files the editor writes next to the code, laid over what it says above
+	[
+		[LOOKS_FILE, looksFile],
+		[FX_FILE, fxFile]
+	]
+)
+
+// saved while it runs in the dev server: the games and editors of the page take its new looks (hot reload)
+if (import.meta.hot) import.meta.hot.accept((module) => hotView(import.meta.hot, 'my-game', campaignView as GameView, module?.campaignView))

package/starters/campaign/src/campaign/view/labels.ts

@@ -0,0 +1,105 @@
+import { Vector3 } from '@babylonjs/core/Maths/math.vector'
+import { Control } from '@babylonjs/gui/2D/controls/control'
+import { Rectangle } from '@babylonjs/gui/2D/controls/rectangle'
+import { TextBlock } from '@babylonjs/gui/2D/controls/textBlock'
+import { type EntityView, guiLayer, type Pin, type RendererFactory } from '@v12-engine/client'
+import { kills } from '../kills'
+import { PLAYER, UNIT } from '../ids'
+
+/*
+ * Words over the world, the two ways a view has of putting them there: an element of the page pinned to a tower
+ * (`kit.pin`), and a control of Babylon GUI that follows Varga (`guiLayer`)
+ */
+
+/** How many a tower has killed, as its snapshot says (the `kills` component is sent to everyone) */
+const killsOf = (entity: EntityView) => (entity.state.components?.[kills.id] as number | undefined) ?? 0
+
+/**
+ * Over each tower, how many of the Red Hand it has killed, once it has: an element of the page pinned to it. The client
+ * moves it with the view, hides it when the tower is out of it, and takes it out when the tower is sold
+ */
+export const towerKills: RendererFactory = (kit) => {
+	const labels = new Map<number, { pin: Pin; count: number }>()
+
+	return {
+		sync(changes) {
+			for (const entity of changes.removed) labels.delete(entity.id)
+			for (const entity of kit.state.entities.values()) {
+				if (entity.owner !== PLAYER || entity.def.id !== UNIT.tower) continue
+				const count = killsOf(entity)
+				let label = labels.get(entity.id)
+				if (!label) {
+					if (!count) continue
+					const element = document.createElement('div')
+					element.className =
+						'rounded-sm bg-[color-mix(in_srgb,var(--vg-shade)_67%,transparent)] px-1.5 text-[12px] leading-[18px] font-bold whitespace-nowrap text-foreground'
+					labels.set(entity.id, (label = { pin: kit.pin(element, { entity: entity.id, height: 0.4 }), count: -1 }))
+				}
+				if (label.count === count) continue
+				label.count = count
+				label.pin.element.textContent = `☠ ${count}`
+			}
+		},
+		frame() {},
+		dispose() {
+			for (const { pin } of labels.values()) pin.remove()
+			labels.clear()
+		}
+	}
+}
+
+/**
+ * Varga's name over him (the warlord of mission three), drawn with Babylon GUI rather than the page: a control in the scene's GUI layer, moved to
+ * him every frame
+ */
+export const bossName: RendererFactory = (kit) => {
+	const plates = new Map<number, Rectangle>()
+	const at = new Vector3()
+
+	const plateFor = (entity: EntityView) => {
+		const plate = new Rectangle(`boss ${entity.id}`)
+		plate.adaptWidthToChildren = plate.adaptHeightToChildren = true
+		plate.thickness = 1
+		plate.color = '#b48cff'
+		plate.background = '#140a24cc'
+		plate.cornerRadius = 3
+		plate.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP
+		const name = new TextBlock(`boss name ${entity.id}`, 'Varga')
+		name.color = '#e6d7ff'
+		name.fontSize = 15
+		// the page's display font: the HUD's headings
+		name.fontFamily = getComputedStyle(document.documentElement).getPropertyValue('--font-display') || 'serif'
+		name.fontWeight = 'bold'
+		name.resizeToFit = true
+		name.paddingLeft = name.paddingRight = '8px'
+		name.paddingTop = name.paddingBottom = '2px'
+		plate.addControl(name)
+		guiLayer(kit.scene).addControl(plate)
+		return plate
+	}
+
+	return {
+		sync(changes) {
+			for (const entity of changes.added) if (entity.def.id === UNIT.warlord) plates.set(entity.id, plateFor(entity))
+			for (const entity of changes.removed) {
+				plates.get(entity.id)?.dispose()
+				plates.delete(entity.id)
+			}
+		},
+		frame() {
+			for (const [id, plate] of plates) {
+				const drawn = kit.drawn(id)
+				plate.isVisible = !!drawn?.visible
+				if (!drawn?.visible) continue
+				// over its bars, which are over its head
+				at.copyFrom(drawn.position)
+				at.y += drawn.visual.height + 1.6
+				plate.moveToVector3(at, kit.scene)
+			}
+		},
+		dispose() {
+			for (const plate of plates.values()) plate.dispose()
+			plates.clear()
+		}
+	}
+}

package/starters/campaign/src/campaign/view/rubble.ts

@@ -0,0 +1,40 @@
+import type { DebrisPiece, RendererFactory } from '@v12-engine/client'
+import { UNIT } from '../ids'
+
+/*
+ * What a brute's axe does where it comes down (an attack with `splash`: the `impact` event), on the screen: earth
+ * thrown up, and leaves shaken off the trees near it. Pieces with physics (`kit.breakApart`); nothing of it is in the
+ * game: the trees stand
+ */
+
+const EARTH: DebrisPiece[] = [
+	{ shape: 'box', size: [0.2, 0.14, 0.18], color: [0.42, 0.31, 0.19], count: 7 },
+	{ shape: 'box', size: [0.12, 0.1, 0.12], color: [0.33, 0.25, 0.16], count: 5 }
+]
+const LEAVES: DebrisPiece[] = [
+	{ shape: 'box', size: [0.22, 0.03, 0.18], color: [0.25, 0.5, 0.18], count: 6 },
+	{ shape: 'box', size: [0.16, 0.03, 0.14], color: [0.36, 0.58, 0.2], count: 4 },
+	{ shape: 'cylinder', size: [0.05, 0.4, 0.05], color: [0.4, 0.27, 0.15] }
+]
+/** How far past the blast a tree still loses leaves */
+const SHAKEN = 1.5
+
+export const rubble: RendererFactory = (kit) => ({
+	sync(changes) {
+		for (const event of changes.events) {
+			if (event.type !== 'impact') continue
+			const { x, z, radius } = event
+			kit.breakApart({ x, z }, EARTH, { strength: 0.8, height: 0.2 })
+			for (const entity of kit.state.entities.values()) {
+				if (entity.def.id !== UNIT.tree || !entity.inSight) continue
+				const dx = entity.pos.x - x
+				const dz = entity.pos.z - z
+				if (dx * dx + dz * dz > (radius + SHAKEN) ** 2) continue
+				// from up in the tree, blown away from the blast
+				kit.breakApart(entity.pos, LEAVES, { from: { x, z }, strength: 0.8, height: kit.visualOf(entity).height })
+			}
+		}
+	},
+	frame() {},
+	dispose() {}
+})

package/starters/campaign/src/campaign/view/waveLane.ts

@@ -0,0 +1,88 @@
+import { type Clip, defineLane } from '@v12-engine/client'
+import { CreateTorus } from '@babylonjs/core/Meshes/Builders/torusBuilder.js'
+import { StandardMaterial } from '@babylonjs/core/Materials/standardMaterial.js'
+import { Color3 } from '@babylonjs/core/Maths/math.color.js'
+import { createEffect, createRoot } from 'solid-js'
+import { builtWaves, nextWave, WAR_CAMP } from '../waves'
+
+/*
+ * A lane of the campaign's own in its cinematics: a wave called in at a moment of a cinematic, as the player's
+ * Next wave button does (the `nextWave` command, so the rules decide, and every screen and the replay agree). Made only
+ * of what `@v12-engine/client` gives a game (`defineLane`), the way the client's own lanes are made, it is a lane like
+ * theirs: the game plays it from a cinematic's file (`GameView.cinematics.lanes`), and the editor's Cinematic panel draws it on
+ * the timeline in its colour, puts its fields in the Inspector with what the wave brings under them, draws where the
+ * waves come out on the map while it is looked at, and says in the Problems panel a wave the game has not
+ * (`campaignEditor`'s `lanes`).
+ */
+
+/** An item of the lane: the wave it calls in, by its number (1 the first), for the check and the label; the next one when left out */
+export interface WaveClip extends Clip {
+	wave?: number
+}
+
+/** The lane's colour on the timeline, and of the ring where the waves come in */
+const COLOR = '#d9a441'
+
+export const waveLane = defineLane<WaveClip>({
+	kind: 'campaign.wave',
+	name: 'Waves',
+	read(item, what) {
+		if (item.wave !== undefined && (typeof item.wave !== 'number' || item.wave < 1)) throw new Error(`${what}.wave is a wave's number, from 1`)
+		return item as WaveClip
+	},
+	// a moment, not a stretch: a wave called in is not called again by a seek into it
+	length: () => 0,
+	run(cut, _item, from) {
+		if (from > 0) return
+		cut.stage.send?.(nextWave.make({}))
+	},
+	editor: {
+		color: COLOR,
+		// a moment on the timeline, as a diamond's place: a new one lasts nothing
+		moment: true,
+		icon: 'campaign.wave',
+		hint: 'Calls the next wave in at a moment of the cinematic, as the Next wave button does: the game decides, on every screen',
+		fields: [
+			{ key: 'wave', kind: 'number', label: 'Wave', optional: true, step: 1, min: 1, hint: 'The wave it calls in, for the label and the check' }
+		],
+		label: (item) => (item.wave ? `wave ${item.wave}` : 'next wave'),
+		check: (item) => (item.wave && item.wave > builtWaves().length ? `the siege has ${builtWaves().length} waves, not ${item.wave}` : undefined),
+		// where the waves come out: a ring at the war camp, a point of the fort's map, bright for one selected
+		draw(item, at) {
+			const entry = at.point(WAR_CAMP)
+			if (!entry) return
+			const ring = CreateTorus(
+				`campaign.wave.${item.at}`,
+				{ diameter: at.selected ? 5 : 4, thickness: at.selected ? 0.35 : 0.2, tessellation: 32 },
+				at.scene
+			)
+			ring.position.set(entry.x, at.heightAt(entry.x, entry.z) + 0.4, entry.z)
+			const paint = new StandardMaterial('campaign.wave.ring', at.scene)
+			paint.disableLighting = true
+			paint.emissiveColor = at.selected ? new Color3(1, 1, 1) : Color3.FromHexString(COLOR)
+			ring.material = paint
+			ring.parent = at.root
+		},
+		// under its fields: what the wave brings, as the waves panel says it
+		inspector: {
+			mount(element, props) {
+				return createRoot((dispose) => {
+					const text = document.createElement('p')
+					text.className = 'text-[12px] text-muted-foreground'
+					element.append(text)
+					createEffect(() => {
+						const waves = props.items.map((item) => item.wave)
+						const wave = waves.length === 1 && waves[0] ? builtWaves()[waves[0] - 1] : undefined
+						text.textContent = wave
+							? `Brings ${wave.units.map((unit) => `${unit.count} ${unit.type}`).join(', ')}, one every ${wave.interval} s`
+							: 'Brings whichever wave is next'
+					})
+					return () => {
+						text.remove()
+						dispose()
+					}
+				})
+			}
+		}
+	}
+})

package/starters/campaign/src/campaign/waves.json

@@ -0,0 +1,36 @@
+[
+	{ "units": [{ "type": "raider", "count": 4 }], "interval": 1.5, "bonus": 60 },
+	{
+		"units": [
+			{ "type": "raider", "count": 5 },
+			{ "type": "warlock", "count": 2 }
+		],
+		"interval": 1.2,
+		"bonus": 80
+	},
+	{
+		"units": [
+			{ "type": "raider", "count": 6 },
+			{ "type": "brute", "count": 1 }
+		],
+		"interval": 1.2,
+		"bonus": 100
+	},
+	{
+		"units": [
+			{ "type": "warlock", "count": 4 },
+			{ "type": "raider", "count": 4 }
+		],
+		"interval": 1,
+		"bonus": 120
+	},
+	{
+		"units": [
+			{ "type": "brute", "count": 2 },
+			{ "type": "raider", "count": 8 },
+			{ "type": "warlock", "count": 3 }
+		],
+		"interval": 0.8,
+		"bonus": 200
+	}
+]