Updating the theme selector and made things look better on mobile

sludge-link.service

@@ -7,6 +7,10 @@ StartLimitIntervalSec=10
 Type=simple
 User=root
 WorkingDirectory=/root/build
+
+Environment="ORIGIN=https://sludge.link"
+Environment="NODE_ENV=production"
+
 ExecStart=/root/.bun/bin/bun run index.js
 Restart=always
 StartLimitBurst=3

src/routes/+layout.svelte

@@ -3,14 +3,18 @@
     data: {};
     children: any;
   }
-  let { data, children }: Props = $props();
+  let { children }: Props = $props();
-  // $inspect("l",data);
-  let theme = $state("green");
-  const THEMES = ["blue", "yellow", "orange", "brown", "green"];
 
   function change_theme() {
-    let index = THEMES.findIndex((color) => theme == color);
+    let TOLERANCE = 20;
-    theme = THEMES[(index + 1) % THEMES.length];
+    let hue = parseFloat(
+      document.documentElement.style.getPropertyValue("--primary") || "0",
+    );
+    let random = hue;
+    while (Math.abs(random - hue) <= TOLERANCE) {
+      random = Math.floor(Math.random() * 360);
+    }
+    document.documentElement.style.setProperty("--primary", String(random));
   }
 </script>
 
@@ -19,13 +23,12 @@
   <meta name="description" content="Sludge's internet facing spot" />
 </svelte:head>
 
-<div id="buddy" class={theme}>
+<div id="buddy">
   <nav>
     <a href="/">Sludge</a>
-    <button onclick={change_theme}>Cycle Color</button>
+    <button onclick={change_theme}>&#127752;</button>
     <a href="/fest">Fest</a>
     <a href="/pork">Pork</a>
-    <!-- <a href="/blag">Blag</a> -->
   </nav>
 
   <main>
@@ -35,17 +38,10 @@
 
 <style lang="scss">
   :root {
-    --blue: 324;
-    --yellow: 77;
-    --orange: 188;
-    --brown: 42;
-    --green: 142;
     --green-42: oklch(0.42 0.042 142);
     --br: 0.375rem;
-    --primary: var(--green);
 
-    .blue {
+    --primary: 0;
-      --primary: var(--blue);
     --primary-1: oklch(0.91 0.046 var(--primary));
     --primary-2: oklch(0.843 0.083 var(--primary));
     --primary-3: oklch(0.777 0.122 var(--primary));
@@ -60,71 +56,6 @@
     --primary-12: oklch(0.177 0.049 var(--primary));
     --primary-13: oklch(0.11 0.031 var(--primary));
   }
-    .yellow {
-      --primary: var(--yellow);
-      --primary-1: oklch(0.91 0.046 var(--primary));
-      --primary-2: oklch(0.843 0.083 var(--primary));
-      --primary-3: oklch(0.777 0.122 var(--primary));
-      --primary-4: oklch(0.71 0.163 var(--primary));
-      --primary-5: oklch(0.643 0.179 var(--primary));
-      --primary-6: oklch(0.577 0.161 var(--primary));
-      --primary-7: oklch(0.51 0.142 var(--primary));
-      --primary-8: oklch(0.443 0.124 var(--primary));
-      --primary-9: oklch(0.377 0.105 var(--primary));
-      --primary-10: oklch(0.31 0.086 var(--primary));
-      --primary-11: oklch(0.243 0.068 var(--primary));
-      --primary-12: oklch(0.177 0.049 var(--primary));
-      --primary-13: oklch(0.11 0.031 var(--primary));
-    }
-    .orange {
-      --primary: var(--brown);
-      --primary-1: oklch(0.91 0.046 var(--primary));
-      --primary-2: oklch(0.843 0.083 var(--primary));
-      --primary-3: oklch(0.777 0.122 var(--primary));
-      --primary-4: oklch(0.71 0.163 var(--primary));
-      --primary-5: oklch(0.643 0.179 var(--primary));
-      --primary-6: oklch(0.577 0.161 var(--primary));
-      --primary-7: oklch(0.51 0.142 var(--primary));
-      --primary-8: oklch(0.443 0.124 var(--primary));
-      --primary-9: oklch(0.377 0.105 var(--primary));
-      --primary-10: oklch(0.31 0.086 var(--primary));
-      --primary-11: oklch(0.243 0.068 var(--primary));
-      --primary-12: oklch(0.177 0.049 var(--primary));
-      --primary-13: oklch(0.11 0.031 var(--primary));
-    }
-    .brown {
-      --primary: var(--brown);
-      --primary-1: oklch(0.91 0.046 var(--primary));
-      --primary-2: oklch(0.843 0.083 var(--primary));
-      --primary-3: oklch(0.777 0.122 var(--primary));
-      --primary-4: oklch(0.71 0.163 var(--primary));
-      --primary-5: oklch(0.643 0.179 var(--primary));
-      --primary-6: oklch(0.577 0.161 var(--primary));
-      --primary-7: oklch(0.51 0.142 var(--primary));
-      --primary-8: oklch(0.443 0.124 var(--primary));
-      --primary-9: oklch(0.377 0.105 var(--primary));
-      --primary-10: oklch(0.31 0.086 var(--primary));
-      --primary-11: oklch(0.243 0.068 var(--primary));
-      --primary-12: oklch(0.177 0.049 var(--primary));
-      --primary-13: oklch(0.11 0.031 var(--primary));
-    }
-    .green {
-      --primary: var(--green);
-      --primary-1: oklch(0.91 0.046 var(--primary));
-      --primary-2: oklch(0.843 0.083 var(--primary));
-      --primary-3: oklch(0.777 0.122 var(--primary));
-      --primary-4: oklch(0.71 0.163 var(--primary));
-      --primary-5: oklch(0.643 0.179 var(--primary));
-      --primary-6: oklch(0.577 0.161 var(--primary));
-      --primary-7: oklch(0.51 0.142 var(--primary));
-      --primary-8: oklch(0.443 0.124 var(--primary));
-      --primary-9: oklch(0.377 0.105 var(--primary));
-      --primary-10: oklch(0.31 0.086 var(--primary));
-      --primary-11: oklch(0.243 0.068 var(--primary));
-      --primary-12: oklch(0.177 0.049 var(--primary));
-      --primary-13: oklch(0.11 0.031 var(--primary));
-    }
-  }
   #buddy {
     min-height: 100vh;
     background-color: var(--primary-11);
