Kessinen/PaskaJoululeffa2024-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Ability to choose basic cards

Browse Source
This commit is contained in:
Esa Kataja
2024-11-20 15:41:58 +02:00
parent dcaf98e612
commit add6a061bf
10 changed files with 125 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/components/Card.svelte
+28 -16
View File
@@ -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
+28 -64
View File
@@ -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
+3 -3
View File
@@ -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
+20
View File
@@ -7,3 +7,23 @@ export function decodeUSerCookie(userCookie: string) {
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
+18
View File
@@ -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
+1 -1
View File
@@ -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
+2 -23
View File
@@ -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
View File
@@ -2,5 +2,3 @@
import MovieDetails from '$lib/components/MovieDetails.svelte';
let data = $props();
</script>
<MovieDetails {...data} />
src/routes/gameroom/+page.server.ts
+6
View File
@@ -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
+19 -1
View File
@@ -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>