Optimise Cart page

Yeet the last of the % imports, as they incorrectly displayed as syntax errors

front/jsconfig.json

@@ -22,10 +22,7 @@
      * Typecheck JS in `.svelte` and `.js` files by default.
      * Disable this if you'd like to use dynamic types.
      */
-    "checkJs": true,
-    "paths": {
-      "%": ["./src"]
-    }
+    "checkJs": true
   },
   /**
    * Use global.d.ts instead of compilerOptions.types

front/src/lib/test-data.ts

@@ -59,14 +59,14 @@ const TestData: Item[] = [
         image: "/wathog.jpg",
         detail: "Example",
     },
-    {
-        uuid: "bluhog",
-        name: "Blue HOGGGGG",
-        price: 0,
-        labels: [Labels.nut, Labels.gluten, Labels.spicy],
-        image: "/sonichog.jpg",
-        detail: "Example",
-    },
+    // {
+    //     uuid: "bluhog",
+    //     name: "Blue HOGGGGG",
+    //     price: 0,
+    //     labels: [Labels.nut, Labels.gluten, Labels.spicy],
+    //     image: "/sonichog.jpg",
+    //     detail: "Example",
+    // },
 ];
 
 export default TestData;

front/src/main.js

@@ -1,5 +1,5 @@
-import '%/styles/main.scss'
-import App from '%/App.svelte'
+import './styles/main.scss'
+import App from './App.svelte'
 
 const app = new App({
   target: document.getElementById('app'),

front/src/pages/PageCart.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
     import { link } from 'svelte-spa-router';
+    import { Basket } from "phosphor-svelte";
 
+    import type { CartItem } from "../lib/types";
     import { getPopularToday } from "../lib/test-api";
     import Cart from "../lib/cart";
     import MenuList from "../components/MenuList.svelte";
@@ -8,8 +10,13 @@
 
     let popularToday = getPopularToday();
 
-    $: items = $Cart;
-    $: totalPrice = $Cart.map((item) => item.amount * item.data.price).reduce((a, b) => a + b, 0);
+    let items: CartItem[];
+    let totalPrice: number;
+
+    Cart.subscribe(() => {
+        items = $Cart;
+        totalPrice = Cart.getTotalPrice();
+    });
 </script>
 
 
@@ -26,8 +33,8 @@
     {/each}
 {:else}
     <div id="emptyCart">
-        <h1>Empty Cart!</h1>
-        <p>Go add some items from the menu...</p>
+        <h1>Empty Cart&nbsp;<Basket weight="fill" /></h1>
+        <p>Why not go and checkout <a href="/menu" use:link>our menu</a>?</p>
     </div>
 {/if}
 

front/src/pages/PageIndex.svelte

@@ -23,7 +23,7 @@
 </script>
 
 <AnnouncementBanner />
-<a href="/annoucements" use:link>Learn More <ArrowUpRight /></a>
+
 <div class="spacer" />
 
 <h2>Where to find us</h2>
@@ -44,9 +44,10 @@
                 <tr><td>Sunday</td><td>11am</td><td>2am</td></tr>
             </table>
         </div>
-        <a href="/menu" use:link>Ready to book a table?</a>
+        <a href="/book" use:link>Ready to book a table?</a>
     </div>
 </div>
+
 <div class="spacer" />
 
 <h2>Popular Today</h2>
@@ -60,6 +61,7 @@
     {/await}
 </div>
 <a href="/menu" use:link>See All <ArrowUpRight /></a>
+
 <div class="spacer" />
 
 <h2>About Us</h2>contact

front/src/routes.js

@@ -1,30 +1,30 @@
 import { wrap } from "svelte-spa-router/wrap";
 
-import PageLoading from "%/pages/PageLoading.svelte";
-import Page404 from "%/pages/Page404.svelte";
-import Page500 from "%/pages/Page500.svelte";
+import PageLoading from "./pages/PageLoading.svelte";
+import Page404 from "./pages/Page404.svelte";
+import Page500 from "./pages/Page500.svelte";
 
 const routes = {
     "/": wrap({
-        asyncComponent: () => import("%/pages/PageIndex.svelte"),
+        asyncComponent: () => import("./pages/PageIndex.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true, fullWidth: false, },
     }),
     "/menu": wrap({
-        asyncComponent: () => import("%/pages/PageMenu.svelte"),
+        asyncComponent: () => import("./pages/PageMenu.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true, fullWidth: true, },
     }),
     "/item/:uuid": wrap({
-        asyncComponent: () => import("%/pages/PageItem.svelte"),
+        asyncComponent: () => import("./pages/PageItem.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true, fullWidth: true, },
     }),
     "/contact": wrap({
-        asyncComponent: () => import("%/pages/PageContact.svelte"),
+        asyncComponent: () => import("./pages/PageContact.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true, fullWidth: false, },
@@ -36,7 +36,7 @@ const routes = {
         userData: { showNavBar: true, fullWidth: false, },
     }),
     "/cart": wrap({
-        asyncComponent: () => import("%/pages/PageCart.svelte"),
+        asyncComponent: () => import("./pages/PageCart.svelte"),
         loadingComponent: PageLoading,
         conditions: [],
         userData: { showNavBar: true, fullWidth: false, },

front/src/styles/vars.scss

@@ -24,7 +24,7 @@ $border-radius-circle: 99999px;
 // GAP SIZING
 $sizing-default-width: 1000px;
 $sizing-full-width: 1200px;
-$sizing-navigation-height: 55px;
+$sizing-navigation-height: 60px;
 
 // PADDING/MARGIN
 $spacing-xsmall: 5px;

front/vite.config.js

@@ -10,9 +10,9 @@ export default defineConfig({
     optimizeDeps: {
         exclude: ["phosphor-svelte"],
     },
-    resolve: {
-        alias: {
-            '%': __dirname + '/src',
-        }
-    },
+    // resolve: {
+    //     alias: {
+    //         '%': __dirname + '/src',
+    //     }
+    // },
 })