Prepare basic components

messages/de.json

@@ -1,4 +1,10 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
-  "hello_world": "Hello, {name} from de!"
+  "hello_world": "Hello, {name} from de!",
+  "body_part_throat": "Hals",
+  "body_part_thigh": "Oberschenkel",
+  "body_part_ankle": "Knöchel",
+  "body_part_upper_arm": "Oberarm",
+  "action_shock": "Shocken",
+  "action_vibrate": "Vibrieren"
 }

messages/en.json

@@ -1,4 +1,10 @@
 {
   "$schema": "https://inlang.com/schema/inlang-message-format",
-  "hello_world": "Hello, {name} from en!"
+  "hello_world": "Hello, {name} from en!",
+  "body_part_throat": "Throat",
+  "body_part_thigh": "Thigh",
+  "body_part_ankle": "Ankle",
+  "body_part_upper_arm": "Upper Arm",
+  "action_shock": "Shock",
+  "action_vibrate": "Vibrate"
 }

package.json

@@ -68,6 +68,8 @@
 		"vitest": "^2.0.4"
 	},
 	"dependencies": {
-		"@inlang/paraglide-sveltekit": "^0.11.1"
+		"@fontsource-variable/roboto-flex": "^5.1.0",
+		"@inlang/paraglide-sveltekit": "^0.11.1",
+		"lucide-svelte": "^0.456.0"
 	}
 }

src/app.css

@@ -0,0 +1,48 @@
+:root {
+    --padding: 30px;
+    --gap: 20px;
+    --radius: 20px;
+    --width: 700px;
+    --layout-slant: -30deg;
+    --color-base: #fff;
+    --color-primary-100: #331400;
+    --color-primary-300: #cc5200;
+    --color-primary-500: #ff7e29;
+    --color-primary-700: #ffa061;
+    --color-primary-900: #ffc299;
+    --color-secondary-0: #040127;
+    --color-secondary-100: #060240;
+    --color-secondary-300: #0b046c;
+    --color-secondary-500: #170cb6;
+    --color-secondary-700: #4c40e7;
+    --color-secondary-900: #a8a4ea;
+    --color-accent: var(--color-primary-500);
+    --color-accent-contrast: #fff;
+    --color-border: rgba(0, 0, 0, .1);
+    --color-surface: #ececec;
+    --color-dark-surface: rgba(26, 37, 22, .9);
+    --color-dark-surface-text: white;
+    --color-dark-surface-text-dim: #808080;
+    --color-light-surface: rgba(255, 255, 255, .9);
+    --color-light-surface-text: var(--color-text);
+    --color-accent-surface: var(--color-accent);
+    --color-accent-surface-text: var(--color-accent-contrast);
+    --color-highlight-accent: rgba(255, 145, 49, .2);
+    --color-highlight-blue: rgba(10, 10, 255, .2);
+    --color-highlight-white: rgba(200, 200, 200, .2);
+    --color-highlight-grey: rgba(100, 100, 100, .2);
+    --color-highlight-yellow: rgba(255, 230, 10, .2);
+    --color-highlight-green: rgba(10, 255, 10, .2);
+    --color-highlight-red: rgba(255, 10, 10, .2);
+    --color-highlight-pink: rgba(255, 128, 255, .2);
+    --color-highlight-purple: rgba(204, 30, 152, .2);
+    --color-text: black;
+    --color-background: var(--color-base);
+    --nav-space: 95px;
+    --fill-pattern: repeating-linear-gradient( var(--layout-slant), var(--color-base) 0, var(--color-primary-500) .5px 3px, var(--color-base) 3.5px 12px );
+    --filter-gray: grayscale(1);
+}
+
+body {
+    font-family: 'Roboto Flex Variable', sans-serif;
+}

src/lib/components/ActionCard.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import type { Action } from "$lib/types";
+    import { Coins } from "lucide-svelte";
+	import * as m from '$lib/paraglide/messages.js';
+
+    export let action: Action;
+
+    const onclick = (ev: MouseEvent) => {
+        ev.preventDefault();
+    }
+</script>
+
+<button class="action-card" {onclick}>
+    <span class="body-part">{m[`body_part_${action.bodyPart}`]()}</span>
+    <span class="type">{m[`action_${action.type}`]()}</span>
+    <span class="cost"><Coins /> {action.cost} coins</span>
+</button>
+
+<style>
+    .action-card {
+        background-color: var(--color-base);
+        border: thin solid var(--color-border);
+        font: inherit;
+        cursor: pointer;
+        border-radius: var(--radius);
+        padding: var(--padding);
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        .body-part {
+            opacity: .75;
+        }
+
+        .type {
+            font-size: 1.4em;
+            font-weight: 800;
+            color: var(--color-accent);
+            margin-bottom: 10px;
+        }
+
+        .cost {
+            display: flex;
+            justify-content: center;
+            gap: 5px;
+            opacity: .75;
+
+            > :global(svg) {
+                color: var(--color-accent);
+            }
+        }
+    }
+</style>

src/lib/components/StoreGrid.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { Action } from "$lib/types";
+    import ActionCard from './ActionCard.svelte';
+    export let actions: Action[];
+</script>
+
+<div class="store-grid">
+    {#each actions as action}
+        <ActionCard {action} />
+    {/each}
+</div>
+
+<style>
+    .store-grid {
+        display: grid;
+        grid-template-columns: repeat(6, 1fr);
+        gap: var(--gap);
+    }
+</style>

src/lib/index.ts

@@ -1 +1,3 @@
 // Reexport your entry components here
+
+export * from './types';

src/lib/types.ts

@@ -0,0 +1,26 @@
+/**
+ * An action to execute.
+ */
+export type ActionType = "shock"|"vibrate";
+
+/**
+ * A body part an action can affect.
+ */
+export type BodyPartKey = "throat"|"thigh"|"ankle"|"upper_arm";
+
+/**
+ * Time in seconds or burst.
+ */
+export type Time = number|"burst";
+
+/**
+ * Entry in the coinshop.
+ */
+export type Action = {
+    id: string;
+    subject: string;
+    type: ActionType;
+    cost: number;
+    bodyPart: BodyPartKey;
+    time: Time;
+};

src/routes/+layout.svelte

@@ -1,6 +1,10 @@
 <script lang="ts">
 	import { i18n } from '$lib/i18n';
 	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
+	import "../app.css";
+	
+	import '@fontsource-variable/roboto-flex/full.css';
+
 	let { children } = $props();
 </script>
 

src/routes/+page.svelte

@@ -1,3 +1,27 @@
-<h1>Welcome to your library project</h1>
+<script lang="ts">
-<p>Create your package using @sveltejs/package and preview/showcase your work with SvelteKit</p>
+	import StoreGrid from "$lib/components/StoreGrid.svelte";
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+	import type { Action } from "$lib/types.js";
+
+    const exampleEntries: Action[] = [
+        {
+            id: "abcd",
+            type: "shock",
+            bodyPart: "thigh",
+            cost: 12,
+            subject: "raider",
+            time: "burst"
+        },
+        {
+            id: "efgh",
+            type: "shock",
+            bodyPart: "ankle",
+            cost: 8,
+            subject: "raider",
+            time: "burst"
+        }
+    ]
+</script>
+
+<h1>Punish Raider</h1>
+
+<StoreGrid actions={exampleEntries} />

svelte.config.js

@@ -12,7 +12,8 @@ const config = {
 		// 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()
-	}
+	},
+	runes: true
 };
 
 export default config;