@v12-engine/create 0.1.1 → 0.4.0

package/starters/examples/src/shell/shell.ts

@@ -0,0 +1,290 @@
+/**
+ * The examples' frame, as three.js's examples page has it: the list down the left (searched, by category, the one open
+ * marked), and the example on the right with a card over it (its name, what it shows, its controls, where its code is).
+ * Plain HTML, so the list's page carries nothing of the client: the game is drawn into `content`
+ */
+import { CATEGORIES, type ExampleDef } from '../examples/define'
+import { examples } from '../examples/catalog'
+import type { GameClientApi } from '@v12-engine/client'
+import { errorFields } from '@v12-engine/engine'
+import type { ExampleControl, ExampleLook } from './look'
+import { STYLE } from './style'
+
+/** What the frame is told: the example open (none on the list's own page), and how to open another */
+export interface ShellOptions {
+	current?: ExampleDef
+	open: (id: string) => void
+	/** The start screen, from the frame's top */
+	home: () => void
+	/** Fetches an example's code and files ahead, as the pointer comes over its link */
+	warm?: (id: string) => void
+}
+
+/** The frame put up in an element: where the example is drawn, and what fills in its card once its game is drawn */
+export interface Shell {
+	/** Where the example (or the list's page) is drawn */
+	content: HTMLElement
+	/** The example's controls, run with its client once its game is drawn */
+	controls(look: ExampleLook | undefined, client: GameClientApi): void
+	dispose(): void
+}
+
+/** Where the list was scrolled to and what was searched, kept from one example to the next */
+const kept = { scroll: 0, search: '', collapsed: false }
+
+/** Puts the frame up in `element`; `dispose` takes it away */
+export function mountShell(element: HTMLElement, options: ShellOptions): Shell {
+	addStyle()
+	const root = make('div', 'vx-root')
+	root.classList.toggle('vx-collapsed', kept.collapsed)
+	const side = make('aside', 'vx-side')
+	const content = make('main', 'vx-content')
+	root.append(side, content)
+	element.append(root)
+
+	// the top: the name, the start screen, the list folded away
+	const top = make('header', 'vx-top')
+	const brand = make('button', 'vx-brand')
+	brand.innerHTML = 'V12 <span>examples</span>'
+	brand.title = 'All the examples'
+	brand.onclick = () => options.open('')
+	const home = make('button', 'vx-icon')
+	home.textContent = '⌂'
+	home.title = 'The start screen'
+	home.onclick = options.home
+	const fold = make('button', 'vx-icon vx-fold')
+	fold.textContent = '⟨'
+	fold.title = 'Fold the list away'
+	fold.onclick = () => {
+		kept.collapsed = !kept.collapsed
+		root.classList.toggle('vx-collapsed', kept.collapsed)
+		fold.textContent = kept.collapsed ? '⟩' : '⟨'
+		// the game's canvas is sized by its element: told the element changed
+		window.dispatchEvent(new Event('resize'))
+	}
+	fold.textContent = kept.collapsed ? '⟩' : '⟨'
+	top.append(brand, home, fold)
+	for (const each of [brand, home, fold]) keepFocusOff(each)
+
+	const search = make('input', 'vx-search') as HTMLInputElement
+	search.type = 'search'
+	search.placeholder = `Search ${examples.length} examples  ( / )`
+	search.value = kept.search
+	search.spellcheck = false
+
+	const list = make('nav', 'vx-list')
+	side.append(top, search, list)
+
+	const links: { def: ExampleDef; link: HTMLElement; words: string }[] = []
+	for (const category of CATEGORIES) {
+		const own = examples.filter((each) => each.category === category.id)
+		if (!own.length) continue
+		const section = make('section', 'vx-section')
+		const title = make('h3', '')
+		title.textContent = category.title
+		title.title = category.summary
+		section.append(title)
+		for (const def of own) {
+			const link = make('a', 'vx-link') as HTMLAnchorElement
+			link.href = `?${def.id}`
+			link.textContent = def.title
+			link.title = def.summary
+			if (def.id === options.current?.id) link.classList.add('vx-on')
+			keepFocusOff(link)
+			// its code and files fetched while the pointer is on its way to press it
+			link.onpointerenter = () => def.id !== options.current?.id && options.warm?.(def.id)
+			link.onclick = (event) => {
+				if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return
+				event.preventDefault()
+				if (def.id !== options.current?.id) options.open(def.id)
+			}
+			section.append(link)
+			links.push({ def, link, words: [def.title, def.summary, def.id, category.title, ...(def.tags ?? [])].join(' ').toLowerCase() })
+		}
+		list.append(section)
+	}
+
+	const filter = () => {
+		kept.search = search.value
+		const words = search.value.toLowerCase().split(/\s+/).filter(Boolean)
+		for (const each of links) each.link.hidden = !words.every((word) => each.words.includes(word))
+		for (const section of list.querySelectorAll('section'))
+			(section as HTMLElement).hidden = ![...section.querySelectorAll('a')].some((a) => !a.hidden)
+	}
+	search.oninput = filter
+	search.onkeydown = (event) => {
+		if (event.key === 'Enter') links.find((each) => !each.link.hidden)?.link.click()
+		if (event.key === 'Escape') {
+			search.value = ''
+			filter()
+			search.blur()
+		}
+		// the game's keys are not for what is typed here
+		event.stopPropagation()
+	}
+	filter()
+	list.onscroll = () => (kept.scroll = list.scrollTop)
+	requestAnimationFrame(() => {
+		list.scrollTop = kept.scroll
+		const on = list.querySelector<HTMLElement>('.vx-on')
+		if (on && (on.offsetTop < list.scrollTop || on.offsetTop > list.scrollTop + list.clientHeight - 40)) on.scrollIntoView({ block: 'center' })
+	})
+	const slash = (event: KeyboardEvent) => {
+		if (event.key !== '/' || document.activeElement === search) return
+		event.preventDefault()
+		event.stopPropagation()
+		search.focus()
+		search.select()
+	}
+	window.addEventListener('keydown', slash, true)
+
+	// the card over the example: its name, what it shows, its controls, where its code is
+	let card: HTMLElement | undefined
+	let controlsBox: HTMLElement | undefined
+	let hintLine: HTMLElement | undefined
+	if (options.current) {
+		const def = options.current
+		const category = CATEGORIES.find((each) => each.id === def.category)
+		card = make('div', 'vx-card')
+		const head = make('div', 'vx-card-head')
+		const name = make('h2', '')
+		name.textContent = def.title
+		const shut = make('button', 'vx-icon')
+		shut.textContent = '–'
+		shut.title = 'Fold the card'
+		shut.onclick = () => card!.classList.toggle('vx-card-folded')
+		keepFocusOff(shut)
+		head.append(name, shut)
+		const about = make('p', 'vx-summary')
+		about.textContent = def.summary
+		controlsBox = make('div', 'vx-controls')
+		controlsBox.innerHTML = '<div class="vx-wait">Loading…</div>'
+		hintLine = make('p', 'vx-hint')
+		hintLine.textContent = POINT_AT
+		const where = make('p', 'vx-where')
+		const folder = `src/examples/${def.category}/`
+		where.innerHTML = `<span>${category?.title ?? ''}</span> · <code>${folder}</code>`
+		where.title = `Its rules in ${folder}index.ts, its look and controls in ${folder}looks.ts${def.source?.length ? `, and ${def.source.join(', ')}` : ''}`
+		card.append(head, about, controlsBox, hintLine, where)
+		content.append(card)
+	}
+
+	const timers: number[] = []
+	return {
+		content,
+		controls(look, client) {
+			if (!controlsBox) return
+			const shown = (hint?: string) => hintLine && (hintLine.textContent = hint ?? POINT_AT)
+			controlsBox.replaceChildren(...(look?.controls ?? []).map((control) => controlOf(control, client, timers, shown)))
+			if (hintLine) hintLine.hidden = !look?.controls?.some((control) => control.hint)
+		},
+		dispose() {
+			window.removeEventListener('keydown', slash, true)
+			for (const timer of timers) clearInterval(timer)
+			root.remove()
+		}
+	}
+}
+
+/** A control as an element, run with the client */
+function controlOf(control: ExampleControl, client: GameClientApi, timers: number[], shown: (hint?: string) => void): HTMLElement {
+	const row = make('div', `vx-control vx-${control.kind}`)
+	if (control.hint) {
+		row.title = control.hint
+		row.onpointerenter = () => shown(control.hint)
+		row.onpointerleave = () => shown()
+	}
+	const label = make('label', '')
+	label.textContent = control.label
+	const run = (action: () => void) => {
+		try {
+			action()
+		} catch (error) {
+			client.log.error('examples', `The control "${control.label}" failed`, errorFields(error))
+		}
+	}
+	switch (control.kind) {
+		case 'button': {
+			const button = make('button', 'vx-button')
+			button.textContent = control.label
+			button.onclick = () => run(() => control.run(client))
+			keepFocusOff(button)
+			row.append(button)
+			break
+		}
+		case 'toggle': {
+			const box = make('input', '') as HTMLInputElement
+			box.type = 'checkbox'
+			box.checked = control.value
+			box.onchange = () => {
+				run(() => control.set(client, box.checked))
+				box.blur()
+			}
+			label.prepend(box)
+			row.append(label)
+			break
+		}
+		case 'slider': {
+			const value = make('span', 'vx-value')
+			const range = make('input', '') as HTMLInputElement
+			range.type = 'range'
+			range.min = String(control.min)
+			range.max = String(control.max)
+			range.step = String(control.step ?? (control.max - control.min) / 100)
+			range.value = String(control.value)
+			value.textContent = String(control.value)
+			range.oninput = () => {
+				value.textContent = range.value
+				run(() => control.set(client, Number(range.value)))
+			}
+			// let go, the arrow keys are the camera's again
+			range.onpointerup = () => range.blur()
+			label.append(value)
+			row.append(label, range)
+			break
+		}
+		case 'select': {
+			const choice = make('select', '') as HTMLSelectElement
+			for (const option of control.options) choice.append(new Option(option, option, false, option === control.value))
+			choice.onchange = () => {
+				run(() => control.set(client, choice.value))
+				choice.blur()
+			}
+			row.append(label, choice)
+			break
+		}
+		case 'text': {
+			const value = make('span', 'vx-value')
+			const update = () => run(() => (value.textContent = control.text(client)))
+			update()
+			timers.push(window.setInterval(update, 500))
+			label.append(value)
+			row.append(label)
+			break
+		}
+	}
+	return row
+}
+
+/** What the hint line says while the pointer is over no control */
+const POINT_AT = 'Point at a control to see what it does.'
+
+/**
+ * A button or link pressed with the mouse keeps the focus where it was: the game's keys (the arrows, space) stay the
+ * game's, not this element's. The keyboard still reaches it with Tab
+ */
+const keepFocusOff = (element: HTMLElement) => element.addEventListener('mousedown', (event) => event.preventDefault())
+
+const make = (tag: string, className: string): HTMLElement => {
+	const element = document.createElement(tag)
+	if (className) element.className = className
+	return element
+}
+
+function addStyle(): void {
+	if (document.getElementById('vx-style')) return
+	const style = document.createElement('style')
+	style.id = 'vx-style'
+	style.textContent = STYLE
+	document.head.append(style)
+}

