dieren: image figures captioned by names
[sheet.git] / dieren.plp
index e4dd7465185de6cd8f549806ca5731ae046b643f..bf15ec7a628ca41054933c27e20d9ec7ce244c1a 100644 (file)
@@ -1,12 +1,11 @@
 <(common.inc.plp)><:
 
-my $verbose = exists $get{v} && ($get{v} // 1);
 my $intro = 'dieren die in het Nederlands vernoemd zijn naar andere dieren.';
-$intro .= '.. en dergelijke.' if $verbose;
-$intro .= '.. enzo.' if $verbose >= 2;
+$intro .= '.. en dergelijke.' if $Request;
+$intro .= '.. enzo.' if exists $get{v};
 
 Html({
-       title => ($verbose && 'uitgebreid ') . 'dieren cheat sheet',
+       title => (!!$Request && 'uitgebreid ') . 'dieren cheat sheet',
        version => '1.0',
        description => "Tabeloverzicht met afbeeldingen van $intro",
        keywords => [qw'
@@ -19,19 +18,19 @@ Html({
 table {
        width: 100%;
 }
-tr:first-child th {
-       word-break: break-all;
-}
-img {
+td {
        vertical-align: bottom;
+}
+figure {
        width: 100%;
+       height: 100%;
 }
-img[hidden] {
+figure[hidden] {
        transition: opacity 1s 0s;
        display: inline;
        opacity: 0;
 }
-img[hidden]:hover {
+figure[hidden]:hover {
        opacity: 1;
        transition-delay: 2s;
 }
@@ -45,39 +44,39 @@ EOT
 <p>
 <:
 say ucfirst $intro;
-if ($verbose) {
-       say 'Zie het <a href="?">populaire overzicht</a> voor minder.';
+if ($Request) {
+       say 'Zie het <a href="/dieren">populaire overzicht</a> voor minder.';
 }
 else {
-       say 'Zie ook minderbekende en <a href="?v">verdergezochte verbanden</a>.';
+       say 'Zie ook minderbekende en <a href="/dieren/uitgebreid">verdergezochte verbanden</a>.';
 }
 :>
 </p>
 
 <:
 my @table = qw(
-       >:         origineel: zee-:        meer_water:    aardig:      anders:      #:
-       >hond:     hond       zeehond      waterhond?     aardhond?    vleerhond    #rodehond
-       >kat:      kat        zeekat       meerkat        caterpillar? tijgerkat    #
+        >:        origineel: zee-:        meer_water:    aardig:      anders:      #:
+        >hond:    hond       zeehond      waterhond??    prairiehond  vleerhond    #rodehond
+        >kat:     kat        zeekat       meerkat        cat_325?    vliegende_kat #tijgerkat
        #>haas:    haas       zeehaas      waterhaas      aardhaas?    ossenhaas?   #
-       >muis:     muis       zeemuis      waterspitsmuis aardmuis     vleermuis    #
-       >rat:      rat        zeerat       waterrat       woestijnrat  buidelrat    #beverrat
-       >egel:     egel       zee-egel     wateregel?     aardegel?    mierenegel   #
-       >varken:   varken     zeevarken    waterzwijn     aardvarken   stekelvarken #
-       >koe:      koe        zeekoe       meerkoetje     aardkoe?     koedoe       #haiku?
-       >paard:    paard      zeepaardje   nijlpaard      aardpaard?   luipaard     #
+        >muis:    muis       zeemuis      waterspitsmuis aardmuis     vleermuis    #
+        >rat:     rat        zeerat       waterrat       woestijnrat  buidelrat    #beverrat
+        >egel:    egel       zee-egel     wateregel??    aardegel??   mierenegel   #
+        >varken:  varken     zeevarken    waterzwijn     aardvarken   stekelvarken #
+        >koe:     koe        zeekoe       meerkoetje     aardekoe??   koedoe       #haiku?
+        >paard:   paard      zeepaardje   nijlpaard      aardpaard??  luipaard     #
        #>hoorn:   eenhoorn   zeehoorn     zee-eenhoorn?  aardhoorn?   neushoorn    #eekhoorn
-       #>bra:     brassiere? zebra        waterbra?      aardbra?     cobra        #
+       #>bra:   bra(ssière)? zebra        waterbra?      aardbra?     cobra        #sabra
        #>olifant: olifant    zeeolifant   waterolifant?  landolifant? #            #
-       >beer:     beer       zeebeer      waterbeertje   ijsbeer      wasbeer      #neusbeer
-       >leeuw:    leeuw      zeeleeuw     waterleeuw?    aardleeuw?   mierenleeuw  #
-       #>wolf:    wolf       zeewolf      waterwolf?     aardwolf     buidelwolf   #
-       >haan:     haan       zeehaan      waterhaan      rotshaan     sprinkhaan   #
-       #>pad:     pad        zeepad?      waterpad?      landpad      schildpad    #
+        >beer:    beer       zeebeer      waterbeertje   ijsbeer      wasbeer      #neusbeer
+        >leeuw:   leeuw      zeeleeuw     waterleeuw??   aardleeuw??  mierenleeuw  #
+        >wolf:    wolf       zeewolf      waterwolf?     aardwolf     korenwolf    #buidelwolf
+        >haan:    haan       zeehaan      waterhaan      rotshaan     sprinkhaan   #wilde_haan??
+       #>pad:     pad        zeepad?      waterpad?      landpad      schildpad    #paddenstoel
        #>draak:   draak      zeedraak     waterdraak     aarddraak?   komododraak  #
-       #>vlo:     vlo        strandvlo    watervlo       aardvlo      #            #
+       #>vlo:     vlo        strandvlo    watervlo       aardvlo      vlok?        #
        #>mot:     mot        zeemot?      watermot       aardmot?     marmot       #
-       #>bij:     bij        zeebij?      waterbij       aardbij      #            #
+       #>bij:     bij        zeebij?      waterbij       aardbei      #            #
 );
 
 if (exists $get{r}) {
@@ -95,7 +94,7 @@ if (exists $get{r}) {
 
 say '<table>';
 while (my $name = shift @table) {
-       if ($name =~ s/^#// and !$verbose) {
+       if ($name =~ s/^#// and !$Request) {
                while ($name = shift @table) {
                        last if $name =~ m/^>/;
                }
@@ -105,23 +104,39 @@ while (my $name = shift @table) {
                say '</tr>' if $name;
                print "<tr>";
        }
+       my ($img) = $name =~ /^([\w-]+)/;
+       $name =~ y/_/ /;
        if ($name =~ s/:$//) {
                # trailing colon indicates header text
-               $name =~ y/_/ /;
                print "<th>$name</th>";
                next;
        }
-       printf '<td title="%s">', $name // '?';
+       print '<td>';
        my $hidden = $name =~ s/\?$//;
-       if ($name and -e (my $img = "data/dieren/$name.jpg")) {
+       my $alt = $name;
+       $name = "<q>$name</q>" if $name =~ s/\?$//;
+
+       printf '<figure%s>', $hidden && !exists $get{v} && ' hidden';
+       if ($img and -e ($img = "data/dieren/$img.jpg")) {
+               my $alt = -l $img && readlink($img) =~ s/\.jpg$//r;
+               if ($alt) {
+                       $name .= " ($alt)";
+               }
+               else {
+                       $alt = $name;
+               }
+               print "<figcaption>$name</figcaption>";
                printf '<img src="/%s"', $img;
-               printf ' alt="%s"', -l $img ? readlink($img) =~ s/\.jpg$//r : $name;
-               print ' hidden' if $hidden and $verbose < 2;
+               printf ' alt="%s"', $alt;
                print ' />';
        }
-       elsif (!$hidden) {
+       elsif ($hidden) {
+               printf '<figcaption>%s</figcaption>', "$name?";
+       }
+       else {
                print $name;
        }
+       print '</figure>';
        print '</td>';
 }
 say '</tr></table>';