@v12-engine/create 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,186 @@
+import { entityDied } from '@v12-engine/engine'
+import {
+	defineCommand,
+	defineComponent,
+	defineEvent,
+	defineGameFile,
+	defineListener,
+	defineTimer,
+	earn,
+	type Registry,
+	type World
+} from '@v12-engine/engine'
+import { ENEMY, MSG, PLAYER, UNIT } from './ids'
+import wavesData from './waves.json'
+
+/*
+ * The waves of the siege (mission two): who comes out of the war camp, how often, and what beating a wave pays. They
+ * are the file `waves.json`, a file of the game's own (`wavesFile`, in `GameModule.files`): each world's registry holds
+ * what it plays (`siegeWaves(world)`), which the editor's Waves panel changes as it writes the file (saved with the
+ * map, undone like the rest). They go by timers and events: nothing looks at them every tick
+ */
+
+export interface Wave {
+	/** Who comes, in order */
+	units: { type: string; count: number }[]
+	/** Seconds between one coming out of the camp and the next */
+	interval: number
+	/** Gold for beating the wave */
+	bonus: number
+}
+
+/** The waves' file, a file of the game's own: what the game lists (`GameModule.files`), read as waves */
+export const wavesFile = defineGameFile('waves.json', wavesData, readWaves)
+
+/** The waves a world, a screen or the editor plays, in order: its registry's (`registry.file`) */
+export const siegeWaves = (of: { readonly registry: Registry }): Wave[] => of.registry.file(wavesFile)
+
+/** The waves as the game was built with them, for what has no game to ask (a lane's label in the editor) */
+export const builtWaves = (): Wave[] => wavesFile.read(wavesFile.data)
+
+/** Waves as a file says them: what is not a wave of who comes, how often and for how much gold is left out */
+export function readWaves(data: unknown): Wave[] {
+	if (!Array.isArray(data)) return []
+	return data.flatMap((wave): Wave[] => {
+		if (!wave || typeof wave !== 'object' || !Array.isArray(wave.units)) return []
+		const units = (wave.units as unknown[]).flatMap((unit) =>
+			unit && typeof unit === 'object' && typeof (unit as { type?: unknown }).type === 'string' && Number((unit as { count?: unknown }).count) > 0
+				? [{ type: (unit as { type: string }).type, count: Math.floor(Number((unit as { count: number }).count)) }]
+				: []
+		)
+		const interval = Number(wave.interval)
+		const bonus = Number(wave.bonus)
+		return units.length ? [{ units, interval: interval > 0 ? interval : 1, bonus: bonus >= 0 ? bonus : 0 }] : []
+	})
+}
+
+/** Seconds before the first wave, and between one wave being beaten and the next coming */
+export const FIRST_WAIT = 45
+export const BETWEEN_WAVES = 25
+
+/** Where the waves come out, and what they go for: points and names of the fort's map */
+export const WAR_CAMP = 'warcamp'
+export const HALL = 'hall'
+
+export type Phase = 'idle' | 'waiting' | 'coming' | 'fighting' | 'over'
+
+interface WaveState {
+	/** The wave that comes next, or is coming: 0 for the first */
+	wave: number
+	/** `idle` until a mission starts the waves */
+	phase: Phase
+	/** The timer the next wave waits for, while waiting */
+	timer: number
+	/** Who of the wave is still to come out, in order */
+	queue: string[]
+}
+
+/**
+ * The state of the waves, kept in the world: what the waves remember belongs to the world, not to the game module,
+ * which every world shares. As world state it goes into a save, and so do the timers it waits for
+ */
+export const waves = defineComponent<WaveState>('campaign.waves', { default: () => ({ wave: 0, phase: 'idle', timer: 0, queue: [] }) })
+
+export const wavesOf = (world: World): WaveState => world.state(waves)
+
+/** The Red Hand still standing */
+function raiders(world: World): number {
+	let count = 0
+	for (const entity of world.index.ownedBy(ENEMY)) if (entity.alive && entity.def.kind === 'unit') count++
+	return count
+}
+
+/** A wave was beaten: how many are, now. For whoever keeps count, like the mission */
+export const waveBeaten = defineEvent<{ wave: number }>('campaign.waveBeaten')
+/** A wave is coming out of the camp: for the mission (the gate shuts) and the screen (the horn, the flare) */
+export const waveComing = defineEvent<{ wave: number; x: number; z: number }>('campaign.waveComing', { replicate: 'everyone' })
+
+/** The next wave is due: its raiders come out of the camp, one every so often */
+const waveComes = defineTimer('campaign.waveComes', (world) => {
+	if (world.winner !== null) return
+	const state = wavesOf(world)
+	const { units, interval } = siegeWaves(world)[state.wave]
+	// where Retry goes back to: the start of this wave
+	world.checkpoint({ key: MSG.checkpointWave, params: { wave: state.wave + 1 } })
+	state.phase = 'coming'
+	state.queue = units.flatMap(({ type, count }) => Array.from({ length: count }, () => type))
+	world.timers.every(interval, raiderComes, { times: state.queue.length, first: 0 })
+	const camp = world.map.point(WAR_CAMP)
+	world.events.emit(waveComing, { wave: state.wave + 1, x: camp.x, z: camp.z })
+	world.message(PLAYER, { key: MSG.waveComing, params: { wave: state.wave + 1 } }, 'info')
+})
+
+/** The next raider of the wave comes out, and goes for the hall. After the last, the wave is fought */
+const raiderComes = defineTimer('campaign.raiderComes', (world, _data, { left }) => {
+	if (world.winner !== null) return
+	const state = wavesOf(world)
+	comeOut(world, state.queue.shift()!)
+	if (left === 0) state.phase = 'fighting'
+})
+
+/** The last raider of a wave died: the wave is beaten, for gold, and the next one is set to come */
+const lastOfTheWave = defineListener({
+	event: entityDied,
+	id: 'campaign.lastOfTheWave',
+	run(world, { entity }) {
+		const state = wavesOf(world)
+		if (entity.owner !== ENEMY || state.phase !== 'fighting' || raiders(world) > 0 || world.winner !== null) return
+		const { bonus } = siegeWaves(world)[state.wave]
+		earn(world.player(PLAYER).resources, 'gold', bonus)
+		if (bonus) world.message(PLAYER, { key: MSG.waveBeaten, params: { wave: state.wave + 1, bonus } }, 'info')
+		state.wave++
+		world.events.emit(waveBeaten, { wave: state.wave })
+		if (state.wave >= siegeWaves(world).length) state.phase = 'over'
+		else waitForWave(world, BETWEEN_WAVES)
+	}
+})
+
+/** Waits for the next wave, `seconds` from now */
+function waitForWave(world: World, seconds: number): void {
+	const state = wavesOf(world)
+	state.phase = 'waiting'
+	state.timer = world.timers.after(seconds, waveComes)
+}
+
+/** Sets the first wave to come. Called once, as the siege begins */
+export const startWaves = (world: World) => waitForWave(world, FIRST_WAIT)
+
+/** A raider comes out of the camp and goes for the hall: the order goes in as a command, the way every order does */
+function comeOut(world: World, type: string): void {
+	const camp = world.map.point(WAR_CAMP)
+	const raider = world.spawn(type, ENEMY, camp, { facing: camp.facing })
+	const hall = world.named(HALL)
+	const order = hall?.alive
+		? { type: 'attack', target: hall.id }
+		: { type: 'move', point: { x: world.terrain.width / 2, z: world.terrain.depth / 2 } }
+	world.issue({ type: 'order', player: ENEMY, entities: [raider.id], order })
+}
+
+/** Brings the next wave on now, instead of waiting for it. The seconds that were left are paid out in gold */
+export const nextWave = defineCommand('nextWave', {}, (world, player) => {
+	const state = wavesOf(world)
+	if (player !== PLAYER || state.phase !== 'waiting' || world.winner !== null) return
+	earn(world.player(PLAYER).resources, 'gold', Math.ceil(world.timers.left(state.timer) ?? 0))
+	world.timers.cancel(state.timer)
+	waveComes.run(world, undefined, { id: state.timer, left: 0 })
+})
+
+/** What of the waves goes into the game module: the timers, so that a save finds them, and the listener */
+export const waveTimers = [waveComes, raiderComes]
+export const waveListeners = [lastOfTheWave]
+
+/** What the player is told about the waves, for the HUD: see `GameModule.report`. Nothing until a mission starts them */
+export function reportWaves(world: World): Record<string, unknown> {
+	const state = wavesOf(world)
+	if (state.phase === 'idle') return {}
+	return {
+		wave: Math.min(state.wave + 1, siegeWaves(world).length),
+		waves: siegeWaves(world).length,
+		phase: world.winner !== null ? 'over' : state.phase,
+		countdown: state.phase === 'waiting' ? Math.ceil(world.timers.left(state.timer) ?? 0) : 0,
+		left: raiders(world) + state.queue.length
+	}
+}
+
+/** The types the Waves panel offers */
+export const WAVE_UNITS = [UNIT.raider, UNIT.warlock, UNIT.brute] as const