@@ -204,8 +135,8 @@
   }
 
   nav {
-    padding: 1rem 20%;
     display: flex;
+    padding: 1rem;
     gap: 1rem;
     justify-content: flex-end;
     text-shadow: 3px 3px 3px var(--primary-9);
@@ -213,6 +144,7 @@
       font-weight: 700;
       line-height: 2rem;
       font-size: 1.5rem;
+      line-height: 1.5rem;
       text-decoration: none;
       &:first-child {
         margin-right: auto;
@@ -225,10 +157,13 @@
       background: var(--primary-8);
       border-radius: var(--br);
       border: none;
+      width: fit-content;
       height: fit-content;
       padding: 0.375rem 0.5rem;
       margin: auto 0;
       font-family: "Baskerville";
+      font-size: 1.5rem;
+      line-height: 1.5rem;
       font-weight: 900;
       color: var(--primary-1);
       &:hover {
@@ -240,8 +175,18 @@
   main {
     display: flex;
     flex-direction: row;
+    padding: 1rem;
   }
 
+  @media screen and (min-width: 600px) {
+    nav {
+      padding: 1rem 20%;
+      flex-direction: row;
+      button {
+        margin: 0 auto 0 0;
+      }
+    }
+  }
   @font-face {
     font-family: "Baskerville";
     font-display: swap;

src/routes/+page.server.ts

@@ -1,13 +0,0 @@
-import { create_user } from '$lib/db';
-import { fail, type Actions } from '@sveltejs/kit';
-import { marked } from 'marked';
-
-export async function load() {
-
-  return {};
-}
-
-export const actions: Actions = {
-  default: async ({ request }: { request: Request }) => {
-  }
-};

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  let { data, form } = $props<{ html: string }>();
+  // let { data, form } = $props<{ html: string }>();
 </script>
 
 <section>

src/routes/fest/+page.svelte

@@ -156,6 +156,9 @@
       height: 0.25rem;
       margin: 2rem 0;
     }
+    img {
+      width: 100%;
+    }
     div {
       display: flex;
       gap: 1rem;
@@ -183,4 +186,12 @@
       }
     }
   }
+
+  @media screen and (min-width: 600px) {
+    section {
+      img {
+        width: unset;
+      }
+    }
+  }
 </style>

src/routes/fest/clicker/+page.server.ts

@@ -3,7 +3,7 @@ import { get_fest_counts, add_fest_counts } from '$lib/db'
 export async function load() {
   console.log('click')
   let { people, tents, cars, year } = await get_fest_counts()
-  console.log({ people, tents, cars, year })
+  // console.log({ people, tents, cars, year })
   return {
     people,
     tents,
@@ -12,13 +12,13 @@ export async function load() {
   }
 }
 export const actions = {
-  default: async ({ cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest }) => {
+  default: async ({ request }) => {
     const data = await request.formData()
-    console.log("save", data)
+    // console.log("save", data)
-    const people = parseInt(data.get("people"))
+    const people = parseInt(String(data.get("people")))
-    const tents = parseInt(data.get("tents"))
+    const tents = parseInt(String(data.get("tents")))
-    const cars = parseInt(data.get("cars"))
+    const cars = parseInt(String(data.get("cars")))
     const reply = add_fest_counts(people, tents, cars, 25)
-    console.log("reply", reply)
+    console.log("clicked", reply)
   }
 }

src/routes/fest/clicker/+page.svelte

@@ -1,19 +1,29 @@
 <script lang="ts">
+  import type { MouseEventHandler } from "svelte/elements";
+
   let { data } = $props<{ html: string }>();
   let people = $state(data.people);
   let tents = $state(data.tents);
   let cars = $state(data.cars);
 
-  function add(type) {
+  const add: MouseEventHandler<HTMLButtonElement> = ({
-    if (type == "people") people += 1;
+    currentTarget: {
-    if (type == "tents") tents += 1;
+      dataset: { id },
-    if (type == "cars") cars += 1;
+    },
-  }
+  }) => {
-  function subtract(type) {
+    if (id == "people") people += 1;
-    if (type == "people") people -= 1;
+    if (id == "tents") tents += 1;
-    if (type == "tents") tents -= 1;
+    if (id == "cars") cars += 1;
-    if (type == "cars") cars -= 1;
+  };
-  }
+  const subtract: MouseEventHandler<HTMLButtonElement> = ({
+    currentTarget: {
+      dataset: { id },
+    },
+  }) => {
+    if (id == "people") people -= 1;
+    if (id == "tents") tents -= 1;
+    if (id == "cars") cars -= 1;
+  };
 </script>
 
 <section>
@@ -21,24 +31,24 @@
   <div>
     <div>
       <h3>~{people} people</h3>
-      <button onclick={() => add("people")}>+</button>
+      <button data-id="people" onclick={add}>+</button>
-      <button onclick={() => subtract("people")}>-</button>
+      <button data-id="people" onclick={subtract}>-</button>
     </div>
     <div>
       <h3>~{tents} tents</h3>
-      <button onclick={() => add("tents")}>+</button>
+      <button data-id="tents" onclick={add}>+</button>
-      <button onclick={() => subtract("tents")}>-</button>
+      <button data-id="tents" onclick={subtract}>-</button>
     </div>
     <div>
       <h3>~{cars} cars</h3>
-      <button onclick={() => add("cars")}>+</button>
+      <button data-id="cars" onclick={add}>+</button>
-      <button onclick={() => subtract("cars")}>-</button>
+      <button data-id="cars" onclick={subtract}>-</button>
     </div>
   </div>
   <form method="POST">
-    <input hidden name="people" value={people} />
+    <input hidden type="number" name="people" value={people} />
-    <input hidden name="cars" value={cars} />
+    <input hidden type="number" name="cars" value={cars} />
-    <input hidden name="tents" value={tents} />
+    <input hidden type="number" name="tents" value={tents} />
     <button>Save</button>
   </form>
 </section>

src/routes/pork/+page.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { RAW_COST, PROCESSED_COST } from "$lib/index";
   import type { MouseEventHandler } from "svelte/elements";
   let { data } = $props<{ data: { pork: Pork[] } }>();
   interface Pork {
@@ -17,10 +16,12 @@
   let selected = $state("Chop");
   const PRICE_PER_LB = 6;
 
-  function change_photo({ target: { id } }) {
+  const change_photo: MouseEventHandler<HTMLLIElement> = ({
+    currentTarget: { id },
+  }) => {
     console.log(id);
     selected = id;
-  }
+  };
 </script>
 
 <svelte:head>
@@ -106,9 +107,6 @@
             flex-basis: 50%;
             text-align: center;
             text-shadow: 3px 3px 3px var(--primary-7);
-            &.small {
-              flex-basis: 25%;
-            }
             &:first-child {
               text-align: left;
             }

svelte.config.js

@@ -11,7 +11,10 @@ const config = {
     // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
     // If your environment is not supported, or you settled on a specific environment, switch out the adapter.
     // See https://svelte.dev/docs/kit/adapters for more information about adapters.
-		adapter: adapter()
+    adapter: adapter(),
+    csrf: {
+      checkOrigin: true
+    }
   }
 };