package/starters/examples/src/shell/style.ts

@@ -0,0 +1,202 @@
+/** The frame's styles (`./shell.ts`), put on the page once */
+export const STYLE = `
+.vx-root {
+	--vx-bg: #101114;
+	--vx-panel: #16181d;
+	--vx-line: #262a33;
+	--vx-text: #d7dbe3;
+	--vx-dim: #8a91a0;
+	--vx-accent: #f2b84b;
+	--vx-accent-dim: rgba(242, 184, 75, 0.14);
+	--vx-side: 280px;
+	position: absolute;
+	inset: 0;
+	display: flex;
+	background: var(--vx-bg);
+	color: var(--vx-text);
+	font: 13px/1.45 system-ui, -apple-system, 'Segoe UI', sans-serif;
+}
+.vx-side *, .vx-card, .vx-card *, .vx-index * { box-sizing: border-box; }
+.vx-side {
+	width: var(--vx-side);
+	flex: none;
+	display: flex;
+	flex-direction: column;
+	border-right: 1px solid var(--vx-line);
+	background: var(--vx-panel);
+	transition: margin-left 160ms ease;
+	z-index: 2;
+}
+.vx-collapsed .vx-side { margin-left: calc(-1 * var(--vx-side) + 34px); }
+.vx-collapsed .vx-side > :not(.vx-top) { visibility: hidden; }
+.vx-collapsed .vx-top > :not(.vx-fold) { visibility: hidden; }
+.vx-top { display: flex; align-items: center; gap: 4px; padding: 10px 8px 8px 14px; }
+.vx-brand {
+	flex: 1;
+	text-align: left;
+	background: none;
+	border: 0;
+	color: var(--vx-text);
+	font: 700 16px/1 system-ui, sans-serif;
+	letter-spacing: 0.02em;
+	cursor: pointer;
+	padding: 4px 0;
+}
+.vx-brand span { color: var(--vx-accent); font-weight: 500; }
+.vx-icon {
+	width: 26px;
+	height: 26px;
+	border-radius: 6px;
+	border: 1px solid var(--vx-line);
+	background: transparent;
+	color: var(--vx-dim);
+	cursor: pointer;
+	font-size: 14px;
+	line-height: 1;
+}
+.vx-icon:hover { color: var(--vx-text); border-color: var(--vx-dim); }
+.vx-search {
+	margin: 0 12px 8px;
+	padding: 7px 10px;
+	border-radius: 6px;
+	border: 1px solid var(--vx-line);
+	background: var(--vx-bg);
+	color: var(--vx-text);
+	font: inherit;
+	outline: none;
+}
+.vx-search:focus { border-color: var(--vx-accent); }
+.vx-list { flex: 1; overflow-y: auto; padding: 0 6px 24px; scrollbar-width: thin; }
+.vx-section h3 {
+	margin: 14px 8px 4px;
+	font-size: 11px;
+	font-weight: 600;
+	text-transform: uppercase;
+	letter-spacing: 0.08em;
+	color: var(--vx-dim);
+}
+.vx-link {
+	display: block;
+	padding: 4px 8px;
+	border-radius: 5px;
+	color: var(--vx-text);
+	text-decoration: none;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+.vx-link:hover { background: rgba(255, 255, 255, 0.05); }
+.vx-link.vx-on { background: var(--vx-accent-dim); color: var(--vx-accent); }
+.vx-content { position: relative; flex: 1; min-width: 0; overflow: hidden; }
+.vx-game { position: absolute; inset: 0; }
+.vx-card {
+	position: absolute;
+	top: 84px;
+	right: 12px;
+	width: 290px;
+	max-height: calc(100% - 300px);
+	min-height: 120px;
+	overflow-y: auto;
+	z-index: 30;
+	padding: 12px 14px;
+	border-radius: 10px;
+	border: 1px solid var(--vx-line);
+	background: rgba(16, 17, 20, 0.88);
+	backdrop-filter: blur(6px);
+	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
+	scrollbar-width: thin;
+}
+.vx-card-head { display: flex; align-items: center; gap: 8px; }
+.vx-card h2 { flex: 1; margin: 0; font-size: 15px; font-weight: 650; }
+.vx-card-folded > :not(.vx-card-head) { display: none; }
+.vx-card-folded { min-height: 0; }
+.vx-summary { margin: 6px 0 10px; color: var(--vx-dim); }
+.vx-hint {
+	margin: 8px 0 0;
+	padding: 6px 8px;
+	min-height: 2.9em;
+	border-radius: 6px;
+	background: rgba(255, 255, 255, 0.04);
+	color: var(--vx-text);
+	font-size: 12px;
+}
+.vx-root :focus:not(:focus-visible) { outline: none; }
+.vx-root :focus-visible { outline: 2px solid var(--vx-accent); outline-offset: 1px; }
+.vx-loading {
+	position: absolute;
+	inset: 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 14px;
+	background: var(--vx-bg);
+	color: var(--vx-dim);
+}
+.vx-loading strong { color: var(--vx-text); font-size: 15px; font-weight: 600; }
+.vx-spinner {
+	width: 28px;
+	height: 28px;
+	border-radius: 50%;
+	border: 3px solid var(--vx-line);
+	border-top-color: var(--vx-accent);
+	animation: vx-spin 0.8s linear infinite;
+}
+@keyframes vx-spin { to { transform: rotate(360deg); } }
+.vx-bar { width: 220px; height: 4px; border-radius: 2px; background: var(--vx-line); overflow: hidden; }
+.vx-bar > div { height: 100%; width: 0; background: var(--vx-accent); transition: width 120ms linear; }
+.vx-where { margin: 10px 0 0; font-size: 11px; color: var(--vx-dim); }
+.vx-where code { color: var(--vx-text); }
+.vx-controls { display: flex; flex-direction: column; gap: 6px; }
+.vx-controls:empty { display: none; }
+.vx-wait { color: var(--vx-dim); font-style: italic; }
+.vx-control label { display: flex; align-items: center; gap: 6px; }
+.vx-value { margin-left: auto; color: var(--vx-accent); font-variant-numeric: tabular-nums; }
+.vx-slider input, .vx-select select { width: 100%; }
+.vx-select select {
+	margin-top: 2px;
+	padding: 4px;
+	border-radius: 5px;
+	border: 1px solid var(--vx-line);
+	background: var(--vx-bg);
+	color: var(--vx-text);
+}
+.vx-slider input { accent-color: var(--vx-accent); }
+.vx-toggle input { accent-color: var(--vx-accent); }
+.vx-button {
+	width: 100%;
+	padding: 6px 10px;
+	border-radius: 6px;
+	border: 1px solid #4a3d22;
+	background: #2a2416;
+	color: #f1e4c3;
+	font: 600 12.5px system-ui, sans-serif;
+	cursor: pointer;
+	text-align: left;
+}
+.vx-button:hover { border-color: var(--vx-accent); }
+.vx-button:active { transform: translateY(1px); }
+.vx-index { position: absolute; inset: 0; overflow-y: auto; padding: 32px 40px 60px; }
+.vx-index h1 { margin: 0 0 4px; font-size: 26px; }
+.vx-index > p { margin: 0 0 22px; color: var(--vx-dim); max-width: 760px; }
+.vx-index h2 { margin: 26px 0 2px; font-size: 16px; }
+.vx-index h2 + p { margin: 0 0 10px; color: var(--vx-dim); }
+.vx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
+.vx-tile {
+	display: block;
+	padding: 12px;
+	border-radius: 8px;
+	border: 1px solid var(--vx-line);
+	background: var(--vx-panel);
+	color: inherit;
+	text-decoration: none;
+}
+.vx-tile:hover { border-color: var(--vx-accent); }
+.vx-tile strong { display: block; margin-bottom: 3px; }
+.vx-tile span { color: var(--vx-dim); font-size: 12px; }
+@media (max-width: 760px) {
+	.vx-root { --vx-side: 220px; }
+	.vx-card { width: auto; left: 12px; top: 56px; max-height: 40%; }
+	.vx-index { padding: 20px 16px 40px; }
+}
+`