package/starters/campaign/src/campaign-editor.ts

@@ -0,0 +1,43 @@
+import { defineEditorExtension, type EditorIcon, type SearchSource } from '@v12-engine/editor'
+import { siegeWaves } from './campaign/waves'
+import { waveLane } from './campaign/view/waveLane'
+import { wavesPanel } from './waves-panel'
+
+/*
+ * What the campaign adds to its map editor: the Waves panel (`src/waves-panel.ts`), its icon, each wave in the search
+ * of everything, and its own lane of cinematics (`waveLane`). Declared as one extension (`defineEditorExtension`): the editor scene lists it
+ * (`extensions`), and saved while the editor is open (`npm run dev`) it is taken as it is
+ */
+
+/** The campaign's own icons in its editor, by name: waves, drawn as the editor's own are (a line, in the colour of the words) */
+export const editorIcons: Record<string, EditorIcon> = {
+	'campaign.wave':
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/></svg>'
+}
+
+/** What the campaign adds to its editor's search: the missions' maps by name, to open */
+export const editorSearch: SearchSource[] = [
+	{
+		id: 'campaign.waves',
+		name: 'The siege',
+		entries: (editor) =>
+			siegeWaves(editor).map((wave, index) => ({
+				id: `wave:${index}`,
+				label: `Wave ${index + 1} of the siege`,
+				kind: 'Wave',
+				words: wave.units.map((unit) => unit.type).join(' '),
+				run: (client) => client.panels.api('campaign.waves')?.pick(index)
+			}))
+	}
+]
+
+export const campaignEditor = defineEditorExtension({
+	id: 'campaign',
+	name: 'The campaign',
+	panels: [wavesPanel],
+	icons: editorIcons,
+	search: editorSearch,
+	// the game's own lane of cinematics: the view plays it (`lanes` there), and here it is in the Cinematic panel with
+	// its fields, its ring on the map and its check, as the client's own lanes are
+	lanes: [waveLane]
+})

