feat: add some shit

package.json

@@ -33,6 +33,7 @@
     "googleapis": "^128.0.0",
     "minio": "^7.1.3",
     "openai": "^4.17.4",
-    "pocketbase": "^0.19.0"
+    "pocketbase": "^0.19.0",
+    "svelte-bricks": "^0.2.1"
   }
 }

pb_migrations/1699807218_updated_invites.js

@@ -0,0 +1,16 @@
+/// <reference path="../pb_data/types.d.ts" />
+migrate((db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("zfbbb4gbdk9dh6k")
+
+  collection.listRule = ""
+
+  return dao.saveCollection(collection)
+}, (db) => {
+  const dao = new Dao(db)
+  const collection = dao.findCollectionByNameOrId("zfbbb4gbdk9dh6k")
+
+  collection.listRule = null
+
+  return dao.saveCollection(collection)
+})

pnpm-lock.yaml

@@ -17,6 +17,9 @@ dependencies:
   pocketbase:
     specifier: ^0.19.0
     version: 0.19.0
+  svelte-bricks:
+    specifier: ^0.2.1
+    version: 0.2.1
 
 devDependencies:
   '@sveltejs/adapter-auto':
@@ -78,7 +81,6 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.20
-    dev: true
 
   /@esbuild/android-arm64@0.18.20:
     resolution: {integrity: sha512-Nz4rJcchGDtENV0eMKUNa6L12zz2zBDXuhj/Vjh18zGqB44Bi7MBMSXjgunJgjRhCmKOjnPuZp4Mb6OKqtMHLQ==}
@@ -347,28 +349,23 @@ packages:
       '@jridgewell/set-array': 1.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
       '@jridgewell/trace-mapping': 0.3.20
-    dev: true
 
   /@jridgewell/resolve-uri@3.1.1:
     resolution: {integrity: sha512-dSYZh7HhCDtCKm4QakX0xFpsRDqjjtZf/kjI/v3T3Nwt5r8/qz/M19F9ySyOqU94SXBmeG9ttTul+YnR4LOxFA==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/set-array@1.1.2:
     resolution: {integrity: sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==}
     engines: {node: '>=6.0.0'}
-    dev: true
 
   /@jridgewell/sourcemap-codec@1.4.15:
     resolution: {integrity: sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==}
-    dev: true
 
   /@jridgewell/trace-mapping@0.3.20:
     resolution: {integrity: sha512-R8LcPeWZol2zR8mmH3JeKQ6QRCFb7XgUhV9ZlGhHLGyg4wpPiPZNQOOWhFZhxKw8u//yTbNGI42Bx/3paXEQ+Q==}
     dependencies:
       '@jridgewell/resolve-uri': 3.1.1
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
@@ -550,7 +547,6 @@ packages:
 
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
-    dev: true
 
   /@types/json-schema@7.0.15:
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
@@ -741,7 +737,6 @@ packages:
     resolution: {integrity: sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w==}
     engines: {node: '>=0.4.0'}
     hasBin: true
-    dev: true
 
   /agent-base@7.1.0:
     resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==}
@@ -796,7 +791,6 @@ packages:
     resolution: {integrity: sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /array-union@2.1.0:
     resolution: {integrity: sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==}
@@ -820,7 +814,6 @@ packages:
     resolution: {integrity: sha512-jsyHu61e6N4Vbz/v18DHwWYKK0bSWLqn47eeDSKPB7m8tqMHF9YJ+mhIk2lVteyZrY8tnSj/jHOv4YiTCuCJgg==}
     dependencies:
       dequal: 2.0.3
-    dev: true
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -933,7 +926,6 @@ packages:
       acorn: 8.11.2
       estree-walker: 3.0.3
       periscopic: 3.1.0
-    dev: true
 
   /color-convert@2.0.1:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
@@ -985,7 +977,6 @@ packages:
     dependencies:
       mdn-data: 2.0.30
       source-map-js: 1.0.2
-    dev: true
 
   /cssesc@3.0.0:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
@@ -1035,7 +1026,6 @@ packages:
   /dequal@2.0.3:
     resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
     engines: {node: '>=6'}
-    dev: true
 
   /detect-indent@6.1.0:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
@@ -1259,7 +1249,6 @@ packages:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: true
 
   /esutils@2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -1722,7 +1711,6 @@ packages:
     resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==}
     dependencies:
       '@types/estree': 1.0.5
-    dev: true
 
   /is-stream@2.0.1:
     resolution: {integrity: sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==}
@@ -1814,7 +1802,6 @@ packages:
 
   /locate-character@3.0.0:
     resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==}
-    dev: true
 
   /locate-path@6.0.0:
     resolution: {integrity: sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==}
@@ -1850,7 +1837,6 @@ packages:
     engines: {node: '>=12'}
     dependencies:
       '@jridgewell/sourcemap-codec': 1.4.15
