Nicer item page

Add markdown support to item description
Cart now gets loaded in the background, poorly implemented I presume

front/package-lock.json

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "leaflet": "^1.9.4",
+        "svelte-markdown": "^0.4.1",
         "svelte-spa-router": "^4.0.1"
       },
       "devDependencies": {
@@ -24,7 +25,6 @@
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
       "integrity": "sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.24"
@@ -405,7 +405,6 @@
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
       "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/set-array": "^1.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.10",
@@ -419,7 +418,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -428,7 +426,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
       "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
       "engines": {
         "node": ">=6.0.0"
       }
@@ -436,14 +433,12 @@
     "node_modules/@jridgewell/sourcemap-codec": {
       "version": "1.4.15",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz",
-      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==",
+      "integrity": "sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg=="
-      "dev": true
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.25",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
       "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
@@ -699,8 +694,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
-      "dev": true
     },
     "node_modules/@types/geojson": {
       "version": "7946.0.14",
@@ -717,11 +711,15 @@
         "@types/geojson": "*"
       }
     },
+    "node_modules/@types/marked": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@types/marked/-/marked-5.0.2.tgz",
+      "integrity": "sha512-OucS4KMHhFzhz27KxmWg7J+kIYqyqoW5kdIEI319hqARQQUTqhao3M/F+uFnDXD0Rg72iDDZxZNxq5gvctmLlg=="
+    },
     "node_modules/acorn": {
       "version": "8.11.3",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz",
       "integrity": "sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==",
-      "dev": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -746,7 +744,6 @@
       "version": "5.3.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
       "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
-      "dev": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -755,7 +752,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.0.0.tgz",
       "integrity": "sha512-+60uv1hiVFhHZeO+Lz0RYzsVHy5Wr1ayX0mwda9KPDVLNJgZ1T9Ny7VmFbLDzxsH0D87I86vgj3gFrjTJUYznw==",
-      "dev": true,
       "dependencies": {
         "dequal": "^2.0.3"
       }
@@ -812,7 +808,6 @@
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/code-red/-/code-red-1.0.4.tgz",
       "integrity": "sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15",
         "@types/estree": "^1.0.1",
@@ -825,7 +820,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-2.3.1.tgz",
       "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
-      "dev": true,
       "dependencies": {
         "mdn-data": "2.0.30",
         "source-map-js": "^1.0.1"
@@ -864,7 +858,6 @@
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
       "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -911,7 +904,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-3.0.3.tgz",
       "integrity": "sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0"
       }
@@ -1006,7 +998,6 @@
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.2.tgz",
       "integrity": "sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "*"
       }
@@ -1028,14 +1019,12 @@
     "node_modules/locate-character": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
-      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
+      "integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA=="
-      "dev": true
     },
     "node_modules/magic-string": {
       "version": "0.30.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
       "integrity": "sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==",
-      "dev": true,
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.4.15"
       },
@@ -1043,11 +1032,21 @@
         "node": ">=12"
       }
     },
+    "node_modules/marked": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-5.1.2.tgz",
+      "integrity": "sha512-ahRPGXJpjMjwSOlBoTMZAK7ATXkli5qCPxZ21TG44rx1KEo44bii4ekgTDQPNRQ4Kh7JMb9Ub1PVk1NxRSsorg==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 16"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.30",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.0.30.tgz",
-      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==",
+      "integrity": "sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA=="
-      "dev": true
     },
     "node_modules/ms": {
       "version": "2.1.2",
@@ -1086,7 +1085,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
       "integrity": "sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==",
-      "dev": true,
       "dependencies": {
         "@types/estree": "^1.0.0",
         "estree-walker": "^3.0.0",
@@ -1224,7 +1222,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
       "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -1233,7 +1230,6 @@
       "version": "4.2.14",
       "resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.14.tgz",
       "integrity": "sha512-ry3+YlWqZpHxLy45MW4MZIxNdvB+Wl7p2nnstWKbOAewaJyNJuOtivSbRChcfIej6wFBjWqyKmf/NgK1uW2JAA==",
-      "dev": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.1",
         "@jridgewell/sourcemap-codec": "^1.4.15",
@@ -1266,6 +1262,18 @@
         "svelte": "^3.19.0 || ^4.0.0"
       }
     },
