Add Ability to choose basic cards

src/app.css

@@ -29,11 +29,4 @@ h1, h2, h3, h4, h5, h6 {
 
 .button-primary {
     @apply border-primary-GoldTinsel bg-primary-GoldTinsel-dark text-primary-SantaSuitBlack font-bold mx-auto px-6 hover:bg-primary-GoldTinsel-light
-}
-
-.movie-poster {
-    @apply rounded-md mx-2 w-[60rem]
-    /* aspect-ratio: auto; */
-    /* width: 100%; */
-    
 }

src/lib/components/Card.svelte

@@ -1,32 +1,44 @@
 <script lang="ts">
-	let { id, title, description, points }: Cliche = $props();
+	import type { Cliche } from '$lib/types';
+	let { cardData, onCardChecked }: { cardData: Cliche; onCardChecked: any } = $props();
 
-	type Cliche = {
-		id: number;
-		title: string;
-		description: string;
-		points: number;
-	};
+	function toggleCardChecked() {
+		onCardChecked(cardData);
+	}
 </script>
 
 <div class="card">
 	<div class="relative">
-		<input class="left-0 top-0" type="checkbox" name="" id="card-{id}" />
-		<input type="checkbox" class="peer hidden" name="cardDetails-{id}" id="cardDetails-{id}" />
-		<label for="cardDetails-{id}">{title}</label>
-		<!-- <button class="text-center text-xl font-semibold">{title}</button> -->
+		<div>
+			<input
+				type="checkbox"
+				name=""
+				id="card-{cardData.id}"
+				onchange={toggleCardChecked}
+				class="appearance-none"
+			/>
+		</div>
+		<div>
+			<input
+				type="checkbox"
+				class="peer hidden"
+				name="cardDetails-{cardData.id}"
+				id="cardDetails-{cardData.id}"
+			/>
+			<label for="cardDetails-{cardData.id}">{cardData.title}</label>
 
-		<div class="hidden flex-col gap-4 peer-checked:flex">
-			<!-- <img src="https://placehold.co/150x200" class="mx-auto" alt="Descriptive" /> -->
-			<p>{description}</p>
-			<p>Points: {points}</p>
+			<div class="hidden flex-col gap-4 peer-checked:flex">
+				<!-- <img src="https://placehold.co/150x200" class="mx-auto" alt="Descriptive" /> -->
+				<p>{cardData.description}</p>
+				<p>Pisteet: {cardData.point_value}</p>
+			</div>
 		</div>
 	</div>
 </div>
 
 <style lang="postcss">
 	.card {
-		@apply mx-auto my-6 flex max-w-sm flex-col gap-4 rounded-xl border-2 border-primary-FestiveRed-dark p-6 text-center;
+		@apply mx-auto w-full max-w-sm gap-4 rounded-xl border-2 border-primary-FestiveRed-dark p-4 text-center;
 	}
 	.card input {
 		@apply absolute left-0 top-0 m-0 appearance-none rounded-lg p-0 accent-black;

src/lib/components/CardList.svelte

@@ -1,73 +1,37 @@
 <script lang="ts">
+	import type { Cliche } from '$lib/types';
 	import Card from './Card.svelte';
 
-	type Cliche = {
-		id: number;
-		title: string;
-		description: string;
-		points: number;
-	};
+	const cards: Cliche[] = $props();
+	let selected_cliches: Cliche[] = $state([]);
 
-	const cards: Cliche[] = [
-		{
-			id: 1,
-			title: 'Punainen villakangastakki',
-			description: 'Päähenkilöllä on aina kirkkaanpunainen, täydellisesti istuva talvitakki.',
-			points: 1
-		},
-		{
-			id: 2,
-			title: 'Keskeytetty suudelma',
-			description: 'Juuri, kun romanttinen hetki on käsillä, jokin keskeyttää ensisuudelman.',
-			points: 1
-		},
-		{
-			id: 3,
-			title: 'Miespääosa yh',
-			description:
-				'Miespäähenkilö on yksinhuoltaja, joka tasapainoilee uran ja lapsenhoidon välillä.',
-			points: 2
-		},
-		{
-			id: 4,
-			title: 'Leskimies',
-			description: 'Päähenkilö on menettänyt puolisonsa ja yrittää nyt toipua elämässään.',
-			points: 2
-		},
-		{
-			id: 5,
-			title: 'Jouluoksennus',
-			description:
-				'Koti, työpaikka tai jokin muu koristeltu liioitellusti jouluteemalla, ilman mitään hillittyä tyylitajua.',
-			points: 1
-		},
-		{
-			id: 6,
-			title: 'Evergreen',
-			description:
-				"Tarinan kylä tai kaupunki on idyllinen paikka, nimeltään jotain jouluista, kuten 'Evergreen' tai 'Snowville'.",
-			points: 3
-		},
-		{
-			id: 7,
-			title: 'Yritys pulassa',
-			description: 'Päähenkilön yritys on konkurssin partaalla tai vaarassa tulla ostetuksi.',
-			points: 2
-		},
-		{
-			id: 8,
-			title: 'Naispääosa pitkä blondi',
-			description: 'Naispääosalla pitkät blondit hiukset.',
-			points: 1
+	function handleChildData(card: Cliche) {
+		for (let i = 0; i < selected_cliches.length; i++) {
+			if (selected_cliches[i].id == card.id) {
+				selected_cliches.splice(i, 1);
+				return;
+			}
 		}
-	];
-	let selected_cliches: Cliche[] = [];
+		selected_cliches = [...selected_cliches, card];
+	}
 </script>
 
 <form action="">
-	{#each cards as card}
-		<Card id={card.id} title={card.title} description={card.description} points={card.points} />
-	{/each}
-	<button class="button button-primary mx-auto">Valitse kortit</button>
+	<div class="space-y-2 lg:grid lg:grid-cols-2">
+		{#each cards as card}
+			<Card cardData={card} onCardChecked={handleChildData} />
+		{/each}
+	</div>
+	<p>Kortteja valittu: {selected_cliches.length} / 5</p>
+	{#if selected_cliches.length == 5}
+		<button class="button button-primary mx-auto">Valitse kortit</button>
+	{:else}
+		<button class="button button-disabled mx-auto" disabled>Korjaa valintaa</button>
+	{/if}
 </form>
-<div></div>
+
+<style lang="postcss">
+	button {
+		@apply mx-auto mt-6;
+	}
+</style>

src/lib/components/MovieDetails.svelte

@@ -1,14 +1,14 @@
 <script>
 	let data = $props();
-	const movie = data.data.movie;
+	const movie = data;
 	let actors = movie.actors.join(', ');
 	const imdb_link = `https://www.imdb.com/title/${movie.imdb_id}/`;
 </script>
 
 <div>
 	<h2 class="mb-4 text-center text-xl font-semibold">{movie.name}</h2>
-	<div class="mx-auto flex gap-2 px-3">
-		<div class="movie-poster">
+	<div class="max-w-1/2 mx-auto flex flex-col gap-4 px-3 lg:flex-row">
+		<div class="mx-auto">
 			<img class="rounded-2xl" src={movie.poster_url} alt="Poster" />
 		</div>
 		<div class="space-y-8">

src/lib/index.ts

@@ -6,4 +6,24 @@ export function decodeUSerCookie(userCookie: string) {
     const decodedCookie = decodeURIComponent(userCookie);
     const parsedCookie = JSON.parse(decodedCookie);
     return parsedCookie;
+}
+
+export function getNextMovie() {
+    const get_next_movie_url = `${api_url}/movie/next`;
+    return fetch(get_next_movie_url)
+        .then(response => response.json())
+        .then(data => {
+            const year = new Date(data.release_date).getFullYear();
+            data.release_date = `${year}`;
+            return data;
+        });
+}
+
+export function getCards() {
+    const get_cards_url = `${api_url}/card`;
+    return fetch(get_cards_url)
+        .then(response => response.json())
+        .then(data => {
+            return data;
+        });
 }

src/lib/types.ts

@@ -0,0 +1,18 @@
+export type movie = {
+    id: string;
+    name: string;
+    imdb_id: string;
+    actors: Array<string>;
+    plot: string;
+    poster_url: string;
+    release_date: string;
+    showtime: string;
+    is_watched: boolean;
+}
+
+export type Cliche = {
+    id: number;
+    title: string;
+    description: string;
+    point_value: number;
+};

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 flex-grow overflow-hidden">
+	<main class="container mx-auto max-w-4xl">
 		{@render children()}
 	</main>
 	<Footer />

src/routes/+page.server.ts

@@ -1,30 +1,9 @@
 import type { PageServerLoad } from "./$types";
-import { api_url } from "$lib";
-
-type movie = {
-    id: string;
-    name: string;
-    imdb_id: string;
-    actors: Array<string>;
-    plot: string;
-    poster_url: string;
-    release_date: string;
-    showtime: string;
-    is_watched: boolean;
-}
+import { getNextMovie } from "$lib";
 
 export const load: PageServerLoad = async (event) => {
 
-    
-    
-    const get_next_movie_url = `${api_url}/movie/next`;
-    const response = await fetch(get_next_movie_url);
-    const data: movie = await response.json();
-
-
-    const year = new Date(data.release_date).getFullYear();
-    data.release_date = `${year}`;
-
+    const data = await getNextMovie();
 
     return {
         movie: data,

src/routes/+page.svelte

@@ -2,5 +2,3 @@
 	import MovieDetails from '$lib/components/MovieDetails.svelte';
 	let data = $props();
 </script>
-
-<MovieDetails {...data} />

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

@@ -1,7 +1,13 @@
 import type { PageServerLoad } from "./$types";
+import { getNextMovie, getCards } from "$lib";
+
 
 export const load: PageServerLoad = async (event) => {
+    const cards = await getCards();
+    const movies = await getNextMovie();
     return {
+        movie: movies,
+        cards: cards,
         user: event.locals.user
     };
 };

src/routes/gameroom/+page.svelte

@@ -1,6 +1,24 @@
 <script lang="ts">
+	import MovieDetails from '$lib/components/MovieDetails.svelte';
+
 	import type { PageData } from './$types';
 	let { data }: { data: PageData } = $props();
+	import CardList from '$lib/components/CardList.svelte';
+
+	let isBonusCards: boolean = true;
 </script>
 
-<h1>gameroom</h1>
+<div class="space-y-8">
+	<input type="checkbox" checked name="moviedetails" id="moviedetails" class="peer hidden" />
+	<div class="flex justify-center border-2 border-primary-FestiveRed-dark">
+		<label for="moviedetails" class="cursor-pointer text-xl font-semibold">Elokuva</label>
+	</div>
+	<div class="hidden peer-checked:flex">
+		<MovieDetails {...data.movie} />
+	</div>
+</div>
+
+<div class="mt-8 justify-center space-y-4">
+	<p class="text-center text-xl font-semibold">Valitse kortit</p>
+	<CardList {...data.cards} />
+</div>