package/starters/examples/src/view.ts

@@ -0,0 +1,50 @@
+/**
+ * How the game looks (`GameView`): the client's, fetched as the page first plays an example. The shared units' looks
+ * (`src/examples/common/looks.ts`), then what each category adds over them (its `looks.ts`); an example's own look and
+ * controls are laid over this as its scene opens (`src/shell/scene.ts`)
+ */
+import { type GameView, hotView, presetView } from '@v12-engine/client'
+import { sharedLooks } from './examples/common/looks'
+import { categoryLooks } from './examples/looks'
+import { registry } from './shell/registry'
+
+const shared: GameView = presetView({
+	world: {
+		// trees and scenery in front of the player's own units faded out
+		seeThrough: {},
+		// looks by name an example can play its map with (`ExampleDef.environment`)
+		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 } }
+			},
+			night: {
+				sky: [0.05, 0.07, 0.14],
+				light: { sunUp: 35, sunAround: 200, sunColor: [0.55, 0.65, 1], sun: 0.35, ambient: 0.25, ambientColor: [0.35, 0.4, 0.7] },
+				fog: { start: 40, end: 160 }
+			},
+			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 }
+			}
+		}
+	},
+	units: { looks: sharedLooks }
+})
+
+/** The look every example starts from: the shared one, with each category's laid over it in the list's order */
+export const view: GameView = categoryLooks.reduce((made, each) => each.view?.(made) ?? made, shared)
+
+// each example's own look and controls, by its id, where its scene finds them as it opens
+registry.looks = Object.assign({}, ...categoryLooks.map((each) => each.looks ?? {}))
+
+// 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, 'examples', view, module?.view))