+    "node_modules/svelte-markdown": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/svelte-markdown/-/svelte-markdown-0.4.1.tgz",
+      "integrity": "sha512-pOlLY6EruKJaWI9my/2bKX8PdTeP5CM0s4VMmwmC2prlOkjAf+AOmTM4wW/l19Y6WZ87YmP8+ZCJCCwBChWjYw==",
+      "dependencies": {
+        "@types/marked": "^5.0.1",
+        "marked": "^5.1.2"
+      },
+      "peerDependencies": {
+        "svelte": "^4.0.0"
+      }
+    },
     "node_modules/svelte-spa-router": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/svelte-spa-router/-/svelte-spa-router-4.0.1.tgz",

front/package.json

@@ -18,6 +18,7 @@
   },
   "dependencies": {
     "leaflet": "^1.9.4",
+    "svelte-markdown": "^0.4.1",
     "svelte-spa-router": "^4.0.1"
   }
 }

front/public/spinner.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><style>.spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}.spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}@keyframes spinner_zKoa{100%{transform:rotate(360deg)}}@keyframes spinner_YpZS{0%{stroke-dasharray:0 150;stroke-dashoffset:0}47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}}</style><g class="spinner_V8m1"><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g></svg>

front/src/App.svelte

@@ -1,12 +1,12 @@
 <script>
-    import Router from 'svelte-spa-router';
+    import Router, { replace, link } from 'svelte-spa-router';
-    import { replace, link } from 'svelte-spa-router';
     import active from 'svelte-spa-router/active'
     import { TwitterLogo, FacebookLogo, InstagramLogo, TiktokLogo } from 'phosphor-svelte';
 
-    import Cart from './lib/cart';
+    import Cart, { cartLoaded } from './lib/cart';
     import routes from './routes';
     import Logo from '/assets/LogoAlt.svg';
+    import Spinner from '/spinner.svg';
 
     const links = {
         home: {path: '/', className: 'active'},
@@ -15,21 +15,19 @@
         cart: {path: '/cart', className: 'active'},
     }
 
+    let scrollY = 0;
+    let width = 0;
+    let oldLocation = undefined;
+    let fullWidth = false;
+    let showNavBar = false;
     let cartItemCount = 0;
+
     Cart.subscribe(() => {
         cartItemCount = Cart.getTotalLength();
     });
 
