diff options
| author | June McEnroe <june@causal.agency> | 2022-09-30 10:46:20 -0400 |
|---|---|---|
| committer | June McEnroe <june@causal.agency> | 2022-09-30 10:46:55 -0400 |
| commit | b69a8ef1262acc3a522a36d6c4878058cd4735ef (patch) | |
| tree | 508021db82b1f70f51aab25ab786ddaba5ee9616 /www | |
| parent | Set wallpaper to a random colour escher knot (diff) | |
| download | src-b69a8ef1262acc3a522a36d6c4878058cd4735ef.tar.gz src-b69a8ef1262acc3a522a36d6c4878058cd4735ef.zip | |
Add alphabet ranking page
Did I need to spend even the small amount of time I spent on this? No.
Diffstat (limited to '')
| -rw-r--r-- | www/causal.agency/.gitignore | 2 | ||||
| -rw-r--r-- | www/causal.agency/Makefile | 2 | ||||
| -rw-r--r-- | www/causal.agency/alpha.html | 92 |
3 files changed, 94 insertions, 2 deletions
diff --git a/www/causal.agency/.gitignore b/www/causal.agency/.gitignore index 7935a3c1..a2ca9b75 100644 --- a/www/causal.agency/.gitignore +++ b/www/causal.agency/.gitignore @@ -1,3 +1,3 @@ -*.html +index.html scheme.css scheme.png diff --git a/www/causal.agency/Makefile b/www/causal.agency/Makefile index 75849db0..d406eb23 100644 --- a/www/causal.agency/Makefile +++ b/www/causal.agency/Makefile @@ -1,6 +1,6 @@ WEBROOT = /var/www/causal.agency -FILES = index.html style.css scheme.css scheme.png +FILES = index.html style.css scheme.css scheme.png alpha.html all: ${FILES} diff --git a/www/causal.agency/alpha.html b/www/causal.agency/alpha.html new file mode 100644 index 00000000..0d83f530 --- /dev/null +++ b/www/causal.agency/alpha.html @@ -0,0 +1,92 @@ +<!DOCTYPE html> +<meta name="viewport" content="width=device-width, initial-scale=1.0"> +<title>all 26 letters of the alphabet RANKED</title> +<style> +body, button { font-size: 200%; text-align: center; } +button { margin: 1em; padding: 1ch; } +button#shuffle { font-size: 100%; } +</style> + +which letter do you like more? +<p> +<button id="a">A</button> +<button id="b">B</button> +<p> +<details> +<summary>current ranking</summary> +<p> +<span id="ranking">ABCDEFGHIJKLMNOPQRSTUVWXYZ</span> +<p> +<button id="shuffle">reshuffle</button> +</details> + +<script> +let buttonA = document.getElementById("a"); +let buttonB = document.getElementById("b"); +let ranking = document.getElementById("ranking"); + +let alpha = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split(""); +let rand = (bound) => Math.floor(Math.random() * bound); +function shuffle() { + for (let i = alpha.length - 1; i > 0; --i) { + let j = rand(i + 1); + let x = alpha[i]; + alpha[i] = alpha[j]; + alpha[j] = x; + } +} +if (localStorage.getItem("alpha")) { + alpha = localStorage.getItem("alpha").split(""); +} else { + shuffle(); +} + +let index = 0; +let even = true; +function choose(o) { + if (o == "b") { + let x = alpha[index]; + alpha[index] = alpha[index + 1]; + alpha[index + 1] = x; + } + index += 2; + if (index > alpha.length - 2) { + even = !even; + index = (even ? 0 : 1); + } + update(); +} + +document.onkeydown = function(event) { + if (event.key.toUpperCase() == alpha[index]) { + choose("a"); + } else if (event.key.toUpperCase() == alpha[index + 1]) { + choose("b"); + } +} + +function update() { + localStorage.setItem("alpha", alpha.join("")); + ranking.innerText = alpha.join(""); + let a = buttonA; + let b = buttonB; + if (rand(2)) { + a = buttonB; + b = buttonA; + } + let lc = (c) => c; + if (rand(2)) lc = (c) => c.toLowerCase(); + a.innerText = lc(alpha[index]); + b.innerText = lc(alpha[index + 1]); + a.onclick = () => choose("a"); + b.onclick = () => choose("b"); +} +update(); + +document.getElementById("shuffle").onclick = function() { + if (confirm("Are you SURE you want to throw away all your hard work?")) { + shuffle(); + update(); + } +} +</script> |