@v12-engine/create 0.1.1 → 0.4.0

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

@@ -0,0 +1,577 @@
+/**
+ * The nature examples on the client's side: how their grass and trees look (the category's `view`), and each
+ * example's camera and controls (`CategoryLooks`). Controls that change the world for every player send a command
+ * (`./index.ts`); those that change only how this screen draws it call the client (`client.setEnvironment`,
+ * `client.foliage(layer).setLook`)
+ */
+import {
+	foliage,
+	type FoliageLook,
+	type GameClient,
+	type GameClientApi,
+	type ModelDef,
+	presetFoliage,
+	presetFx,
+	type UnitLook
+} from '@v12-engine/client'
+import type { MapEnvironment } from '@v12-engine/engine'
+import { button, type CategoryLooks, readout, select, slider, toggle } from '../../shell/look'
+import { DEAD_TREE, GRASS, STYLE, TREE } from './grass'
+import { blowGust, douse, FIRE_START, GLADE, growBack, lightFire, lightWood, setWeather, setWind, SQUARE, stroll } from './index'
+import { MEADOW_WEST } from './maps'
+import { stand } from './camera'
+import { clock, LOOKS, lookAtHour } from './skies'
+
+// ---- how the grass and the trees look
+
+/**
+ * The grass, style by style: the client's ready-made looks by the rules' names (`presetFoliage`), a meadow in flower
+ * of its own, the thicket as the forest's flowering bushes. All of it lies down under feet and stands again in 14 s,
+ * leaving a trail behind whoever walks through
+ */
+const grassLook: FoliageLook = {
+	walked: { flatten: 0.65, recover: 14, trail: true },
+	styles: {
+		[STYLE.meadow]: presetFoliage.meadow,
+		[STYLE.tallGrass]: presetFoliage.tallGrass,
+		[STYLE.dryGrass]: presetFoliage.dryGrass,
+		[STYLE.wheat]: presetFoliage.wheat,
+		[STYLE.thicket]: { draw: 'models', models: [{ src: 'forest/bush_common_flowers.glb' }], density: 1, height: 1.2 },
+		[STYLE.reeds]: presetFoliage.reeds,
+		[STYLE.snowGrass]: presetFoliage.snowGrass,
+		// a meadow thick with flowers: yellow, white, pink and blue among shorter blades
+		[STYLE.flowers]: {
+			...presetFoliage.meadow,
+			height: 0.45,
+			colors: { foot: [0.2, 0.42, 0.12], tip: [0.55, 0.78, 0.3], vary: 0.15, hue: 0.03 },
+			scatter: [
+				{
+					density: 0.9,
+					height: 0.42,
+					colors: [
+						[0.98, 0.86, 0.25],
+						[0.96, 0.96, 0.98],
+						[0.92, 0.42, 0.65],
+						[0.55, 0.6, 0.98],
+						[0.95, 0.5, 0.3]
+					]
+				}
+			]
+		}
+	}
+}
+
+/** The trees a tree is drawn as, one picked for each: the shared art's oaks, pines, columnar and common trees */
+const TREES: Record<string, ModelDef> = {
+	oak: { src: 'trees/oak_5.glb', scale: 0.62 },
+	pine: { src: 'trees/pine_5.glb', scale: 1.05 },
+	pineTall: { src: 'trees/pine_4.glb', scale: 1 },
+	columnar: { src: 'trees/columnar_1.glb', scale: 1 },
+	columnar2: { src: 'trees/columnar_2.glb', scale: 1 },
+	common: { src: 'forest/common_tree_1.glb', scale: 1.05 },
+	common2: { src: 'forest/common_tree_2.glb', scale: 1.05 },
+	common5: { src: 'forest/common_tree_5.glb', scale: 1 }
+}
+
+/** A tree as parts while its model loads: a trunk and two cones */
+const treeShapes: UnitLook['shapes'] = [
+	{ 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] }
+]
+
+const treeLook: UnitLook = {
+	height: 3.6,
+	looks: TREES,
+	vary: { scale: 0.25, lean: 0.06 },
+	shapes: treeShapes,
+	// nothing over a tree: no health bar for scenery
+	unitHud: { plates: [] }
+}
+
+const deadTreeLook: UnitLook = {
+	...treeLook,
+	looks: Object.fromEntries([1, 2, 3, 4, 5].map((n) => [`dead${n}`, { src: `forest/dead_tree_${n}.glb`, scale: 1 }])),
+	shapes: [{ shape: 'cylinder', size: [0.3, 2.4, 0.3], offset: [0, 1.2, 0], color: [0.4, 0.36, 0.32] }]
+}
+
+// ---- small helpers of the controls
+
+/** The client as a game's code has it, with the grass's handle (`client.foliage`), which `GameClientApi` leaves out */
+const grassOf = (client: GameClientApi) => (client as GameClient).foliage(GRASS)
+
+/** Changes the look of this screen's map by one of its groups, over what that group is now: the water, the cloud layer, the mist */
+function change<K extends keyof MapEnvironment>(client: GameClientApi, key: K, value: Partial<NonNullable<MapEnvironment[K]>>, over = 0.6): void {
+	const now = (client as GameClient).mapEnvironment[key]
+	client.setEnvironment({ [key]: { ...(now as object), ...value } } as Partial<MapEnvironment>, { over })
+}
+
+/** How many trees of the nature examples stand */
+const treesStanding = (client: GameClientApi) =>
+	client.session.snapshot().entities.filter((each) => (each.type === TREE || each.type === DEAD_TREE) && each.health > 0).length
+
+// ---- the wind, as the forest's controls keep it
+
+const wind = { around: 70, strength: 0.45 }
+const sendWind = (client: GameClientApi) => client.session.send(setWind.make({ ...wind }))
+
+// ---- the weather's choice
+
+const weather = { kind: 'rain' as 'clear' | 'rain' | 'storm' | 'snow', amount: 0.6 }
+const sendWeather = (client: GameClientApi) => client.session.send(setWeather.make({ ...weather }))
+
+// ---- the time of day
+
+const day = { hour: 9, running: false, timer: 0 as ReturnType<typeof setInterval> | 0 }
+const showHour = (client: GameClientApi, over = 0.3) => client.setEnvironment(lookAtHour(day.hour), { over })
+/** A button that goes to an hour, eased over two seconds */
+const toHour = (label: string, hour: number, hint: string) =>
+	button(
+		label,
+		(client) => {
+			day.hour = hour
+			showHour(client, 2)
+		},
+		hint
+	)
+
+/** The looks example's cross-fade, in seconds */
+const looks = { over: 4 }
+
+// ---- the water's colours
+
+const WATERS: Record<string, MapEnvironment['water']> = {
+	'Mountain lake': { shallow: [0.3, 0.62, 0.6], deep: [0.05, 0.2, 0.3], opacity: 0.78 },
+	'Tropical lagoon': { shallow: [0.3, 0.85, 0.8], deep: [0.02, 0.35, 0.55], opacity: 0.6 },
+	'Glacier melt': { shallow: [0.62, 0.85, 0.9], deep: [0.25, 0.5, 0.62], opacity: 0.85 },
+	'Peat bog': { shallow: [0.35, 0.33, 0.18], deep: [0.1, 0.09, 0.04], opacity: 0.95 },
+	'Night sea': { shallow: [0.1, 0.18, 0.3], deep: [0.01, 0.03, 0.08], opacity: 0.9 }
+}
+
+// ---- the mist's colours
+
+const MISTS: Record<string, [number, number, number]> = {
+	'Dawn rose': [0.9, 0.84, 0.84],
+	'Pale white': [0.92, 0.94, 0.96],
+	'Cold blue': [0.62, 0.7, 0.85],
+	'Swamp green': [0.55, 0.66, 0.5],
+	'Smoke grey': [0.45, 0.45, 0.48]
+}
+
+export const category: CategoryLooks = {
+	// the grass layer drawn, the trees' looks, and the effects the village's fire and torches play
+	view: (view) => ({
+		...view,
+		units: { ...view.units, looks: { ...view.units.looks, [TREE]: treeLook, [DEAD_TREE]: deadTreeLook } },
+		ground: { ...view.ground, cellLayers: { ...view.ground?.cellLayers, [GRASS]: foliage(grassLook) } },
+		fx: { ...view.fx, defs: { ...presetFx(['campfire', 'torch']), ...view.fx?.defs } }
+	}),
+	looks: {
+		'nature-forest': {
+			ready: (client) => {
+				Object.assign(wind, { around: 70, strength: 0.45 })
+				stand(client, { x: GLADE.x, z: GLADE.z - 2 }, 30, 190, 34)
+			},
+			controls: [
+				slider(
+					'Wind',
+					{ min: 0, max: 1, step: 0.05, value: 0.45 },
+					(client, value) => {
+						wind.strength = value
+						sendWind(client)
+					},
+					'How hard the wind blows, for every player: the trees sway and the grass leans further, eased in over two seconds.'
+				),
+				slider(
+					'Blowing towards (°)',
+					{ min: 0, max: 360, step: 5, value: 70 },
+					(client, value) => {
+						wind.around = value
+						sendWind(client)
+					},
+					'Which way the wind blows, in degrees from north: the grass and the treetops turn to lean that way.'
+				),
+				button(
+					'Gust through the glade',
+					(client) => client.session.send(blowGust.make({ x: GLADE.x, z: GLADE.z })),
+					'A gust bursts out from the middle of the glade: the flowers round it bend away in a ring, then stand again.'
+				),
+				button(
+					'Look from above',
+					(client) => stand(client, GLADE, 58, 190, 62),
+					'Moves the camera high over the forest, to see the wind run over the treetops.'
+				),
+				button(
+					'Look into the glade',
+					(client) => stand(client, { x: GLADE.x, z: GLADE.z - 2 }, 30, 190, 34),
+					'Moves the camera back down, close over the glade in flower.'
+				),
+				readout(
+					'Wind now',
+					(client) => `${Math.round(client.wind.strength * 100)}%`,
+					'How hard the wind blows on this screen now, as it eases towards what was asked.'
+				)
+			]
+		},
+		'nature-meadow': {
+			ready: (client) => {
+				stand(client, { x: 28, z: 27 }, 42, 195, 44)
+				// they set off at once: the trails are the point
+				const off = setTimeout(() => client.session.send(stroll.make({})), 1500)
+				return () => clearTimeout(off)
+			},
+			controls: [
+				button(
+					'Walk across',
+					(client) => client.session.send(stroll.make({})),
+					'Sends the walkers across the meadow to the other side: the grass lies down under their feet and leaves a trail behind them.'
+				),
+				slider(
+					'Lies down underfoot',
+					{ min: 0, max: 1, step: 0.05, value: 0.65 },
+					(client, value) => grassOf(client)?.setLook({ walked: { flatten: value } }),
+					'How far the grass lies down where someone walks: at 0 it stays standing, at 1 it lies flat. Walk across to see it.'
+				),
+				slider(
+					'Stands again in (s)',
+					{ min: 1, max: 40, step: 1, value: 14 },
+					(client, value) => grassOf(client)?.setLook({ walked: { recover: value } }),
+					'How many seconds trodden grass takes to stand up again: short and the trail fades behind the walkers, long and it stays.'
+				),
+				toggle(
+					'Leave a trail',
+					true,
+					(client, on) => grassOf(client)?.setLook({ walked: { trail: on } }),
+					'Whether the grass stays down along the path walked, for the time set above; off, it only bends round each foot as they pass.'
+				),
+				button(
+					'Lay a ring flat',
+					(client) => grassOf(client)?.flatten({ kind: 'circle', x: 28, z: 28, radius: 4 }, 1),
+					'Lays the grass flat in a ring in the middle of the meadow, as a dragon landing would (on this screen only): it stands again over the time set above.'
+				),
+				button(
+					'Gust',
+					(client) => client.session.send(blowGust.make({ x: 30, z: 30 })),
+					'A gust bursts out from the middle of the meadow: the grass bends away from it in a ring, then stands again.'
+				),
+				readout(
+					'Walkers',
+					(client) => {
+						const mine = client.session.snapshot().entities.filter((each) => each.owner === 1)
+						const x = mine.reduce((sum, each) => sum + each.x, 0) / Math.max(1, mine.length)
+						return x < MEADOW_WEST + 6 ? 'on the west side' : x > 40 ? 'on the east side' : 'crossing'
+					},
+					'Where the walkers are: Walk across sends them to the other side.'
+				)
+			]
+		},
+		'nature-lake': {
+			ready: (client) => stand(client, { x: 32, z: 34 }, 36, 180, 32),
+			controls: [
+				select(
+					'Water',
+					Object.keys(WATERS),
+					'Mountain lake',
+					(client, name) => change(client, 'water', WATERS[name] ?? {}, 2),
+					'The water’s colours, shallow and deep, and how clear it is: eased over two seconds.'
+				),
+				slider(
+					'Waves',
+					{ min: 0, max: 1, step: 0.05, value: 0.7 },
+					(client, value) => change(client, 'water', { waves: { strength: value } }),
+					'How high the waves on the lake are: at 0 it lies still as glass.'
+				),
+				slider(
+					'Wave length',
+					{ min: 1, max: 8, step: 0.5, value: 3 },
+					(client, value) => change(client, 'water', { waves: { ...(client as GameClient).mapEnvironment.water?.waves, length: value } }),
+					'How far apart the waves are, in cells: short choppy ripples or long slow swells.'
+				),
+				slider(
+					'Flow',
+					{ min: 0, max: 1.5, step: 0.05, value: 0.25 },
+					(client, value) => change(client, 'water', { flow: value }),
+					'How fast the water’s surface drifts along: up high the lake runs like a river.'
+				),
+				slider(
+					'Mist at the falls',
+					{ min: 0, max: 1, step: 0.05, value: 0.8 },
+					(client, value) => change(client, 'water', { falls: { ...(client as GameClient).mapEnvironment.water?.falls, mist: value } }),
+					'How much spray rises where the falls meet the lake: best seen with Look at the falls.'
+				),
+				toggle(
+					'Waterfalls',
+					true,
+					(client, on) => change(client, 'water', { falls: { ...(client as GameClient).mapEnvironment.water?.falls, on } }),
+					'Whether water falls where the ground drops from the high pool to the lake, with its spray: off, the drop is bare. Best seen with Look at the falls.'
+				),
+				button(
+					'Look at the falls',
+					(client) => stand(client, { x: 32, z: 25 }, 16, 180, 24),
+					'Moves the camera close to the waterfalls and their spray.'
+				),
+				button('Look over the lake', (client) => stand(client, { x: 32, z: 34 }, 36, 180, 32), 'Moves the camera back out over the whole lake.'),
+				readout('Waterfalls', (client) => `${client.waterfalls.list.length}`, 'How many waterfalls the client found where the water drops.')
+			]
+		},
+		'nature-clouds': {
+			ready: (client) => stand(client, { x: 48, z: 52 }, 52, 20, 50),
+			controls: [
+				slider(
+					'Cover',
+					{ min: 0, max: 1, step: 0.05, value: 0.5 },
+					(client, value) => change(client, 'cloudLayer', { cover: value }),
+					'How much of the sky the low clouds cover: from a few scattered puffs to a closed deck, their shadows with them.'
+				),
+				slider(
+					'Shadows',
+					{ min: 0, max: 1, step: 0.05, value: 0.65 },
+					(client, value) => change(client, 'cloudLayer', { shadows: value }),
+					'How dark the shadows the clouds cast on the ground are, drifting over the hills.'
+				),
+				slider(
+					'Height',
+					{ min: 8, max: 40, step: 1, value: 20 },
+					(client, value) => change(client, 'cloudLayer', { height: value }),
+					'How high over the ground the clouds float, in cells: low, they pass between the camera and the land.'
+				),
+				slider(
+					'Size',
+					{ min: 8, max: 60, step: 1, value: 28 },
+					(client, value) => change(client, 'cloudLayer', { scale: value }),
+					'How big each cloud is, in cells: many small ones or a few big banks.'
+				),
+				slider(
+					'Opacity',
+					{ min: 0, max: 1, step: 0.05, value: 0.65 },
+					(client, value) => change(client, 'cloudLayer', { opacity: value }),
+					'How solid the clouds look from above: low, the land shows through them.'
+				),
+				slider(
+					'Drift (wind)',
+					{ min: 0, max: 1, step: 0.05, value: 0.5 },
+					(client, value) => client.setEnvironment({ wind: { around: 110, strength: value, gusts: 0.3 } }, { over: 1 }),
+					'How fast the wind carries the clouds and their shadows over the land; at 0 they hang still.'
+				),
+				toggle(
+					'A volume (high effects)',
+					false,
+					(client, on) => change(client, 'cloudLayer', { volumetric: on, thickness: 6 }),
+					'Draws the clouds as a ray-marched volume with depth instead of a flat layer: needs the effects quality set to high, otherwise nothing changes.'
+				),
+				slider(
+					'Sky clouds',
+					{ min: 0, max: 1, step: 0.05, value: 0.45 },
+					(client, value) => change(client, 'clouds', { cover: value }),
+					'How cloudy the far sky is, painted on the sky round the horizon (not the layer over the land): tilt up to see it.'
+				)
+			]
+		},
+		'nature-mist': {
+			ready: (client) => stand(client, { x: 40, z: 48 }, 44, 180, 30),
+			controls: [
+				slider(
+					'Lies up to',
+					{ min: 0.5, max: 9, step: 0.25, value: 3.2 },
+					(client, value) => change(client, 'mist', { ground: { ...(client as GameClient).mapEnvironment.mist?.ground!, top: value } }, 0.4),
+					'How high up the ground mist reaches, in cells: low, it pools in the valley floor; high, it swallows the hills.'
+				),
+				slider(
+					'Thickness',
+					{ min: 0, max: 1, step: 0.05, value: 0.55 },
+					(client, value) => change(client, 'mist', { ground: { ...(client as GameClient).mapEnvironment.mist?.ground!, density: value } }, 0.4),
+					'How thick the ground mist is: at 0 it is gone, at 1 nothing under it shows.'
+				),
+				select(
+					'Colour',
+					Object.keys(MISTS),
+					'Dawn rose',
+					(client, name) => {
+						const color = MISTS[name]
+						const mist = (client as GameClient).mapEnvironment.mist
+						change(client, 'mist', { ground: { ...mist?.ground!, color }, areas: mist?.areas?.map((area) => ({ ...area, color })) }, 2)
+					},
+					'The colour of the mist and of the wisps by the stream, eased over two seconds.'
+				),
+				toggle(
+					'Wisps by the stream',
+					true,
+					(client, on) =>
+						change(
+							client,
+							'mist',
+							{ areas: (client as GameClient).mapEnvironment.mist?.areas?.map((area) => ({ ...area, density: on ? 0.6 : 0 })) },
+							2
+						),
+					'Whether patches of thicker mist hang along the stream, over the ground mist: they fade in and out over two seconds.'
+				),
+				button(
+					'Look down the valley',
+					(client) => stand(client, { x: 40, z: 48 }, 44, 180, 30),
+					'Moves the camera low, looking along the misty valley.'
+				),
+				button(
+					'Look from above',
+					(client) => stand(client, { x: 40, z: 40 }, 70, 180, 65),
+					'Moves the camera high over the valley, to see where the mist lies.'
+				)
+			]
+		},
+		'nature-weather': {
+			ready: (client) => {
+				Object.assign(weather, { kind: 'rain', amount: 0.6 })
+				stand(client, { x: SQUARE.x, z: SQUARE.z }, 26, 200, 30)
+			},
+			controls: [
+				select(
+					'Weather',
+					['clear', 'rain', 'storm', 'snow'],
+					'rain',
+					(client, kind) => {
+						weather.kind = kind as typeof weather.kind
+						sendWeather(client)
+					},
+					'What falls on the village, for every player: rain splashes on the ground, a storm drives it slanting in a gale under low racing cloud, snow drifts down; it comes in over four seconds.'
+				),
+				slider(
+					'How much',
+					{ min: 0, max: 1, step: 0.05, value: 0.6 },
+					(client, value) => {
+						weather.amount = value
+						sendWeather(client)
+					},
+					'How much falls, from a few drops to a downpour: the sky and the light darken with it.'
+				),
+				button('Look from above', (client) => stand(client, SQUARE, 50, 200, 60), 'Moves the camera high over the village.'),
+				button(
+					'Look into the square',
+					(client) => stand(client, { x: SQUARE.x, z: SQUARE.z }, 26, 200, 30),
+					'Moves the camera back down into the square, close to where it falls.'
+				),
+				readout(
+					'Falling',
+					(client) => {
+						const now = (client as GameClient).mapEnvironment.weather
+						return now && now.amount > 0.01 ? `${now.kind}, ${Math.round(now.amount * 100)}%` : 'nothing'
+					},
+					'What falls on this screen now, as it eases towards what was asked.'
+				)
+			]
+		},
+		'nature-time': {
+			ready: (client) => {
+				Object.assign(day, { hour: 9, running: false })
+				showHour(client, 0)
+				stand(client, { x: SQUARE.x, z: SQUARE.z }, 28, 205, 32)
+				// lamps glow at night: a little bloom where it is bright
+				const before = client.picture.look
+				client.picture.look = { ...before, bloom: 0.5, bloomThreshold: 0.75, tone: 'aces', exposure: 1.1 }
+				return () => {
+					if (day.timer) clearInterval(day.timer)
+					day.timer = 0
+					client.picture.look = before
+				}
+			},
+			controls: [
+				slider(
+					'Hour',
+					{ min: 0, max: 24, step: 0.25, value: 9 },
+					(client, value) => {
+						day.hour = value
+						showHour(client)
+					},
+					'The hour of the day: the sun moves across the sky, the light and the shadows change with it, and at night the lamps glow.'
+				),
+				toggle(
+					'Let the day run',
+					false,
+					(client, on) => {
+						if (day.timer) clearInterval(day.timer)
+						day.timer = 0
+						// a day in a minute: the look eased from one step to the next
+						if (on)
+							day.timer = setInterval(() => {
+								day.hour = (day.hour + 0.04) % 24
+								showHour(client, 0.1)
+							}, 100)
+					},
+					'Runs the clock on its own, a whole day in a minute: watch the shadows turn and the sky change.'
+				),
+				toHour('Dawn', 6.2, 'Goes to dawn over two seconds: a low warm sun, long shadows.'),
+				toHour('Noon', 12, 'Goes to noon over two seconds: the sun high, short shadows.'),
+				toHour('Dusk', 18.8, 'Goes to dusk over two seconds: an orange sky, the lamps coming on.'),
+				toHour('Night', 22.5, 'Goes to night over two seconds: dark and blue, lit by the village’s lamps.'),
+				readout('Time', () => clock(day.hour), 'The hour shown, on a 24-hour clock.')
+			]
+		},
+		'nature-fire': {
+			ready: (client) => stand(client, { x: 30, z: 34 }, 40, -15, 44),
+			controls: [
+				button(
+					'Light the field',
+					(client) => client.session.send(lightFire.make(FIRE_START)),
+					'Sets the dry grass alight at the west end of the field: the fire runs downwind, east, through the grass and into the trees.'
+				),
+				button(
+					'Set the wood alight',
+					(client) => client.session.send(lightWood.make({ x: 50, z: 26 })),
+					'Sets three trees of the wood alight: a burning tree lights the trees beside it and the grass round it.'
+				),
+				button(
+					'Put it out',
+					(client) => client.session.send(douse.make({})),
+					'Puts every fire out: the grass stays black where it burnt, the trees stand charred as far as they burnt.'
+				),
+				button(
+					'Rain on it',
+					(client) => client.session.send(setWeather.make({ kind: 'rain', amount: 0.9 })),
+					'Rain falls hard on the field: wet grass catches less, so the fire slows.'
+				),
+				button(
+					'Clear the sky',
+					(client) => client.session.send(setWeather.make({ kind: 'clear', amount: 0.2 })),
+					'Stops the rain: the sky clears over four seconds and the grass burns as before.'
+				),
+				button(
+					'Grow it all back',
+					(client) => client.session.send(growBack.make({})),
+					'Puts out any fire and grows it all back: the burnt grass over eight seconds, new trees where the burnt ones stood.'
+				),
+				slider(
+					'Wind (east)',
+					{ min: 0, max: 1, step: 0.05, value: 0.55 },
+					(client, value) => client.session.send(setWind.make({ around: 90, strength: value })),
+					'How hard the wind blows east: the harder, the faster the fire runs that way and the further it jumps.'
+				),
+				readout(
+					'Trees standing',
+					(client) => String(treesStanding(client)),
+					'How many trees still stand, burnt or not: a tree that burns through falls.'
+				)
+			]
+		},
+		'nature-looks': {
+			ready: (client) => {
+				client.setEnvironment(LOOKS['Summer noon'], { over: 0 })
+				stand(client, { x: 32, z: 34 }, 40, 170, 30)
+			},
+			controls: [
+				select(
+					'Look',
+					Object.keys(LOOKS),
+					'Summer noon',
+					(client, name) => client.setEnvironment(LOOKS[name], { over: looks.over }),
+					'A whole look of the map at once, sky, light, fog, water and weather: it cross-fades from the one before over the time below.'
+				),
+				slider(
+					'Cross-fade (s)',
+					{ min: 0, max: 10, step: 0.5, value: 4 },
+					(_client, value) => (looks.over = value),
+					'How many seconds the next look takes to fade in: changes nothing by itself, pick a look after it.'
+				),
+				button('Look at the falls', (client) => stand(client, { x: 32, z: 25 }, 16, 180, 24), 'Moves the camera close to the waterfalls.'),
+				button('Look over the lake', (client) => stand(client, { x: 32, z: 34 }, 40, 170, 30), 'Moves the camera back out over the lake.')
+			]
+		}
+	}
+}