Add Play logic

src/lib/components/Card.svelte

@@ -1,13 +1,22 @@
 <script lang="ts">
 	import type { Cliche } from '$lib/types';
-	let { cardData, onCardChecked }: { cardData: Cliche; onCardChecked: any } = $props();
+	let {
+		cardData,
+		onCardChecked,
+		isBonus = false
+	}: { cardData: Cliche; onCardChecked: any; isBonus?: boolean } = $props();
+
+	let isCardChecked: boolean = $state(false);
+	let isSelectedAtStart: boolean = $state(false);
 
 	function toggleCardChecked() {
-		onCardChecked(cardData);
+		isCardChecked = !isCardChecked;
+		onCardChecked(cardData, isCardChecked, isBonus);
 	}
+	console.log('isBonus', isBonus);
 </script>
 
-<div class="card">
+<div class="card" id="card">
 	<div class="relative">
 		<div>
 			<input

src/routes/+layout.svelte

@@ -12,7 +12,7 @@
 
 <div class="flex min-h-[100dvh] flex-col">
 	<Header user={data.user} />
-	<main class="container mx-auto max-w-4xl">
+	<main class="container mx-auto max-w-4xl flex-grow">
 		{@render children()}
 	</main>
 	<Footer />

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

@@ -1,13 +1,107 @@
-import type { PageServerLoad } from "./$types";
+import type { PageServerLoad, Actions } from "./$types";
 import { getNextMovie, getCards } from "$lib";
+import { redirect } from "@sveltejs/kit";
+import type { Cliche } from "$lib/types";
 
+const api_url = import.meta.env.VITE_API_URL
 
 export const load: PageServerLoad = async (event) => {
     const cards = await getCards();
     const movies = await getNextMovie();
+    const selected_cliches = {
+        baseCards: JSON.parse(event.cookies.get('selected_cliches') ?? '[]'),
+        bonusCards: JSON.parse(event.cookies.get('selected_bonus_cliches') ?? '[]')
+    };
     return {
         movie: movies,
         cards: cards,
-        user: event.locals.user
+        user: event.locals.user,
+        selected_cliches: selected_cliches
     };
 };
+
+export const actions: Actions = {
+    /**
+     * Starts a new game. Sets the selected cliche and bonus cliche cookies for the user.
+     * @param {RequestEvent} event - The request event.
+     * @param {Cookie | undefined} cookies - The cookies object.
+     * @returns {Promise<void>} - The response object.
+     */
+    startGame: async ({ request, cookies }) => {
+        const formData = await request.formData();
+        const selected_cliches = formData.get('selected_cliches')?.toString() ?? '[]';
+        const selected_bonus_cliches = formData.get('selected_bonus_cliches')?.toString() ?? '[]';
+
+        cookies.set('selected_cliches', selected_cliches, {
+            path: '/',
+            sameSite: 'strict',
+            secure: false,
+            maxAge: 60 * 60 * 24
+        });
+        cookies.set('selected_bonus_cliches', selected_bonus_cliches, {
+            path: '/',
+            sameSite: 'strict',
+            secure: false,
+            maxAge: 60 * 60 * 24
+        });
+    },
+    /**
+     * End game action. Calculates the total score for the user and sends it to the
+     * server to be saved. Redirects to the game over page.
+     * @param {RequestEvent} event - The request event.
+     * @param {Cookie | undefined} cookies - The cookies object.
+     * @returns {Promise<Response>} - The response object.
+     */
+    endGame: async ({ request, cookies }) => {
+        const formData = await request.formData();
+        console.log(formData);
+        
+        const movieId = formData.get('movieId');
+        const userId = formData.get('userId');
+
+        const resultCards = JSON.parse(formData.get('result_cards')?.toString() ?? '[]');
+        const resultBonusCards = JSON.parse(formData.get('result_bonus_cards')?.toString() ?? '[]');
+        const selectedBonusCards = JSON.parse(cookies.get('selected_bonus_cliches') ?? '[]');
+        
+        let totalScore: number = 0;
+
+        for (let i = 0; i < resultCards.length; i++) {
+            console.log('resultCards[i].point_value', resultCards[i].point_value);
+            totalScore += resultCards[i].point_value;
+        }
+
+        for (let i = 0; i < selectedBonusCards.length; i++) {
+            if (resultBonusCards.some((card: Cliche) => card.id === selectedBonusCards[i].id)) {
+                totalScore += selectedBonusCards[i].point_value*2;
+            } else {
+                totalScore -= selectedBonusCards[i].point_value*2;
+            }
+        }
+
+        const response = await fetch(`${api_url}/score`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify({
+                user_id: userId,
+                movie_id: movieId,
+                score: totalScore
+            })
+        });
+
+        console.log('response', await response);
+        // console.log(baseCards, bonusCards);
+        // cookies.delete('selected_cliches', {
+        //     path: '/',
+        //     sameSite: 'strict',
+        //     secure: false,
+        // });
+        // cookies.delete('selected_bonus_cliches', {
+        //     path: '/',
+        //     sameSite: 'strict',
+        //     secure: false,
+        // });
+        throw redirect(302, `/gameroom/${totalScore}`);
+    }
+}

