Added a the sludgefest clicker. We'll see how broken it is

src/lib/db/index.ts

@@ -27,6 +27,17 @@ db.exec(`
   )
 `);
 
+db.exec(`
+  CREATE TABLE IF NOT EXISTS
+  'fest_count' (
+    'year' integer not null primary key,
+    'people' integer not null default 0,
+    'cars' integer not null default 0,
+    'tents' integer not null default 0
+  )`);
+
+db.exec('INSERT OR IGNORE INTO fest_count(year) VALUES (25)');
+
 // Close the database connection when the application shuts down
 process.on('SIGINT', () => {
   db.close(false);
@@ -70,7 +81,21 @@ export function publish_blog(title, uri, body) {
 }
 
 
+/**
+ * Clicker Stuff
+ *
+ *
+ */
 
+export function get_fest_counts(year = 25) {
+  return db.query('SELECT * FROM fest_count WHERE year = ?').get(year)
+}
+
+export function add_fest_counts(people, tents, cars, year) {
+  console.log('asc', { people, tents, cars, year })
+  db.query('UPDATE fest_count SET people = ?, tents = ?, cars = ? WHERE year = ?').get(people, tents, cars, year)
+  return true
+}
 /**
  * Thread Stuff
  * 

src/routes/+page.svelte

@@ -2,11 +2,6 @@
   let { data, form } = $props<{ html: string }>();
 </script>
 
-<svelte:head>
-  <title>Sludge and Link</title>
-  <meta name="description" content="Sludge's internet facing spot" />
-</svelte:head>
-
 <section>
   <h1><b>S</b>ludge and <b>F</b>riends</h1>
   <h3>Here we make friends and mistakes</h3>

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

@@ -0,0 +1,24 @@
+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 })
+  return {
+    people,
+    tents,
+    cars,
+    year
+  }
+}
+export const actions = {
+  default: async ({ cookies, fetch, getClientAddress, locals, params, platform, request, route, setHeaders, url, isDataRequest }) => {
+    const data = await request.formData()
+    console.log("save", data)
+    const people = parseInt(data.get("people"))
+    const tents = parseInt(data.get("tents"))
+    const cars = parseInt(data.get("cars"))
+    const reply = add_fest_counts(people, tents, cars, 25)
+    console.log("reply", reply)
+  }
+}

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+  let { data } = $props<{ html: string }>();
+  let people = $state(data.people);
+  let tents = $state(data.tents);
+  let cars = $state(data.cars);
+
+  function add(type) {
+    if (type == "people") people += 1;
+    if (type == "tents") tents += 1;
+    if (type == "cars") cars += 1;
+  }
+  function subtract(type) {
+    if (type == "people") people -= 1;
+    if (type == "tents") tents -= 1;
+    if (type == "cars") cars -= 1;
+  }
+</script>
+
+<section>
+  <h1>How many people are at Sludge Fest {data.year}?</h1>
+  <div>
+    <div>
+      <h3>~{people} people</h3>
+      <button onclick={() => add("people")}>+</button>
+      <button onclick={() => subtract("people")}>-</button>
+    </div>
+    <div>
+      <h3>~{tents} tents</h3>
+      <button onclick={() => add("tents")}>+</button>
+      <button onclick={() => subtract("tents")}>-</button>
+    </div>
+    <div>
+      <h3>~{cars} cars</h3>
+      <button onclick={() => add("cars")}>+</button>
+      <button onclick={() => subtract("cars")}>-</button>
+    </div>
+  </div>
+  <form method="POST">
+    <input hidden name="people" value={people} />
+    <input hidden name="cars" value={cars} />
+    <input hidden name="tents" value={tents} />
+    <button>Save</button>
+  </form>
+</section>
+
+<style lang="scss">
+  @use "/src/app.scss" as *;
+  @use "sass:color";
+
+  section {
+    max-width: 60rem;
+    margin: 1rem auto 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    h1 {
+      font-size: 1.5rem;
+    }
+
+    div {
+      text-align: center;
+      width: 100%;
+      div {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        h3 {
+          font-size: 1.75rem;
+          grid-column: 1 / 3;
+        }
+        button {
+          background: $yellow;
+          border: solid 3px $yellow;
+          border-radius: 0.25rem;
+          margin: 0 1rem;
+          font-size: 2rem;
+        }
+      }
+    }
+    form button {
+      font-size: 2rem;
+      margin: 1rem;
+      background: $yellow;
+      border: solid 3px $yellow;
+      border-radius: 0.25rem;
+    }
+  }
+</style>