From 0eb62a4ae5f0badaafbddd115b2b3ebce1f4d0cd Mon Sep 17 00:00:00 2001
From: Matthias Kunnen <matthias.kunnen@gmail.com>
Date: Sun, 14 Jan 2024 01:57:05 +0100
Subject: [PATCH] Make /Items display craftable items only

/Items/All now displays all items.
---
 src/lib/RecipeItems.svelte                    |  2 +-
 src/routes/Items/+page.server.ts              |  1 +
 src/routes/Items/+page.svelte                 | 30 ++++++++----
 src/routes/Items/All/+page.server.ts          | 13 ++++++
 src/routes/Items/All/+page.svelte             | 46 +++++++++++++++++++
 .../Items/{ => Item}/[item]/+page.server.ts   |  0
 .../Items/{ => Item}/[item]/+page.svelte      |  0
 src/routes/global.css                         |  4 ++
 8 files changed, 85 insertions(+), 11 deletions(-)
 create mode 100644 src/routes/Items/All/+page.server.ts
 create mode 100644 src/routes/Items/All/+page.svelte
 rename src/routes/Items/{ => Item}/[item]/+page.server.ts (100%)
 rename src/routes/Items/{ => Item}/[item]/+page.svelte (100%)

diff --git a/src/lib/RecipeItems.svelte b/src/lib/RecipeItems.svelte
index d048a6678..dafc398ef 100644
--- a/src/lib/RecipeItems.svelte
+++ b/src/lib/RecipeItems.svelte
@@ -8,7 +8,7 @@
 {#each items as item, i}
     <li class="sum">{#if i > 0}+{/if}</li>
     <li class="item" data-name={item.item.name}>
-        <a href="/Items/{item.item.name}">
+        <a href="/Items/Item/{item.item.name}">
             <GameIcon
                 counter={item.count}
                 icon={item.item.icon}
diff --git a/src/routes/Items/+page.server.ts b/src/routes/Items/+page.server.ts
index aa846e95c..faaf54818 100644
--- a/src/routes/Items/+page.server.ts
+++ b/src/routes/Items/+page.server.ts
@@ -5,6 +5,7 @@ export const load = async () => {
 
     return {
         items: Object.entries(data.items)
+            .filter(([_, item]) => item.recipes.length > 0)
             .sort(([, a], [, b]) => {
                 return a.displayName.localeCompare(b.displayName);
             }),
diff --git a/src/routes/Items/+page.svelte b/src/routes/Items/+page.svelte
index 6db180968..4c1129246 100644
--- a/src/routes/Items/+page.svelte
+++ b/src/routes/Items/+page.svelte
@@ -5,11 +5,15 @@
 
 </script>
 
-<h1>All Icarus Items</h1>
+<h1>All Craftable Icarus Items</h1>
+<p>Other lists of Icarus items:</p>
+<ul class="other-lists">
+    <li><a href="/Items/All" class="link">All items including non-craftable experimental items</a></li>
+</ul>
 
 <div class="items">
     {#each data.items as [name, item]}
-        <a href="/Items/{name}">
+        <a href="/Items/Item/{name}">
             <GameIcon
                 icon={item.icon}
                 alt="{item.displayName}"
@@ -21,22 +25,28 @@
 </div>
 
 <style>
-    a {
-        display: flex;
-        align-items: center;
-        color: white;
-        gap: 4px;
-        text-decoration: none;
-    }
-
     h2 {
         font-size: 1.3em;
     }
 
+    .other-lists {
+        list-style-position: inside;
+        padding-left: 1em;
+    }
+
     .items {
         display: grid;
         gap: 2em;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
         --game-icon-width: 64px;
     }
+
+    .items a {
+        display: flex;
+        align-items: center;
+        color: white;
+        gap: 4px;
+        text-decoration: none;
+    }
+
 </style>
diff --git a/src/routes/Items/All/+page.server.ts b/src/routes/Items/All/+page.server.ts
new file mode 100644
index 000000000..aa846e95c
--- /dev/null
+++ b/src/routes/Items/All/+page.server.ts
@@ -0,0 +1,13 @@
+import {getData} from '$lib/data';
+
+export const load = async () => {
+    const data = await getData();
+
+    return {
+        items: Object.entries(data.items)
+            .sort(([, a], [, b]) => {
+                return a.displayName.localeCompare(b.displayName);
+            }),
+        title: 'Items',
+    };
+};
diff --git a/src/routes/Items/All/+page.svelte b/src/routes/Items/All/+page.svelte
new file mode 100644
index 000000000..eaf20e911
--- /dev/null
+++ b/src/routes/Items/All/+page.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+    import GameIcon from '$lib/GameIcon.svelte'
+
+    export let data;
+
+</script>
+
+<h1>All Icarus Items</h1>
+<p>
+    This includes items that are experimental and not craftable. For a list of craftable items, go
+    <a href="/Items" class="link">here</a>.
+</p>
+
+<div class="items">
+    {#each data.items as [name, item]}
+        <a href="/Items/Item/{name}">
+            <GameIcon
+                icon={item.icon}
+                alt="{item.displayName}"
+                size="64"
+                showCaption={false}></GameIcon>
+            <h2>{item.displayName}</h2>
+        </a>
+    {/each}
+</div>
+
+<style>
+    h2 {
+        font-size: 1.3em;
+    }
+
+    .items {
+        display: grid;
+        gap: 2em;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        --game-icon-width: 64px;
+    }
+
+    .items a {
+        display: flex;
+        align-items: center;
+        color: white;
+        gap: 4px;
+        text-decoration: none;
+    }
+</style>
diff --git a/src/routes/Items/[item]/+page.server.ts b/src/routes/Items/Item/[item]/+page.server.ts
similarity index 100%
rename from src/routes/Items/[item]/+page.server.ts
rename to src/routes/Items/Item/[item]/+page.server.ts
diff --git a/src/routes/Items/[item]/+page.svelte b/src/routes/Items/Item/[item]/+page.svelte
similarity index 100%
rename from src/routes/Items/[item]/+page.svelte
rename to src/routes/Items/Item/[item]/+page.svelte
diff --git a/src/routes/global.css b/src/routes/global.css
index 161b04382..79fae9d4e 100644
--- a/src/routes/global.css
+++ b/src/routes/global.css
@@ -27,3 +27,7 @@ h2 {
 h3 {
     font-size: 1.3em;
 }
+
+a.link {
+    text-decoration: underline;
+}