BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix posting data to board game endpoint.

Browse source
This commit is contained in:
Bradley Shellnut 2022-04-24 16:38:12 -07:00
parent 8e2257ee79
commit 6b2a529abe
8 changed files with 1363 additions and 217 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -14,7 +14,7 @@
"devDependencies": {
"@playwright/test": "^1.21.1",
"@sveltejs/adapter-auto": "next",
"@sveltejs/kit": "^1.0.0-next.316",
"@sveltejs/kit": "next",
"@types/cookie": "^0.5.0",
"@types/node": "^17.0.25",
"@typescript-eslint/eslint-plugin": "^5.20.0",
@ -37,6 +37,7 @@
"@fontsource/fira-mono": "^4.5.7",
"@lukeed/uuid": "^2.0.0",
"cookie": "^0.5.0",
"node-sass": "^7.0.1",
"zod": "^3.14.4"
}
}

1293
pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

25
src/lib/header/Header.svelte
View file

@ -19,26 +19,23 @@
</div>
<nav>
<Theme
render="toggle"
toggle={{
themes: ['white','g100'],
hideLabel: true,
size: 'sm'
}}
bind:theme
persist
persistKey="__carbon-theme"
/>
<ul>
<li class:active={$page.url.pathname === '/'}><a sveltekit:prefetch href="/">Home</a></li>
<li class:active={$page.url.pathname === '/about'}>
<a sveltekit:prefetch href="/about">About</a>
</li>
<li class:active={$page.url.pathname === '/todos'}>
<a sveltekit:prefetch href="/todos">Todos</a>
</li>
</ul>
<Theme
render="toggle"
toggle={{
themes: ['white','g100'],
hideLabel: true,
size: 'sm'
}}
bind:theme
persist
persistKey="__carbon-theme"
/>
</nav>
</header>

2
src/routes/__layout.svelte
View file

@ -11,7 +11,7 @@
</main>
<footer>
<p>visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to learn SvelteKit</p>
<p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
</footer>
<style>

18
src/routes/api/games/index.ts
View file

