kinda finished

.dockerignore

@@ -0,0 +1,5 @@
+Dockerfile
+node_modules/
+build/
+.svelte-kit/
+.idea/

Dockerfile

@@ -0,0 +1,16 @@
+FROM node:23-alpine AS base
+WORKDIR /app
+
+FROM base AS dependencies
+COPY package*.json /app/
+RUN npm ci
+
+FROM base AS build
+COPY --from=dependencies /app/node_modules /app/node_modules
+COPY . /app
+RUN npm run build
+
+FROM base AS release
+COPY --from=build /app/build /app/build
+
+CMD ["node", "/app/build/index.js"]

package.json

@@ -14,7 +14,7 @@
 	},
 	"devDependencies": {
 		"@eslint/compat": "^1.2.3",
-		"@sveltejs/adapter-static": "^3.0.6",
+		"@sveltejs/adapter-node": "^5.2.11",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"eslint": "^9.7.0",
@@ -28,8 +28,5 @@
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.0.0",
 		"vite": "^5.4.11"
-	},
-	"dependencies": {
-		"svelte-adapter-bun": "^0.5.2"
 	}
 }

src/lib/Modal.svelte

@@ -4,7 +4,7 @@
 
 <div class="modal">
 	<div class="modal-content">
-		<button class="close" onclick={props.onclose}> X </button>
+		<button class="close" onclick={props.onclose}>X</button>
 		<video autoplay muted>
 			<source src={props.videoUrl} type="video/mp4" />
 			Your browser does not support the video tag.

src/routes/+layout.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	let { children } = $props();
+</script>
+<main>
+	{@render children()}
+</main>
+
+<style>
+    :global(body) {
+        margin: 0;
+        font-family: 'Arial', sans-serif;
+        background-color: #f4f4f4;
+        color: #1c1919;
+    }
+
+    main {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        width: 100vw;
+        background-color: #a8571c;
+        color: white;
+        text-align: center;
+        overflow: hidden;
+        padding: 20px;
+        box-sizing: border-box;
+    }
+</style>

src/routes/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Modal from '$lib/Modal.svelte';
+	import { page } from '$app/state';
 	
 	const difficultyClass = 15;
 	const skin = 'winter';
@@ -23,12 +24,14 @@
 	};
 
 	const handleRoll = async () => {
+		if (rollResult) return;
 		rollResult = Math.floor(Math.random() * 20) + 1;
 		rollVideoUrl = await getVideoUrl(skin, 'd20', rollResult);
 		showModal('roll');
 	};
 
 	const handleGuidance = async () => {
+		if (guidanceResult) return;
 		guidanceResult = Math.floor(Math.random() * 4) + 1;
 		guidanceVideoUrl = await getVideoUrl(skin, 'd4', guidanceResult);
 		showModal('guidance');
@@ -49,23 +52,22 @@
 	};
 </script>
 
-<main>
+<section>
-	<section>
 	<h1>You have received a gift</h1>
-	</section>
+</section>
 
-	<section>
+<section>
 	<h2>Investigation</h2>
 	<p>Intelligence check</p>
-	</section>
+</section>
 
-	<section>
+<section>
 	<h2>Difficulty Class</h2>
 	<p>{difficultyClass}</p>
