@v12-engine/create 0.0.0-stage → 0.1.0

package/starters/campaign/src/maps.ts

@@ -0,0 +1,2 @@
+/** The maps of the game, by the names every part of the project knows them by: the campaign's, in `src/campaign/maps.ts` */
+export { campaignMap as mapNamed, DEFAULT_MAP, maps } from './campaign/maps'

package/starters/campaign/src/rules.ts

@@ -0,0 +1,20 @@
+/**
+ * The rules: the campaign's, in `src/campaign`. Its units, its missions and its waves are in that folder; this is the
+ * name every part of the project knows them by
+ */
+import type { GameMap, World } from '@v12-engine/engine'
+import { campaign, startMission } from './campaign'
+
+export { ENEMY, PLAYER, UNIT } from './campaign'
+
+export const rules = campaign
+
+/**
+ * What the game does once a world is made from a map, before anyone plays: the map's mission is given (each map is
+ * a mission's; a map of none plays on with no objectives). The page's free play, the server, the tests and the
+ * editor's Play here each call it with the map; the campaign's own scene gives the mission itself, knowing whether
+ * the game is new or loaded from a save
+ */
+export function start(world: World, { map }: { map?: GameMap }): void {
+	startMission(world, map)
+}

package/starters/campaign/src/waves-panel.ts