-    dev: true
 
   /md5@2.3.0:
     resolution: {integrity: sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==}
@@ -1862,7 +1848,6 @@ packages:
 
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
-    dev: true
 
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
@@ -2077,7 +2062,6 @@ packages:
       '@types/estree': 1.0.5
       estree-walker: 3.0.3
       is-reference: 3.0.2
-    dev: true
 
   /picocolors@1.0.0:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
@@ -2347,7 +2331,6 @@ packages:
   /source-map-js@1.0.2:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
-    dev: true
 
   /split-on-first@1.1.0:
     resolution: {integrity: sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==}
@@ -2400,6 +2383,12 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
+  /svelte-bricks@0.2.1:
+    resolution: {integrity: sha512-cc3XK3j5ViPyZ3K183+Sr53B2e8mJaiV3POyoJtjmm1dYc/TBMy7jOUMt8MW/snJzodpACfqwFzokBQbrZ297w==}
+    dependencies:
+      svelte: 4.2.3
+    dev: false
+
   /svelte-check@3.6.0(postcss@8.4.31)(svelte@4.2.3):
     resolution: {integrity: sha512-8VfqhfuRJ1sKW+o8isH2kPi0RhjXH1nNsIbCFGyoUHG+ZxVxHYRKcb+S8eaL/1tyj3VGvWYx3Y5+oCUsJgnzcw==}
     hasBin: true
@@ -2518,7 +2507,6 @@ packages:
       locate-character: 3.0.0
       magic-string: 0.30.5
       periscopic: 3.1.0
-    dev: true
 
   /text-table@0.2.0:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}

src/lib/components/ImageFrame.svelte

@@ -3,7 +3,7 @@
 	export let alt = '';
 	const u = new URL(src);
 	const filename = u.pathname.split('/').pop() || '9a8sda';
-	const int = parseInt(filename?.slice(0, 8), 16) % 7;
+	const int = (parseInt(filename?.slice(0, 8), 16) % 7) + 1;
 </script>
 
 <div class="frame" style="--frame: url(/frames/frame_0{int}.png)">

src/lib/components/InputRange.svelte

@@ -4,7 +4,7 @@
 	export let value = 50;
 </script>
 
-<input type="range" {min} {max} bind:value />
+<input type="range" {min} {max} bind:value step={10} />
 
 <style>
 	input[type='range'] {

src/lib/components/Questions.svelte

@@ -5,6 +5,7 @@
 	import ImageFrame from './ImageFrame.svelte';
 	import Button from './button.svelte';
 	import InputRange from './InputRange.svelte';
+	import { goto } from '$app/navigation';
 
 	let data = persisted<{
 		name: string;
@@ -38,8 +39,6 @@
 		createPersonality: undefined
 	});
 
