From 7d4bfac9005b3a22af7c2f42cc0d219489fb9b89 Mon Sep 17 00:00:00 2001
From: Mischa POSLAWSKY <perl@shiar.org>
Date: Sat, 23 May 2020 05:03:01 +0200
Subject: [PATCH] word: hover related parents and children

---
 word.plp        | 37 +++++++++++++++++++++++++++++++++----
 wordlist.inc.pl |  2 ++
 2 files changed, 35 insertions(+), 4 deletions(-)

diff --git a/word.plp b/word.plp
index 1fc290f..698dbd6 100644
--- a/word.plp
+++ b/word.plp
@@ -14,11 +14,39 @@ ul {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: end;
+	margin: -1px;
+}
+li, ul ul {
+	display: contents;
+	height: 100%;
 }
 figure {
 	flex: 200px;
+	flex-grow: 1;
 	max-width: 300px;
 	overflow: hidden;
+	padding: 1px;
+}
+
+figure:hover ~ ul figure,
+figure:hover ~ ul figcaption {
+	background: #CCC;
+	color: #000;
+}
+figure:hover ~ ul figcaption {
+	background: rgba(255, 255, 255, .5);
+}
+
+figure, figcaption {
+	transition: all .5s ease-in;
+}
+li.parent:hover > figure > figcaption,
+figure:hover > figcaption {
+	font-size: 175%;
+	right: 50%;
+	bottom: 50%;
+	transform: translate(50%, 50%);
+	margin-left: -60%; /* keep width */
 }
 </style>
 EOT
@@ -38,6 +66,7 @@ my %table = do 'wordlist.inc.pl' or die $@ // $!;
 sub showimg {
 	my ($name) = @_;
 	my ($img) = $name =~ /^([\w-]+)/;
+	$name =~ s/\w{4} [^aoeuiyc\W] [rl]?+ \K (?= [^aoeuiy\W] [rl]? [aoeuiy] \w)/&shy;/gx;
 	$name =~ y/_/ /;
 	my $hidden = $name =~ s/\?$//;
 	my $alt = $name;
@@ -61,14 +90,14 @@ sub showimg {
 }
 
 sub printimgs {
+	say '<ul>';
 	for my $row (@_) {
-		printf '<li>';
+		printf '<li%s>', defined $table{$row} && ' class="parent"';
 		print showimg($row);
-		print '</li>';
 		printimgs(@{$_}) for $table{$row} // ();
+		print '</li>';
 	}
+	say '</ul>';
 }
 
-say '<ul>';
 printimgs($table{''});
-say '</ul>';
diff --git a/wordlist.inc.pl b/wordlist.inc.pl
index 4ad4dfb..8ebfef3 100644
--- a/wordlist.inc.pl
+++ b/wordlist.inc.pl
@@ -32,6 +32,8 @@ use utf8;
 		mier termiet kakkerlak oorworm bidsprinkhaan sprinkhaan krekel
 		libel vlieg mug vlo kever vlinder mot bij wesp
 	)],
+	vlinder => ['rups'],
+	kever => ['lieveheersbeestje'],
 	plant => [qw( boom cactus bloemplant zaad gras kruid )],
 	boom => [qw(
 		eik wilg populier eucalyptus beuk berk naaldboom/conifeer
-- 
2.30.0