@@ -0,0 +1,355 @@
+import type { EditorClient, EditorPanel, EditorPanelDef, PanelSearchEntry } from '@v12-engine/editor'
+import { filterBy, kit, NumberField } from '@v12-engine/client/kit'
+import { ArcRotateCamera } from '@babylonjs/core/Cameras/arcRotateCamera.js'
+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 { Vector3 } from '@babylonjs/core/Maths/math.vector.js'
+import type { Mesh } from '@babylonjs/core/Meshes/mesh.js'
+import { createEffect, createRoot, on } from 'solid-js'
+import { readWaves, siegeWaves, WAR_CAMP, type Wave, WAVE_UNITS, wavesFile, wavesOf } from './campaign/waves'
+
+/*
+ * The waves of the siege, in the campaign's editor: a panel of the game's own that lists them, finds them as they are
+ * typed, and changes them: who comes, how often, for how much gold. They are the game's file
+ * `src/campaign/waves.json`, written as they change (saved with the map, Ctrl+S), and undone like the rest (Ctrl+Z).
+ * It shows where the picked wave comes out, in the scene and in a view of its own, moves that place with a click, says
+ * how the waves go while the map is played here, and tells the other panels which wave is picked.
+ */
+
+/** The waves' file, from the game's folder (`src`) */
+const FILE = 'campaign/waves.json'
+/** Who can come in a wave */
+const INVADERS = WAVE_UNITS
+
+// what the waves panel says to the other panels, and what it offers them: typed for whoever listens or asks
+declare module '@v12-engine/editor' {
+	interface EditorEvents {
+		'campaign.wave.picked': { wave: number }
+	}
+	interface EditorPanelApis {
+		'campaign.waves': { pick(wave: number): void }
+	}
+}
+
+/** A wave in a few words: "8 skeleton · every 1.2 s · 20 gold" */
+const describe = (wave: Wave) =>
+	`${wave.units.map((unit) => `${unit.count} ${unit.type}`).join(', ')} · every ${wave.interval} s · ${wave.bonus} gold`
+
+/** The waves as they are, to keep apart from what changes next */
+const copy = (waves: readonly Wave[]): Wave[] => waves.map((wave) => ({ ...wave, units: wave.units.map((unit) => ({ ...unit })) }))
+
+/**
+ * The waves the editor's game has, and the game played in its page: what each plays (`registry.setFile`), not the
+ * game's module, which other worlds of the page and a server share
+ */
+function useWaves(editor: EditorClient, waves: Wave[]): void {
+	editor.registry.setFile(wavesFile, waves)
+	editor.world?.registry.setFile(wavesFile, copy(waves))
+}
+
+/**
+ * The waves changed, as a step of the editor's history: the game plays them (`useWaves`), the file is written, and
+ * Ctrl+Z puts back what they were. Steps of one field one after the other (a number dragged) are one step (`merge`)
+ */
+function change(editor: EditorClient, name: string, make: (waves: Wave[]) => void, merge?: string): void {
+	const was = copy(siegeWaves(editor))
+	const next = copy(siegeWaves(editor))
+	make(next)
+	const put = (waves: Wave[]) => {
+		useWaves(editor, copy(waves))
+		void editor.files.write(FILE, waves)
+	}
+	editor.history.step({ name, merge, do: () => put(next), undo: () => put(was) })
+}
+
+/** The point where the waves come out of the war camp */
+const entryOf = (editor: EditorClient) => editor.map.points.find((point) => point.name === WAR_CAMP)
+
+/** Draws the panel into its element, given the editor and its handle */
+function mount(element: HTMLElement, editor: EditorClient, panel: EditorPanel): void {
+	// kept in this browser with the panel: the wave picked, and whether its view of the entry is open
+	const picked = panel.state('picked', 0)
+	const looking = panel.state('looking', false)
+	const filter = panel.filter({ placeholder: 'Find a wave: raider, 3, brute' })
+	const pick = (wave: number) => {
+		picked.set(Math.max(0, Math.min(wave, siegeWaves(editor).length - 1)))
+		editor.bus.emit('campaign.wave.picked', { wave: picked.get() })
+		draw()
+	}
+	// what it offers the other panels; and an entry of the search picked shows its wave
+	panel.provide({ pick })
+	panel.onReveal((id) => pick(Number(id)))
+
+	const live = document.createElement('p')
+	live.className = kit.classes.text({ kind: 'note', class: 'mt-1.5' })
+	const list = document.createElement('div')
+	list.setAttribute('role', 'listbox')
+	list.className = 'mt-2 flex flex-col'
+	const details = document.createElement('div')
+	details.className = 'mt-3 flex flex-col gap-2'
+	const view = document.createElement('canvas')
+	view.className = 'mt-2 w-full rounded-panel border border-border'
+	view.style.height = '140px'
+	const viewBox = document.createElement('div')
+	element.append(filter.element(), live, list, details, viewBox)
+	/** What the kit's fields drawn into the details take away, as they are drawn again */
+	let fields: (() => void)[] = []
+	/** A number of the wave's is being changed in its field: what is drawn again leaves the field be */
+	let typing = false
+
+	/** The list of waves, those the words typed find */
+	const drawList = () => {
+		const shown = filterBy(
+			siegeWaves(editor).map((wave, index) => ({ wave, index })),
+			filter(),
+			({ wave, index }) => `wave ${index + 1} ${describe(wave)}${wave.units.some((unit) => unit.type === 'brute') ? ' brute' : ''}`
+		)
+		list.replaceChildren(
+			...shown.map(({ wave, index }) => {
+				const row = document.createElement('button')
+				row.type = 'button'
+				row.setAttribute('role', 'option')
+				row.className = kit.classes.option()
+				row.dataset.wave = String(index)
+				if (index === picked.get()) row.dataset.state = 'checked'
+				row.textContent = `Wave ${index + 1}: ${describe(wave)}`
+				row.addEventListener('click', () => pick(index))
+				return row
+			})
+		)
+	}
+
+	/** A number of the picked wave's, as a field of the kit's: each change a step, a drag one step */
+	const numberField = (
+		label: string,
+		value: number,
+		set: (wave: Wave, value: number) => void,
+		options: { min: number; step: number; merge: string }
+	) => {
+		const row = document.createElement('label')
+		row.className = 'flex items-center justify-between gap-2 text-[13px]'
+		row.append(label)
+		// the field, and what goes beside it, at the end of the line
+		const end = document.createElement('div')
+		end.className = 'flex items-center gap-1'
+		const field = document.createElement('div')
+		field.className = 'w-24'
+		end.append(field)
+		row.append(end)
+		const wave = picked.get()
+		fields.push(
+			kit.render(field, NumberField, {
+				value,
+				min: options.min,
+				step: options.step,
+				size: 'sm',
+				onValue: (next: number) => {
+					typing = true
+					try {
+						change(editor, `${label} of wave ${wave + 1}`, (waves) => set(waves[wave], next), `campaign.wave.${wave}.${options.merge}`)
+					} finally {
+						typing = false
+					}
+				}
+			})
+		)
+		return row
+	}
+
+	/** What the picked wave is, to change */
+	const drawDetails = () => {
+		const index = picked.get()
+		const wave = siegeWaves(editor)[index]
+		for (const gone of fields.splice(0)) gone()
+		details.replaceChildren()
+		if (!wave) return
+		const title = document.createElement('h3')
+		title.className = kit.classes.text({ kind: 'heading' })
+		title.textContent = `Wave ${index + 1}`
+		details.append(title)
+		for (const [at, unit] of wave.units.entries()) {
+			const row = numberField(unit.type, unit.count, (changed, count) => void (changed.units[at].count = count), {
+				min: 1,
+				step: 1,
+				merge: `count.${at}`
+			})
+			row.lastElementChild!.append(
+				kit.button('×', () => change(editor, `Take the ${unit.type} out of wave ${index + 1}`, (waves) => void waves[index].units.splice(at, 1)), {
+					variant: 'ghost',
+					size: 'icon-sm',
+					tip: `Take the ${unit.type} out of this wave`
+				})
+			)
+			details.append(row)
+		}
+		const more = document.createElement('div')
+		more.className = 'flex flex-wrap gap-1'
+		for (const type of INVADERS.filter((type) => !wave.units.some((unit) => unit.type === type)))
+			more.append(
+				kit.button(
+					`+ ${type}`,
+					() => change(editor, `Add ${type} to wave ${index + 1}`, (waves) => void waves[index].units.push({ type, count: 1 })),
+					{
+						size: 'sm'
+					}
+				)
+			)
+		details.append(more)
+		details.append(
+			numberField('Seconds between', wave.interval, (changed, value) => void (changed.interval = value), { min: 0.1, step: 0.1, merge: 'interval' })
+		)
+		details.append(
+			numberField('Gold for beating it', wave.bonus, (changed, value) => void (changed.bonus = value), { min: 0, step: 5, merge: 'bonus' })
+		)
+		const buttons = document.createElement('div')
+		buttons.className = 'flex flex-wrap gap-1'
+		buttons.append(
+			// a click in the scene, asked for by the panel: where the waves come onto the map
+			kit.button('Move the war camp', () => moveEntry(), { size: 'sm', tip: 'Then click in the scene, where the waves come out' }),
+			kit.button(looking.get() ? 'Hide the view' : 'A view of it', () => (looking.set(!looking.get()), drawView(), drawDetails()), {
+				size: 'sm',
+				tip: 'A view of the war camp, of its own'
+			}),
+			kit.button(
+				'Take it out',
+				() => {
+					change(editor, `Take wave ${index + 1} out`, (waves) => void waves.splice(index, 1))
+					pick(index)
+				},
+				{ size: 'sm', variant: 'danger' }
+			)
+		)
+		details.append(buttons)
+	}
+
+	const moveEntry = () =>
+		panel.pick({
+			hint: 'Click where the waves come out (Esc: not now)',
+			pick: ({ ground }) => {
+				const entry = entryOf(editor)
+				if (!ground) return
+				if (entry) editor.edit((map) => map.markers.setPoint(entry.id, { x: ground.x, z: ground.z }), 'Move the war camp')
+				else editor.edit((map) => void map.markers.addPoint(ground, 0, WAR_CAMP), 'Say where the war camp is')
+			}
+		})
+
+	/** Where the picked wave comes in, as a ring in the scene as big as the wave: made again as it or the points change */
+	let undraw = () => {}
+	let ring: Mesh | undefined
+	const drawRing = () => {
+		undraw()
+		ring = undefined
+		undraw = panel.draw(
+			(scene, root) => {
+				const entry = entryOf(editor)
+				const wave = siegeWaves(editor)[picked.get()]
+				if (!entry || !wave) return
+				const count = wave.units.reduce((sum, unit) => sum + unit.count, 0)
+				ring = CreateTorus('campaign.waves.ring', { diameter: 2 + Math.sqrt(count), thickness: 0.25, tessellation: 48 }, scene)
+				ring.position.set(entry.x, editor.doc.terrain.heightAt(entry.x, entry.z) + 0.3, entry.z)
+				const paint = new StandardMaterial('campaign.waves.ring', scene)
+				paint.diffuseColor = wave.units.some((unit) => unit.type === 'brute') ? new Color3(1, 0.3, 0.2) : new Color3(1, 0.75, 0.3)
+				ring.material = paint
+				ring.parent = root
+			},
+			{ again: (changed) => changed.parts.has('points') }
+		)
+	}
+	// it turns, while the panel shows: what a frame hook does
+	panel.frame((dt) => {
+		if (ring && !ring.isDisposed()) ring.rotation.y += dt * 0.8
+	})
+
+	/** The view of where the waves come in, while it is asked for: drawn only while the panel shows */
+	let unview: (() => void) | undefined
+	const drawView = () => {
+		unview?.()
+		unview = undefined
+		view.remove()
+		if (!looking.get()) return
+		viewBox.append(view)
+		const made = panel.viewport(view, {
+			every: 2,
+			camera: (scene) => {
+				const entry = entryOf(editor) ?? { x: editor.map.width / 2, z: editor.map.depth / 2 }
+				return new ArcRotateCamera('campaign.waves.view', -Math.PI / 2, 0.9, 18, new Vector3(entry.x, 0, entry.z), scene)
+			}
+		})
+		unview = () => made.dispose()
+	}
+
+	/** How the waves go while the map is played here: the running world's */
+	const drawLive = () => {
+		const world = editor.world
+		if (!editor.playing() || !world) return void (live.textContent = `${siegeWaves(editor).length} waves`)
+		const state = wavesOf(world)
+		live.textContent =
+			state.phase === 'idle'
+				? `${siegeWaves(editor).length} waves: they come in the siege (the fort)`
+				: `Played here: wave ${Math.min(state.wave + 1, siegeWaves(editor).length)} of ${siegeWaves(editor).length}, ${state.phase}`
+	}
+
+	const draw = () => {
+		drawList()
+		if (!typing) drawDetails()
+		drawRing()
+		drawLive()
+		panel.setBadge(siegeWaves(editor).length)
+	}
+	draw()
+	drawView()
+	panel.onClose(() => {
+		for (const gone of fields.splice(0)) gone()
+	})
+	// the waves changed (a step done or undone here, the file changed on disk), the words typed, the game played
+	const offFile = editor.files.watch(FILE, (text) => {
+		if (text !== undefined && text !== `${JSON.stringify(siegeWaves(editor), null, '\t')}\n`) useWaves(editor, readWaves(JSON.parse(text)))
+		draw()
+	})
+	panel.onClose(offFile)
+	panel.on('play.started', drawLive)
+	panel.on('play.stopped', drawLive)
+	panel.on('play.tick', drawLive)
+	// the list follows the words typed (the filter is read as a Solid signal)
+	createRoot((dispose) => {
+		createEffect(on(filter, drawList, { defer: true }))
+		panel.onClose(dispose)
+	})
+}
+
+/** The campaign's waves panel, in the editor's own way of saying a panel */
+export const wavesPanel: EditorPanelDef = {
+	id: 'campaign.waves',
+	name: 'Waves',
+	icon: 'campaign.wave',
+	side: 'right',
+	// opens and closes it, the user's to move: W is the editor's, Shift+W the game's
+	key: 'Shift+KeyW',
+	// how many waves there are, on its icon, closed too
+	badge: (editor) => siegeWaves(editor).length,
+	header: {
+		mount(element, { editor }) {
+			element.append(
+				kit.button(
+					'Add',
+					() => {
+						change(editor, 'Add a wave', (waves) => void waves.push({ units: [{ type: 'raider', count: 4 }], interval: 1.5, bonus: 60 }))
+						editor.panels.api('campaign.waves')?.pick(siegeWaves(editor).length - 1)
+					},
+					{ variant: 'ghost', size: 'sm', tip: 'Add a wave after the last' }
+				)
+			)
+		}
+	},
+	// each wave, in the search of everything (and alone after `w`): picked, it is shown in the panel
+	prefix: 'w',
+	search: (editor): PanelSearchEntry[] =>
+		siegeWaves(editor).map((wave, index) => ({
+			id: String(index),
+			label: `Wave ${index + 1}`,
+			detail: describe(wave),
+			words: `${wave.units.map((unit) => unit.type).join(' ')}${wave.units.some((unit) => unit.type === 'brute') ? ' brute' : ''}`
+		})),
+	mount
+}

