🚸 Add "Animated landscape" option

src/components/Options.svelte

@@ -60,6 +60,11 @@
 			label: 'main.options.use_dyslexic_font',
 			click: toggle(store.dyslexicFont),
 		},
+		{
+			bind: store.animateLandscape,
+			label: 'Animated landscape',
+			click: toggle(store.animateLandscape),
+		},
 		{
 			bind: store.allowDancing,
 			label: 'main.options.allow_dancing_letters',

src/components/landscape/Landscape.svelte

@@ -10,7 +10,7 @@
 	import { tick } from 'svelte'
 	import { bezierEasing } from '$lib/transitions'
 
-	const { landscapeForceColor } = store
+	const { landscapeForceColor, animateLandscape } = store
 
 	let initializing = true
 	let svgElement: SVGElement
@@ -84,9 +84,14 @@
 		if (currentRow === 0) {
 			if (landscape.rowsGenerated > 0) clearLandscape()
 			return
-		} else if (firstDraw || landscape.rowsGenerated > 0) {
+		}
+		if (firstDraw || landscape.rowsGenerated > 0) {
 			firstDraw = false
+			animate = get(animateLandscape)
+		}
+		if (get(store.landscapeRedraw)) {
 			animate = true
+			store.landscapeRedraw.set(false)
 		}
 		if (currentRow === landscape.rowsGenerated) return
 		landscape = getLandscape(
@@ -123,7 +128,6 @@
 		redraw++
 		clearLandscape()
 		updateLandscape()
-		store.landscapeRedraw.set(false)
 	})
 	// Hide landscape until it updates to avoid flashing on FF
 	store.landscapeWideView.subscribe(() => (hide = true))

src/store/app.ts

@@ -25,6 +25,10 @@ export const keyboardLayout: Writable<KeyboardLayout> = storageWritable(
 )
 export const dyslexicFont: Writable<boolean> = storageWritable('wp-dyslexicFont', false)
 export const allowDancing: Writable<boolean> = storageWritable('wp-allowDancing', true)
+export const animateLandscape: Writable<boolean> = storageWritable(
+	'wp-animateLandscape',
+	true
+)
 export const shareURL: Writable<boolean> = storageWritable('wp-shareURL', true)
 export const shareTimes: Writable<boolean> = storageWritable('wp-shareTimes', false)
 export const preciseTimes: Writable<boolean> = storageWritable('wp-preciseTimes', false)

src/store/validation.ts

@@ -26,6 +26,7 @@ export function validateLocalStorage() {
 	if (![true, false].includes(get(app.swapEnterBackspace)))
 		app.swapEnterBackspace.set(false)
 	if (![true, false].includes(get(app.dyslexicFont))) app.dyslexicFont.set(false)
+	if (![true, false].includes(get(app.animateLandscape))) app.animateLandscape.set(true)
 	if (![true, false].includes(get(app.allowDancing))) app.allowDancing.set(true)
 	if (![true, false].includes(get(app.shareURL))) app.shareURL.set(true)
 	if (![true, false].includes(get(app.shareTimes))) app.shareTimes.set(false)