Add species list view per sub-key

src/lib/OneZoomPicture.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import type {Mushroom} from "$lib/viewModel/parser";
-    export let credits: boolean = true;
+    /** When true, renders the photographer credit as a translucent overlay
+     *  pinned to the bottom of the image. */
+    export let creditsOverlay: boolean = false;
     interface OneZoomImage {
         name: string;
         url: string;
@@ -33,8 +35,8 @@
                     class="fit-picture"
                     src={res.url}
                     alt={`Geverifieerde foto van ${mushroom.id} gebracht door OneZoom`} />
-            {#if credits}
-            <figcaption>{res.by}</figcaption>
+            {#if creditsOverlay}
+            <figcaption class="overlay">{res.by}</figcaption>
             {/if}
         </figure>
     {:catch}
@@ -59,13 +61,22 @@
         justify-content: center;
         flex-direction: column;
         width: 100%;
+        position: relative;
     }
-    figure figcaption {
-        caption-side: bottom;
-        margin: 5px auto;
-        font-size: 0.75em;
-        color: var(--c-text-muted, #888);
+    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%;

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>

src/routes/9789050117548/+page.svelte

@@ -71,7 +71,7 @@
                    class="mushroom-link">{currentMushroom.id}</a>
             </p>
             <div class="image-wrapper">
-                <OneZoomPicture mushroom={currentMushroom} />
+                <OneZoomPicture mushroom={currentMushroom} creditsOverlay={true} />
             </div>
             <p class="sources-label">Raadpleeg bronnen:</p>
             <div class="mushroom-info">