package/starters/campaign/src/game.ts

@@ -0,0 +1,2 @@
+/** The game, whole: the campaign's rules and how it looks (`src/campaign/game.ts`, its view in `src/campaign/view`) */
+export { campaignGame as game } from './campaign/game'

package/starters/campaign/src/main.ts

@@ -0,0 +1,70 @@
+/**
+ * The page: the game's start screen, and what it goes to from there, each a screen of an app of scenes (`startApp`,
+ * `@v12-engine/client/app`), one shown at a time. `appScenes` makes the start screen, the game, a random map when the
+ * rules have a generator, and the settings; the campaign adds its own menu and its mission scene
+ * (`src/campaign/scenes.ts`). Free play plays a map with its mission's rules and nothing kept.
+// @if editor
+ * The map editor too, set up in `src/editor.ts`.
+// @end
+// @if server
+ * A seat at the game's server too (`npm run server`).
+// @end
+ * The list is a plain array and its scenes plain objects: add a scene of your own, take one away, or change one. The
+ * address opens straight into a scene by its id (`sceneAsked`: `/?settings`, and those the README says), the start
+ * screen otherwise. The debug panel (🐞 on the top bar, Alt+Shift+D) and its cheats are in the game while developing
+ * (`npm run dev`), not in a built page: `debug` says otherwise
+ */
+import { appScenes, type MenuScene, sceneAsked, startApp } from '@v12-engine/client/app'
+import '@v12-engine/client/styles.css'
+// the theme's typefaces come with the client: the page's own font stays what it was
+import '@v12-engine/client/fonts.css'
+import { theLongRoad } from './campaign/scenes'
+// @if editor
+import { editor } from './editor'
+// @end
+import { DEFAULT_MAP, maps } from './maps'
+import { rules, start } from './rules'
+
+const scenes = appScenes({
+	// the game's code (its looks, and the client that draws them) fetched as a scene first plays it: the start screen
+	// shows at once, its rules telling it what to say of the game
+	game: () => import('./game').then((module) => module.game),
+	rules,
+	maps,
+	map: DEFAULT_MAP,
+	start,
+	// @if editor
+	editor,
+	// @end
+	// @if single
+	server: true,
+	// @end
+	// @if rooms
+	server: { rooms: true },
+	// @end
+	menu: {
+		description: 'A campaign made with V12: three missions, a hero carried from one to the next.',
+		details: [{ label: 'Missions', value: 'three, played in order' }]
+	},
+	// the Credits on the start screen (`creditsScene`): who made the game, by parts, scrolling
+	credits: {
+		sections: [
+			{ title: 'Made by', names: ['You'] },
+			{ title: 'Made with', names: ['V12'] }
+		]
+	}
+})
+
+// the campaign's menu and missions among the scenes, its button first on the start screen
+scenes.push(...theLongRoad.scenes)
+const home = scenes.find((scene) => scene.id === 'home') as MenuScene
+home.buttons.unshift({ label: 'Campaign', scene: theLongRoad.menu })
+// the game on its own is Free play: a map with its mission's rules, nothing carried or kept
+for (const scene of scenes) if (scene.id === 'play') scene.name = 'Free play'
+for (const button of home.buttons) if (button.scene?.id === 'play') button.label = 'Free play'
+
+/** The ground's textures made in a worker of the page's (`src/ground.worker.ts`), made at the first texture: the page goes on while they are made */
+const groundWorker = () => new Worker(new URL('./ground.worker.ts', import.meta.url), { type: 'module' })
+
+const app = startApp({ target: '#game', title: rules.name, scenes, start: sceneAsked(scenes, 'home'), groundWorker })
+Object.assign(window, { app })

package/starters/campaign/src/maps/fort.names.ts

@@ -0,0 +1,31 @@
+// Written by the map editor with fort.vgmap.json, anew with every save: not to be changed by hand
+
+/** What is named on the map, for `world.named<FortNames>(...)` */
+export type FortNames =
+	| 'hall'
+	| 'hero'
+
+/** The camps that are named on the map, for `campNamed(world, ...)` */
+export type FortCamps = never
+
+/** The regions of the map, for `world.areas` and `enteredArea` */
+export type FortRegions = never
+
+/** The points of the map, for `world.map.point(...)` */
+export type FortPoints =
+	| 'warcamp'
+
+/** The paths of the map, for `world.map.path(...)` */
+export type FortPaths =
+	| 'road'
+
+/** The lights of the map that are named, for `client.lights.named(...)` */
+export type FortLights =
+	| 'bonfire'
+
+/** The effects of the map that are named, for `client.mapEffects.named(...)` */
+export type FortEffects =
+	| 'bonfire'
+
+/** The ids of the regions, points and paths by name: what a field that names one keeps (it is handed the name) */
+export const FortIds = { regions: {  }, points: { "warcamp": 28 }, paths: { "road": 1 } } as const