package/starters/melee/README.md

@@ -22,12 +22,16 @@ A real-time strategy game made with V12, whole: melee. Two races, the humans and
 <!-- @end -->
 | Check the types | `npm run typecheck` |
 | Build the page to host | `npm run build`, into `dist/` |
+<!-- @if desktop -->
+| Play it as an app | `npm run app`: the page in a window of its own (Electron, fetched the first time) |
+| Make the app to hand out | `npm run package`, into `out/` |
+<!-- @end -->
 
 ## What is where
 
-- `src/melee/`: the game. `index.ts` puts the rules together (the engine's packs it turns on: stances, capture points, bushes that hide); `units.ts` the humans, `undead.ts` the Restless, `heroSpells.ts` the spells every hero brings along, `abilities.ts` and `items.ts` what they cast and carry; `blight.ts` the Restless' ground; `generator.ts` the random maps and `bay.ts` the Bay made in code; `maps.ts` what a melee map must have (a town hall for someone, and someone to play against); `view/` how it looks; `data.json`, `looks.json`, `hud.json`, `fx.json`, `floats.json`, `pings.json`, `quality.json`, `cellLayers.json` and `sounds.json` what the editor's panels write
-- `src/rules.ts`, `src/game.ts`, `src/maps.ts`: the game by the names the page, the server and the tests know it by. `start` in `src/rules.ts` seats the computer at every player but you
-- `src/maps/`: the maps, made in the editor. A new one is imported in `src/maps.ts`
+- `src/melee/`: the game. `index.ts` puts the rules together (the engine's packs it turns on: stances, capture points, and the grass of `foliagePack`: tall grass that hides, dry grass that burns); `units.ts` the humans, `undead.ts` the Restless, `heroes.ts` the eight heroes (their callings, innates and abilities; the spells every hero brings two of are the engine's, `defaultHeroSpells`), `abilities.ts` and `items.ts` what they cast and carry; `blight.ts` the Restless' ground; `generator.ts` the random maps and `bay.ts` the Bay made in code; `maps.ts` what a melee map must have (a town hall for someone, and someone to play against); `view/` how it looks; `data.json`, `looks.json`, `hud.json`, `fx.json`, `floats.json`, `pings.json`, `quality.json`, `cellLayers.json` and `sounds.json` what the editor's panels write
+- `src/game.ts`: the game (`createGame`) the page, the server, the editor and the tests take: melee's rules, its look fetched as the page first plays it, its maps (`src/maps.ts`). Its `onStart` seats the computer at every player but you
+- `src/maps/`: the maps, made in the editor. A new one is imported in `src/maps.ts`. The Bay has a wind, tall grass on the road out of each corner and dry grass on the island, which burns
 - `src/main.ts`: the page, its scenes made by `appScenes`
 
 <!-- @if editor -->
@@ -56,6 +60,11 @@ A real-time strategy game made with V12, whole: melee. Two races, the humans and
 
 - `tests/`: the rules tested with no page
 
+<!-- @end -->
+<!-- @if desktop -->
+
+- `electron/`: the shell around the page, Electron's main process: `config.mjs` (the app's name, its identifier and the updater's address, yours to settle before it is handed out), `app.mjs` (the window, its full screen, what the page may ask), `preload.cjs` (the bridge the page asks through), `files.mjs` (saves, settings and the error log as files), `updates.mjs`, `presentation.m` (the addon that hides the Dock and the menu bar on macOS), `dev.mjs` (`npm run app`) and `package.mjs` (`npm run package`). `src/shell.ts` is all the page asks of it and `src/desktop.ts` what it does with that: over the whole screen with a Windowed setting, saves and settings as files, the game saved as the window closes, an error log, Exit on the start menu, Quit on the pause menu. The updater's address (`UPDATES`) is a placeholder until the docs' A desktop game, offline says what goes there
+
 <!-- @end -->
 
 Every model it plays with is of the shared art, `@v12-engine/assets` (whose each is: its group's `CREDITS.md` in `node_modules/@v12-engine/assets/groups/`)