boredgame/src/routes/index.svelte

<script context="module" lang="ts">
	export const prerender = true;
</script>

<script lang="ts">
	import { enhance } from "$lib/form";
	import { Button } from "carbon-components-svelte";
	import { NumberInput } from "carbon-components-svelte";

	let minAge = 0;
	let maxAge = 0;
	let minPlayers = 0;
	let maxPlayers = 0;
	let loading = false;
	// type Game = {
	// 	id: string;
	// 	handle: string;
	// 	name: string;
	// 	url: string;
	// 	edit_url: string;
	// 	price: number;
	// 	price_ca: number;
	// 	price_uk: number;
	// 	price_au: number;
	// 	msrp: number;
	// 	year_published: number;
	// 	min_players: number;
	// 	max_players: number;
	// 	min_playtime: number;
	// 	max_playtime: number;
	// 	min_age: number;
	// 	description: string;
	// 	players: string;
	// 	playtime: string;
	// }

	export let games = [];
</script>

<svelte:head>
	<title>Home</title>
</svelte:head>

<section>
	<h1>
		<div class="welcome">
			Search for a board game!
		</div>
	</h1>
	Games: {JSON.stringify(games, null, 2)}
	<form
		action="/games"
		method="post"
		use:enhance={{
			pending: () => {
				loading = true;
			},
			result: async ({ data, form, response }) => {
				loading = false;
				console.log(JSON.stringify(data))
			}
		}}
	>
		<fieldset aria-busy={loading} disabled={loading}>
			<label for="minAge">Min Age:
				<input id="minAge" name="minAge" type="range" min="0" max="120" step="1" bind:value={minAge} />
				{minAge}
			</label>
			<label for="maxAge">Max Age:
				<input id="maxAge" name="maxAge" type="range" min="0" max="120" step="1" bind:value={maxAge} />
				{maxAge}
			</label>
			<label for="minPlayers">Min Players:
				<input id="minPlayers" name="minPlayers" type="range" min="1" max="50" step="1" bind:value={minPlayers} />
				{minPlayers}
			</label>
			<label for="maxPlayers">Max Players:
				<input id="maxPlayers" name="maxPlayers" type="range" min="1" max="50" step="1" bind:value={maxPlayers} />
				{maxPlayers}
			</label>
		</fieldset>
		<button type="submit" disabled={loading}>Submit</button>
	</form>

	<div class="games">
		<h1>Games</h1>
		<!-- {#each games as game (game.id)}
			<section>
					<div>
						<h2>{game.name}</h2>
						<p>price : {game.price}</p>
						<p>year_published : {game.year_published}</p>
						<p>min_players : {game.min_players}</p>
						<p>max_players : {game.max_players}</p>
						<p>min_playtime : {game.min_playtime}</p>
						<p>max_playtime : {game.max_playtime}</p>
						<p>min_age : {game.min_age}</p>
						<p>players : {game.players}</p>
						<p>playtime : {game.playtime}</p>
						<div class="description">{@html game.description}</div>
					</div>
			</section>
		{/each} -->
	</div>
</section>

<style>
	section {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex: 1;
	}

	h1 {
		width: 100%;
	}

	.welcome {
		position: relative;
		width: 100%;
		height: 0;
		padding: 0 0 calc(100% * 495 / 2048) 0;
	}

	.welcome img {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		display: block;
	}
</style>