source ⟩ hypertext ⟩ public ⟩ rumpelstiltskin ⟩ en.pug

extends ../../views/layout.pug

append presets
	- title = "Rumpelstiltskin"
	- hasComments = false
	- og.description = "I can’t believe it’s not Wordle!"

append cosmetics
	style
		include style.css

block main
	header
		h1
			strong Rumpelstiltskin
			small A word game
		div
			button(onclick="Rs.open('#about')") #[strong ‽] About
			button(onclick="Rs.open('#settings')") #[strong ⚙] Settings
			a(href="/repelsteeltje")
				+flag('nl')
				| 
				span(lang="nl-NL") In het Nederlands
			a(href="/tremotino")
				+flag('eo')
				| 
				span(lang="eo") Esperante
			a(href="/") #[strong ←] Home page
	#game-board
		// Row
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
		// Row
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
		// Row
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
		// Row
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
		// Row
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
		.tile.empty
	#keyboard
	#toasts
		#about.toast.long
			h2 About Rumpelstiltskin
			p
				span.smallcaps Rumpelstiltskin
				|  is a daily (or more frequent) word game lovingly ripped off from #[i Lingo], as well as Josh Wardle and the flailing
				i New York Times
				| ’ 
				a(href="https://www.powerlanguage.co.uk/wordle/") Wordle
				| .
			h2 How to play
			p Type in any five-letter English word, then press enter.
			p After each guess, the colour of the tiles will change to show how close your guess was to the word. These three examples may be of use:
			.tile-row
				.tile.correct W
				.tile.empty O
				.tile.empty R
				.tile.empty D
				.tile.empty S
			p The letter 
				strong W
				|  is in the word and in the correct spot.
			.tile-row
				.tile.empty S
				.tile.misplaced A
				.tile.empty T
				.tile.empty Y
				.tile.empty R
			p The letter 
				strong A
				|  is in the word but in the wrong spot.
			.tile-row
				.tile.empty W
				.tile.empty I
				.tile.empty N
				.tile.wrong C
				.tile.empty E
			p The letter 
				strong C
				|  is not in the word at any spot.
			.example-tiles
			p Words use both American and British spellings, though if both are five letters, the British is preferred.
			button.close(onclick="Rs.close('#about')") ×
		#settings.toast.long
			h2 Settings
			form
				input#legibleText(onclick="Rs.toggle(`legibleText`)", type="checkbox")
				label(for="legibleText") More legible text
				br
				select#theme(onchange="Rs.changeTheme();")
					option(value="default") Default
					option(value="high-contrast") High contrast
					option(value="aquarius") Aquarius
					option(value="wordle") Wardle
				label(for="theme") Theme
				br
				select#keyboardLayout(onchange="Rs.changeKeyboard(`${document.querySelector('#keyboardLayout').value}`);")
					option(value="qwerty") Qwerty
					option(value="qwertz") Qwertz
					option(value="azerty") Azerty
					option(value="dvorak") Dvorak
					option(value="colemak") Colemak
					option(value="alphabetical") Alphabetical
				label(for="keyboardLayout") Keyboard layout
			button.close(onclick="Rs.close('#settings')") ×

append body
	script(src=qua(`dict-${lang}.js`))
	script(src=qua('game.js'))