@v12-engine/create 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,33 @@
+/**
+ * Melee's buildings drawn with the shared art (@v12-engine/assets): a model of its packs made as wide as the building
+ * stands, by the size the package says it has (its `sizes.json`), with a lamp over its door at night
+ */
+import sizesByPath from '@v12-engine/assets/sizes.json'
+import type { ModelDef, ModelLightDef } from '@v12-engine/client'
+
+/** Every model of the package by its path in `models/`, with its size in its own units: across, up, deep */
+const sizes = new Map<string, number[]>(Object.entries(sizesByPath as Record<string, number[]>))
+
+/** The size a model of the package has, in its own units, or nothing for one it does not have */
+export const sizeOf = (src: string): number[] | undefined => sizes.get(src)
+
+/**
+ * A model of the package (`rts/barracks.glb`) made `width` across at its widest, its lamp over the door: a third of
+ * the way up its front (the packs' buildings face +z)
+ */
+export function building(src: string, width: number, own: Partial<ModelDef> = {}): ModelDef {
+	const size = sizes.get(src)
+	if (!size) throw new Error(`@v12-engine/assets has no model ${src}`)
+	const lamp: ModelLightDef = {
+		name: 'door',
+		offset: [0, size[1] * 0.3, size[2] / 2 + 0.12],
+		color: [1, 0.74, 0.45],
+		intensity: 1.3,
+		range: 5,
+		flicker: 0.06
+	}
+	const scale = width / Math.max(size[0], size[2])
+	// over its roof, where it smokes and burns when hurt (`damaged` in looks.ts)
+	const roof = { offset: [0, size[1] * 0.8, 0] as [number, number, number] }
+	return { src, scale, lights: [lamp], ...own, points: { roof, ...own.points } }
+}

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

@@ -0,0 +1,42 @@
+import { type Clip, defineLane } from '@v12-engine/client'
+import { oneOf, text } from '@v12-engine/engine'
+
+/**
+ * A lane of melee's own for its cinematics: everyone of a side cheers at a moment (`who`: `me`, `enemy` or
+ * `everyone`), for a victory, a taunt. Made the way the client's own lanes are (`defineLane`), listed on the view
+ * (`lanes`), so it plays from a cinematic file and the Cinematic panel draws it like any other
+ */
+
+export interface CheerClip extends Clip {
+	who: 'me' | 'enemy' | 'everyone'
+	/** The clip they play: `cheer` when left out */
+	clip?: string
+}
+
+export const cheerLane = defineLane<CheerClip>({
+	kind: 'melee.cheer',
+	name: 'Cheer',
+	read: (item, what) => ({
+		...item,
+		who: oneOf('me', 'enemy', 'everyone')(item.who ?? 'everyone', `${what}.who`),
+		...(item.clip !== undefined && { clip: text(item.clip, `${what}.clip`) })
+	}),
+	run(cut, item, from) {
+		// a cheer seeked into is not cheered again: it is a burst, not a stretch
+		if (from > 0) return
+		const state = cut.lane('melee.cheer').state as { cheered?: number }
+		state.cheered = (state.cheered ?? 0) + 1
+		const side = cut.stage.units?.(item.who) ?? []
+		for (const id of side) cut.stage.playClip(id, item.clip ?? 'cheer')
+	},
+	editor: {
+		color: '#f0c040',
+		icon: 'cheer',
+		hint: 'A side of the game’s units cheers at a moment: each plays its cheer clip (or the one said)',
+		fields: [
+			{ key: 'who', kind: 'choice', label: 'Who', options: ['me', 'enemy', 'everyone'] },
+			{ key: 'clip', kind: 'clip', label: 'Clip' }
+		],
+		label: (item) => `${item.who} cheer`
+	}
+})

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