package/starters/empty/README.md

@@ -0,0 +1,71 @@
+# My game
+
+A game made with V12, at its start: a flat field, and a scout to walk it. Select it and right-click the ground.
+
+| To                     | Run                                                                  |
+| ---------------------- | -------------------------------------------------------------------- |
+| Play it                | `npm run dev`, and open the page it says: its start screen, Play     |
+<!-- @if editor -->
+| Make maps              | `npm run dev`, and open `/?editor`: Save writes them into `src/maps` |
+| Check the maps         | `npm run map check`: every map in `src/maps` against the game's rules |
+<!-- @end -->
+<!-- @if server -->
+<!-- @if !rooms -->
+| Play it on a server    | `npm run server`, beside `npm run dev`, and open `/?server`          |
+<!-- @end -->
+<!-- @if rooms -->
+| Play it online         | `npm run server`, beside `npm run dev`, and open `/?find-game`       |
+| Try it alone online    | the same, and join the room `practice`: the computer plays the rest  |
+<!-- @end -->
+<!-- @end -->
+<!-- @if tests -->
+| Test the rules         | `npm test`                                                           |
+<!-- @end -->
+| Check the types        | `npm run typecheck`                                                  |
+| Build the page to host | `npm run build`, into `dist/`                                        |
+
+## Where to go from here
+
+1. **A second unit type.** Add it to `UNIT` and `units` in `src/rules.ts`, and its look to `src/game.ts`. Give it `attackDamage`, `attackSpeed` and `attackRange` in its `stats`, and an attack in its `attacks`, and it fights.
+2. **A second player.** `players: 2` in `src/maps.ts`, with a start for each, and `start` gives them a scout too.
+<!-- @if editor -->
+3. **A map of your own.** Open `/?editor`, paint, raise ground, place units, and Save. Then import `src/maps/field.vgmap.json` in `src/maps.ts`, as its comment says.
+<!-- @end -->
+<!-- @if !editor -->
+3. **A map of your own.** `createMap` in `src/maps.ts` makes the field; its `ground`, `tiles` and `objects` are yours to fill in code.
+<!-- @end -->
+4. **Winning.** `victory` in `src/rules.ts`: `coreVictory` makes the last side with a unit of a kind the winner.
+<!-- @if assets -->
+5. **A model.** One of the shared art's (`import { characters } from '@v12-engine/assets'`, then `model: { src: characters.models.knight, scale: 0.6 }` in its look in `src/game.ts`), or a `.glb` of yours in `public/models/` (`src: 'scout.glb'`). The map editor's Content lists the shared art's trees, rocks and buildings to put down as scenery.
+<!-- @end -->
+<!-- @if !assets -->
+5. **A model.** A `.glb` in `public/models/`, and `model: { src: 'scout.glb', scale: 1 }` in its look in `src/game.ts`.
+<!-- @end -->
+
+## What is where
+
+- `src/rules.ts`: the rules, what there is and what happens once a game starts. The engine alone (`@v12-engine/engine`), so the page, the server and the tests play the same game
+- `src/game.ts`: how it looks, and the game whole (`defineGame`)
+- `src/maps.ts`: the maps. One, made in code. A map says which game it is for (`game`, the rules' `id`)
+- `src/main.ts`: the page, its scenes made by `appScenes`
+<!-- @if editor -->
+- `src/editor.ts`: the map editor's own settings, for `appScenes`
+<!-- @end -->
+<!-- @if server -->
+<!-- @if !rooms -->
+- `server.ts`: a server of the game, one game at a time, `startServer`
+<!-- @end -->
+<!-- @if rooms -->
+- `server.ts`: a server of many games, `GameRooms`: a room for each map, games players make (New game) and are matched for (Play now). The page's `/?find-game` is the client's Find a game
+<!-- @end -->
+<!-- @if ratings -->
+- `ratings.json` (made by the server): a rating for each player, moved by each game that ends with a winner, shown in the lobby
+<!-- @end -->
+<!-- @end -->
+<!-- @if tests -->
+- `tests/`: the rules tested with no page, `testWorld`
+<!-- @end -->
+- `public/` (make it when needed): the game's models (`.glb`, in `public/models/`), sounds and pictures
+<!-- @if assets -->
+- `@v12-engine/assets`: shared models to start with (adventurers with their clips, buildings, trees and rocks, props, weapons), served where `public/`'s files are by `assetsPackage()` in `vite.config.ts`; a file of yours at the same path is the one served, and a build copies what the game uses. Whose each file is: its group's `CREDITS.md` in `node_modules/@v12-engine/assets/groups/`
+<!-- @end -->

package/starters/empty/layers/tests/tests/rules.test.ts

@@ -0,0 +1,31 @@
+/** The rules, tested with no page: a world steps here as it does in a page (`@v12-engine/engine/testing`) */
+import { checkRules, createWorldFromMap } from '@v12-engine/engine'
+import { order, run, testWorld } from '@v12-engine/engine/testing'
+import { describe, expect, it } from 'vitest'
+import { mapNamed } from '../src/maps'
+import { rules, start, UNIT } from '../src/rules'
+
+describe('the rules', () => {
+	it('fit together: every id they name is theirs, every effect has a handler (checkRules)', () => {
+		expect(checkRules(rules).filter((problem) => problem.level === 'error')).toEqual([])
+	})
+
+	it('give each player with a start a scout, at it', async () => {
+		const map = mapNamed()
+		const world = await createWorldFromMap({ map, game: rules, seed: 1 })
+		start(world, { map })
+		const scouts = [...world.actors.values()].filter((entity) => entity.def.id === UNIT.scout)
+		expect(scouts).toHaveLength(map.players.length)
+		expect(scouts[0].pos.x).toBeCloseTo(map.players[0].start!.x)
+		world.dispose()
+	})
+
+	it('send a scout where it is ordered', async () => {
+		const world = await testWorld(rules)
+		const scout = world.spawn(UNIT.scout, 1, { x: 10, z: 10 })
+		order(world, [scout], { type: 'move', point: { x: 30, z: 10 } })
+		run(world, 20, () => scout.pos.x > 29)
+		expect(scout.pos.x).toBeGreaterThan(29)
+		world.dispose()
+	})
+})

package/starters/empty/src/game.ts

@@ -0,0 +1,79 @@
+/** The game, whole: its rules and how it looks. What the page plays and the editor makes maps for */
+import { defineGame, type GameView, hotView, presetBuffMarker, presetRallyFlag, presetSpellStyles, presetWeather, TILE_LOOKS } from '@v12-engine/client'
+import { rules, type Unit } from './rules'
+
+/**
+ * The look: a unit type is drawn from `parts` (boxes, cylinders, cones, spheres, pyramids) until it has a model, a
+ * `.glb` in `public/models/` named by `model` (`{ src: 'scout.glb', scale: 1 }`). `color: 'team'` is its side's colour
+// @if assets
+ *
+ * The shared art has models to start with: `import { characters } from '@v12-engine/assets'` and
+ * `model: { src: characters.models.knight, scale: 0.6 }` (played with its own clips)
+// @end
+ */
+export const view: GameView<Unit> = {
+	scene: {
+		// trees and scenery in front of the player's own units faded out (`seeThrough`): who for, how, how much
+		seeThrough: {},
+		/**
+		 * Looks by name to start a map from: the map editor's Look panel puts one on a map (Preset), a scene plays a map with
+		 * one (`gameScene({ environment: 'dusk' })`), the rules change to one (`world.setEnvironment(view.scene.environments.storm,
+		 * { over: 20 })`). Each is a `MapEnvironment`: sky, light, mist, wind, clouds, weather, water
+		 */
+		environments: {
+			dusk: {
+				sky: [0.55, 0.42, 0.5],
+				clouds: { cover: 0.4, color: [1, 0.8, 0.7] },
+				light: { sunUp: 12, sunAround: 250, sunColor: [1, 0.62, 0.42], sun: 1, ambient: 0.45, ambientColor: [0.8, 0.7, 0.9] },
+				fog: { start: 60, end: 200 },
+				mist: { ground: { base: 0, top: 2, density: 0.25 } }
+			},
+			storm: {
+				sky: [0.3, 0.33, 0.38],
+				clouds: { cover: 0.9, color: [0.55, 0.57, 0.6] },
+				cloudLayer: { height: 18, cover: 0.7, opacity: 0.55, shadows: 0.5 },
+				light: { sun: 0.7, ambient: 0.5 },
+				wind: { around: 70, strength: 0.8, gusts: 0.6 },
+				weather: { kind: 'rain', amount: 0.9, splashes: 0.6 },
+				fog: { start: 40, end: 140 }
+			}
+		},
+		// the ready-made rain (its map has some), styles of abilities, rally flag and buff glow: the client draws none by itself
+		weather: presetWeather()
+	},
+	fx: {
+		abilities: {
+			styles: presetSpellStyles()
+		}
+	},
+	units: {
+		looks: {
+			scout: {
+				height: 1.4,
+				parts: [
+					{ shape: 'cylinder', size: [0.6, 1, 0.6], offset: [0, 0.5, 0], color: 'team' },
+					{ shape: 'sphere', size: [0.45, 0.45, 0.45], offset: [0, 1.2, 0], color: [0.9, 0.8, 0.65] }
+				]
+			}
+		},
+		rallyFlag: presetRallyFlag(),
+		buffMarker: presetBuffMarker()
+	},
+	ground: {
+		/**
+		 * How each tile of the ground (src/tiles.ts) looks: a colour (the minimap's, and the ground's until its picture comes)
+		 * and a picture repeated over the ground. A picture is a file in `public/textures/` by its path there, or made in
+		 * code with no file: `pattern: 'grass'` (grass, gravel, rock, cobbles, planks, ice, lava… fifteen), with a `recipe` (a second
+		 * colour, specks, how strong, and the pattern's own parameters: `params: { seams: 1.2 }`), or a pattern of the
+		 * game's own (`patterns: { cobbles: definePattern({ name, params, shade }) }` on the view, then `pattern: 'cobbles'`;
+		 * the map editor offers it with a slider for each parameter)
+		 */
+		// the client's looks of the engine's tiles, made in code (no files), and the road as gravel of a colour of its own
+		tiles: { ...TILE_LOOKS, road: { color: [0.55, 0.52, 0.47], pattern: 'gravel' } }
+	}
+}
+
+export const game = defineGame({ rules, view, check: 'throw' })
+
+// saved while it runs (npm run dev): the game and the editor open take its new look, with no new page
+if (import.meta.hot) import.meta.hot.accept((module) => hotView(import.meta.hot, rules.id, view, module?.view))

package/starters/empty/src/generate.worker.ts

@@ -0,0 +1,9 @@
+/**
+ * The page's worker that makes the random map's preview with the game's generator (`rules.generator`), so the menu
+ * goes on while it is made. Given to the app in `main.ts` (`generatorWorker`)
+ */
+// the rules alone: nothing of the client is loaded into the worker
+import { serveMapGenerator } from '@v12-engine/engine'
+import { rules } from './rules'
+
+serveMapGenerator(rules)

package/starters/empty/src/maps.ts

@@ -0,0 +1,44 @@
+/**
+ * The maps of the game. There is one, made here in code: a flat field with a player on it and a road across it.
+// @if editor
+ * The map editor (`npm run dev`, then `/?editor`) opens it, and Save writes it into `src/maps/field.vgmap.json`. From
+ * then on the file is the map: import it here in its place, as the lines below say, and `flatField` can go
+// @end
+ */
+import { createMap, type GameMap } from '@v12-engine/engine'
+import { tiles } from './tiles'
+// @if editor
+// import { mapsFrom } from '@v12-engine/engine'
+// import field from './maps/field.vgmap.json'
+// @end
+
+/** A flat field of 32 cells a side, a player with a start in its middle, and a road across it */
+function flatField(): GameMap {
+	const map = createMap({ name: 'Field', width: 32, depth: 32, players: 1, game: 'my-game', tileset: tiles.map((tile) => tile.id) })
+	map.players[0].start = { x: 16, z: 16 }
+	// a cell's paint is the place of its tile in the map's tileset, from 1 (0 is none: the ground's own colour)
+	const road = map.tileset.indexOf('road') + 1
+	for (let z = 20; z < 22; z++) for (let x = 0; x < map.width; x++) map.tiles[z * map.width + x] = road
+	return map
+}
+
+/** The maps by name */
+// @if editor
+// once the editor has saved the field: mapsFrom({ './maps/field.vgmap.json': field })
+// @end
+export const maps: Readonly<Record<string, GameMap>> = { field: flatField() }
+
+// @if editor
+/** The map a game is on when nothing says which, and the one the editor opens first */
+// @end
+// @if !editor
+/** The map a game is on when nothing says which */
+// @end
+export const DEFAULT_MAP = 'field'
+
+/** A map by name, as a copy: a game changes nothing of what the next one starts from */
+export function mapNamed(name = DEFAULT_MAP): GameMap {
+	const map = maps[name]
+	if (!map) throw new Error(`There is no map "${name}": the maps are ${Object.keys(maps).join(', ')}`)
+	return structuredClone(map)
+}