Add working 404 page

src/app/Router.ts

@@ -1,6 +1,7 @@
 import { App, checkVersion, Models } from './App';
 import { View } from './views/View';
 import { Home } from './views/Home'
+import { NotFound } from './views/NotFound'
 import { FieldSettings } from './views/FieldSettings'
 import { Generator } from './views/Generator'
 import { locale } from './Locales';
@@ -29,16 +30,19 @@ const router = async () => {
     renderer = Home
   } else {
     panel = 'tree'
-    App.model.set(config.models.find(m => m.id === urlParts.join('/'))!)
-    if (urlParams.has('q')) {
-      try {
-        const data = atob(urlParams.get('q') ?? '')
-        Models[App.model.get()!.id].reset(JSON.parse(data))
-      } catch (e) {}
-    }
-    renderer = Generator
-    if (App.model.get()) {
-      title = locale('title.generator', [locale(App.model.get()!.id)])
+    const model = config.models.find(m => m.id === urlParts.join('/')) ?? null
+    App.model.set(model)
+    if (model) {
+      if (urlParams.has('q')) {
+        try {
+          const data = atob(urlParams.get('q') ?? '')
+          Models[model.id].reset(JSON.parse(data))
+        } catch (e) {}
+      }
+      renderer = Generator
+      title = locale('title.generator', [locale(model.id)])
+    } else {
+      renderer = NotFound
     }
   }
 

src/app/views/Home.ts

@@ -4,9 +4,14 @@ import { View } from './View'
 import { Octicon } from '../components/Octicon'
 import config from '../../config.json'
 
-const GeneratorCard = (url: string, name: string, arrow?: boolean, active?: boolean) =>  `
+function cleanUrl(url: string) {
+  url = url.startsWith('/') ? url : '/' + url
+  return url.endsWith('/') ? url : url + '/'
+}
+
+export const GeneratorCard = (url: string, name: string, arrow?: boolean, active?: boolean) =>  `
   <li>
-    <a data-link href="/${url}/" class="generators-card${active ? ' selected' : ''}">
+    <a data-link href="${cleanUrl(url)}" class="generators-card${active ? ' selected' : ''}">
       ${name}
       ${arrow ? Octicon.chevron_right : ''}
     </a>

src/app/views/NotFound.ts

@@ -0,0 +1,17 @@
+import { Header } from '../components/Header'
+import { View } from './View'
+import { locale } from '../Locales'
+import { GeneratorCard } from './Home'
+
+export const NotFound = (view: View): string => {  
+  return `
+    ${Header(view, 'Data Pack Generators')}
+    <div class="home center">
+      <h2 class="very-large">404</h2>
+      <p>${locale('not_found.description')}</p>
+      <ul class="generators-list">
+        ${GeneratorCard('/', locale('home'), true)}
+      </ul>
+    </div>
+  `
+}

src/locales/en.json

@@ -16,6 +16,7 @@
   "language": "Language",
   "loot-table": "Loot Table",
   "minimize": "Minimize",
+  "not_found.description": "The page you were looking for does not exist.",
   "predicate": "Predicate",
   "redo": "Redo",
   "reset": "Reset",

src/styles/global.css

@@ -444,6 +444,18 @@ nav > .toggle span {
   padding-top: 71px;
 }
 
+.home.center {
+  flex-direction: column;
+  align-items: center;
+  color: var(--nav);
+}
+
+.home.center p {
+  padding-bottom: 20px;
+  text-align: center;
+  font-size: 20px;
+}
+
 .generators-list {
   display: flex;
   flex-direction: column;
@@ -583,6 +595,11 @@ nav > .toggle span {
   transition: border-color var(--style-transition);
 }
 
+.very-large {
+  font-size: 80px;
+  font-weight: 100;
+}
+
 @keyframes spinner {
   0% {
     transform: rotate(0deg);
@@ -725,7 +742,7 @@ nav > .toggle span {
     margin: 0 15px;
   }
 
-  .generators-card {
+  .home:not(.center) .generators-card {
     font-size: 14px;
     padding: 8px;
   }