@ -1,21 +1,22 @@
import type { SearchQuery } from "$lib/types";
import type { RequestHandler } from "@sveltejs/kit";
import type { SearchQuery } from "$lib/types";
export const post: RequestHandler = async ({ request }) => {
const form = await request.formData();
console.log('form', form);
const queryParams : SearchQuery = {
order_by: 'rank',
ascending: false,
limit: 2,
limit: 1,
client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID,
}
const minAge = form.get('minAge');
const minPlayers = form.get('minPlayers');
const maxPlayers = form.get('maxPlayers');
const exactMinAge = form.get('exactMinAge') === 'on' || false;
const exactMinPlayers = form.get('exactMinPlayers') === 'on' || false;
const exactMaxPlayers = form.get('exactMaxPlayers') === 'on' || false;
const exactMinAge = form.get('exactMinAge') || false;
const exactMinPlayers = form.get('exactMinPlayers') || false;
const exactMaxPlayers = form.get('exactMaxPlayers') || false;
const random = form.get('random') === 'on' || false;
console.log("form.get('minAge')", form.get('minAge'));
@ -58,13 +59,16 @@ export const post: RequestHandler = async ({ request }) => {
}
}
queryParams.random = random;
console.log('queryParams', queryParams);
const newQueryParams = {};
for (const key in queryParams) {
newQueryParams[key] = new String(queryParams[key]);
console.log('key', key);
console.log('queryParams[key]', queryParams[key]);
newQueryParams[key] = `${queryParams[key]}`;
}
const urlQueryParams = new URLSearchParams(newQueryParams);
console.log('urlQueryParams', JSON.stringify(urlQueryParams, null, 2));
const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''}`
const response = await fetch(url, {

8
src/routes/games/index.svelte
View file

@ -50,7 +50,7 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
invalidText="Number must be between 0 and 120"
label="Min Age"
/>
<Checkbox name="exactMinAge" labelText="Search exact?" bind:checked={exactMinAge} />
<Checkbox name="exactMinAge" bind:value={exactMinAge} labelText="Search exact?" bind:checked={exactMinAge} />
</div>
<div>
<NumberInput
@ -61,7 +61,7 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
invalidText="Number must be between 1 and 50"
label="Min Players"
/>
<Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
<Checkbox name="exactMinPlayers" labelText="Search exact?" bind:value={exactMinPlayers} bind:checked={exactMinPlayers} />
</div>
<div>
<NumberInput
@ -72,7 +72,7 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
invalidText="Number must be between 1 and 50"
label="Max Players"
/>
<Checkbox name="exactMaxPlayers" labelText="Search exact?" bind:checked={exactMaxPlayers} />
<Checkbox name="exactMaxPlayers" labelText="Search exact?" bind:value={exactMaxPlayers} bind:checked={exactMaxPlayers} />
</div>
</fieldset>
<button type="submit" disabled={submitting}>Submit</button>
@ -106,7 +106,7 @@ import { Checkbox, NumberInput } from "carbon-components-svelte";
{/each}
</div>
<style>
<style lang="scss">
h2 {
text-align: center;
font-size: 2.5rem;

227
src/routes/index.svelte
View file

@ -3,108 +3,147 @@
</script>
<script lang="ts">
import { enhance } from "$lib/form";
import { Button } from "carbon-components-svelte";
import { NumberInput } from "carbon-components-svelte";
import { Checkbox, NumberInput } from "carbon-components-svelte";
import type { Game } from "$lib/types";
// import { enhance } from "$lib/form";
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;
// }
let games: Game[] = [];
let submitting = false;
export let games = [];
async function handleSubmit(event: SubmitEvent) {
submitting = true;
const form = event.target as HTMLFormElement;
console.log('form', form);
const response = await fetch('/api/games', {
method: 'post',
headers: { accept: 'application/json' },
body: new FormData(form)
});
const responseData = await response.json();
submitting = false;
games = responseData?.games;
}
let minAge = 0;
let minPlayers = 1;
let maxPlayers = 1;
let exactMinAge = false;
let exactMinPlayers = false;
let exactMaxPlayers = false;
</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>
<h1>Search Boardgames!</h1>
<p>Input your requirements to search for board game that match your criteria</p>
<div class="game-form">
<form on:submit|preventDefault={handleSubmit} method="post">
<fieldset aria-busy={submitting} disabled={submitting}>
<div>
<NumberInput
name="minAge"
min={0}
max={120}
bind:value={minAge}
invalidText="Number must be between 0 and 120"
label="Min Age"
/>
<Checkbox name="exactMinAge" bind:checked={exactMinAge} bind:value={exactMinAge} labelText="Search exact?" />
</div>
<div>
<NumberInput
name="minPlayers"
min={1}
max={50}
bind:value={minPlayers}
invalidText="Number must be between 1 and 50"
label="Min Players"
/>
<Checkbox name="exactMinPlayers" labelText="Search exact?" bind:checked={exactMinPlayers} />
</div>
<div>
<NumberInput
name="maxPlayers"
min={1}
max={50}
bind:value={maxPlayers}
invalidText="Number must be between 1 and 50"
label="Max Players"
/>
<Checkbox name="exactMaxPlayers" labelText="Search exact?" bind:checked={exactMaxPlayers} />
</div>
</fieldset>
<button type="submit" disabled={submitting}>Submit</button>
</form>
<form on:submit|preventDefault={handleSubmit} method="post">
<fieldset aria-busy={submitting} disabled={submitting}>
<input type="checkbox" id="random" name="random" hidden checked />
<button type="submit" disabled={submitting}>🎲</button>
</fieldset>
</form>
</div>
<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>
<div class="games">
<h1>Games</h1>
{#each games as game}
<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>
<style lang="scss">
h1 {
width: 100%;
}
h2 {
text-align: center;
font-size: 2.5rem;
font-weight: 600;
}
button {
border-radius: 4px;
margin: 0;
padding: 0.2rem;
background-color: palegreen;
}
.games {
display: grid;
gap: 2rem;
}
.description {
margin: 1rem;
}
.game-form {
display: flex;
place-items: center;
}
.game-form fieldset {
display: grid;
gap: 1rem;
grid-template-columns: repeat(3, minmax(200px, 1fr));
}
<style>
section {
display: flex;
flex-direction: column;
@ -113,10 +152,6 @@
flex: 1;
}
h1 {
width: 100%;
}
.welcome {
position: relative;
width: 100%;

4
svelte.config.js
View file

@ -6,7 +6,9 @@ import path from 'path';
const config = {
// Consult https://github.com/sveltejs/svelte-preprocess
// for more information about preprocessors
preprocess: preprocess(),
preprocess: preprocess({
scss: {},
}),
kit: {
adapter: adapter(),