src/routes/gameroom/+page.svelte

@@ -1,11 +1,54 @@
 <script lang="ts">
 	import MovieDetails from '$lib/components/MovieDetails.svelte';
-
+	import Card from '$lib/components/Card.svelte';
+	import type { Cliche } from '$lib/types';
 	import type { PageData } from './$types';
-	let { data }: { data: PageData } = $props();
+	import { enhance } from '$app/forms';
-	import CardList from '$lib/components/CardList.svelte';
 
-	let isBonusCards: boolean = true;
+	let { data }: { data: PageData } = $props();
+	let roundNumber: number = $state(1);
+	const cards: Cliche[] = data.cards;
+	let selected_cliches: Cliche[] = $state([]);
+	let selected_bonus_cliches: Cliche[] = $state([]);
+	let result_cards: Cliche[] = $state([]);
+	let result_bonus_cards: Cliche[] = $state([]);
+
+	function onCardChecked(card: Cliche) {
+		for (let i = 0; i < selected_cliches.length; i++) {
+			if (selected_cliches[i].id == card.id) {
+				selected_cliches.splice(i, 1);
+				return;
+			}
+		}
+		selected_cliches = [...selected_cliches, card];
+	}
+
+	function onBonusCardChecked(card: Cliche) {
+		for (let i = 0; i < selected_bonus_cliches.length; i++) {
+			if (selected_bonus_cliches[i].id == card.id) {
+				selected_bonus_cliches.splice(i, 1);
+				return;
+			}
+		}
+		selected_bonus_cliches = [...selected_bonus_cliches, card];
+	}
+
+	function setResult(cliche: Cliche, isCardChecked: boolean, isBonus: boolean) {
+		if (isCardChecked) {
+			if (isBonus) {
+				result_bonus_cards = [...result_bonus_cards, cliche];
+			} else {
+				result_cards = [...result_cards, cliche];
+			}
+		} else {
+			if (isBonus) {
+				result_bonus_cards = result_bonus_cards.filter((card) => card.id != cliche.id);
+			} else {
+				result_cards = result_cards.filter((card) => card.id != cliche.id);
+			}
+		}
+	}
+	$inspect(result_bonus_cards);
 </script>
 
 <div class="space-y-8">
@@ -19,6 +62,95 @@
 </div>
 
 <div class="mt-8 justify-center space-y-4">
