feat: add shrapnel as default teaser

apps/gav0/src/lib/components/molecules/FormImagePrompt.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	// --- lib depsa
+  import type {FormMethod} from "$lib/components/molecules/forms";
+	// --- framework
+	// import { onMount , setContext, getContext, onDestroy } from 'svelte'
+	// --- external components
+	// --- components
+	// --- app lib
+	//import { getLogger } from '$lib/log.js'
+	// --- app stores
+	// --- constants
+	// const log = getLogger('PromptMessage')
+	// --- data imports
+	// --- component properties
+  export let method: FormMethod = "POST";
+  export let action: string;
+  export let placeholder: string = "Describe the image you want";
+	// --- component state properties
+	// --- svelte bound variables
+	// let instance = undefined
+	// --- svelte lifecycle callbacks
+	// test support hook
+	// onMount(async () => {})
+	// --- on dom event callbacks
+	// --- contract state callbacks
+	// --- component helpers
+</script>
+
+<!-- Prompt Messages Container - Modify the height according to your need -->
+<div class="flex h-[97vh] w-full flex-col">
+	<form
+    method={method} action={action}
+		class="flex w-full items-center rounded-b-md border-t border-slate-300 bg-slate-200 p-2 dark:border-slate-700 dark:bg-slate-900"
+	>
+		<label for="chat" class="sr-only">{placeholder}</label>
+		<textarea
+			id="chat-input"
+			rows="1"
+			class="mx-2 flex min-h-full w-full rounded-md border border-slate-300 bg-slate-50 p-2 text-base text-slate-900 placeholder-slate-400 focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-50 dark:placeholder-slate-400 dark:focus:border-blue-600 dark:focus:ring-blue-600"
+			placeholder={placeholder}
+		></textarea>
+		<div>
+			<button
+				class="inline-flex hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-600 sm:p-2"
+				type="submit"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					aria-hidden="true"
+					viewBox="0 0 24 24"
+					stroke-width="2"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+					<path d="M10 14l11 -11"></path>
+					<path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"
+					></path>
+				</svg>
+				<span class="sr-only">Send message</span>
+			</button>
+		</div>
+	</form>
+</div>
+
+<style>
+</style>

apps/gav0/src/lib/components/molecules/FormTextPrompt.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+	// --- lib depsa
+  import type {FormMethod} from "$lib/components/molecules/forms";
+	// --- framework
+	// import { onMount , setContext, getContext, onDestroy } from 'svelte'
+	// --- external components
+	// --- components
+	// --- app lib
+	//import { getLogger } from '$lib/log.js'
+	// --- app stores
+	// --- constants
+	// const log = getLogger('PromptMessage')
+	// --- data imports
+	// --- component properties
+  export let method: FormMethod = "POST";
+  export let action: string;
+	// --- component state properties
+	// --- svelte bound variables
+	// let instance = undefined
+	// --- svelte lifecycle callbacks
+	// test support hook
+	// onMount(async () => {})
+	// --- on dom event callbacks
+	// --- contract state callbacks
+	// --- component helpers
+</script>
+
+<!-- Prompt Messages Container - Modify the height according to your need -->
+<div class="flex h-[97vh] w-full flex-col">
+	<form
+    method={method} action={action}
+		class="flex w-full items-center rounded-b-md border-t border-slate-300 bg-slate-200 p-2 dark:border-slate-700 dark:bg-slate-900"
+	>
+		<label for="chat" class="sr-only">Enter your prompt</label>
+		<div>
+			<button
+				class="hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-600 sm:p-2"
+				type="button"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					aria-hidden="true"
+					viewBox="0 0 24 24"
+					stroke-width="2"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+					<path d="M12 5l0 14"></path>
+					<path d="M5 12l14 0"></path>
+				</svg>
+				<span class="sr-only">Add</span>
+			</button>
+		</div>
+		<textarea
+			id="chat-input"
+			rows="1"
+			class="mx-2 flex min-h-full w-full rounded-md border border-slate-300 bg-slate-50 p-2 text-base text-slate-900 placeholder-slate-400 focus:border-blue-600 focus:outline-none focus:ring-1 focus:ring-blue-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-50 dark:placeholder-slate-400 dark:focus:border-blue-600 dark:focus:ring-blue-600"
+			placeholder="Enter your prompt"
+		></textarea>
+		<div>
+			<button
+				class="inline-flex hover:text-blue-600 dark:text-slate-200 dark:hover:text-blue-600 sm:p-2"
+				type="submit"
+			>
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-6 w-6"
+					aria-hidden="true"
+					viewBox="0 0 24 24"
+					stroke-width="2"
+					stroke="currentColor"
+					fill="none"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+				>
+					<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
+					<path d="M10 14l11 -11"></path>
+					<path d="M21 3l-6.5 18a.55 .55 0 0 1 -1 0l-3.5 -7l-7 -3.5a.55 .55 0 0 1 0 -1l18 -6.5"
+					></path>
+				</svg>
+				<span class="sr-only">Send message</span>
+			</button>
+		</div>
+	</form>
+</div>
+
+<style>
+</style>

apps/gav0/src/lib/components/molecules/forms.ts

@@ -0,0 +1,6 @@
+enum FormMethodName {
+  POST = "POST",
+  GET = "GET"
+}
+
+type FormMethod = keyof typeof FormMethodName;

apps/gav0/src/lib/components/organisms/CardGameTeaserAbout.svelte

@@ -28,7 +28,7 @@
 	// --- component helpers
 </script>
 
