Editor: Adjusted game link and added no games image

This commit is contained in:
2025-12-28 13:02:36 +01:00
parent daf3f779aa
commit aaf09e13f5

View File

@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation";
import Modal from "$lib/Modal.svelte"; import Modal from "$lib/Modal.svelte";
import type { Game } from "$lib/Types"; import type { Game } from "$lib/Types";
import { url } from "$lib/util"; import { url } from "$lib/util";
@@ -62,6 +63,7 @@
.then((response) => { .then((response) => {
if (response.status === 200) { if (response.status === 200) {
games = response.data; games = response.data;
games.sort((a, b) => a.name.localeCompare(b.name));
} else { } else {
console.error("Could not fetch games: " + response.status); console.error("Could not fetch games: " + response.status);
} }
@@ -83,12 +85,20 @@
><i class="fa-solid fa-plus"></i> Neues Spiel</button ><i class="fa-solid fa-plus"></i> Neues Spiel</button
> >
</div> </div>
{#if games.length > 0}
<div class="flex flex-col space-y-4 overflow-y-auto"> <div class="flex flex-col space-y-4 overflow-y-auto">
{#each games as game} {#each games as game}
<!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_no_static_element_interactions -->
<div <div
class="ms-4 me-4 flex items-center justify-between rounded-xl border-2 p-2 hover:cursor-pointer hover:bg-emerald-200" 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}`);
}}
> >
<a class="" href={`${game._id}`}>{game.name}</a> <div>
{game.name}
</div>
<!-- svelte-ignore a11y_consider_explicit_label --> <!-- svelte-ignore a11y_consider_explicit_label -->
<button <button
type="button" type="button"
@@ -102,6 +112,12 @@
</div> </div>
{/each} {/each}
</div> </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> </div>
<Modal bind:showModal={showNewGame} okFn={addNewGame} cancelFn={addNewGameCancel}> <Modal bind:showModal={showNewGame} okFn={addNewGame} cancelFn={addNewGameCancel}>