-	let nameInputEl: HTMLInputElement;
-
 	let loadingAdelsTitel = false;
 	async function fetchAdelsTitel() {
 		if (loadingAdelsTitel) return;
@@ -75,17 +74,21 @@
 	async function submit() {
 		if (isSubmitting) return;
 		isSubmitting = true;
-		const res = await fetch(`/api/invites`, {
+		await fetch(`/api/invites`, {
 			method: 'POST',
 			body: JSON.stringify($data)
 		});
+		localStorage.clear();
+		localStorage.setItem('last-name', $data?.adelsTitel || '');
+		isSubmitting = false;
+		goto('/gallery');
 	}
 </script>
 
 <div class="wrapper">
-	<section in:slide>
+	<section in:slide={{ delay: 500 }}>
 		<TextSplit content="Wie lautet euer Name?" />
-		<input bind:this={nameInputEl} placeholder="Name" type="text" bind:value={$data.name} />
+		<input placeholder="Name" type="text" bind:value={$data.name} />
 		{#if !$data.nameAccepted}
 			<button
 				on:click={() => {
@@ -208,7 +211,7 @@
 
 			{#if $data.providePortrait && !loadingPortrait && !$data.portraitUrl}
 				<p>
-					Wir werden “{$data.adelsTitel || $data.name}” mit
+					Wir werden {$data.adelsTitel || $data.name} mit
 					<select placeholder="Typ" bind:value={$data.portraitHairType}>
 						<option value="straight">glatten</option>
 						<option value="curly">lockigen</option>
@@ -224,7 +227,7 @@
 						<option value="black">schwarzen</option>
 						<option value="blond">blonden</option>
 						<option value="braunem">braunen</option>
-					</select> Haaren zeichnen?
+					</select> Haaren zeichnen
 				</p>
 				<button on:click={() => fetchPortrait()}> porträt malen (~30 Sekunden)</button>
 			{:else if loadingPortrait}
@@ -256,7 +259,11 @@
 
 	{#if $data.portraitAccepted}
 		<div class="button-wrapper">
+			{#if isSubmitting}
+				<p>Einladung wird abgeschickt</p>
+			{:else}
 				<Button on:click={() => submit()}>Einladung abschicken</Button>
+			{/if}
 		</div>
 	{/if}
 </div>

src/lib/components/maskenball.svelte

@@ -14,6 +14,8 @@
 		animation-delay: 3s;
 		opacity: 0;
 		transition: font-size 3s ease;
+		filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black)
+			drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);
 	}
 
 	@keyframes fadeIn {

src/lib/helpers/pb.ts

@@ -3,6 +3,12 @@ import { POCKETBASE_URL } from "$env/dynamic/private"
 
 const pb = new Pocketbase(POCKETBASE_URL || "http://localhost:8090");
 
+export async function getPublicPortraits() {
+  return (await pb.collection("invites").getList(1, 100, {
+    filter: pb.filter(`portrait_public = true`)
+  })).items
+}
+
 export function createPerson({ name, confidence, portrait, portrait_public, noble_name, hair_color, hair_type, hair_length }: { name: string, portrait: string, portrait_public: boolean, hair_type: string, hair_length: string, hair_color: string, confidence: number, noble_name: string }) {
   return pb.collection("invites").create({
     name,

src/lib/helpers/sheets.ts

@@ -100,8 +100,6 @@ export async function addPerson({ name, confidence, noble_name }: { name: string
 
   if (!api) return;
 
-  console.log({ name, confidence, noble_name });
-
   return api.spreadsheets.values.append({
     auth, //auth object
     spreadsheetId: GOOGLE_SHEET_ID, // spreadsheet id

src/routes/api/ai/name/[name]/+server.ts

@@ -6,7 +6,7 @@ export const GET: RequestHandler = async function ({ params }) {
 
   const inputName = params.name
 
-  const prompt = `Generate 10 variants of the name ${inputName}. The names should sound very much like the original but also like noble names from the 1900 century. Examples could be "lady rosalind of whitmore" "lord byron of castlemore" "Lord Max Richter". Choose english, german, french and italian sounding names. Only respond with 10 names seperated be newlines`;
+  const prompt = `Generate 10 variants of the name ${inputName}. The names should sound very much like the original but also like noble names. Examples could be "lady rosalind of whitmore" "lord byron of castlemore" "Lord Max Richter". Choose english, german, french and italian sounding names. Only respond with 10 names seperated be newlines`;
 
   const res = await chat(prompt, { isList: true, temperature: 1 });
 

src/routes/gallery/+page.server.ts

@@ -0,0 +1,8 @@
+import * as pb from "$lib/helpers/pb"
+export async function load() {
+  const res = await pb.getPublicPortraits();
+
+  return {
+    data: res
+  }
+}

src/routes/gallery/+page.svelte

@@ -0,0 +1,66 @@
+<script lang="ts">
+	import ImageFrame from '$lib/components/ImageFrame.svelte';
+	import Confetti from '$lib/components/confetti.svelte';
+	import { onMount } from 'svelte';
+
+	export let data;
+
+	let last_name: string | null = '';
+
+	const items = data.data
+		.map((item) => {
+			return {
+				...item,
+				marginTop: 20 + Math.random() * 50
+			};
+		})
+		.reverse();
+	onMount(() => {
+		last_name = localStorage.getItem('last-name');
+	});
+</script>
+
+<div>
+	<h1>Gallerie</h1>
+	<div class="grid">
+		{#each items as item}
+			<div style="margin-top: {item.marginTop}px" class:active={item.noble_name === last_name}>
+				<ImageFrame src={item.portrait} />
+				<p>{item.noble_name}</p>
+			</div>
+		{/each}
+	</div>
+</div>
+
+<Confetti />
+
+<style>
+	.grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+		padding-bottom: 100px;
+	}
+	h1 {
+		font-size: 4rem;
+		font-family: Parisienne, cursive;
+		color: white;
+		margin-left: 50px;
+	}
+	p {
+		color: white;
+		font-family: Parisienne, cursive;
+		font-size: 1.2em;
+		margin-left: 40px;
+		width: 80%;
+		margin-top: 10px;
+	}
+	.active {
+		filter: drop-shadow(0px 0px 40px #be8630aa) drop-shadow(0px 0px 5px black)
+			drop-shadow(0px 0px 5px black) drop-shadow(0px 0px 5px black);
+	}
+	div {
+		max-width: 1300px;
+		width: 80%;
+		margin: 0 auto;
+	}
+</style>

src/routes/global.css

@@ -12,8 +12,11 @@ html, body {
 		height: 100%;
 		margin: 0;
 		padding: 0;
-		background-color: black;
-		/* background-image: url(/confetti.png); */
 		background-size: 80%;
-		backdrop-filter: brightness(0.5);
 }
+
+	html {
+		background: black;
+		background-image: url(/pattern_b.jpg);
+  backdrop-filter: brightness(0.3);
+	}

src/routes/questions/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-	import Questions from '$lib/components/Questions.svelte';
-</script>
-
-<Questions />