-<div class="card rounded-none">
+<div class="card rounded-none max-w-1/3">
 	{#if game}
 		<header class="card-header">
 			<h2 class="card-header-title">About</h2>

apps/gav0/src/lib/components/organisms/CardImageGenerator.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+// --- lib deps
+// --- framework
+// import { onMount , setContext, getContext, onDestroy } from 'svelte'
+// --- external components
+// --- components
+import FormImagePrompt from "$lib/components/molecules/FormImagePrompt.svelte";
+// --- app lib
+// --- app stores
+// --- constants
+// --- data imports
+// --- component properties
+export let title: string = "Image Generator"
+export let action: string;
+export let placeholder: string = "Describe the image you want";
+	
+// --- component state properties
+// --- svelte bound variables
+// let instance = undefined
+// --- svelte lifecycle callbacks
+// test support hook
+// onMount(async () => {})
+// --- on dom event callbacks
+// --- contract state callbacks
+// --- component helpers
+</script>
+<div class="card p-4">{title}</div>
+<FormImagePrompt method="POST" action={action} placeholder={placeholder}/>
+<style>
+</style>

apps/gav0/src/lib/components/organisms/CarouselGameDiscovery.svelte

@@ -16,7 +16,7 @@
 		perMove: 1,
 		gap: '1rem',
 		pagination: false,
-		height: '21rem'
+		height: '30rem'
 	};
 
 	const thumbsOptions = {

apps/gav0/src/lib/components/organisms/CarouselGameDiscoverySelectedGame.svelte

@@ -42,13 +42,15 @@
 
 <div class="flex flex-col md:flex-row justify-between gap-4">
 	{#if selected}
-  <div class="mb-4 md:mb-0">
+  <div class="mb-4 md:mb-0 flex-1 max-w-1/3">
 		<CardGameTeaserAbout game={teaser} />
-</div>
-<div class="mb-4 md:mb-0">
-		<CardGameTeaserHowWeHelp game={augmentation} />
-</div>
+  </div>
+  <div class="mb-4 md:mb-0 flex-1">
+  	<CardGameTeaserHowWeHelp game={augmentation} />
+  </div>
+  <div class="flex-1">
 		<CardGameTeaserLaunchPad game={launchPad} />
+  </div>
 	{/if}
 </div>
 

apps/gav0/src/lib/components/organisms/gamediscoveryselector.ts

@@ -8,6 +8,7 @@ export class GameDiscoverySelector {
 	_teasers: { [key: string]: GameTeaserAboutContent } = {};
 	_augmentations: { [key: string]: GameTeaserHowWeHelpContent } = {};
 	_launchPads: { [key: string]: GameTeaserLaunchPadContent } = {};
+  _indices: {[key:number]: string} = {}
 	selected?: string;
 
 	get teasers(): GameTeaserAboutContent[] {
@@ -57,9 +58,20 @@ export class GameDiscoverySelector {
 			this._launchPads[game.launchPad.gameId] = game.launchPad;
 		});
 
+    this.teasers.forEach((value, index)=>{
+      this._indices[index] = value.id
+    })
+
 		if (Object.values(this._teasers).length > 0) this.selected = this.teasers[0].id;
 	}
 
+  /** return the id for the index. The index is according to the lexical sort order of the ids,
+   * so this.teasers[0].id == this._indices[0]
+   */
+  idOf(index: number): string {
+    return this._indices[index];
+  }
+
 	select(id: string) {
 		if (!(id in this._teasers)) throw new Error(`id ${id} not found in teasers`);
 		this.selected = id;

apps/gav0/src/lib/components/pages/DiscoveryPage.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	// --- lib deps
 	import { sixGameSelector as selector } from '$lib/placeholders/gamediscoveryselectors';
+	import type { GameTeaserAboutContent } from '$lib/models/components';
 	// --- framework
-	// import { onMount , setContext, getContext, onDestroy } from 'svelte'
+	import { onMount, setContext, getContext, onDestroy } from 'svelte';
 	// --- external components
 	// --- components
 
@@ -12,13 +13,17 @@
 	// import ThumbnailsExample from '$lib/components/examples/ThumbnailsExample.svelte';
 
 	// --- app lib
-	import { randomImages } from '$lib/utils';
 	// --- app stores
 	// --- constants
 	// --- data imports
 	// --- component properties
-	let slides: { src: string; alt: string }[] = randomImages('teasers', 6);
-	let selected = 'game-2';
+	let slides: { src: string; alt: string }[] = selector.teasers.map((about) => ({
+		src: about.imageUrl,
+		alt: about.title
+	}));
+	let selected = selector.idOf(0);
+	// let selected = 'shrapnel-2024';
+
 	// --- component state properties
 	// --- svelte bound variables
 	// let instance = undefined
@@ -28,10 +33,14 @@
 	// --- on event callbacks
 	function onSliderMoved(event) {
 		console.log('slider moved', event.detail);
-		selected = `game-${event.detail.index + 1}`;
-    selector.select(selected);
+		selected = selector.idOf(event.detail.index);
+
+		selector.select(selected);
 	}
 	// --- contract state callbacks
+	onMount(() => {
+		selector.select(selected);
+	});
 	// --- component helpers
 </script>
 

apps/gav0/src/lib/models/components/organisms/GameTeaser.ts

@@ -3,6 +3,7 @@ export type GameTeaserAboutContent = {
 	title: string;
 	logLine: string;
 	blurb: string;
+  imageUrl: string;
 };
 
 export type GameTeaserHelperContent = {