@@ -0,0 +1,21 @@
+import type { AbilityLooks } from '@v12-engine/client'
+
+type Rgb = [number, number, number]
+
+/** The spells every hero brings along */
+const GOLD: Rgb = [1, 0.85, 0.35]
+const LIFE: Rgb = [0.5, 1, 0.55]
+/** What falls from the sky is gold */
+const STARLIGHT: Rgb = [1, 0.92, 0.5]
+
+/** How the spells every hero brings along and what an item calls down look, by their id */
+export const heroSpellEffects: AbilityLooks = {
+	// ---- the spells every hero brings along
+	flash: { color: GOLD, style: 'burst', options: { where: 'point', rise: 0, count: 40 } },
+	secondWind: { color: LIFE, style: 'burst', options: { count: 50 } },
+	healHaste: { color: LIFE, aura: 'glow', options: { shape: 'rise', streaks: true } },
+	barrier: { color: GOLD, style: 'burst', aura: 'glow', options: { count: 36, shape: 'shell' } },
+
+	// ---- what an item calls down
+	intervention: { color: [0.7, 1, 0.8], style: 'mark', options: { lasts: 2.5, radius: 6.9, sparks: 12, column: true, burst: 80, tint: STARLIGHT } }
+}

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

@@ -0,0 +1,268 @@
+import {
+	aiOverlay,
+	blightLook,
+	captureMinimapLayer,
+	capturePanel,
+	CELL_LAYERS_FILE,
+	DAYLIGHT_COLORS,
+	type FloatInput,
+	FLOATS_FILE,
+	foliage,
+	FX_FILE,
+	type GameView,
+	hotView,
+	HUD_FILE,
+	layFiles,
+	PINGS_FILE,
+	presetBuffMarker,
+	presetFloats,
+	presetFx,
+	presetPings,
+	presetRallyFlag,
+	presetSpellStyles,
+	presetWeather,
+	QUALITY_FILE,
+	SOUNDS_FILE,
+	stanceButtons,
+	TILE_LOOKS,
+	veterancyRank,
+	withHeroesView
+} from '@v12-engine/client'
+import { LOOKS_FILE } from '@v12-engine/client/looks-file'
+import looksFile from '../looks.json'
+import fxFile from '../fx.json'
+import hudFile from '../hud.json'
+import floatsFile from '../floats.json'
+import pingsFile from '../pings.json'
+import qualityFile from '../quality.json'
+import cellLayersFile from '../cellLayers.json'
+import soundsFile from '../sounds.json'
+import { effects, looks } from './looks'
+import { cheerLane } from './cheerLane'
+import { blightMinimapLayer, cardButtons, gateButtons } from './walls'
+import { OFF_WHEEL_PINGS, PINGS } from '../pings'
+import { meleeLanguages } from './languages'
+import { VETERANCY_RANKS } from '@v12-engine/engine'
+
+/** A buff's name floats in the colour its effect has (`effects`), a light one where it has none */
+const buffColor = ({ params }: FloatInput): string => {
+	const color = effects[String(params?.buff)]?.color
+	return color ? `rgb(${color.map((part) => Math.round(160 + part * 95)).join(', ')})` : '#e8e2c8'
+}
+
+/** How melee looks. The rules are in `../index.ts`; this part only runs on a player's screen */
+export const meleeView: GameView = layFiles(
+	{
+		// the languages it is played in, the setting `language` choosing one: English, and Hebrew right to left
+		languages: meleeLanguages,
+		hud: {
+			parts: [capturePanel()],
+			// the stances of the pack the rules turn on (`withStances`): a button a stance for the selected fighters; and a
+			// gate of the player's opened and shut (`withWalls`)
+			cardButtons: cardButtons(stanceButtons(), gateButtons),
+			// the capture points of the pack the rules turn on (`withCapture`): a dot each on the minimap, a bar each on the
+			// HUD; and the Restless' blight under them as it spreads
+			minimap: { layers: [blightMinimapLayer(), captureMinimapLayer()] },
+			// the debug panel's AI tab can draw what the computer it inspects is thinking over the ground: its squads, its threat
+			// map, what it knows (Show on the map)
+			debug: { ai: aiOverlay() },
+			// a unit's rank of veterancy among its stats, once it has one
+			stats: (entity, lines) => {
+				const rank = veterancyRank(entity)
+				if (!rank) return lines
+				return [
+					...lines,
+					{
+						id: 'rank',
+						label: 'Rank',
+						value: `${VETERANCY_RANKS[rank - 1].name} ${'✦'.repeat(rank)}`,
+						hint: 'Earned by its kills: each rank more damage and health'
+					}
+				]
+			},
+			resources: {
+				gold: {
+					chip: 'background: radial-gradient(circle at 35% 30%, #fff3b8, var(--vg-gold) 45%, #9c6f12)',
+					color: '#ffd23c'
+				},
+				lumber: {
+					chip: 'width: 14px; height: 10px; border-radius: 5px; background: linear-gradient(180deg, #c8935a, #7a4a22); box-shadow: inset -4px 0 0 #e2c08c',
+					color: '#1f4d25'
+				}
+			},
+			// supply comes from farms here, and from bone spires for the Restless
+			messages: {
+				supplyBlocked: (_params, _registry, { race }) =>
+					race === 'undead' ? 'Not enough food, build more bone spires' : 'Not enough food, build more farms',
+				gatherHint: 'Gather: click a gold mine or a tree',
+				gatherTarget: 'Must target a gold mine or a tree',
+				night: 'Night: units see less far, and creeps sleep until attacked',
+				needsBlight: 'Must be built on blight',
+				needsHauntedMine: 'Acolytes gather gold at a cursed mine of yours'
+			}
+		},
+		// the HUD's half of the heroes the rules take (`withHeroes`): the hero's panel, the heroes' portraits, the shop
+		packs: [withHeroesView()],
+		cinematics: {
+			// a lane of its own for its cinematics, beside the client's: everyone of a side cheers (see `cheerLane.ts`)
+			lanes: [cheerLane]
+		},
+		units: {
+			// its cinematics, made in the editor's Cinematic panel: none yet (`GameView.cinematics.defs`, by id)
+			// the looks of its units (`looks.ts`): what the editor's model setup wrote is laid over them (`looks.json`), and the
+			// HUD over its units the Unit HUD panel wrote (`hud.json`) over the heroes' plates
+			looks,
+			rallyFlag: presetRallyFlag(),
+			buffMarker: presetBuffMarker(),
+			// a line around what the pointer is over, a unit or a building: none on the neutral (camps, mines)
+			hover: (entity) => (entity.owner === 0 ? undefined : { color: [1, 0.85, 0.4], width: 2 })
+		},
+		scene: {
+			// what drawing asks of the device: the client's presets, the most pixels a preset draws and each preset's resolution
+			// and edges as the editor's Look panel wrote them over them (`quality.json`)
+			quality: {},
+			// the bushes: tall grass that sways, bends and rustles as units go through, see-through around one's own
+			// the ready-made rain and snow, and a weather of melee's own beside them: ash drifting down, for a map of burnt lands
+			weather: { ...presetWeather(), ash: { rate: 700, speed: 1.6, lifetime: 12, size: [0.1, 0.18], color: [0.32, 0.3, 0.3, 0.85] } },
+			// the sky and the mist with the hour, as the client has them: dark blue at night, warm at dawn and dusk
+			daylight: DAYLIGHT_COLORS,
+			// the trees, the buildings and the armies of the shared art lighter from far, as their levels are made (`npm run lod`)
+			detail: { levels: [{}, { ratio: 0.4, from: 40 }, { ratio: 0.15, from: 80 }], shadowBias: 1 },
+			// trees and scenery in front of the player's own units faded out, so a unit behind a tree is never lost
+			seeThrough: {},
+			// the picture as drawn by day; at night a little colder and less coloured, the lamps blooming (nothing is done to
+			// the picture, and it costs nothing, while it is day)
+			picture: { night: { tint: [0.55, 0.65, 1], tintAmount: 0.18, saturation: 0.85, bloom: 0.35, bloomThreshold: 0.75 } },
+			// looks to start a map from: the editor's Look panel puts one on a map, the rules can change to one
+			environments: {
+				winter: {
+					sky: [0.7, 0.76, 0.84],
+					clouds: { cover: 0.7, color: [0.95, 0.96, 1] },
+					light: { sunUp: 28, sunColor: [0.92, 0.95, 1], ambientColor: [0.85, 0.9, 1] },
+					wind: { around: 200, strength: 0.4 },
+					weather: { kind: 'snow', amount: 0.6, settle: 0.6 },
+					fog: { start: 70, end: 220, color: [0.82, 0.86, 0.92] },
+					picture: { tone: 'neutral', exposure: 1.05, tint: [0.85, 0.92, 1], tintAmount: 0.12, bloom: 0.25, bloomThreshold: 0.85 }
+				},
+				swamp: {
+					sky: [0.5, 0.56, 0.5],
+					clouds: { cover: 0.6, color: [0.85, 0.88, 0.82] },
+					light: { sun: 1, ambientColor: [0.85, 0.95, 0.8] },
+					mist: { ground: { base: 0, top: 2.5, density: 0.5, color: [0.6, 0.68, 0.58] } },
+					water: { shallow: [0.3, 0.42, 0.28], deep: [0.15, 0.22, 0.14], opacity: 0.9 },
+					fog: { start: 40, end: 150, color: [0.55, 0.62, 0.52] },
+					picture: { saturation: 0.75, tint: [0.75, 0.9, 0.6], tintAmount: 0.15, contrast: 1.05, vignette: 0.3, vignetteColor: [0.05, 0.1, 0.04] }
+				},
+				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 },
+					picture: { tone: 'aces', exposure: 1.15, tint: [1, 0.75, 0.55], tintAmount: 0.15, bloom: 0.4, vignette: 0.25, occlusion: 1 }
+				}
+			}
+		},
+		// the ready-made effects its buildings smoke, burn, go up and come down with, and what the editor's FX panel wrote
+		// over them (and of its own)
+		// the ready-made floating text for every kind: damage dealt and taken, crits, healing, experience, mana, gold, levels,
+		// buffs; the damage dealt white, as made; a buff's name in its own colour (`effects`, a function: code); the others in
+		// melee's colours, outlined dark brown, as the editor's Words panel wrote them over the ready-made ones (`floats.json`)
+		// and a unit's rank of veterancy reached, its name in gold over it (`withVeterancy`'s `core.rankedUp`)
+		floats: {
+			...presetFloats(undefined, { buff: { style: { color: buffColor } } }),
+			'core.rankedUp': {
+				text: '{name}!',
+				style: { color: '#e7b94a', size: 18, background: { color: 'rgba(20, 14, 4, 0.7)', padding: 3, radius: 5 } },
+				motion: [{ pop: { from: 0.4, seconds: 0.3, ease: 'outBack' } }, { rise: 0.6, ease: 'outQuad' }],
+				offset: { y: -30 },
+				seconds: 2
+			}
+		},
+		pings: {
+			// the pings of the rules (`../pings`), the ready-made ones: the six of the wheel (Ctrl and the left button) in this
+			// order, the others sent from code alone; and what the editor's Pings fold wrote over them and of the wheel
+			// (`pings.json`: a ring of six; the rules read it for their kinds too)
+			kinds: presetPings([...PINGS], Object.fromEntries(OFF_WHEEL_PINGS.map((kind) => [kind, { wheel: { hidden: true } }]))),
+			wheel: {}
+		},
+		fx: {
+			defs: presetFx([
+				'smoke',
+				'fire',
+				'dust',
+				'spark-burst',
+				'explosion',
+				'shockwave',
+				'ground-crack',
+				'burning-ground',
+				'rubble-fall',
+				'lightning',
+				// the detailed ones, for its abilities and the debug panel to play by name
+				'heal',
+				'impact-ring',
+				'fire-trail',
+				'essence',
+				'sunburst',
+				'gas-cloud',
+				'fireball',
+				'blood-burst',
+				'blood-splatter',
+				// leaves flung up as a unit pushes into the bushes
+				'leaves'
+			]),
+			abilities: {
+				looks: effects,
+				// the ready-made styles of what abilities look like, a building's rally flag, the glow over a unit with a buff:
+				// the client draws none of them by itself
+				styles: presetSpellStyles()
+			}
+		},
+		ground: {
+			// what scenery gives besides its model: the dungeon pack's torch lights the ground around it at night, from its
+			// flame (in the model's own units, scaled with it)
+			scenery: {
+				'dungeon/torch.glb': {
+					lights: [{ name: 'flame', offset: [0, 0.85, 0], color: [1, 0.72, 0.42], intensity: 1.4, range: 9, flicker: 0.08 }]
+				},
+				// the devil's sword was made to shine: it glows past its edges, a little by day and fully at night
+				'weapons/devils_sword.glb': { glow: { day: 0.1, night: 1 } }
+			},
+			// its tiles in the client's looks of grass, dirt, road, sand, rock and snow: taken, not given
+			tiles: TILE_LOOKS,
+			// with what the editor's Terrain panel wrote of a layer's look (its own models, colours, how it shakes) over them
+			cellLayers: {
+				// the bushes: the client's tall grass, shaken as units go in, leaves flying
+				bush: foliage({ color: [0.16, 0.36, 0.1], tip: [0.5, 0.68, 0.24], height: 1.4, leaves: 'leaves' }),
+				// the Restless' blight: the client's, the shared art's spoiled ground and green gases rising off it
+				blight: blightLook()
+			}
+		},
+		// items on the ground: potions in their colours, the blade and the shield as what they are, a chest for the rest
+		items: {
+			healingPotion: { color: [0.85, 0.15, 0.15], size: 0.6 },
+			manaPotion: { color: [0.2, 0.35, 0.95], size: 0.6 },
+			longSword: { model: { src: 'items/sword.glb', scale: 1 } },
+			squiresBlade: { model: { src: 'items/sword_2.glb', scale: 1 } },
+			squiresShield: { model: { src: 'items/shield_round.glb', scale: 1 } }
+		},
+		input: {
+			// a hero arena game's keys for heroes (its hero panel's stats are the client's eight)
+			keys: { abilities: ['Q', 'W', 'E', 'R'], spells: ['D', 'F'], shop: 'P' }
+		}
+	},
+	// the files the editor writes next to the code, each laid over what the code says above, in this order (`hud.json`
+	// over the looks `looks.json` made)
+	[
+		[LOOKS_FILE, looksFile],
+		[HUD_FILE, hudFile],
+		[QUALITY_FILE, qualityFile],
+		[FLOATS_FILE, floatsFile],
+		[PINGS_FILE, pingsFile],
+		[FX_FILE, fxFile],
+		[CELL_LAYERS_FILE, cellLayersFile],
+		[SOUNDS_FILE, soundsFile]
+	]
+)
+
+// saved while it runs in the dev server: the games and editors of the page take its new looks (hot reload)
+if (import.meta.hot) import.meta.hot.accept((module) => hotView(import.meta.hot, 'my-game', meleeView, module?.meleeView))

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

@@ -0,0 +1,10 @@
+import type { Languages, MessagesFile } from '@v12-engine/client'
+
+/**
+ * The languages melee is played in (`GameView.languages`, `docs/languages.md`): English, which the game is written in,
+ * and Hebrew, written right to left, a table fetched as it is chosen. What Hebrew has no words for is said in English
+ */
+export const meleeLanguages: Languages = {
+	en: {},
+	he: () => import('../languages/he.json').then((file) => file.default as MessagesFile)
+}