@v12-engine/create 0.1.0 → 0.4.0

package/starters/examples/src/examples/dialogs/looks.ts

@@ -0,0 +1,546 @@
+/**
+ * The dialogue examples on the client's side: who speaks and what their lines say (`cinematics.speakers`,
+ * `hud.messages`), the toll's cinematic with its choice, the dialog box moved and restyled (`client.setDialogLook`), a
+ * box and a choice menu of the game's own (`cinematics.dialog.mount`, `cinematics.choice.mount`), speech bubbles pinned
+ * over units (`client.attach`), and the ways the client tells the player things (`alert`, `ping`, `floats`)
+ */
+import type { Cinematic, ChoiceProps, GameClientApi, GameView } from '@v12-engine/client'
+import { button, type CategoryLooks, readout, select, slider, toggle } from '../../shell/look'
+import { aim, villageFx } from '../cinematics/looks'
+import { walk } from '../cinematics/index'
+import { ROAD_END, SQUARE } from '../cinematics/village'
+import { character, hold, person } from '../common/looks'
+import { converse, ELDER_AT, news, resetToll, SPEAKER, TALK, TOLL_CINEMATIC, TOLL_QUESTION, wander } from './index'
+
+/** What a dialog box of the game's own is given (the client's `DialogProps`: the line, how much of it shows, `next`) */
+type DialogBoxProps = Parameters<NonNullable<NonNullable<NonNullable<GameView['cinematics']>['dialog']>['mount']>>[1]
+
+/** Who speaks: names, colours, and faces (a unit type's model, talking as the line is said) */
+const SPEAKERS = {
+	[SPEAKER.knight]: { name: 'Sir Aldwin', color: '#9cc4ff', portrait: { type: 'knight' } },
+	[SPEAKER.elder]: { name: 'Elder Maren', color: '#e8c27a', portrait: { type: TALK['dialogs.elder'] } },
+	[SPEAKER.bandit]: { name: 'Bandit', color: '#ff8a65', portrait: { type: 'cinematics.raider' } }
+}
+
+/** The words of the rules' lines and messages, by their keys: the rules say keys, the screen has the words */
+const MESSAGES: Record<string, string> = {
+	dialogsTalk1: 'You came after all. The road from the capital is long, and not kind to travellers.',
+	dialogsTalk2: 'I came as soon as your letter reached me, Elder.',
+	dialogsTalk3: 'Then you know of the lights in the east woods. Every night, closer to the wall.',
+	dialogsTalk4: 'Lights are only lights. Who carries them?',
+	dialogsTalk5: 'That, Sir Aldwin, is what I hoped you would find out.',
+	dialogsPaid: 'You paid the toll: 50 gold. The bandits melt into the woods.',
+	dialogsFight: 'The bandits draw their axes!',
+	dialogsJoined: 'Your words win them over: the bandits follow you now.',
+	dialogsQuestBandits: 'Clear the bandits from the east woods',
+	dialogsQuestBanditsDetail: 'Three of them, by the old cart track past the inn.',
+	dialogsQuestBack: 'Return to Elder Maren',
+	dialogsQuest1: 'Sir Aldwin! Bandits have made camp in the east woods. They take our sheep and frighten the children.',
+	dialogsQuest2: 'How many?',
+	dialogsQuest3: 'Three, we think. Drive them off, and Elmbrook will not forget it.',
+	dialogsQuestBackLine: 'That is the last of them. Back to the elder.',
+	dialogsQuest4: 'The woods are quiet again. Take this, with the thanks of every soul here.',
+	dialogsQuest5: 'Keep the fire lit, Elder. I will be back.',
+	dialogsQuestReward: 'Quest complete: 500 experience',
+	dialogsNews_info: 'A merchant caravan has arrived at the market.',
+	dialogsNews_hint: 'Hint: villagers with a ! over their heads have something to say.',
+	dialogsNews_error: 'Not enough gold.',
+	dialogsNewsObjective: 'Find the merchant at the market',
+	dialogsNewsLine: 'Mind the wolves on the north road tonight.'
+}
+
+// ---- A choice that matters
+
+/**
+ * The toll: the camera on the bandits' leader, his demand, the knight's look, and the question. Played by its id (the
+ * view's `cinematics.defs`), so the answer goes to the rules as a command (`cinematicChoice`), which branch on it
+ */
+const tollScene: Cinematic = async (cut) => {
+	const leader = cut.entity('bandit2')
+	const hero = cut.entity('hero')
+	if (leader === undefined || hero === undefined) return
+	await cut.shot({ at: { entity: leader }, distance: 7, yaw: 0.25, pitch: 0.2, fov: 42, height: 1.3 }, { seconds: 1, ease: 'inOutCubic' })
+	await cut.say(SPEAKER.bandit, 'Far enough, knight. This road has a toll. Fifty gold, or your shiny armour.', 4.5)
+	await cut.shot({ at: { entity: hero }, distance: 6, yaw: Math.PI - 0.25, pitch: 0.18, fov: 42, height: 1.5 }, { seconds: 0.4 })
+	await cut.shot({ at: { x: ROAD_END.x, z: ROAD_END.z + 10 }, distance: 14, yaw: 1.2, pitch: 0.35 }, { seconds: 1.2, ease: 'inOutSine' })
+	const answer = await cut.choose(
+		[
+			{ id: 'pay', label: 'Pay the fifty gold' },
+			{ id: 'fight', label: 'Draw your sword' },
+			{ id: 'talk', label: 'You look hungry. Ride with me instead.' }
+		],
+		{ name: TOLL_QUESTION, question: 'The bandits wait for your answer.', seconds: 20, default: 'pay' }
+	)
+	const reply = {
+		pay: 'Take it, and be gone.',
+		fight: 'My sword is the only toll you will get.',
+		talk: 'There is honest work in Elmbrook, and food.'
+	}
+	await cut.say(SPEAKER.knight, reply[answer as keyof typeof reply] ?? '…', 3)
+}
+
+/** Lays the toll out again and plays it, a moment later (the new units land at the next tick) */
+function meetTheBandits(client: GameClientApi): void {
+	client.session.send(resetToll.make({}))
+	setTimeout(() => void client.play(TOLL_CINEMATIC, { hold: true }), 300)
+}
+
+// ---- Two talking
+
+/** How the conversation's box looks, as the controls set it */
+const box: { position: 'left' | 'right' | 'bottom' | 'top' | 'center'; subtitles: boolean; typewriter: number; portraitIn: 'hud' | 'box' } = {
+	position: 'left',
+	subtitles: false,
+	typewriter: 0,
+	portraitIn: 'box'
+}
+const lookOfBox = (client: GameClientApi) => client.setDialogLook({ ...box })
+
+// ---- A quest giver
+
+/**
+ * The quest's mark over the elder's head: a ! while she has a quest to give, a ? while it waits to be handed in,
+ * nothing else. Read from the quest log the HUD shows (`client.ui.objectives`), followed with `client.ui.watch`
+ */
+function questMark(client: GameClientApi): () => void {
+	const elder = client.session.snapshot().entities.find((each) => each.name === 'elder')
+	if (!elder) return () => {}
+	// the pin moves the outer element (its transform); the mark bobs inside it
+	const pinned = document.createElement('div')
+	const mark = document.createElement('div')
+	mark.style.cssText =
+		'font:900 34px Georgia,serif;color:#ffd23c;text-shadow:0 0 6px #000,0 0 14px rgba(255,190,40,.8);animation:dialogsBob 1.2s ease-in-out infinite alternate'
+	pinned.append(mark)
+	const style = document.createElement('style')
+	style.textContent = '@keyframes dialogsBob { from { transform: translateY(0) } to { transform: translateY(-6px) } }'
+	document.head.append(style)
+	const pin = client.attach(pinned, { entity: elder.id, height: 0.5 })
+	let pinged = false
+	const stop = client.ui.watch(
+		() => client.ui.objectives(),
+		(objectives) => {
+			const quest = objectives.find((each) => each.id === 'dialogs.bandits')
+			const back = objectives.find((each) => each.id === 'dialogs.back')
+			mark.textContent = !quest ? '!' : back?.status === 'open' ? '?' : ''
+			// the bandits' camp marked on the minimap as the quest is given
+			if (quest && !pinged) {
+				pinged = true
+				client.minimapPing(38, 31, '#ff5a3c', 6)
+			}
+		},
+		{ immediate: true }
+	)
+	return () => {
+		stop()
+		pin.remove()
+		style.remove()
+	}
+}
+
+// ---- Barks
+
+/** What the market's people say, now and then */
+const CHATTER = [
+	'Fresh apples! Two a copper!',
+	'Did you hear about the lights in the woods?',
+	'My back is killing me.',
+	'Rain by nightfall, mark my words.',
+	'Has anyone seen my goat?',
+	'The bell rang twice last night…',
+	'Bread! Still warm!',
+	'Mind the cart!'
+]
+/** What one says when the player clicks them, and what the guard says when ordered */
+const CLICKED = ['Yes?', 'Can I help you?', 'Lovely day.', 'Hm?', 'Don’t mind me.']
+const ORDERED = ['Right away!', 'As you say.', 'Moving.', 'On my way!', 'For Elmbrook!']
+
+/** The barks' settings, as the controls set them */
+const barks: { chatter: boolean; style: 'bubble' | 'floating words'; pick: number } = { chatter: true, style: 'bubble', pick: 0 }
+
+/** A speech bubble over a unit's head for `seconds`: an element pinned to the unit, faded out and taken away */
+function bubble(client: GameClientApi, id: number, text: string, seconds = 2.8): void {
+	if (barks.style === 'floating words') {
+		client.floats.show({ text, style: { color: '#fff4d6', size: 15 }, seconds }, { on: id })
+		return
+	}
+	const element = document.createElement('div')
+	element.textContent = text
+	element.style.cssText = `max-width:200px;padding:6px 10px;border-radius:12px;background:#fffaf0;color:#2a2116;font:600 13px/1.3 system-ui,sans-serif;
+		box-shadow:0 2px 8px rgba(0,0,0,.45);transition:opacity .4s;white-space:normal;text-align:center;filter:drop-shadow(0 1px 0 #c9b58f)`
+	const tail = document.createElement('div')
+	tail.style.cssText = 'position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:#fffaf0'
+	element.append(tail)
+	const pin = client.attach(element, { entity: id, height: 0.4 }, { offset: { y: -6 } })
+	setTimeout(() => (element.style.opacity = '0'), seconds * 1000 - 400)
+	setTimeout(() => pin.remove(), seconds * 1000)
+}
+
+/** A line picked in turn from a list: the same order on every run, never the same twice running */
+const next = (lines: readonly string[]) => lines[barks.pick++ % lines.length]
+
+/** Someone of the market says something: a villager, picked in turn */
+function chatter(client: GameClientApi): void {
+	const villagers = client.session.snapshot().entities.filter((each) => each.type === TALK['dialogs.villager'] && each.health > 0)
+	if (!villagers.length) return
+	bubble(client, villagers[barks.pick % villagers.length].id, next(CHATTER))
+}
+
+// ---- A dialog box of your own
+
+/**
+ * A dialog box drawn by the game: a parchment scroll, the speaker's name in red ink, the words typed out as the
+ * client reveals them (`shown()`, read every frame), a click to move on (`next`)
+ */
+function parchmentBox(element: HTMLElement, props: DialogBoxProps): () => void {
+	// laid at the foot of the picture, over the game: the element given is the client's place for the box
+	element.style.cssText = 'position:absolute;inset:0 0 36px 0;display:flex;justify-content:center;align-items:flex-end;pointer-events:none'
+	element.innerHTML = `<div style="pointer-events:auto;cursor:pointer;width:min(640px,90%);padding:18px 26px 16px 86px;position:relative;
+		background:linear-gradient(#f3e3bf,#e6cf9c);border:2px solid #8b6a3a;border-radius:6px;box-shadow:0 6px 24px rgba(0,0,0,.5),inset 0 0 30px rgba(120,80,30,.35);
+		font:17px/1.45 Georgia,serif;color:#3a2a14">
+		<div data-seal style="position:absolute;left:18px;top:16px;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#d9534f,#8a1f1b);
+			color:#ffe8c8;font:700 24px Georgia,serif;display:grid;place-items:center;box-shadow:0 2px 5px rgba(0,0,0,.5)"></div>
+		<div data-name style="font:700 15px Georgia,serif;letter-spacing:.08em;text-transform:uppercase;color:#8a1f1b;margin-bottom:4px"></div>
+		<div data-words></div>
+		<div style="position:absolute;right:14px;bottom:6px;font:12px Georgia,serif;color:#8b6a3a">click ▸</div>
+	</div>`
+	const { line } = props
+	element.querySelector<HTMLElement>('[data-seal]')!.textContent = line.speaker.charAt(0)
+	element.querySelector<HTMLElement>('[data-name]')!.textContent = line.speaker
+	const words = element.querySelector<HTMLElement>('[data-words]')!
+	element.firstElementChild!.addEventListener('click', () => props.next())
+	let frame = 0
+	const type = () => {
+		words.textContent = line.text.slice(0, props.shown())
+		frame = requestAnimationFrame(type)
+	}
+	type()
+	return () => cancelAnimationFrame(frame)
+}
+
+/** A choice menu drawn by the game: the question, and each answer a wax seal with its key */
+function sealChoice(element: HTMLElement, props: ChoiceProps): void {
+	const { menu } = props
+	element.style.cssText = 'position:absolute;inset:0 0 60px 0;display:flex;justify-content:center;align-items:flex-end;pointer-events:none'
+	element.innerHTML = `<div style="pointer-events:auto;display:flex;flex-direction:column;gap:8px;align-items:center;font:16px Georgia,serif">
+		<div data-question style="color:#f3e3bf;text-shadow:0 1px 4px #000;margin-bottom:4px"></div></div>`
+	element.querySelector<HTMLElement>('[data-question]')!.textContent = menu.question ?? ''
+	for (const option of menu.options) {
+		const answer = document.createElement('button')
+		answer.type = 'button'
+		answer.innerHTML = `<b style="display:inline-grid;place-items:center;width:26px;height:26px;margin-right:10px;border-radius:50%;background:#8a1f1b;color:#ffe8c8"></b><span></span>`
+		answer.querySelector('b')!.textContent = option.key
+		answer.querySelector('span')!.textContent = option.label
+		answer.style.cssText =
+			'cursor:pointer;min-width:340px;text-align:left;padding:8px 16px;border:2px solid #8b6a3a;border-radius:6px;background:linear-gradient(#f3e3bf,#e6cf9c);color:#3a2a14;font:16px Georgia,serif;box-shadow:0 3px 10px rgba(0,0,0,.45)'
+		answer.onclick = () => props.pick(option.id)
+		element.firstElementChild!.append(answer)
+	}
+}
+
+/** The conversation in the parchment box, ending on a choice: a cinematic with no bars, the HUD kept */
+const parchmentTalk: Cinematic = async (cut) => {
+	await cut.say(SPEAKER.elder, 'A letter came for you this morning, sealed in red. The rider would not wait.', { waits: true, pace: 45 })
+	await cut.say(SPEAKER.knight, 'Red wax. That is the Queen’s seal.', { waits: true, pace: 45 })
+	const answer = await cut.choose(
+		[
+			{ id: 'open', label: 'Break the seal and read it' },
+			{ id: 'keep', label: 'Keep it for later' }
+		],
+		{ name: 'letter', question: 'What do you do with the letter?' }
+	)
+	const reply = answer === 'open' ? 'It says only: come home. Something is wrong in the capital.' : 'Wise. Some letters are better read by daylight.'
+	await cut.say(answer === 'open' ? SPEAKER.knight : SPEAKER.elder, reply, { waits: true, pace: 45 })
+}
+
+/** The camera on the fire, close, where the two of them stand */
+const atTheFire = (client: GameClientApi) => aim(client, { x: SQUARE.x, z: SQUARE.z + 0.5 }, 15)
+
+export const category: CategoryLooks = {
+	// the speakers, the words, the elder's and the villagers' looks, and the toll's cinematic by its id
+	view: (view: GameView) => ({
+		...view,
+		units: {
+			...view.units,
+			looks: {
+				...view.units.looks,
+				[TALK['dialogs.elder']]: { height: 1.8, model: character('mage', 0.68, { hold: [hold('staff')] }), shapes: person(1.8, [0.5, 0.3, 0.6]) },
+				[TALK['dialogs.villager']]: { height: 1.7, model: character('rogue', 0.66), shapes: person(1.7, [0.55, 0.45, 0.35]) }
+			}
+		},
+		hud: { ...view.hud, messages: { ...view.hud?.messages, ...MESSAGES } },
+		cinematics: {
+			...view.cinematics,
+			defs: { ...view.cinematics?.defs, [TOLL_CINEMATIC]: { play: tollScene, back: true } },
+			speakers: { ...view.cinematics?.speakers, ...SPEAKERS }
+		}
+	}),
+	looks: {
+		'dialogs-conversation': {
+			controls: [
+				button(
+					'Talk',
+					(client) => client.session.send(converse.make({})),
+					'The elder and the villager say five lines in turn, sent by the rules (talk, in a sequence): watch the box and the faces change.'
+				),
+				select(
+					'Box',
+					['left', 'right', 'bottom', 'top', 'center'],
+					'left',
+					(client, position) => {
+						box.position = position as typeof box.position
+						lookOfBox(client)
+					},
+					'Where on the screen the dialog box sits: shows on the next line said (press Talk).'
+				),
+				select(
+					'Face',
+					['in the box', 'in the HUD'],
+					'in the box',
+					(client, where) => {
+						box.portraitIn = where === 'in the box' ? 'box' : 'hud'
+						lookOfBox(client)
+					},
+					'Where the speaker’s face shows: beside the words in the box, or in the HUD’s portrait the classic RTS way.'
+				),
+				toggle(
+					'Subtitles',
+					false,
+					(client, on) => {
+						box.subtitles = on
+						lookOfBox(client)
+					},
+					'Lines drawn as a film’s subtitles instead: a line of words at the foot of the picture, no box, no face.'
+				),
+				slider(
+					'Typewriter',
+					{ min: 0, max: 80, step: 10, value: 0 },
+					(client, pace) => {
+						box.typewriter = pace
+						lookOfBox(client)
+					},
+					'How many characters a second each line types out at: at 0 the whole line shows at once. Press Talk to see it.'
+				),
+				readout(
+					'Said so far',
+					(client) => `${client.dialog.history().length} lines`,
+					'How many lines the dialog’s history keeps, all that was said since the example opened.'
+				)
+			],
+			ready: (client) => {
+				atTheFire(client)
+				lookOfBox(client)
+				const out = villageFx(client)
+				const timer = setTimeout(() => client.session.send(converse.make({})), 800)
+				return () => {
+					clearTimeout(timer)
+					client.setDialogLook(null)
+					out()
+				}
+			}
+		},
+		'dialogs-choice': {
+			controls: [
+				button(
+					'Meet the bandits',
+					(client) => meetTheBandits(client),
+					'Lays the road out again and plays the meeting: the bandits ask a toll, and what you choose (pay, fight, talk them round) decides how it goes.'
+				),
+				readout(
+					'Bandits',
+					(client) => {
+						const units = client.session.snapshot().entities.filter((each) => each.type === 'cinematics.raider' && each.health > 0)
+						const theirs = units.filter((each) => each.owner !== client.session.playerId).length
+						return `${theirs} against you · ${units.length - theirs} with you`
+					},
+					'How many bandits are left on each side: talked round, they join you.'
+				)
+			],
+			ready: (client) => {
+				aim(client, { x: ROAD_END.x, z: ROAD_END.z + 13 }, 22)
+				const out = villageFx(client)
+				const timer = setTimeout(() => void client.play(TOLL_CINEMATIC, { hold: true }), 800)
+				return () => {
+					clearTimeout(timer)
+					out()
+				}
+			}
+		},
+		'dialogs-quest': {
+			controls: [
+				button(
+					'Walk to the elder',
+					(client) => {
+						const hero = client.session.snapshot().entities.find((each) => each.name === 'hero')
+						if (hero) client.session.send(walk.make({ unit: hero.id, to: { x: ELDER_AT.x, z: ELDER_AT.z - 2 } }))
+					},
+					'Walks the knight to the elder: she gives him the quest (the ! over her head), or takes it back done (the ?).'
+				),
+				button(
+					'Ride to the camp',
+					(client) => {
+						const hero = client.session.snapshot().entities.find((each) => each.name === 'hero')
+						if (hero) client.session.send(walk.make({ unit: hero.id, to: { x: 35.5, z: 30 } }))
+					},
+					'Sends the knight to the bandits’ camp: he fights them as they come at him, and the quest counts each one he beats.'
+				),
+				readout(
+					'Quest',
+					(client) => {
+						const log = client.ui.objectives()
+						const open = log.find((each) => each.status === 'open')
+						if (!log.length) return 'none yet'
+						if (!open) return 'complete'
+						return open.progress !== undefined ? `${open.text} (${Math.round(open.progress * 3)}/3)` : open.text
+					},
+					'The quest as the log has it: not yet given, open with how far along, or complete.'
+				)
+			],
+			ready: (client) => {
+				aim(client, { x: 27, z: 18 }, 34)
+				const hero = client.session.snapshot().entities.find((each) => each.name === 'hero')
+				if (hero) client.controller.select([hero.id])
+				const mark = questMark(client)
+				const out = villageFx(client)
+				return () => {
+					mark()
+					out()
+				}
+			}
+		},
+		'dialogs-barks': {
+			view: (view) => ({
+				...view,
+				input: {
+					...view.input,
+					// a unit clicked on answers; one ordered about acknowledges (what the client hears before it sends)
+					selectionChanged: (ids, client) => {
+						if (ids.length === 1) bubble(client, ids[0], next(CLICKED), 1.8)
+					},
+					beforeSend: (command, client) => {
+						if ((command.type === 'order' || command.type === 'smart') && 'entities' in command) {
+							const first = (command.entities as number[])[0]
+							if (first !== undefined) bubble(client, first, next(ORDERED), 1.6)
+						}
+						return command
+					}
+				}
+			}),
+			controls: [
+				button('Bark now', (client) => chatter(client), 'One of the villagers says a line now, in a bubble over their head.'),
+				button(
+					'Wander',
+					(client) => client.session.send(wander.make({})),
+					'The villagers walk about the square, talking as they go: the bubbles follow them.'
+				),
+				toggle(
+					'Chatter',
+					true,
+					(_client, on) => (barks.chatter = on),
+					'Whether the villagers keep talking on their own, one every second or two; click one, or order it about, and it answers either way.'
+				),
+				select(
+					'Shown as',
+					['bubble', 'floating words'],
+					'bubble',
+					(_client, style) => (barks.style = style as typeof barks.style),
+					'How a bark shows: a speech bubble pinned over the speaker, or words that float up off them and fade.'
+				)
+			],
+			ready: (client) => {
+				aim(client, SQUARE, 20)
+				const out = villageFx(client)
+				const timer = setInterval(() => barks.chatter && chatter(client), 1700)
+				const walking = setInterval(() => client.session.send(wander.make({})), 9000)
+				return () => {
+					clearInterval(timer)
+					clearInterval(walking)
+					out()
+				}
+			}
+		},
+		'dialogs-messages': {
+			controls: [
+				button(
+					'Info',
+					(client) => client.session.send(news.make({ kind: 'info' })),
+					'A plain message to the player in the message area, from the rules (world.message, "info").'
+				),
+				button(
+					'Hint',
+					(client) => client.session.send(news.make({ kind: 'hint' })),
+					'A hint to the player, drawn apart from plain messages (world.message, "hint").'
+				),
+				button(
+					'Error',
+					(client) => client.session.send(news.make({ kind: 'error' })),
+					'An error, in red, as a refused order says it (world.message).'
+				),
+				button(
+					'New objective',
+					(client) => client.session.send(news.make({ kind: 'objective' })),
+					'Adds an objective to the quest log, top left, and announces it (world.objectives.add).'
+				),
+				button(
+					'Objective done',
+					(client) => client.session.send(news.make({ kind: 'done' })),
+					'Marks the last objective done: it is ticked in the log and announced (world.objectives.complete).'
+				),
+				button(
+					'A line',
+					(client) => client.session.send(news.make({ kind: 'line' })),
+					'The elder says a line in the dialog box, her face beside it (world.dialog.say).'
+				),
+				button(
+					'Alert',
+					(client) => {
+						const hero = client.session.snapshot().entities.find((each) => each.name === 'hero')
+						if (hero) client.alert(hero.id)
+					},
+					'Raises an alert on the knight, as if he were under attack: a flash on the minimap, and Space jumps the camera there (client.alert).'
+				),
+				button(
+					'Ping',
+					(client) => {
+						client.ping(SQUARE.x + 4, SQUARE.z + 3)
+						client.minimapPing(SQUARE.x + 4, SQUARE.z + 3, '#ffd23c', 4)
+					},
+					'Pings a spot of the square: a ring on the ground and a mark on the minimap.'
+				),
+				button(
+					'Floating words',
+					(client) => {
+						const hero = client.session.snapshot().entities.find((each) => each.name === 'hero')
+						if (hero) client.floats.show({ text: 'Level up!', style: { color: '#ffd23c', size: 22 }, seconds: 2 }, { on: hero.id })
+					},
+					'“Level up!” floats up off the knight and fades (client.floats.show).'
+				)
+			],
+			ready: (client) => {
+				atTheFire(client)
+				return villageFx(client)
+			}
+		},
+		'dialogs-own-box': {
+			view: (view) => ({
+				...view,
+				cinematics: { ...view.cinematics, dialog: { mount: parchmentBox }, choice: { mount: sealChoice } }
+			}),
+			controls: [
+				button(
+					'Talk',
+					(client) => void client.play(parchmentTalk, { letterbox: false, skippable: true }),
+					'Plays the conversation in the game’s own parchment box instead of the client’s: click the scroll, or press Enter, to move on.'
+				)
+			],
+			ready: (client) => {
+				atTheFire(client)
+				const out = villageFx(client)
+				const timer = setTimeout(() => void client.play(parchmentTalk, { letterbox: false }), 800)
+				return () => {
+					clearTimeout(timer)
+					out()
+				}
+			}
+		}
+	}
+}