Add species list view per sub-key

src/lib/OneZoomPicture.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
     import type {Mushroom} from "$lib/viewModel/parser";
     export let credits: boolean = true;
+    /** When true, renders the credit text as a translucent overlay at the
+     *  bottom of the image instead of below it. Useful inside fixed-size
+     *  containers where a figcaption below the image would overflow. */
+    export let creditsOverlay: boolean = false;
     interface OneZoomImage {
         name: string;
         url: string;
@@ -24,7 +28,7 @@
 </script>
 
 {#if mushroom && mushroom.OToLId}
-<div class="image-div">
+<div class="image-div" class:overlay-credits={creditsOverlay}>
     {#await fetchOneZoomPic(mushroom.OToLId)}
     {:then res}
         <figure>
@@ -33,9 +37,12 @@
                     class="fit-picture"
                     src={res.url}
                     alt={`Geverifieerde foto van ${mushroom.id} gebracht door OneZoom`} />
-            {#if credits}
+            {#if credits && !creditsOverlay}
             <figcaption>{res.by}</figcaption>
             {/if}
+            {#if credits && creditsOverlay}
+            <figcaption class="overlay">{res.by}</figcaption>
+            {/if}
         </figure>
     {:catch}
         <p>Er kan geen foto worden opgehaald</p>
@@ -52,13 +59,17 @@
         display: flex;
         justify-content: center;
     }
+    .image-div.overlay-credits {
+        position: relative;
+    }
     figure {
         margin: 0;
         padding: 0;
         display: flex;
         justify-content: center;
         flex-direction: column;
         width: 100%;
+        position: relative;
     }
     figure figcaption {
         caption-side: bottom;
@@ -67,6 +78,21 @@
         color: var(--c-text-muted, #888);
         text-align: center;
     }
+    figure figcaption.overlay {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        margin: 0;
+        padding: 2px 4px;
+        background: rgba(0, 0, 0, 0.45);
+        color: #fff;
+        font-size: 0.65em;
+        text-align: center;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
     img {
         width: 100%;
         max-height: 220px;

src/lib/viewModel/parser.ts

@@ -60,6 +60,29 @@ export async function parseMushroomCSV(fetchApi?: Fetch): Promise<{ [key: string
     return res;
 }
 
+export function getMushroomsForSubKey(
+    subKeyId: string,
+    parsedQuestions: ParsedQuestions,
+    parsedMushrooms: { [key: string]: Mushroom }
+): Mushroom[] {
+    const result: Mushroom[] = [];
+    const visited = new Set<string>();
+
+    function traverse(id: string): void {
+        if (visited.has(id)) return;
+        visited.add(id);
+        if (parsedMushrooms[id]) {
+            result.push(parsedMushrooms[id]);
+        } else if (parsedQuestions[id]) {
+            traverse(parsedQuestions[id].first_link);
+            traverse(parsedQuestions[id].second_link);
+        }
+    }
+
+    traverse(subKeyId);
+    return result.sort((a, b) => a.id.localeCompare(b.id));
+}
+
 export type ParsedQuestions = { [key: string]: ParsedQuestion };
 
 export async function parseQuestionsCSV(fetchApi?: Fetch): Promise<ParsedQuestions> {

src/routes/+page.svelte

@@ -23,7 +23,6 @@
 <script lang="ts">
     import type { PageData } from './$types';
     import { preferredSubKeys } from "$lib/viewModel/viewModel";
-    import Hex from "$lib/etc/Hex.svelte";
     import {goto} from "$app/navigation";
     import {resolve} from "$app/paths";
     import {questionLimiter} from "$lib/viewModel/paramHelper";
@@ -46,7 +45,6 @@
     <link property="url" href="https://mush-id.jitsedesmet.be/">
     <!-- Hero section -->
     <section class="hero">
-        <Hex/>
         <h1>Welkom bij Mush-ID</h1>
         <p class="subtitle" property="description">
             Identificeer paddenstoelen stap voor stap met behulp van binaire sleutels.
@@ -85,6 +83,9 @@
             </details>
         </form>
 
+        <div class="saved-row">
+            <FancyButton color="secondary" href={resolve("/9789050117548/soorten")}>Bekijk paddenstoelen in deelsleutels</FancyButton>
+        </div>
         <div class="saved-row">
             <FancyButton color="secondary" href="/saved">Opgeslagen zoekopdrachten</FancyButton>
         </div>