Removing unused CSS.

src/hooks.ts

@@ -1,16 +1,15 @@
-import cookie from 'cookie';
-import { v4 as uuid } from '@lukeed/uuid';
 import type { Handle } from '@sveltejs/kit';
+import * as cookie from 'cookie';
 
 export const handle: Handle = async ({ event, resolve }) => {
   const cookies = cookie.parse(event.request.headers.get('cookie') || '');
-  event.locals.userid = cookies.userid || uuid();
+  event.locals.userid = cookies['userid'] || crypto.randomUUID();
 
   const response = await resolve(event);
 
-  if (!cookies.userid) {
+  if (!cookies['userid']) {
     // if this is the first time the user has visited this app,
-    // set a cookie so that we recognize them when they return
+    // set a cookie so that we recognise them when they return
     response.headers.set(
       'set-cookie',
       cookie.serialize('userid', event.locals.userid, {

src/lib/components/game/index.svelte

@@ -19,7 +19,7 @@
     </a>
   </div>
 
-  {#if !minimal && game?.year_published && game.players && game.max_players && game.playtime}
+  {#if !minimal}
     <div class="game-details">
       <p>{game.year_published}</p>
       <p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
@@ -51,10 +51,6 @@
 </article>
 
 <style lang="scss">
-  h2 .thumbnail {
-    align-self: start;
-  }
-
   img {
     border-radius: 10px;
   }

src/lib/components/header/Header.svelte

@@ -57,46 +57,6 @@
     --background: rgba(255, 255, 255, 0.7);
   }
 
-  svg {
-    width: 2em;
-    height: 3em;
-    display: block;
-  }
-
-  path {
-    fill: var(--background);
-  }
-
-  ul {
-    position: relative;
-    padding: 0;
-    margin: 0;
-    height: 3em;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    list-style: none;
-    background: var(--background);
-    background-size: contain;
-  }
-
-  li {
-    position: relative;
-    height: 100%;
-  }
-
-  li.active::before {
-    --size: 6px;
-    content: '';
-    width: 0;
-    height: 0;
-    position: absolute;
-    top: 0;
-    left: calc(50% - var(--size));
-    border: var(--size) solid transparent;
-    border-top: var(--size) solid var(--accent-color);
-  }
-
   nav a {
     display: flex;
     height: 100%;

src/lib/components/preferences/profile.svelte

@@ -50,11 +50,6 @@
 </div>
 
 <style lang="scss">
-  .panel-contents {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
   .container {
     width: 24px;
     height: 24px;

src/lib/components/search/advancedSearch/index.svelte

@@ -1,24 +1,5 @@
 <script lang="ts">
   import { boredState } from '$lib/stores/boredState';
-  import { gameStore } from '$lib/stores/gameSearchStore';
-
-  // async function handleSubmit(event: SubmitEvent) {
-  //   // submitting = true;
-  //   boredState.set({ loading: true });
-  //   const form = event.target as HTMLFormElement;
-  //   console.log('form', form);
-  //   const response = await fetch('/api/games', {
-  //     method: 'POST',
-  //     headers: { accept: 'application/json' },
-  //     body: new FormData(form)
-  //   });
-  //   const responseData = await response.json();
-  //   // submitting = false;
-  //   boredState.set({ loading: false });
-  //   gameStore.removeAll();
-  //   gameStore.addAll(responseData?.games);
-  //   // games = responseData?.games;
-  // }
 
   let submitting = $boredState?.loading;
   let minAge = 1;
@@ -85,14 +66,6 @@
 
 <!-- </form> -->
 <style lang="scss">
-  button {
-    border-radius: 10px;
-    margin: 0.5rem;
-    padding: 1rem;
-    color: var(--clr-input-txt);
-    background-color: var(--color-btn-primary-active);
-  }
-
   fieldset {
     display: grid;
     grid-template-columns: repeat(3, 1fr);

src/lib/components/search/textSearch/index.svelte

@@ -3,12 +3,10 @@
   import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
   import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
   import { boredState } from '$lib/stores/boredState';
-  import { gameStore } from '$lib/stores/gameSearchStore';
   import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
 
   export let showButton: boolean = false;
   export let advancedSearch: boolean = false;
-  // console.log('showButton', showButton);
 
   let submitting = $boredState?.loading;
   let name = '';
@@ -70,9 +68,6 @@
     place-items: center;
   }
 
-  h1 {
-    width: 100%;
-  }
   button {
     padding: 1rem;
     margin: 1.5rem 0;

src/lib/components/transition/index.svelte

@@ -32,7 +32,7 @@
 {#if transition.type === 'stagger'}
   <div
     class="stagger"
-    style:animation-duration="{transition.duration * 300}ms"
+    style:animation-duration="{transition.duration || 1 * 300}ms"
     style:animation-delay="{transition.delay}ms"
   >
     <slot />

src/routes/+page.svelte

@@ -49,41 +49,6 @@
 </div>
 
 <style lang="scss">
-  .loading {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 101;
-    display: grid;
-    place-items: center;
-    gap: 1rem;
-
-    h3 {
-      color: white;
-    }
-  }
-
-  .background {
-    background: black;
-    opacity: 0.8;
-    cursor: none;
-    inset: 0;
-    position: fixed;
-    z-index: 100;
-  }
-
-  h1 {
-    width: 100%;
-  }
-  button {
-    border-radius: 10px;
-    margin: 0.5rem;
-    padding: 1rem;
-    color: var(--clr-input-txt);
-    background-color: var(--color-btn-primary-active);
-  }
-
   .games {
     margin: 2rem 0rem;
 
@@ -105,22 +70,6 @@
       grid-template-columns: 1fr;
     }
   }
-  .game-search {
-    border-radius: 4px;
-    box-shadow: var(--level-2);
-    background: rgba(0, 0, 0, 0.02);
-    border: 2px solid var(--clr-primary);
-    padding: 20px;
-
-    fieldset {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-    }
-    label {
-      display: grid;
-      margin: 1rem;
-    }
-  }
 
   .random-buttons {
     display: flex;

src/routes/about/+page.js

@@ -1,13 +0,0 @@
-import { browser, dev } from '$app/env';
-
-// we don't need any JS on this page, though we'll load
-// it in dev so that we get hot module replacement...
-export const hydrate = dev;
-
-// ...but if the client-side router is already loaded
-// (i.e. we came here from elsewhere in the app), use it
-export const router = browser;
-
-// since there's no dynamic data here, we can prerender
-// it so that it gets served as a static asset in prod
-export const prerender = true;

src/routes/about/+page.svelte

@@ -1,52 +0,0 @@
-<script context="module">
-  throw new Error("@migration task: Check code was safely removed (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292722)");
-
-  // import { browser, dev } from '$app/env';
-
-  // // we don't need any JS on this page, though we'll load
-  // // it in dev so that we get hot module replacement...
-  // export const hydrate = dev;
-
-  // // ...but if the client-side router is already loaded
-  // // (i.e. we came here from elsewhere in the app), use it
-  // export const router = browser;
-
-  // // since there's no dynamic data here, we can prerender
-  // // it so that it gets served as a static asset in prod
-  // export const prerender = true;
-</script>
-
-<svelte:head>
-  <title>About</title>
-</svelte:head>
-
-<div class="content">
-  <h1>About this app</h1>
-
-  <p>
-    This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
-    following into your command line and following the prompts:
-  </p>
-
-  <!-- TODO lose the @next! -->
-  <pre>npm init svelte@next</pre>
-
-  <p>
-    The page you're looking at is purely static HTML, with no client-side interactivity needed.
-    Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
-    the devtools network panel and reloading.
-  </p>
-
-  <p>
-    The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
-    it with JavaScript disabled!
-  </p>
-</div>
-
-<style>
-  .content {
-    width: 100%;
-    max-width: var(--column-width);
-    margin: var(--column-margin-top) auto 0 auto;
-  }
-</style>

src/routes/collection/+page.svelte

@@ -21,20 +21,9 @@
   h1 {
     width: 100%;
   }
-  button {
-    border-radius: 10px;
-    margin: 0.5rem;
-    padding: 1rem;
-    color: var(--clr-input-txt);
-    background-color: var(--color-btn-primary-active);
-  }
 
   .games {
     margin: 2rem 0rem;
-
-    h1 {
-      margin-bottom: 2rem;
-    }
   }
 
   .games-list {

src/routes/todos/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
+  import type { PageData } from './$types';
   import { enhance } from '$lib/form';
   import { scale } from 'svelte/transition';
   import { flip } from 'svelte/animate';
-  import type { PageData } from './$types';
 
-  export let data: Pagedata;
+  export let data: PageData;
 </script>
 
 <svelte:head>