From aaf09e13f54a5b7ad57aa05651be1e34c4b7d001 Mon Sep 17 00:00:00 2001
From: Jonas Kappa <jkappa@gmx.de>
Date: Sun, 28 Dec 2025 13:02:36 +0100
Subject: [PATCH] Editor: Adjusted game link and added no games image

---
 src/routes/editor/+page.svelte | 52 ++++++++++++++++++++++------------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/routes/editor/+page.svelte b/src/routes/editor/+page.svelte
index 71dc1e4..5d463de 100644
--- a/src/routes/editor/+page.svelte
+++ b/src/routes/editor/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { goto } from "$app/navigation";
     import Modal from "$lib/Modal.svelte";
     import type { Game } from "$lib/Types";
     import { url } from "$lib/util";
@@ -62,6 +63,7 @@
             .then((response) => {
                 if (response.status === 200) {
                     games = response.data;
+                    games.sort((a, b) => a.name.localeCompare(b.name));
                 } else {
                     console.error("Could not fetch games: " + response.status);
                 }
@@ -83,25 +85,39 @@
             ><i class="fa-solid fa-plus"></i> Neues Spiel</button
         >
     </div>
-    <div class="flex flex-col space-y-4 overflow-y-auto">
-        {#each games as game}
-            <div
-                class="ms-4 me-4 flex items-center justify-between rounded-xl border-2 p-2 hover:cursor-pointer hover:bg-emerald-200"
-            >
-                <a class="" href={`${game._id}`}>{game.name}</a>
-                <!-- svelte-ignore a11y_consider_explicit_label -->
-                <button
-                    type="button"
-                    class="btn border-red-600 text-red-600"
-                    onclick={(event) => {
-                        event.stopPropagation();
-                        gameToDelete = game;
-                        showDeleteGame = true;
-                    }}><i class="fa-solid fa-trash"></i></button
+    {#if games.length > 0}
+        <div class="flex flex-col space-y-4 overflow-y-auto">
+            {#each games as game}
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <!-- svelte-ignore a11y_no_static_element_interactions -->
+                <div
+                    class="ms-4 me-4 flex items-center justify-between rounded-xl border-2 p-2 hover:cursor-pointer hover:bg-emerald-200"
+                    onclick={() => {
+                        goto(`/editor/${game._id}`);
+                    }}
                 >
-            </div>
-        {/each}
-    </div>
+                    <div>
+                        {game.name}
+                    </div>
+                    <!-- svelte-ignore a11y_consider_explicit_label -->
+                    <button
+                        type="button"
+                        class="btn border-red-600 text-red-600"
+                        onclick={(event) => {
+                            event.stopPropagation();
+                            gameToDelete = game;
+                            showDeleteGame = true;
+                        }}><i class="fa-solid fa-trash"></i></button
+                    >
+                </div>
+            {/each}
+        </div>
+    {:else}
+        <div class="flex h-full w-full grow-2 flex-col items-center justify-center">
+            <div class="text-[128px] text-gray-300"><i class="fa-solid fa-database"></i></div>
+            <div class="text-[24px] text-gray-500 select-none">Noch keine Spiele vorhanden</div>
+        </div>
+    {/if}
 </div>
 
 <Modal bind:showModal={showNewGame} okFn={addNewGame} cancelFn={addNewGameCancel}>