-	<p class="text-center text-xl font-semibold">Valitse kortit</p>
+	{#if roundNumber == 1 && data.selected_cliches.baseCards.length == 0}
-	<CardList {...data.cards} />
+		<h2 class="text-center text-xl font-semibold">Valitse kortit</h2>
+		<div class="flex flex-col space-y-4 lg:grid lg:grid-cols-2">
+			{#each cards as card}
+				<Card cardData={card} {onCardChecked} />
+			{/each}
 		</div>
+		<p>Kortteja valittu: {selected_cliches.length} / 5</p>
+
+		{#if selected_cliches.length == 5}
+			<button onclick={() => roundNumber++} class="button button-primary mx-auto"
+				>Valitse kortit</button
+			>
+		{:else}
+			<button class="button button-disabled mx-auto" disabled>Korjaa valintaa</button>
+		{/if}
+	{/if}
+
+	{#if roundNumber == 2 && data.selected_cliches.baseCards.length == 0}
+		<h2 class="text-center text-xl font-semibold">Bonus kortit</h2>
+		<div class="flex flex-col space-y-4 lg:grid lg:grid-cols-2">
+			{#each cards as card}
+				{#if !selected_cliches.some((c) => c.id === card.id)}
+					<!-- <p>Kortti {card.title} valittu</p> -->
+					<Card cardData={card} onCardChecked={onBonusCardChecked} />
+					<!-- {:else} -->
+				{/if}
+			{/each}
+		</div>
+		<p>Kortteja valittu: {selected_bonus_cliches.length} / 3</p>
+
+		{#if selected_bonus_cliches.length < 4}
+			<!-- <button onclick={() => roundNumber++} class="button button-primary mx-auto"
+				>Aloita peli</button
+			> -->
+			<form action="?/startGame" method="post" use:enhance>
+				<input type="hidden" name="selected_cliches" value={JSON.stringify(selected_cliches)} />
+				<input
+					type="hidden"
+					name="selected_bonus_cliches"
+					value={JSON.stringify(selected_bonus_cliches)}
+				/>
+				<button type="submit">Aloita peli</button>
+			</form>
+		{:else}
+			<button class="button button-disabled mx-auto" disabled>Korjaa valintaa</button>
+		{/if}
+	{/if}
+
+	{#if data.selected_cliches.baseCards.length > 0}
+		<p class="text-center text-xl font-semibold">Peli alkaa</p>
+		<form action="?/endGame" method="post" use:enhance>
+			<div>
+				<p class="text-center">Valitut kortit</p>
+				{#each data.selected_cliches.baseCards as cliche}
+					<Card cardData={cliche} onCardChecked={setResult} isBonus={false} />
+				{/each}
+			</div>
+
+			<div>
+				<p class="text-center">Valitut bonus kortit</p>
+				{#each data.selected_cliches.bonusCards as cliche}
+					<Card cardData={cliche} onCardChecked={setResult} isBonus={true} />
+				{/each}
+			</div>
+			<input type="hidden" name="userId" id="userId" value={data.user.id} />
+			<input type="hidden" name="movieId" id="movieId" value={data.movie.id} />
+			<input
+				type="hidden"
+				name="result_cards"
+				id="result_cards"
+				value={JSON.stringify(result_cards)}
+			/>
+			<input
+				type="hidden"
+				name="result_bonus_cards"
+				id="result_bonus_cards"
+				value={JSON.stringify(result_bonus_cards)}
+			/>
+			<input
+				type="hidden"
+				name="bonusCards"
+				id="bonusCards"
+				value={JSON.stringify(data.selected_cliches.bonusCards)}
+			/>
+			<button type="submit" class="button button-primary mx-auto">Lopeta</button>
+		</form>
+	{/if}
+</div>
+
+<style>
+</style>

src/routes/gameroom/[score]/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { PageData } from './$types';
+
+	export let data: PageData;
+</script>
+
+<div class="flex flex-col items-center space-y-4">
+	<h1 class="text-2xl font-semibold">Game Over!</h1>
+	<p class="text-md">Peli on päättynyt!</p>
+	<p class="text-md">Sait</p>
+	<p class="rounded-xl border-2 p-4 text-xl font-semibold">{data.score}</p>
+	<p class="text-md">pistettä!</p>
+</div>

src/routes/gameroom/[score]/+page.ts

@@ -0,0 +1,5 @@
+export function load({ params }) {
+    return {
+        score: params.score
+    };
+}

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

@@ -6,5 +6,15 @@ export const load: PageServerLoad = async (event) => {
         sameSite: 'strict',
         secure: false,
     });
+    event.cookies.delete('selected_cliches', {
+        path: '/',
+        sameSite: 'strict',
+        secure: false,
+    });
+    event.cookies.delete('selected_bonus_cliches', {
+        path: '/',
+        sameSite: 'strict',
+        secure: false,
+    });
     throw redirect(302, '/login');
 };