-    let scrollY = 0;
-    let width = 0;
-
-    let oldLocation = undefined;
-    let fullWidth = false;
-    let showNavBar = false;
-
     function routeLoading(event) {
         if (event.detail.location === oldLocation) {
-            console.log("Fake!");
             return; // not an actual change
         }
 
@@ -72,14 +70,36 @@
             <span class="nav-logo"><img src={Logo} alt="TastyBites"></span>
             <ul style="justify-content: flex-start">
                 <li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
-                <li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
+                <li use:active={links.cart}>
+                    <a href="/cart" use:link>
+                        Cart&nbsp;&nbsp;
+                        <span class="nav-basket">
+                            {#await cartLoaded}
+                                <img src={Spinner} alt="Cart Loading">
+                            {:then _}
+                                {cartItemCount}
+                            {/await}
+                        </span>
+                    </a>
+                </li>
             </ul>
         {:else}
             <ul>
                 <li use:active={links.home}><a href="/" use:link>Home</a></li>
                 <li use:active={links.menu}><a href="/menu" use:link>Menu</a></li>
                 <li use:active={links.contact}><a href="/contact" use:link>Contact&nbsp;Us</a></li>
-                <li use:active={links.cart}><a href="/cart" use:link>Cart&nbsp;&nbsp;<span class="nav-basket">{cartItemCount}</span></a></li>
+                <li use:active={links.cart}>
+                    <a href="/cart" use:link>
+                        Cart&nbsp;&nbsp;
+                        <span class="nav-basket">
+                            {#await cartLoaded}
+                                <img src={Spinner} alt="Cart Loading">
+                            {:then _}
+                                {cartItemCount}
+                            {/await}
+                        </span>
+                    </a>
+                </li>
             </ul>
         {/if}
     </nav>

front/src/components/BasketItem.svelte

@@ -4,6 +4,7 @@
 
     import { type CartItem, Labels } from "../lib/types";
     import Cart from "../lib/cart";
+    import ImageLoading from '/assets/MenuItemLoading.svg';
 
     export let item: CartItem;
 
@@ -23,10 +24,10 @@
 </script>
 
 <div class="container">
-    {#if item.data.images}
+    {#if item.data.images && item.data.images[0]}
         <img src="{item.data.images[0]}" alt="Item" class="basket-item-image">
     {:else}
-        <img src="/assets/MenuItemLoading.svg" alt="Item" class="basket-item-image">
+        <img src={ImageLoading} alt="Item" class="basket-item-image">
     {/if}
 
     <ul class="basket-item-data">

front/src/lib/cart.ts

@@ -3,26 +3,34 @@ import { type Writable, get, writable } from "svelte/store";
 import { type CartItem, type Item } from "./types";
 import { getItemByUUID, postVerifyCart } from "./test-api";
 
-function getLocal(): Record<string, CartItem> {
-    let localData: Record<string, CartItem> =
-        JSON.parse(localStorage.getItem("basket")) || {};
-
-    postVerifyCart(localData)
-        .then((data: Record<string, CartItem>) => {
-            localData = data;
-        })
-        .catch((error) => {
-            console.error("Could not load basket:", error);
-            return <Record<string, CartItem>>{};
-        });
-
-    return localData;
-}
-
 function createCartStore() {
-    const cart: Writable<Record<string, CartItem>> = writable(getLocal());
+    let loaded = false;
+
+    const cart: Writable<Record<string, CartItem>> = writable({});
+
+    async function init() {
+        let localData: Record<string, CartItem> = {};
+        try {
+            localData = JSON.parse(localStorage.getItem("basket")) || {};
+        } catch {
+            console.error("Local Cart data fucked");
+        }
+
+        try {
+            const newData: Record<string, CartItem> = await postVerifyCart(localData);
+            cart.set(newData);
+        } catch (error) {
+            console.error("Could not load basket:", error);
+        }
+
+        loaded = true;
+    }
 
     async function addToCart(uuid: string, amount: number) {
+        if (!loaded) {
+            return
+        }
+
         if (get(cart)[uuid] !== undefined) {
             cart.update((cart: Record<string, CartItem>) => {
                 cart[uuid].amount += amount;
@@ -74,6 +82,10 @@ function createCartStore() {
     }
 
     function removeByUUID(uuid: string) {
+        if (!loaded) {
+            return
+        }
+
         cart.update((cart) => {
             delete cart[uuid]; // skipcq: JS-0320
             return cart;
@@ -82,6 +94,7 @@ function createCartStore() {
 
     return {
         ...cart,
+        init,
         addToCart,
         getEntries,
         getUniqueLength,
@@ -93,15 +106,11 @@ function createCartStore() {
 
 // Create store
 const Cart = createCartStore();
+export let cartLoaded = Cart.init()
 
 // Make sure to update localstorage on any changes
 Cart.subscribe((value) => {
     localStorage.setItem("basket", JSON.stringify(value));
 });
 
-// Debug
-// Cart.subscribe((value) => {
-//     console.log(value);
-// });
-
 export default Cart;

front/src/lib/test-api.ts

@@ -138,5 +138,6 @@ export async function postVerifyCart(
         });
     });
 
-    return newCartData;
+    await fakeDelay(1);
+    return newCartData
 }

front/src/lib/test-data.ts

@@ -1,48 +1,59 @@
-import type { Item } from "./types";
+import { type Item, Labels } from "./types";
-import { Labels } from "./types";
 
 const TestData: Item[] = [
     {
         uuid: "soap",
         name: "Bar of Soap",
         price: 69.99,
+        description: `
+Example
+        `,
         labels: [Labels.vegan, Labels.spicy],
-        description: "Example",
     },
     {
         uuid: "sock",
         name: "Sock",
         price: 21,
+        description: `
+Example
+        `,
         labels: [Labels.vegan, Labels.fish, Labels.nut, Labels.spicy],
-        description: "Example",
     },
     {
         uuid: "brick",
         name: "Brick",
         price: 0,
+        description: `
+Example
+        `,
         labels: [Labels.spicy],
-        description: "Example",
     },
     {
         uuid: "toast",
         name: "Toast",
         price: 4382749832743,
+        description: `
+Example
+        `,
         labels: [Labels.gluten],
-        description: "Example",
     },
     {
         uuid: "water",
         name: "water",
         price: 1,
+        description: `
+Example
+        `,
         labels: [Labels.fish],
-        description: "Example",
     },
     {
         uuid: "mouldy_bread",
         name: "half eaten mouldy bread",
         price: -99,
+        description: `
+Example
+        `,
         labels: [Labels.nut],
-        description: "Example",
     },
     {
         uuid: "gwagwa",
@@ -55,17 +66,27 @@ const TestData: Item[] = [
         uuid: "hogmelon",
         name: "Hogermellon",
         price: 1111,
-        labels: [Labels.fish],
+        description: `
-        images: ["/item_images/wathog.jpg"],
+This is a sample description. Gay Balls.
-        description: "Example",
+
+Contains the following:
+- hog
+- melon
+        `,
+        labels: [Labels.nut, Labels.gluten, Labels.spicy, Labels.fish],
+        images: ["/item_images/wathog.jpg","/item_images/sonichog.jpg"],
     },
     {
         uuid: "bluhog",
         name: "Blue HOGGGGG",
         price: 0,
+        description: `
+This is a sample description.
+
+Gay Balls
+        `,
         labels: [Labels.nut, Labels.gluten, Labels.spicy],
         images: ["/item_images/sonichog.jpg"],
-        description: "Example",
     },
 ];
 

front/src/pages/PageAbout.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
     import ImageWithText from "../components/ImageWithText.svelte";
+    import Hog from "/item_images/wathog.jpg";
+    import Dab from "/item_images/dab.jpg";
+    import Beetle from "/beetle.jpg";
 </script>
 
 <h1>Our story</h1>
 
-<ImageWithText image="/wathog.jpg">
+<ImageWithText image={Hog}>
     <div class="padding">
         <h2>How it all started</h2>
         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
@@ -15,7 +18,7 @@
 
 <div class="spacer" />
 
-<ImageWithText image="/dab.jpg" toRight={true}>
+<ImageWithText image={Dab} toRight={true}>
     <div class="padding">
         <h2>The hard times</h2>
         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
@@ -25,7 +28,7 @@
 
 <div class="spacer" />
 
-<ImageWithText image="/MenuItemLoading.svg">
+<ImageWithText image={Hog}>
     <div class="padding">
         <h2>Whats next</h2>
         <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
@@ -33,6 +36,16 @@
     </div>
 </ImageWithText>
 
+<div class="spacer" />
+
+<ImageWithText image={Beetle} toRight={true}>
+    <div class="padding">
+        <h2>Our Chef</h2>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. At deserunt est quos dicta ipsa! Soluta laudantium dolore temporibus nisi aspernatur expedita vel, unde natus a nulla rerum officiis optio neque.</p>
+    </div>
+</ImageWithText>
+
 
 <style lang="scss">
     @import "../styles/vars";

front/src/pages/PageCart.svelte

@@ -4,7 +4,7 @@
 
     import { type CartItem } from "../lib/types";
     import { getPopularToday } from "../lib/test-api";
-    import Cart from "../lib/cart";
+    import Cart, { cartLoaded } from "../lib/cart";
     import MenuList from "../components/MenuList.svelte";
     import BasketItem from "../components/BasketItem.svelte";
     import DropDown from "../components/DropDown.svelte";
@@ -22,8 +22,15 @@
     });
 </script>
 
+<!--<button on:click={() => { localStorage['basket'] = "balls" }}>Fuck up the cart</button>-->
 
-{#if totalItems}
+{#await cartLoaded}
+    <div id="emptyCart">
+        <h1>Cart Loading&nbsp;<Basket weight="fill" /></h1>
+        <p>This shouldn't take long</p>
+    </div>
+{:then _}
+    {#if totalItems}
         <h1>Cart</h1>
 
         <button id="checkout-button">Checkout</button>
@@ -34,12 +41,13 @@
                 <BasketItem item={item}/>
             </div>
         {/each}
-{:else}
+    {:else}
         <div id="emptyCart">
             <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}
+    {/if}
+{/await}
 
 <div class="spacer" />
 

front/src/pages/PageItem.svelte

@@ -1,19 +1,24 @@
 <script lang="ts">
-    import { Minus, Plus, SmileySad } from "phosphor-svelte";
+    import { link } from 'svelte-spa-router';
+    import { Acorn, Fish, GrainsSlash, Leaf, Minus, Pepper, Plus, SmileySad, ShoppingCart } from "phosphor-svelte";
+    import SvelteMarkdown from 'svelte-markdown'
 
+    import { Labels } from "../lib/types";
     import { getPopularToday, getItemByUUID } from "../lib/test-api";
-    import Cart from "../lib/cart";
+    import Cart, { cartLoaded } from "../lib/cart";
     import MenuList from "../components/MenuList.svelte";
     import LoadingBar from "../components/LoadingBar.svelte";
-    import LoadingImage from "/MenuItemLoading.svg";
+    import LoadingImage from "/assets/MenuItemLoading.svg";
 
     export let params: {
         uuid?: string;
     };
 
     let basketAmount = 1;
+    let selectedImage = 0;
 
     $: item = getItemByUUID(params.uuid);
+    $: item.finally(() => { selectedImage = 0 });
     $: popularToday = getPopularToday();
 
     function reduce() {
@@ -21,11 +26,13 @@
             basketAmount -= 1;
         }
     }
+
     function increase() {
         if (basketAmount < 99) {
             basketAmount += 1;
         }
     }
+
     function add() {
         Cart.addToCart(params.uuid, basketAmount);
     }
@@ -34,39 +41,42 @@
 <div class="main">
     {#await item}
         <div id="images">
-            <div>
+            <div class="img-main">
-                <img src={LoadingImage} alt="">
+                <div class="loading image" />
             </div>
-            <ul>
+            <ul class="img-alts">
-                <li><img src={LoadingImage} alt=""></li>
+                <li><div class="loading image-small" /></li>
-                <li><img src={LoadingImage} alt=""></li>
+                <li><div class="loading image-small" /></li>
-                <li><img src={LoadingImage} alt=""></li>
+                <li><div class="loading image-small" /></li>
-                <li><img src={LoadingImage} alt=""></li>
+                <li><div class="loading image-small" /></li>
-                <li><img src={LoadingImage} alt=""></li>
+                <li><div class="loading image-small" /></li>
             </ul>
         </div>
 
         <div id="info">
             <div class="loading title" />
             <div class="loading price" />
-
             <div class="loading description" />
         </div>
     {:then item}
         <div id="images">
-            <div>
+            <div class="img-main">
-                {#if item.images}
+                {#if item.images && item.images[selectedImage]}
-                    <img src="{item.images[0]}" alt="Item">
+                    <img src="{item.images[selectedImage]}" alt="Item">
                 {:else}
-                    <img src="/assets/MenuItemLoading.svg" alt="Item">
+                    <img src={LoadingImage} alt="Item">
                 {/if}
             </div>
-            <ul>
+            <ul class="img-alts">
-                <li><img src={LoadingImage} alt=""></li>
+                {#if item.images && item.images.length > 1}
-                <li><img src={LoadingImage} alt=""></li>
+                    {#each item.images as image, i}
-                <li><img src={LoadingImage} alt=""></li>
+                        <li class:selected={selectedImage === i}>
-                <li><img src={LoadingImage} alt=""></li>
+                            <button on:click={() => { selectedImage = i }}>
-                <li><img src={LoadingImage} alt=""></li>
+                                <img src={image} alt="">
+                            </button>
+                        </li>
+                    {/each}
+                {/if}
             </ul>
         </div>
 
@@ -75,18 +85,46 @@
             <p>£{item.price}</p>
 
             <div class="container">
-                <p>{item.description}</p>
+                <div id="description">
+                    {#if item.description}
+                        <SvelteMarkdown source={item.description} />
+                    {:else}
+                        <p>Item is missing information</p>
+                    {/if}
                 </div>
+                <hr>
+                <div id="small-text">
+                    <p>If you require any specific informtaion on a meal, <a href="/contact" use:link>please contact us</a>.</p>
+                </div>
+            </div>
+
+            <ul id="allergy-labels">
+                {#each item.labels as label}
+                    {#if label === Labels.vegan}
+                        <li class="vegan"><Leaf weight="fill" />&nbsp;&nbsp;Vegan</li>
+                    {:else if label === Labels.fish}
+                        <li class="fish"><Fish weight="fill" />&nbsp;&nbsp;Sea</li>
+                    {:else if label === Labels.nut}
+                        <li class="nut"><Acorn weight="fill" />&nbsp;&nbsp;Nut</li>
+                    {:else if label === Labels.gluten}
+                        <li class="gluten"><GrainsSlash weight="fill" />&nbsp;&nbsp;Gluten Free</li>
+                    {:else if label === Labels.spicy}
+                        <li class="spicy"><Pepper weight="fill" />&nbsp;&nbsp;Spicy</li>
+                    {/if}
+                {/each}
+            </ul>
 
             <div id="basket-controls">
                 <button class="button" class:disabled={basketAmount <= 1} on:click={reduce}><Minus /></button>
                 <p>{basketAmount}</p>
                 <button class="button" class:disabled={basketAmount >= 99} on:click={increase}><Plus /></button>
                 <hr>
-                <button class="button add" on:click={add} id="add-to-cart">Add to Cart</button>
+                {#await cartLoaded}
+                    <button class="button add disabled" id="add-to-cart">Add&nbsp;to&nbsp;Cart&nbsp;&nbsp;<ShoppingCart weight="fill" /></button>
+                {:then _}
+                    <button class="button add" on:click={add} id="add-to-cart">Add&nbsp;to&nbsp;Cart&nbsp;&nbsp;<ShoppingCart weight="fill" /></button>
+                {/await}
             </div>
-
-
         </div>
     {:catch error}
         <div id="error">
@@ -122,25 +160,27 @@
     }
 
     #images {
+        margin-right: $spacing-normal;
         display: flex;
         flex-direction: column;
 
-        > div {
+        .img-main {
             margin-bottom: $spacing-small;
-            padding: $spacing-small;
 
-            width: 650px;
+            width: 600px;
-            height: 500px;
+            height: 450px;
 
             display: flex;
             justify-content: center;
             align-items: center;
 
-            border-radius: $border-radius-normal;
-            background-color: $color-background;
-
             overflow: hidden;
 
+            > .loading.image {
+                width: 100%;
+                height: 100%;
+            }
+
             > img {
                 max-width: 100%;
                 max-height: 100%;
@@ -149,7 +189,7 @@
             }
         }
 
-        > ul {
+        .img-alts {
             margin: 0;
             padding: 0;
 
@@ -159,10 +199,39 @@
             > li {
                 list-style: none;
 
-                > img {
+                > .loading.image-small {
                     margin-right: $spacing-small;
                     width: 100px;
+                    height: 100px;
+                }
+
+                > button {
+                    margin-right: $spacing-small;
+                    padding: 0;
+
+                    width: 100px;
+                    height: 100px;
+
                     border-radius: $border-radius-normal;
+                    border: 1px solid transparent;
+                    background: transparent;
+
+                    overflow: hidden;
+
+                    > img {
+                        width: 100%;
+                        height: 100%;
+                        display: block;
+                        object-fit: cover;
+                    }
+
+                    &:hover, &:focus-visible {
+                        border: 1px solid $color-dark;
+                    }
+                }
+
+                &.selected > button {
+                    border: 1px solid $color-primary !important;
                 }
             }
         }
@@ -176,16 +245,31 @@
         align-items: flex-end;
 
         > h2 {
+            margin-bottom: $spacing-small;
+            padding: 0;
             font-size: $font-size-h1;
-            padding-bottom: $spacing-small;
         }
         > p {
+            margin-bottom: $spacing-normal;
+            padding: 0;
             font-size: $font-size-h2;
-            padding-bottom: $spacing-normal;
         }
+
         .container {
-            padding: $spacing-normal;
+            margin-bottom: $spacing-small;
             width: 100%;
+
+            #description {
+                padding: $spacing-normal;
+            }
+
+            #small-text {
+                padding: $spacing-small $spacing-normal;
+
+                p {
+                    font-size: $font-size-xsmall;
+                }
+            }
         }
     }
 
@@ -232,7 +316,7 @@
 
             &.disabled {
                 border: 1px solid rgba($color-dark, 0.1);
-                color: rgba($color-on-light, 0.6);
+                color: rgba($color-on-light, 0.6) !important;
 
                 &:hover,
                 &:focus-visible {
@@ -240,6 +324,11 @@
                     background-color: $color-light;
                     color: rgba($color-on-light, 0.6);
                 }
+
+                &.add {
+                    background-color: $color-dark !important;
+                    color: rgba($color-on-dark, 0.6) !important;
+                }
             }
         }
 
@@ -302,12 +391,60 @@
         }
     }
 
+    #allergy-labels {
+        padding: 0;
+
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-end;
+        flex-wrap: wrap;
+
+        > li {
+            margin: 0 0 $spacing-small $spacing-xsmall;
+            padding: 0 $spacing-small;
+
+            min-width: 30px;
+            height: 30px;
+
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            border-radius: $border-radius-circle;
+            background-color: $color-dark;
+            color: $color-on-dark;
+
+            list-style: none;
+
+            &.vegan {
+                background-color: $color-vegan;
+            }
+            &.fish {
+                background-color: $color-fish;
+            }
+            &.nut {
+                background-color: $color-nut;
+            }
+            &.gluten {
+                background-color: $color-gluten;
+            }
+            &.spicy {
+                background-color: $color-spicy;
+            }
+        }
+    }
+
     .loading {
         position: relative;
 
         border-radius: $border-radius-large;
 
-        background: linear-gradient(to right, $color-background 8%, rgba($color-dark, 0.3) 38%, $color-background 54%);
+        background: linear-gradient(
+                        to right,
+                        rgba($color-dark, 0) 8%,
+                        rgba($color-dark, 0.3) 38%,
+                        rgba($color-dark, 0) 54%
+                    ) no-repeat;
         background-size: 1000px 100%;
         animation: loading 1s infinite linear;
 
@@ -323,7 +460,10 @@
             left: $padding;
 
             border-radius: calc($border-radius-large - $padding);
-            background-color: rgba($color-background, 0.9);
+            background-color: darken($color-background, 10%);
+            background-image: url("/assets/Noise.png");
+
+            opacity: 0.9;
         }
 
         &.title {
@@ -337,17 +477,17 @@
             width: 60px;
         }
         &.description {
-            height: 400px;
+            height: 300px;
             width: 100%;
         }
     }
 
     @keyframes loading{
         0%{
-            background-position: -500px 0
+            background-position: -600px 0
         }
         100%{
-            background-position: 500px 0
+            background-position: 600px 0
         }
     }
 </style>

front/src/styles/_navigation_bar.scss

@@ -61,6 +61,10 @@ nav {
                     border-radius: $border-radius-circle;
                     background-color: $color-light;
                     color: $color-on-light;
+
+                    img {
+                        width: 10px;
+                    }
                 }
             }
 
@@ -86,7 +90,6 @@ nav {
 
         > img {
             height: calc($sizing-navigation-height - calc(2 * $spacing-small));
-
             display: block;
         }
     }

front/src/styles/_reset.scss

@@ -21,7 +21,6 @@ body,
 
 body {
     background-color: darken($color-background, 10%);
-    //background-color: $color-background;
     background-image: url("/assets/Noise.png");
     color: $color-on-background;
 }