-	</section>
+</section>
 
 
-	{#if !pressedContinue}
+{#if !pressedContinue}
 	<section>
 		{#if !rollResult}
 			<button onclick={handleRoll}>Roll Ability</button>
@@ -102,64 +104,41 @@
 	{#if rollResult && guidanceResult}
 		<button class="continue" onclick={() => {pressedContinue = true}}>Continue</button>
 	{/if}
-	{/if}
+{/if}
 
-	<section>
+<section>
 	{#if rollResult && guidanceResult && pressedContinue}
 		<h2>Final Result</h2>
 		<p>{rollResult + guidanceResult}</p>
 		{#if rollResult + guidanceResult >= difficultyClass}
 			<h2 class="success">Success</h2>
-				<a href="/present">Collect your gift!</a>
+			<a href="/present{page.url.search}">Collect your gift!</a>
 		{:else}
 			<h2 class="failure">Failure</h2>
 			<button class="reset" onclick={resetPage}> Reset</button>
 		{/if}
 	{/if}
-	</section>
+</section>
-
-</main>
 
 <style>
-		:global(body) {
-    margin: 0;
-    font-family: 'Arial', sans-serif;
-    background-color: #f4f4f4;
-    color: #1c1919;
-}
 
-main {
+    h1, h2 {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    width: 100vw;
-    background-color: #a8571c;
-    color: white;
-    text-align: center;
-    overflow: hidden;
-    padding: 20px;
-    box-sizing: border-box;
-}
-
-h1, h2 {
         font-size: 2rem;
         font-weight: bold;
         margin: 20px 0;
-}
+    }
 
-section {
+    section {
         margin: 15px 0;
         width: 100%;
         max-width: 400px;
-}
+    }
 
-p {
+    p {
         font-size: 1.2rem;
-}
+    }
 
-button {
+    button {
         background-color: #1c1919;
         color: white;
         padding: 12px 25px;
@@ -170,61 +149,62 @@ button {
         cursor: pointer;
         transition: background-color 0.3s ease;
         margin-top: 15px;
-}
+    }
 
-button:hover {
+    button:hover {
         background-color: #333;
-}
+    }
 
-button:disabled {
+    button:disabled {
         background-color: #aaa;
         cursor: not-allowed;
-}
+    }
 
-a {
+    a {
         color: #fff;
         text-decoration: none;
         font-weight: bold;
         font-size: 1.2rem;
         margin-top: 20px;
-}
+    }
 
-a:hover {
+    a:hover {
         text-decoration: underline;
-}
+    }
 
-h2 {
+    h2 {
         color: #ffdf00;
-}
+    }
 
-h2.success {
+    h2.success {
         color: #4CAF50;
-}
+    }
 
-h2.failure {
+    h2.failure {
         color: #FF6347;
-}
+    }
 
-button.reset {
+    button.reset {
         background-color: #ff6347;
         padding: 10px 20px;
         font-size: 1.1rem;
-}
+    }
 
-button.reset:hover {
+    button.reset:hover {
         background-color: #e55347;
-}
+    }
 
-button.continue {
+    button.continue {
         background-color: #4CAF50;
         padding: 10px 20px;
         font-size: 1.1rem;
-}
+    }
 
-button.continue:hover {
+    button.continue:hover {
         background-color: #45a049;
-}
+    }
 
-section > button {
+    section > button {
         margin-top: 20px;
-}</style>
+    }
+</style>

src/routes/present/+page.svelte

@@ -1,8 +1,23 @@
 <script lang="ts">
-	// Show the gift key that was in ENV during build
+	import { page } from '$app/state';
-	const steamGiftKey = import.meta.env.VITE_STEAM_GIFT_KEY;
+
+	let steamGiftKey = $state<string | null>(null);
+	let isLegit = $state<boolean>(true);
+
+	$effect(() => {
+		const bk = page.url.searchParams.get('bk');
+		if (!bk) {
+			isLegit = false;
+			return;
+		}
+		steamGiftKey = atob(bk);
+	});
 </script>
 
-<h1>Congrats!</h1>
+{#if isLegit}
-<h2>Here is your prize &lt;3</h2>
+	<h1>Congrats!</h1>
-<p>{steamGiftKey}</p>
+	<h2>Enjoy your gift &lt;3</h2>
+	<p>{steamGiftKey}</p>
+{:else}
+	<h1>Sorry, this gift is not for you</h1>
+{/if}

svelte.config.js

@@ -1,4 +1,4 @@
-import adapter from 'svelte-adapter-bun'
+import adapter from '@sveltejs/adapter-node'
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */