From: Mischa POSLAWSKY <perl@shiar.org>
Date: Mon, 6 Jun 2022 21:14:04 +0000 (+0200)
Subject: word/finder: debug styling for extended levels
X-Git-Tag: v1.14~62
X-Git-Url: http://git.shiar.net/sheet.git/commitdiff_plain/526bd96bb807284eb1a787a1203111576074915d

word/finder: debug styling for extended levels
---

diff --git a/word-debug.css b/word-debug.css
index cd58776..ce0738c 100644
--- a/word-debug.css
+++ b/word-debug.css
@@ -5,71 +5,94 @@ figure:before {
 	height: 100%;
 }
 .parent > figure:after {
-	content: '+';
 	position: absolute;
 	right: 0;
+	content: '+';
 	color: #FFF;
-	width: 1em;
-	line-height: 1em;
 	background: #0008;
 	border-radius: 1em;
+	padding: 0 .2em;
+}
+figure .debug {
+	position: absolute;
+	left: .1em;
 }
 
-/* essential = blue */
+/* essential = transparent white */
 .level0 > figure:before {
-	box-shadow: inset 0 0 1em #0FF;
+	box-shadow: inset 0 0 2em #FFF;
 }
 
-/* basic = cyan */
-.level1 > figure {
-	filter: sepia(.8) hue-rotate(70deg) saturate(2);
-}
+/* ubiquitous = cyan */
 .level1 > figure:before {
-	box-shadow: inset 0 0 1em #0F0;
+	box-shadow: inset 0 0 1em #0FF;
 }
 .level1 > figure figcaption {
-	background: #080C;
+	background: #8FFA;
 }
 
-/* common = green */
+/* basic = green */
 .level2 > figure {
-	filter: sepia(.9) hue-rotate(45deg) saturate(2);
+	filter: hue-rotate(-70deg) sepia(.4) hue-rotate(70deg) saturate(2);
 }
 .level2 > figure:before {
-	box-shadow: inset 0 0 1em #FF0;
+	box-shadow: inset 0 0 1em #6FA;
 }
 .level2 > figure figcaption {
-	background: #480C;
+	background: #AFDC;
 }
 
-/* distinct = yellow */
+/* common = lime */
 .level3 > figure {
-	filter: sepia(.9) hue-rotate(15deg) saturate(2);
+	filter: hue-rotate(-45deg) sepia(.6) hue-rotate(45deg) saturate(2);
 }
 .level3 > figure:before {
-	box-shadow: inset 0 0 1em #FC0;
+	box-shadow: inset 0 0 1em #2F0;
 }
 .level3 > figure figcaption {
-	background: #880C;
+	background: #8F8C;
 }
 
-/* rare = orange */
+/* distinctive = yellow */
 .level4 > figure {
-	filter: sepia(.9) hue-rotate(-10deg) saturate(2);
+	filter: hue-rotate(-15deg) sepia(.7) hue-rotate(15deg) saturate(2);
 }
 .level4 > figure:before {
-	box-shadow: inset 0 0 2em #F80;
+	box-shadow: inset 0 0 1em #FD0;
 }
 .level4 > figure figcaption {
-	background: #840C;
+	background: #FE8C;
 }
 
+/* specialised = orange */
 .level5 > figure {
-	filter: sepia(.9) hue-rotate(-40deg) saturate(2);
+	filter: hue-rotate(10deg) sepia(.8) hue-rotate(-10deg) saturate(2);
 }
 .level5 > figure:before {
-	box-shadow: inset 0 0 3em #F00;
+	box-shadow: inset 0 0 2em #F80;
 }
 .level5 > figure figcaption {
-	background: #800C;
+	background: #FC8C;
+}
+
+/* rare = red */
+.level6 > figure {
+	filter: hue-rotate(40deg) sepia(.9) hue-rotate(-40deg) saturate(2);
+}
+.level6 > figure:before {
+	box-shadow: inset 0 0 3em #F00;
+}
+.level6 > figure figcaption {
+	background: #F88C;
+}
+
+/* invisible = grey */
+.level7 > figure {
+	filter: sepia(.9) hue-rotate(-60deg);
+}
+.level7 > figure:before {
+	box-shadow: inset 0 0 3em #804;
+}
+.level7 > figure figcaption {
+	background: #C68C;
 }
diff --git a/word/finder.js b/word/finder.js
index b5cb929..86442c9 100644
--- a/word/finder.js
+++ b/word/finder.js
@@ -31,6 +31,9 @@ class WordFinder extends WordQuiz {
 				put(worditem, '.parent');
 				this.add(put(worditem, 'ul'), subs);
 			}
+			if (this.preset.debug) {
+				put(figitem, '[title=$]', `id ${ref} level ${level}`);
+			}
 		});
 	}