@v12-engine/create 0.0.0-stage → 0.1.0

package/starters/melee/src/melee/view/looks.ts

@@ -0,0 +1,659 @@
+import type { AbilityLooks, EntityView, ModelDef, Nameplate, UnitHudDef, UnitLook, UnitLooks } from '@v12-engine/client'
+import { units } from '../units'
+import { building } from './buildings'
+import { heroSpellEffects } from './heroSpellLooks'
+import { undeadEffects, undeadLooks } from './undeadLooks'
+
+export const effects: AbilityLooks = {
+	defend: { color: [0.75, 0.8, 0.9] },
+	heal: { color: [1, 0.95, 0.45] },
+	innerFire: { color: [1, 0.55, 0.15] },
+	dispelMagic: { color: [0.8, 0.9, 1], style: 'burst', options: { count: 70, ring: 3, shape: 'about' } },
+	raiseDead: { color: [0.55, 0.85, 0.45], style: 'burst', options: { count: 50, rise: 2.5, shape: 'rise' } },
+	mirrorImage: { color: [0.45, 0.65, 1], style: 'burst', options: { count: 40, ring: 1.6, shape: 'about' } },
+	slow: { color: [0.6, 0.4, 1] },
+	arcaneBlast: { color: [0.45, 0.8, 1] },
+	holyLight: { color: [1, 0.95, 0.45] },
+	stomp: { color: [0.85, 0.7, 0.45] },
+	stunned: { color: [1, 1, 0.3] },
+	avatar: { color: [1, 0.85, 0.3] },
+	blessedSprint: { color: [1, 0.95, 0.6] },
+	flameStrike: { color: [1, 0.45, 0.1] },
+	frostBolt: { color: [0.55, 0.85, 1] },
+	cataclysm: { color: [1, 0.3, 0.1] },
+	clap: { color: [0.85, 0.7, 0.45] },
+	tornado: { color: [0.78, 0.86, 0.92], style: 'tornado' },
+	groundSmash: { color: [0.8, 0.6, 0.35], style: 'smash' },
+	lasso: { color: [0.62, 0.47, 0.27], style: 'tether', until: 'lassoed' },
+	lassoed: { color: [0.62, 0.47, 0.27] },
+	knockedUp: { color: [0.78, 0.86, 0.92] },
+	revealArea: { color: [0.55, 0.85, 1] },
+	plantWard: { color: [0.95, 0.9, 0.55] },
+	sweep: { color: [0.55, 1, 0.75], style: 'sonar' },
+	...heroSpellEffects,
+	...undeadEffects
+}
+
+const SKIN: [number, number, number] = [0.87, 0.68, 0.53]
+const STEEL: [number, number, number] = [0.62, 0.65, 0.7]
+const WOOD: [number, number, number] = [0.45, 0.31, 0.18]
+const STONE: [number, number, number] = [0.66, 0.63, 0.58]
+const STRAW: [number, number, number] = [0.8, 0.66, 0.32]
+const GOLD: [number, number, number] = [1, 0.8, 0.2]
+const DARK: [number, number, number] = [0.2, 0.19, 0.2]
+
+// The units, the buildings and the trees are of the shared art (@v12-engine/assets): KayKit's adventurers with their
+// gear, Quaternius's buildings and trees, CC0. Each unit is drawn as its parts while its model loads
+
+/** A character of the shared art, its clips KayKit's (the client's names for them by default) */
+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}` })
+
+/**
+ * The trees of the Stylized Trees pack a tree of the map is drawn as: its kinds by number (`001`…`200`) go around
+ * them. Of the shared art's trees, the ones of a few hundred triangles to a thousand: a map has a forest of them,
+ * drawn again for every shadow
+ */
+const FOREST = ['oak_5', 'pine_5', 'columnar_1', 'columnar_2', 'columnar_5', 'pine_4']
+
+/** The kinds of tree, by number */
+const TREE_LOOKS: Record<string, ModelDef> = Object.fromEntries(
+	Array.from({ length: 200 }, (_, i) => {
+		const look = String(i + 1).padStart(3, '0')
+		const kind = FOREST[i % FOREST.length]
+		// about 4 tall: the oaks were made bigger than the rest
+		return [look, { src: `trees/${kind}.glb`, scale: kind.startsWith('oak') ? 0.6 : 1 }]
+	})
+)
+/** The trees a map gets that does not say which kind: one of each tree of the pack */
+const TREE_MIX = FOREST.map((_, i) => String(i + 1).padStart(3, '0'))
+
+/** What was just lost of a bar, shown white a while, draining to it */
+const GHOST = { seconds: 0.6 }
+
+/** A hero's plate: with its health's points on the bar where `points` */
+const heroPlate = (points: boolean): Nameplate => ({
+	show: 'always',
+	gap: 1,
+	items: [
+		{
+			row: [
+				// its picture in its side's colour (the type's, `icons.units`; a letter while melee has no pictures)
+				{ portrait: true, size: 26, border: 'owner' },
+				{
+					column: [
+						{ text: (entity) => entity.def.name, size: 12, color: 'owner' },
+						{
+							row: [
+								{ badge: (entity) => entity.level ?? 1, size: 16, border: 'owner' },
+								{
+									column: [
+										{ bar: 'health', width: 84, height: points ? 10 : 8, ticks: 100, ghost: GHOST, ...(points && { label: 'value' as const }) },
+										{ bar: 'mana', width: 84, height: 3 }
+									],
+									gap: 1
+								}
+							],
+							gap: 2
+						}
+					],
+					gap: 1
+				}
+			],
+			gap: 3
+		},
+		// what an enemy is not told: said so
+		{ abilities: 'own', size: 14, gap: 2, for: 'allies' },
+		// its buffs, a letter each (melee has no pictures of them), with the time left swept off: the rules share it (`hud`)
+		{ buffs: 'all', size: 12, gap: 2, dots: true }
+	]
+})
+
+/**
+ * Over a hero, the way a hero arena game draws it (indicators-plan U2, D2): its picture in its side's colour; beside it the
+ * name on top, under it the level in a circle beside the health, with a mark every 100 points and what was just lost
+ * draining white, and a thin mana bar under that; under those its abilities, darkened by their cooldowns, for the
+ * player's own and its allies' alone, and its buffs with the time they have left, for everyone (the rules share it).
+ * Selected, the health's points on its bar. Always there, as a MOBA's are, faded in as it comes into sight
+ */
+const heroHud: UnitHudDef = {
+	plates: [{ when: { selected: true }, ...heroPlate(true) }, heroPlate(false)]
+}
+
+/** Whether a building of the player's sends what it makes somewhere: its own side is told (`rally`) */
+const rallies = (entity: EntityView) => entity.rally !== undefined
+
+/**
+ * Over a building (D2): going up, how far it is and its health, for everyone who sees it; making something, how far
+ * that is, for its side; else selected, the player's own with a rally says so; else its health when hurt (or every bar is
+ * asked for), what was just lost draining white. The other units' plates are data, `hud.json`
+ */
+const buildingHud: UnitHudDef = {
+	plates: [
+		{
+			when: { constructing: true },
+			show: 'always',
+			items: [
+				{ bar: 'progress', height: 4 },
+				{ bar: 'health', ghost: GHOST }
+			]
+		},
+		{
+			when: { relation: ['self', 'ally'], of: (entity) => entity.queue.length > 0 },
+			show: 'always',
+			items: [
+				{ bar: 'health', ghost: GHOST },
+				{ bar: 'progress', height: 3 }
+			]
+		},
+		{
+			when: { relation: ['self'], selected: true, of: rallies },
+			items: [
+				{ bar: 'health', ghost: GHOST, label: 'value', height: 9 },
+				{ text: '⚑ Rally', size: 11, color: '#ffd23c' }
+			]
+		},
+		{ show: 'hurt', items: [{ bar: 'health', ghost: GHOST }] }
+	]
+}
+
+/** Over a tree or a gold mine: nothing, whatever is asked (every bar shown, `all`, leaves the forest alone) */
+const noHud: UnitHudDef = { plates: [] }
+
+export const looks: UnitLooks = {
+	peasant: {
+		height: 1.5,
+		model: character('barbarian', 0.58, { hold: [hold('axe_1handed')] }),
+		parts: [
+			{ shape: 'cylinder', size: [0.5, 0.8, 0.5], offset: [0, 0.4, 0], color: 'team' },
+			{ shape: 'sphere', size: [0.38, 0.38, 0.38], offset: [0, 0.98, 0], color: SKIN },
+			{ shape: 'cone', size: [0.5, 0.22, 0.5], offset: [0, 1.22, 0], color: STRAW },
+			{ shape: 'box', size: [0.08, 0.08, 0.6], offset: [0.3, 0.6, 0.15], color: WOOD, tilt: -0.6 },
+			{ shape: 'sphere', size: [0.42, 0.36, 0.42], offset: [0, 0.75, -0.34], color: GOLD, carrying: 'gold' },
+			{
+				shape: 'cylinder',
+				size: [0.22, 0.9, 0.22],
+				offset: [0, 0.8, -0.34],
+				color: WOOD,
+				tilt: Math.PI / 2,
+				turn: Math.PI / 2,
+				carrying: 'lumber'
+			}
+		]
+	},
+	footman: {
+		height: 1.8,
+		model: character('knight', 0.7, { hold: [hold('sword_1handed'), hold('shield_round', 'l')] }),
+		// armies of them: drawn as copies of one mesh, their animations baked (S41)
+		baked: true,
+		parts: [
+			{ shape: 'box', size: [0.62, 1, 0.42], offset: [0, 0.5, 0], color: 'team' },
+			{ shape: 'sphere', size: [0.42, 0.42, 0.42], offset: [0, 1.22, 0], color: STEEL },
+			{ shape: 'box', size: [0.1, 0.6, 0.5], offset: [-0.4, 0.65, 0.12], color: STEEL },
+			{ shape: 'box', size: [0.07, 0.07, 0.85], offset: [0.4, 0.75, 0.3], color: STEEL, tilt: -0.35 }
+		]
+	},
+	rifleman: {
+		height: 1.8,
+		model: character('ranger', 0.7, { hold: [hold('crossbow_2handed')], animations: { attack: 'Ranged_2H_Shoot' }, hitAt: 0.3 }),
+		parts: [
+			{ shape: 'cylinder', size: [0.56, 0.95, 0.56], offset: [0, 0.48, 0], color: 'team' },
+			{ shape: 'sphere', size: [0.4, 0.4, 0.4], offset: [0, 1.17, 0], color: SKIN },
+			{ shape: 'cylinder', size: [0.5, 0.12, 0.5], offset: [0, 1.36, 0], color: WOOD },
+			{ shape: 'box', size: [0.08, 0.08, 1.2], offset: [0.28, 0.85, 0.45], color: DARK }
+		]
+	},
+	catapult: {
+		// a machine: no blood
+		blood: false,
+		height: 2.4,
+		// its shots are rocks, thrown high
+		shot: { color: STONE, size: 0.5, arc: 0.4 },
+		parts: [
+			{ shape: 'box', size: [1.1, 0.3, 1.7], offset: [0, 0.5, 0], color: WOOD },
+			{ shape: 'box', size: [1.2, 0.12, 0.5], offset: [0, 0.72, -0.4], color: 'team' },
+			{ shape: 'cylinder', size: [0.6, 0.16, 0.6], offset: [0.64, 0.3, 0.55], color: DARK, tilt: Math.PI / 2, turn: Math.PI / 2 },
+			{ shape: 'cylinder', size: [0.6, 0.16, 0.6], offset: [-0.64, 0.3, 0.55], color: DARK, tilt: Math.PI / 2, turn: Math.PI / 2 },
+			{ shape: 'cylinder', size: [0.6, 0.16, 0.6], offset: [0.64, 0.3, -0.55], color: DARK, tilt: Math.PI / 2, turn: Math.PI / 2 },
+			{ shape: 'cylinder', size: [0.6, 0.16, 0.6], offset: [-0.64, 0.3, -0.55], color: DARK, tilt: Math.PI / 2, turn: Math.PI / 2 },
+			{ shape: 'box', size: [0.14, 1.1, 0.14], offset: [0.42, 1.15, 0.35], color: WOOD },
+			{ shape: 'box', size: [0.14, 1.1, 0.14], offset: [-0.42, 1.15, 0.35], color: WOOD },
+			{ shape: 'box', size: [1, 0.14, 0.14], offset: [0, 1.7, 0.35], color: WOOD },
+			{ shape: 'box', size: [0.14, 0.14, 1.9], offset: [0, 1.35, -0.2], color: WOOD, tilt: 0.55 },
+			{ shape: 'sphere', size: [0.5, 0.4, 0.5], offset: [0, 1.95, -1.05], color: STONE }
+		]
+	},
+	gryphon: {
+		height: 1.9,
+		altitude: 3.2,
+		shot: { color: [0.55, 0.8, 1], size: 0.3 },
+		parts: [
+			{ shape: 'sphere', size: [0.8, 0.7, 1.5], offset: [0, 0.7, 0], color: [0.72, 0.58, 0.36] },
+			{ shape: 'sphere', size: [0.5, 0.5, 0.6], offset: [0, 1.05, 0.85], color: [0.93, 0.91, 0.84] },
+			{ shape: 'cone', size: [0.2, 0.4, 0.2], offset: [0, 0.98, 1.25], color: GOLD, tilt: Math.PI / 2 },
+			{ shape: 'box', size: [1.7, 0.08, 0.8], offset: [1.1, 0.95, 0], color: [0.6, 0.47, 0.28], turn: 0.25 },
+			{ shape: 'box', size: [1.7, 0.08, 0.8], offset: [-1.1, 0.95, 0], color: [0.6, 0.47, 0.28], turn: -0.25 },
+			{ shape: 'cone', size: [0.5, 0.9, 0.5], offset: [0, 0.65, -1], color: [0.6, 0.47, 0.28], tilt: -Math.PI / 2 },
+			{ shape: 'box', size: [0.45, 0.7, 0.35], offset: [0, 1.35, -0.1], color: 'team' },
+			{ shape: 'sphere', size: [0.34, 0.34, 0.34], offset: [0, 1.85, -0.1], color: STEEL }
+		]
+	},
+	goblinShipyard: {
+		height: 3,
+		model: building('rts/dock.glb', 3),
+		parts: [
+			{ shape: 'box', size: [3, 0.4, 3], offset: [0, 0.2, 0], color: WOOD },
+			{ shape: 'box', size: [1.6, 1.4, 1.6], offset: [-0.6, 1.1, -0.6], color: WOOD },
+			{ shape: 'pyramid', size: [1.9, 0.8, 1.9], offset: [-0.6, 2.2, -0.6], color: 'team' },
+			{ shape: 'cylinder', size: [0.15, 2.4, 0.15], offset: [1, 1.4, 1], color: DARK }
+		]
+	},
+	// a hull, a deck house and a sail in the side's colour: drawn of parts, there is no boat among the shared art
+	transportShip: {
+		height: 2.6,
+		parts: [
+			{ shape: 'box', size: [1.4, 0.6, 2.8], offset: [0, 0.3, 0], color: WOOD },
+			{ shape: 'cone', size: [1.4, 0.8, 0.6], offset: [0, 0.3, 1.6], color: WOOD, tilt: Math.PI / 2 },
+			{ shape: 'box', size: [0.9, 0.6, 0.9], offset: [0, 0.9, -0.6], color: STRAW },
+			{ shape: 'cylinder', size: [0.12, 2, 0.12], offset: [0, 1.6, 0.3], color: DARK },
+			{ shape: 'box', size: [1.2, 1.1, 0.05], offset: [0, 1.8, 0.35], color: 'team' }
+		]
+	},
+	aviary: {
+		height: 4,
+		model: building('rts/stone_tower.glb', 2.6),
+		parts: [
+			{ shape: 'cylinder', size: [2.6, 1.2, 2.6], offset: [0, 0.6, 0], color: STONE },
+			{ shape: 'cylinder', size: [0.4, 2.6, 0.4], offset: [0.9, 2.2, 0.9], color: WOOD },
+			{ shape: 'cylinder', size: [0.4, 2.6, 0.4], offset: [-0.9, 2.2, 0.9], color: WOOD },
+			{ shape: 'cylinder', size: [0.4, 2.6, 0.4], offset: [0.9, 2.2, -0.9], color: WOOD },
+			{ shape: 'cylinder', size: [0.4, 2.6, 0.4], offset: [-0.9, 2.2, -0.9], color: WOOD },
+			{ shape: 'cone', size: [3.2, 1, 3.2], offset: [0, 3.9, 0], color: 'team' },
+			{ shape: 'sphere', size: [0.9, 0.5, 0.9], offset: [0, 1.35, 0], color: STRAW }
+		]
+	},
+	priest: {
+		height: 1.8,
+		model: character('mage', 0.7, { hold: [hold('staff')], animations: { attack: 'Ranged_Magic_Shoot' } }),
+		parts: [
+			{ shape: 'cone', size: [0.8, 1.05, 0.8], offset: [0, 0.52, 0], color: [0.93, 0.91, 0.84] },
+			{ shape: 'box', size: [0.3, 0.5, 0.3], offset: [0, 0.75, 0], color: 'team' },
+			{ shape: 'sphere', size: [0.38, 0.38, 0.38], offset: [0, 1.2, 0], color: SKIN },
+			{ shape: 'box', size: [0.06, 1.5, 0.06], offset: [0.38, 0.75, 0.1], color: WOOD },
+			{ shape: 'sphere', size: [0.2, 0.2, 0.2], offset: [0.38, 1.55, 0.1], color: GOLD }
+		]
+	},
+	sorceress: {
+		height: 1.9,
+		model: character('mage', 0.72, { hold: [hold('wand')], animations: { attack: 'Ranged_Magic_Shoot' } }),
+		parts: [
+			{ shape: 'cone', size: [0.85, 1.05, 0.85], offset: [0, 0.52, 0], color: 'team' },
+			{ shape: 'sphere', size: [0.38, 0.38, 0.38], offset: [0, 1.2, 0], color: SKIN },
+			{ shape: 'cone', size: [0.5, 0.55, 0.5], offset: [0, 1.6, 0], color: [0.4, 0.25, 0.6] },
+			{ shape: 'sphere', size: [0.22, 0.22, 0.22], offset: [0.4, 0.95, 0.2], color: [0.6, 0.85, 1] }
+		]
+	},
+	paladin: {
+		height: 2.3,
+		model: character('knight', 0.9, {
+			hold: [hold('sword_2handed')],
+			animations: { attack: 'Melee_2H_Attack_Chop', work: 'Melee_2H_Attack_Chop' },
+			// the sprint goes off without a gesture: the Paladin keeps running
+			casts: { blessedSprint: '' }
+		}),
+		parts: [
+			{ shape: 'box', size: [0.8, 1.25, 0.55], offset: [0, 0.62, 0], color: 'team' },
+			{ shape: 'box', size: [1.1, 0.3, 0.6], offset: [0, 1.25, 0], color: GOLD },
+			{ shape: 'sphere', size: [0.48, 0.48, 0.48], offset: [0, 1.62, 0], color: STEEL },
+			{ shape: 'box', size: [0.14, 0.14, 1.1], offset: [0.55, 0.9, 0.35], color: WOOD, tilt: -0.5 },
+			{ shape: 'box', size: [0.4, 0.4, 0.4], offset: [0.55, 1.18, 0.85], color: STEEL },
+			{ shape: 'box', size: [0.1, 1.1, 0.75], offset: [0, 0.8, -0.34], color: GOLD }
+		]
+	},
+	archmage: {
+		height: 2.4,
+		model: character('mage', 0.92, { hold: [hold('staff')], animations: { attack: 'Ranged_Magic_Shoot' } }),
+		parts: [
+			{ shape: 'cone', size: [1, 1.35, 1], offset: [0, 0.67, 0], color: 'team' },
+			{ shape: 'sphere', size: [0.44, 0.44, 0.44], offset: [0, 1.5, 0], color: SKIN },
+			{ shape: 'cone', size: [0.7, 0.8, 0.7], offset: [0, 1.98, 0], color: GOLD },
+			{ shape: 'box', size: [0.07, 1.9, 0.07], offset: [0.5, 0.95, 0.15], color: WOOD },
+			{ shape: 'sphere', size: [0.3, 0.3, 0.3], offset: [0.5, 1.95, 0.15], color: [0.5, 0.85, 1] }
+		]
+	},
+	testiro: {
+		height: 2.6,
+		model: character('mage', 1, { hold: [hold('spellbook_open', 'l')], animations: { attack: 'Ranged_Magic_Shoot' } }),
+		shot: { color: [0.75, 0.9, 1], size: 0.26 },
+		parts: [
+			{ shape: 'cone', size: [0.95, 1.2, 0.95], offset: [0, 0.6, 0], color: 'team' },
+			{ shape: 'cylinder', size: [0.5, 0.5, 0.5], offset: [0, 1.15, 0], color: [0.78, 0.86, 0.92] },
+			{ shape: 'sphere', size: [0.42, 0.42, 0.42], offset: [0, 1.55, 0], color: SKIN },
+			{ shape: 'cylinder', size: [0.9, 0.08, 0.9], offset: [0, 1.78, 0], color: WOOD },
+			{ shape: 'cone', size: [0.5, 0.35, 0.5], offset: [0, 1.95, 0], color: WOOD },
+			{ shape: 'cylinder', size: [0.5, 0.06, 0.5], offset: [0.42, 0.95, 0.1], color: [0.62, 0.47, 0.27], tilt: Math.PI / 2 },
+			{ shape: 'box', size: [0.07, 1.7, 0.07], offset: [-0.45, 0.85, 0.15], color: WOOD },
+			{ shape: 'cone', size: [0.3, 0.35, 0.3], offset: [-0.45, 1.85, 0.15], color: [0.78, 0.86, 0.92] }
+		]
+	},
+	ward: {
+		// a flag on a stick: no blood
+		blood: false,
+		height: 1.4,
+		parts: [
+			{ shape: 'cylinder', size: [0.06, 1.3, 0.06], offset: [0, 0.65, 0], color: WOOD },
+			{ shape: 'box', size: [0.04, 0.35, 0.5], offset: [0, 1.1, 0.25], color: 'team' }
+		]
+	},
+	skeleton: {
+		// bones: no blood
+		blood: false,
+		height: 1.6,
+		model: character('skeleton_minion', 0.62, { hold: [{ src: 'skeleton-gear/blade.glb', at: 'handslot.r' }] }),
+		parts: [
+			{ shape: 'cylinder', size: [0.5, 1, 0.5], offset: [0, 0.5, 0], color: [0.86, 0.83, 0.74] },
+			{ shape: 'sphere', size: [0.4, 0.4, 0.4], offset: [0, 1.2, 0], color: [0.86, 0.83, 0.74] }
+		]
+	},
+	altar: {
+		height: 3.2,
+		model: building('rts/temple_3.glb', 2.9),
+		parts: [
+			{ shape: 'box', size: [2.8, 0.5, 2.8], offset: [0, 0.25, 0], color: STONE },
+			{ shape: 'box', size: [2, 0.5, 2], offset: [0, 0.75, 0], color: STONE },
+			{ shape: 'cylinder', size: [0.35, 1.8, 0.35], offset: [1, 1.4, 1], color: STONE },
+			{ shape: 'cylinder', size: [0.35, 1.8, 0.35], offset: [-1, 1.4, 1], color: STONE },
+			{ shape: 'cylinder', size: [0.35, 1.8, 0.35], offset: [1, 1.4, -1], color: STONE },
+			{ shape: 'cylinder', size: [0.35, 1.8, 0.35], offset: [-1, 1.4, -1], color: STONE },
+			{ shape: 'sphere', size: [0.8, 0.8, 0.8], offset: [0, 1.6, 0], color: 'team' }
+		]
+	},
+	// a sack of straw on a post, with a mark to aim at
+	dummy: {
+		// straw: no blood
+		blood: false,
+		height: 2,
+		parts: [
+			{ shape: 'cylinder', size: [0.16, 1.1, 0.16], offset: [0, 0.55, 0], color: WOOD },
+			{ shape: 'cylinder', size: [0.7, 0.85, 0.55], offset: [0, 1.2, 0], color: [0.78, 0.66, 0.42] },
+			{ shape: 'box', size: [1.25, 0.12, 0.12], offset: [0, 1.4, 0], color: WOOD },
+			{ shape: 'sphere', size: [0.46, 0.46, 0.46], offset: [0, 1.85, 0], color: [0.84, 0.74, 0.5] },
+			{ shape: 'cylinder', size: [0.34, 0.04, 0.34], offset: [0, 1.22, 0.29], color: [0.8, 0.16, 0.12], tilt: Math.PI / 2 },
+			{ shape: 'cylinder', size: [0.14, 0.05, 0.14], offset: [0, 1.22, 0.3], color: [0.95, 0.92, 0.85], tilt: Math.PI / 2 }
+		]
+	},
+	gnoll: {
+		height: 1.6,
+		model: character('rogue_hooded', 0.62, { hold: [hold('axe_1handed')] }),
+		parts: [
+			{ shape: 'box', size: [0.6, 0.85, 0.5], offset: [0, 0.5, 0], color: [0.5, 0.38, 0.22], tilt: 0.25 },
+			{ shape: 'sphere', size: [0.42, 0.4, 0.5], offset: [0, 1.05, 0.15], color: [0.62, 0.48, 0.3] },
+			{ shape: 'cone', size: [0.14, 0.3, 0.14], offset: [0.14, 1.32, 0.1], color: [0.62, 0.48, 0.3] },
+			{ shape: 'cone', size: [0.14, 0.3, 0.14], offset: [-0.14, 1.32, 0.1], color: [0.62, 0.48, 0.3] },
+			{ shape: 'box', size: [0.1, 0.1, 0.9], offset: [0.38, 0.7, 0.3], color: WOOD, tilt: -0.5 }
+		]
+	},
+	troll: {
+		height: 1.9,
+		model: character('skeleton_rogue', 0.72, {
+			hold: [{ src: 'skeleton-gear/crossbow.glb', at: 'handslot.r' }],
+			animations: { attack: 'Ranged_2H_Shoot' },
+			hitAt: 0.3
+		}),
+		parts: [
+			{ shape: 'cylinder', size: [0.55, 1.1, 0.55], offset: [0, 0.55, 0], color: [0.3, 0.5, 0.34] },
+			{ shape: 'sphere', size: [0.4, 0.42, 0.4], offset: [0, 1.3, 0], color: [0.36, 0.58, 0.4] },
+			{ shape: 'cone', size: [0.2, 0.5, 0.2], offset: [0, 1.7, -0.05], color: [0.8, 0.3, 0.2] },
+			{ shape: 'box', size: [0.06, 0.06, 1.3], offset: [0.32, 1, 0.3], color: WOOD, tilt: -0.3 }
+		]
+	},
+	ogre: {
+		height: 3,
+		model: character('skeleton_warrior', 1.2, {
+			hold: [
+				{ src: 'skeleton-gear/axe.glb', at: 'handslot.r' },
+				{ src: 'skeleton-gear/shield_large_a.glb', at: 'handslot.l' }
+			]
+		}),
+		parts: [
+			{ shape: 'sphere', size: [1.5, 1.6, 1.3], offset: [0, 1, 0], color: [0.62, 0.52, 0.4] },
+			{ shape: 'sphere', size: [0.7, 0.7, 0.7], offset: [0, 2.1, 0.1], color: [0.68, 0.57, 0.44] },
+			{ shape: 'box', size: [1.2, 0.35, 1], offset: [0, 0.75, 0], color: [0.35, 0.25, 0.18] },
+			{ shape: 'cylinder', size: [0.3, 1.6, 0.3], offset: [0.95, 1.3, 0.5], color: WOOD, tilt: -0.9 },
+			{ shape: 'sphere', size: [0.6, 0.6, 0.6], offset: [0.95, 1.85, 1.15], color: STONE }
+		]
+	},
+	townhall: {
+		height: 4.6,
+		model: building('rts/castle.glb', 3.9),
+		parts: [
+			{ shape: 'box', size: [3.6, 1.9, 3.6], offset: [0, 0.95, 0], color: STONE },
+			{ shape: 'pyramid', size: [4.4, 1.7, 4.4], offset: [0, 2.75, 0], color: 'team' },
+			{ shape: 'box', size: [1, 1.2, 0.2], offset: [0, 0.6, -1.76], color: WOOD },
+			{ shape: 'box', size: [0.7, 1.2, 0.7], offset: [1.2, 3, 1.2], color: STONE }
+		]
+	},
+	keep: {
+		height: 5.6,
+		model: building('rts/castle_2.glb', 4),
+		parts: [
+			{ shape: 'box', size: [3.7, 2.4, 3.7], offset: [0, 1.2, 0], color: STONE },
+			{ shape: 'pyramid', size: [4.4, 1.7, 4.4], offset: [0, 3.25, 0], color: 'team' },
+			{ shape: 'box', size: [1, 1.2, 0.2], offset: [0, 0.6, -1.81], color: WOOD },
+			{ shape: 'cylinder', size: [1, 3.6, 1], offset: [1.6, 1.8, 1.6], color: STONE },
+			{ shape: 'cone', size: [1.3, 1, 1.3], offset: [1.6, 4.1, 1.6], color: 'team' }
+		]
+	},
+	castle: {
+		height: 6.6,
+		model: building('rts/castle_fortress.glb', 4.2),
+		parts: [
+			{ shape: 'box', size: [3.8, 2.8, 3.8], offset: [0, 1.4, 0], color: STONE },
+			{ shape: 'pyramid', size: [4.4, 1.9, 4.4], offset: [0, 3.75, 0], color: 'team' },
+			{ shape: 'box', size: [1.1, 1.4, 0.2], offset: [0, 0.7, -1.86], color: WOOD },
+			{ shape: 'cylinder', size: [1, 4.4, 1], offset: [1.6, 2.2, 1.6], color: STONE },
+			{ shape: 'cone', size: [1.3, 1.1, 1.3], offset: [1.6, 4.95, 1.6], color: 'team' },
+			{ shape: 'cylinder', size: [1, 4.4, 1], offset: [-1.6, 2.2, 1.6], color: STONE },
+			{ shape: 'cone', size: [1.3, 1.1, 1.3], offset: [-1.6, 4.95, 1.6], color: 'team' },
+			{ shape: 'cylinder', size: [1, 4.4, 1], offset: [1.6, 2.2, -1.6], color: STONE },
+			{ shape: 'cone', size: [1.3, 1.1, 1.3], offset: [1.6, 4.95, -1.6], color: 'team' },
+			{ shape: 'cylinder', size: [1, 4.4, 1], offset: [-1.6, 2.2, -1.6], color: STONE },
+			{ shape: 'cone', size: [1.3, 1.1, 1.3], offset: [-1.6, 4.95, -1.6], color: 'team' }
+		]
+	},
+	farm: {
+		height: 2.3,
+		model: building('rts/small_farm.glb', 2.1),
+		parts: [
+			{ shape: 'box', size: [1.7, 0.9, 1.7], offset: [0, 0.45, 0], color: WOOD },
+			{ shape: 'pyramid', size: [2.1, 0.95, 2.1], offset: [0, 1.37, 0], color: STRAW },
+			{ shape: 'box', size: [0.5, 0.12, 0.5], offset: [0, 1.9, 0], color: 'team' }
+		]
+	},
+	barracks: {
+		height: 3.4,
+		model: building('rts/barracks.glb', 3),
+		parts: [
+			{ shape: 'box', size: [2.7, 1.6, 2.7], offset: [0, 0.8, 0], color: STONE },
+			{ shape: 'box', size: [2.9, 0.35, 2.9], offset: [0, 1.75, 0], color: 'team' },
+			{ shape: 'box', size: [0.5, 0.7, 0.5], offset: [1.15, 2.2, 1.15], color: STONE },
+			{ shape: 'box', size: [0.5, 0.7, 0.5], offset: [-1.15, 2.2, 1.15], color: STONE },
+			{ shape: 'box', size: [0.5, 0.7, 0.5], offset: [1.15, 2.2, -1.15], color: STONE },
+			{ shape: 'box', size: [0.5, 0.7, 0.5], offset: [-1.15, 2.2, -1.15], color: STONE },
+			{ shape: 'box', size: [0.9, 1.1, 0.2], offset: [0, 0.55, -1.32], color: WOOD }
+		]
+	},
+	tower: {
+		height: 4.4,
+		// its arrows leave from its top, not from its middle
+		model: building('rts/watch_tower.glb', 1.7, { points: { launch: { offset: [0, 3.6, 0] } } }),
+		parts: [
+			{ shape: 'cylinder', size: [1.5, 2.8, 1.5], offset: [0, 1.4, 0], color: STONE },
+			{ shape: 'cylinder', size: [1.9, 0.5, 1.9], offset: [0, 3.05, 0], color: STONE },
+			{ shape: 'cone', size: [2, 1, 2], offset: [0, 3.8, 0], color: 'team' }
+		]
+	},
+	// a piece of wall, by its shape among those beside it (the engine's walls turn it): the wall, and a tower where it meets
+	stoneWall: {
+		height: 2,
+		model: building('rts/stone_wall.glb', 1),
+		looks: {
+			single: building('rts/stone_wall_towers.glb', 1),
+			end: building('rts/stone_wall.glb', 1),
+			straight: building('rts/stone_wall.glb', 1),
+			corner: building('rts/stone_wall_towers.glb', 1),
+			tee: building('rts/stone_wall_towers.glb', 1),
+			cross: building('rts/stone_wall_towers.glb', 1)
+		},
+		parts: [{ shape: 'box', size: [1, 1.8, 0.8], offset: [0, 0.9, 0], color: STONE }]
+	},
+	// a gate of the wall, shut or open (the arch without its door: the way through is clear)
+	stoneGate: {
+		height: 3,
+		model: building('rts/castle_gate.glb', 3),
+		looks: {
+			shut: building('rts/castle_gate.glb', 3),
+			open: building('dungeon-kit/wall_gate.glb', 3)
+		},
+		parts: [{ shape: 'box', size: [3, 1.8, 0.6], offset: [0, 0.9, 0], color: STONE }]
+	},
+	blacksmith: {
+		height: 3.3,
+		model: building('village/blacksmith.glb', 2.9),
+		parts: [
+			{ shape: 'box', size: [2.7, 1.4, 2.7], offset: [0, 0.7, 0], color: STONE },
+			{ shape: 'pyramid', size: [3.1, 1, 3.1], offset: [0, 1.9, 0], color: DARK },
+			{ shape: 'box', size: [0.6, 1.5, 0.6], offset: [-0.8, 2.2, 0.8], color: STONE },
+			{ shape: 'box', size: [0.9, 0.35, 0.5], offset: [0.6, 0.18, -1.7], color: DARK },
+			{ shape: 'box', size: [0.12, 0.9, 0.7], offset: [1.42, 1, 0], color: 'team' }
+		]
+	},
+	// what is left of a fallen building, by its size: charred beams and stones
+	...Object.fromEntries(
+		[2, 3, 4].map((size) => [
+			`ruins${size}`,
+			{
+				height: 0.8,
+				parts: [
+					{ shape: 'box', size: [size * 0.9, 0.25, size * 0.9], offset: [0, 0.12, 0], color: [0.33, 0.3, 0.27] },
+					{ shape: 'box', size: [size * 0.6, 0.3, 0.25], offset: [0, 0.35, size * 0.15], color: DARK, turn: 0.4 },
+					{ shape: 'box', size: [0.25, 0.35, size * 0.5], offset: [size * 0.2, 0.4, 0], color: [0.28, 0.2, 0.12], turn: -0.3 },
+					{ shape: 'box', size: [0.6, 0.45, 0.5], offset: [-size * 0.25, 0.3, -size * 0.2], color: STONE }
+				]
+			} satisfies UnitLook
+		])
+	),
+	tavern: {
+		height: 3.4,
+		model: building('rts/houses_2.glb', 3),
+		parts: [
+			{ shape: 'box', size: [2.8, 1.6, 2.6], offset: [0, 0.8, 0], color: WOOD },
+			{ shape: 'pyramid', size: [3.2, 1.2, 3], offset: [0, 2.2, 0], color: STRAW },
+			{ shape: 'box', size: [0.8, 1, 0.2], offset: [0, 0.5, -1.35], color: DARK },
+			{ shape: 'box', size: [0.12, 0.6, 0.6], offset: [1.45, 1.3, 0], color: GOLD }
+		]
+	},
+	alchemist: {
+		height: 3.6,
+		model: building('rts/tower_house.glb', 2.8),
+		parts: [
+			{ shape: 'cylinder', size: [2.6, 1.5, 2.6], offset: [0, 0.75, 0], color: [0.78, 0.74, 0.66] },
+			{ shape: 'cone', size: [3, 1.5, 3], offset: [0, 2.25, 0], color: 'team' },
+			{ shape: 'sphere', size: [0.55, 0.55, 0.55], offset: [0, 3.15, 0], color: [0.45, 0.95, 0.5] },
+			{ shape: 'box', size: [0.8, 1, 0.2], offset: [0, 0.5, -1.3], color: WOOD }
+		]
+	},
+	armory: {
+		height: 3.4,
+		model: building('rts/archery_building.glb', 2.9),
+		parts: [
+			{ shape: 'box', size: [2.7, 1.5, 2.7], offset: [0, 0.75, 0], color: STONE },
+			{ shape: 'pyramid', size: [3.1, 1.1, 3.1], offset: [0, 2.05, 0], color: 'team' },
+			{ shape: 'box', size: [0.9, 1.1, 0.2], offset: [0, 0.55, -1.32], color: WOOD },
+			{ shape: 'box', size: [0.12, 1.3, 0.12], offset: [1, 0.85, -1.5], color: STEEL },
+			{ shape: 'box', size: [0.5, 0.12, 0.12], offset: [1, 1.15, -1.5], color: STEEL },
+			{ shape: 'cylinder', size: [0.7, 0.12, 0.7], offset: [-1, 0.9, -1.45], color: GOLD, tilt: Math.PI / 2 }
+		]
+	},
+	tree: {
+		height: 3,
+		// 200 kinds by number, as the maps say them, drawn as the Stylized Trees' oaks, pines and a columnar tree
+		looks: TREE_LOOKS,
+		mix: TREE_MIX,
+		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.5, 1.5], offset: [0, 1.5, 0], color: [0.14, 0.36, 0.17] },
+			{ shape: 'cone', size: [1.1, 1.3, 1.1], offset: [0, 2.4, 0], color: [0.17, 0.42, 0.2] }
+		]
+	},
+	lumbermill: {
+		height: 3,
+		model: building('village/fantasy_sawmill.glb', 2.9),
+		parts: [
+			{ shape: 'box', size: [2.7, 1.3, 2.4], offset: [0, 0.65, 0], color: WOOD },
+			{ shape: 'pyramid', size: [3.1, 1.2, 2.8], offset: [0, 1.9, 0], color: 'team' },
+			{ shape: 'cylinder', size: [0.4, 2.2, 0.4], offset: [-1.1, 0.25, -1.45], color: [0.36, 0.25, 0.15], tilt: Math.PI / 2, turn: Math.PI / 2 },
+			{ shape: 'cylinder', size: [0.4, 2.2, 0.4], offset: [-1.1, 0.25, -1.9], color: [0.36, 0.25, 0.15], tilt: Math.PI / 2, turn: Math.PI / 2 }
+		]
+	},
+	goldmine: {
+		height: 3.2,
+		model: building('rts/mine.glb', 3.9),
+		// run out, it caves in: rocks and the last of its gold, flying where there is physics
+		debris: [
+			{ shape: 'box', size: [0.9, 0.7, 0.8], color: [0.36, 0.33, 0.3], count: 9 },
+			{ shape: 'box', size: [0.5, 0.4, 0.45], color: [0.3, 0.28, 0.26], count: 8 },
+			{ shape: 'sphere', size: [0.3, 0.25, 0.3], color: GOLD, count: 6 }
+		],
+		parts: [
+			{ shape: 'pyramid', size: [3.9, 2.6, 3.9], offset: [0, 1.3, 0], color: [0.36, 0.33, 0.3] },
+			{ shape: 'box', size: [1.1, 1.2, 0.4], offset: [0, 0.6, -1.85], color: DARK },
+			{ shape: 'sphere', size: [0.6, 0.5, 0.6], offset: [1.4, 0.25, -1.9], color: GOLD },
+			{ shape: 'sphere', size: [0.45, 0.4, 0.45], offset: [-1.5, 0.2, -1.85], color: GOLD },
+			{ shape: 'sphere', size: [0.5, 0.45, 0.5], offset: [-0.2, 2.2, 0.3], color: GOLD }
+		]
+	},
+	...undeadLooks
+}
+
+// buildings smoke from the roof when badly hurt and burn when nearly gone (and stop as they are repaired); they come down
+// crumbling into pieces of themselves in a cloud of dust, wherever physics has loaded, else sink into it; dark while
+// they are going up, their lamp over the door lit once they are built
+for (const visual of Object.values(looks)) {
+	if (!visual.model?.lights?.some((light) => light.name === 'door')) continue
+	visual.damaged = [
+		{ below: 0.5, fx: 'smoke', at: 'roof', params: { size: 0.8, darkness: 0.6 } },
+		{ below: 0.25, fx: 'fire', at: 'roof', params: { size: 0.9, smoke: false } }
+	]
+	visual.death = { collapse: { look: 'crumble', pieces: 18, dust: true } }
+	// it goes up from the ground with a glowing edge, dust as it is laid out and as it is done, sparks off the hammers
+	visual.construction = {
+		motion: 'reveal',
+		stages: [{ at: 0, fx: 'dust' }],
+		working: { fx: 'spark-burst', at: 'handslot.r', params: { count: 8, size: 0.6 } },
+		done: { fx: 'dust' }
+	}
+	visual.lights = (entity, declared) => (entity.construction === undefined ? declared : [])
+}
+
+// the casters carry a soft light at night, at the hand that holds the staff: it moves with their clips
+for (const caster of ['priest', 'sorceress', 'archmage']) {
+	const visual = looks[caster]
+	if (visual?.model)
+		visual.model = {
+			...visual.model,
+			lights: [{ name: 'staff', at: 'handslot.r', offset: [0, 0.35, 0], color: [0.62, 0.76, 1], intensity: 0.9, range: 4, flicker: 0.04 }]
+		}
+}
+
+// the HUD over units (indicators-plan D2): the heroes' and the buildings' in code (they ask the unit), none over what is
+// gathered; every other unit's is data, `hud.json` (its default, the casters' and the creeps')
+for (const def of units) {
+	const visual = looks[def.id]
+	if (!visual) continue
+	if (def.hero) visual.unitHud = heroHud
+	else if (def.kind === 'resource') visual.unitHud = noHud
+	else if (def.kind === 'building') visual.unitHud = buildingHud
+}