mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Bradley Shellnut
GitHub
commit
458693b073
26 changed files with 1479 additions and 1218 deletions
3
.gitignore
vendored
3
.gitignore
vendored
|
|
@ -8,4 +8,5 @@ node_modules
|
|||
!.env.example
|
||||
.vercel
|
||||
.output
|
||||
.idea
|
||||
.idea
|
||||
.fleet
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"useTabs": true,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
|
|
|
|||
44
package.json
44
package.json
|
|
@ -13,37 +13,39 @@
|
|||
"format": "prettier --write --plugin-search-dir=. ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "^1.27.1",
|
||||
"@playwright/test": "^1.29.1",
|
||||
"@rgossiaux/svelte-headlessui": "1.0.2",
|
||||
"@rgossiaux/svelte-heroicons": "^0.1.2",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@sveltejs/adapter-auto": "^1.0.0",
|
||||
"@sveltejs/adapter-vercel": "^1.0.0",
|
||||
"@sveltejs/kit": "^1.0.1",
|
||||
"@types/cookie": "^0.5.1",
|
||||
"@types/node": "^18.11.9",
|
||||
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
||||
"@typescript-eslint/parser": "^5.42.1",
|
||||
"@types/node": "^18.11.18",
|
||||
"@typescript-eslint/eslint-plugin": "^5.47.1",
|
||||
"@typescript-eslint/parser": "^5.47.1",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.27.0",
|
||||
"eslint-config-prettier": "^8.1.0",
|
||||
"eslint": "^8.30.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"just-debounce-it": "^3.1.1",
|
||||
"postcss": "^8.4.19",
|
||||
"just-debounce-it": "^3.2.0",
|
||||
"postcss": "^8.4.20",
|
||||
"postcss-color-functional-notation": "^4.2.4",
|
||||
"postcss-custom-media": "^9.0.1",
|
||||
"postcss-env-function": "^4.0.6",
|
||||
"postcss-import": "^15.0.0",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-load-config": "^4.0.1",
|
||||
"postcss-media-minmax": "^5.0.0",
|
||||
"postcss-nested": "^6.0.0",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-svelte": "^2.8.0",
|
||||
"sass": "^1.56.1",
|
||||
"svelte": "^3.53.1",
|
||||
"svelte-check": "^2.9.2",
|
||||
"prettier": "^2.8.1",
|
||||
"prettier-plugin-svelte": "^2.9.0",
|
||||
"sass": "^1.57.1",
|
||||
"svelte": "^3.55.0",
|
||||
"svelte-check": "^2.10.3",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^4.8.4",
|
||||
"vite": "^3.2.3"
|
||||
"typescript": "^4.9.4",
|
||||
"vite": "^4.0.3",
|
||||
"vitest": "^0.25.3"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
|
|
@ -51,11 +53,11 @@
|
|||
"@leveluptuts/svelte-side-menu": "^1.0.5",
|
||||
"@leveluptuts/svelte-toy": "^2.0.3",
|
||||
"@lukeed/uuid": "^2.0.0",
|
||||
"@types/feather-icons": "^4.7.0",
|
||||
"@types/feather-icons": "^4.29.1",
|
||||
"cookie": "^0.5.0",
|
||||
"feather-icons": "^4.29.0",
|
||||
"svelte-lazy-loader": "^1.0.0",
|
||||
"zod": "^3.19.1",
|
||||
"zod-to-json-schema": "^3.19.3"
|
||||
"zod": "^3.20.2",
|
||||
"zod-to-json-schema": "^3.20.1"
|
||||
}
|
||||
}
|
||||
1355
pnpm-lock.yaml
1355
pnpm-lock.yaml
File diff suppressed because it is too large
Load diff
|
|
@ -1,8 +1,12 @@
|
|||
<!-- Taken from carbon design system svelte -->
|
||||
<!-- https://github.com/carbon-design-system/carbon-components-svelte/blob/master/src/SkeletonPlaceholder/SkeletonPlaceholder.svelte -->
|
||||
<script lang="ts">
|
||||
export let style: string;
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y-mouse-events-have-key-events -->
|
||||
<div
|
||||
{style}
|
||||
class:bx--skeleton__placeholder={true}
|
||||
{...$$restProps}
|
||||
on:click
|
||||
|
|
|
|||
|
|
@ -1,16 +1,17 @@
|
|||
<script lang="ts">
|
||||
import type { ActionData } from './$types';
|
||||
import { boredState } from '$lib/stores/boredState';
|
||||
import type { PageData } from '.svelte-kit/types/src/routes/$types';
|
||||
|
||||
export let data: PageData;
|
||||
console.log('advanced search data', data);
|
||||
|
||||
export let form: ActionData;
|
||||
console.log('form data', form?.data);
|
||||
const errors = form?.errors;
|
||||
let submitting = $boredState?.loading;
|
||||
let minAge = +form?.data?.minAge || 1;
|
||||
let minPlayers = +form?.data?.minPlayers || 1;
|
||||
let maxPlayers = +form?.data?.maxPlayers || 1;
|
||||
let exactMinPlayers = Boolean(form?.data?.exactMinPlayers) || false;
|
||||
let exactMaxPlayers = Boolean(form?.data?.exactMaxPlayers) || false;
|
||||
let minAge = +data?.minAge || 1;
|
||||
let minPlayers = +data?.minPlayers || 1;
|
||||
let maxPlayers = +data?.maxPlayers || 1;
|
||||
let exactMinPlayers = Boolean(data?.exactMinPlayers) || false;
|
||||
let exactMaxPlayers = Boolean(data?.exactMaxPlayers) || false;
|
||||
</script>
|
||||
|
||||
<fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
|
||||
|
|
@ -19,10 +20,10 @@
|
|||
Min Age
|
||||
<input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} />
|
||||
</label>
|
||||
{#if form?.errors?.minAge}
|
||||
{#if data?.errors?.minAge}
|
||||
<div id="minPlayers-error" class="error">
|
||||
<p aria-label={`Error: ${form?.errors?.minAge}`} class="center">
|
||||
{form?.errors?.minAge}
|
||||
<p aria-label={`Error: ${data?.errors?.minAge}`} class="center">
|
||||
{data?.errors?.minAge}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -49,10 +50,10 @@
|
|||
bind:value={exactMinPlayers}
|
||||
/>
|
||||
</label>
|
||||
{#if form?.errors?.minPlayers}
|
||||
{#if data?.errors?.minPlayers}
|
||||
<div id="minPlayers-error" class="error">
|
||||
<p aria-label={`Error: ${form?.errors?.minPlayers}`} class="center">
|
||||
{form?.errors?.minPlayers}
|
||||
<p aria-label={`Error: ${data?.errors?.minPlayers}`} class="center">
|
||||
{data?.errors?.minPlayers}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -79,10 +80,10 @@
|
|||
bind:value={exactMaxPlayers}
|
||||
/>
|
||||
</label>
|
||||
{#if form?.error?.id === 'maxPlayers'}
|
||||
{#if data?.error?.id === 'maxPlayers'}
|
||||
<div id="maxPlayers-error" class="error">
|
||||
<p aria-label={`Error: ${form.error.message}`} class="center">
|
||||
Error: {form.error.message}
|
||||
<p aria-label={`Error: ${data.error.message}`} class="center">
|
||||
Error: {data.error.message}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -5,30 +5,12 @@
|
|||
import { ToastType } from '$root/lib/types';
|
||||
import { toast } from '../../toast/toast';
|
||||
|
||||
// async function handleSubmit(event: SubmitEvent) {
|
||||
// // submitting = true;
|
||||
// boredState.update((n) => ({ ...n, loading: 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;
|
||||
// boredState.update((n) => ({ ...n, loading: false }));
|
||||
// gameStore.removeAll();
|
||||
// gameStore.addAll(responseData?.games);
|
||||
// // games = responseData?.games;
|
||||
// }
|
||||
|
||||
let submitting = $boredState?.loading;
|
||||
let checked = true;
|
||||
</script>
|
||||
|
||||
<form
|
||||
action="/search"
|
||||
action="/search?/random"
|
||||
method="POST"
|
||||
use:enhance={() => {
|
||||
gameStore.removeAll();
|
||||
|
|
@ -58,7 +40,7 @@
|
|||
}}
|
||||
>
|
||||
<fieldset aria-busy={submitting} disabled={submitting}>
|
||||
<input type="checkbox" id="random" name="random" hidden {checked} />
|
||||
<!-- <input type="checkbox" id="random" name="random" hidden {checked} /> -->
|
||||
<button class="btn" type="submit" disabled={submitting}>Random Game 🎲</button>
|
||||
</fieldset>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
// console.log('search page data', data);
|
||||
export let form: ActionData;
|
||||
// console.log('search page form', form);
|
||||
const errors = form?.errors;
|
||||
const errors = data?.errors;
|
||||
|
||||
export let showButton: boolean = false;
|
||||
export let advancedSearch: boolean = false;
|
||||
|
|
@ -33,27 +33,24 @@
|
|||
let gameToRemove: GameType | SavedGameType;
|
||||
let numberOfGameSkeleton = 1;
|
||||
let submitButton: HTMLElement;
|
||||
let pageSize = 10;
|
||||
let page = +form?.data?.page || 1;
|
||||
let totalItems = form?.totalCount || data?.totalCount || 0;
|
||||
let pageSize = +data?.limit || 10;
|
||||
let totalItems = +data?.totalCount || 0;
|
||||
let offset = +data?.skip || 0;
|
||||
let page = Math.floor(offset / pageSize) + 1 || 1;
|
||||
let submitting = $boredState?.loading;
|
||||
let name = form?.name || '';
|
||||
let name = data?.name || '';
|
||||
let disclosureOpen = errors || false;
|
||||
|
||||
$: skip = (page - 1) * pageSize;
|
||||
$: showPagination = $gameStore?.length > 1;
|
||||
|
||||
if ($xl) {
|
||||
console.log('Was xl');
|
||||
numberOfGameSkeleton = 8;
|
||||
} else if ($md) {
|
||||
console.log('Was md');
|
||||
numberOfGameSkeleton = 3;
|
||||
} else if ($sm) {
|
||||
console.log('Was sm');
|
||||
numberOfGameSkeleton = 2;
|
||||
} else {
|
||||
console.log('Was none');
|
||||
numberOfGameSkeleton = 1;
|
||||
}
|
||||
|
||||
|
|
@ -81,11 +78,9 @@
|
|||
}
|
||||
|
||||
async function handlePerPageEvent(event: CustomEvent) {
|
||||
console.log('Per Page Event called', event.detail);
|
||||
page = 1;
|
||||
pageSize = event.detail.pageSize;
|
||||
await tick();
|
||||
// console.log('New limit value DOM: ', document.getElementById('limit')?.getAttribute('value'));
|
||||
submitButton.click();
|
||||
}
|
||||
|
||||
|
|
@ -141,22 +136,22 @@
|
|||
// TODO: Add cache for certain number of pages so back and forth doesn't request data again
|
||||
</script>
|
||||
|
||||
<form id="search-form" action="/search" method="post" use:enhance={submitSearch}>
|
||||
<input id="skip" type="hidden" name="skip" bind:value={skip} />
|
||||
<input id="limit" type="hidden" name="limit" bind:value={pageSize} />
|
||||
<form id="search-form" action="/search" method="get">
|
||||
<div class="search">
|
||||
<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
|
||||
<label for="name">
|
||||
<label for="q">
|
||||
Search
|
||||
<input
|
||||
id="name"
|
||||
name="name"
|
||||
id="q"
|
||||
name="q"
|
||||
bind:value={name}
|
||||
type="text"
|
||||
aria-label="Search boardgame"
|
||||
placeholder="Search boardgame"
|
||||
/>
|
||||
</label>
|
||||
<input id="skip" type="hidden" name="skip" bind:value={skip} />
|
||||
<input id="limit" type="hidden" name="limit" bind:value={pageSize} />
|
||||
</fieldset>
|
||||
{#if advancedSearch}
|
||||
<Disclosure>
|
||||
|
|
@ -178,7 +173,7 @@
|
|||
<!-- Using `static`, `DisclosurePanel` is always rendered,
|
||||
and ignores the `open` state -->
|
||||
<DisclosurePanel static>
|
||||
<AdvancedSearch {form} />
|
||||
<AdvancedSearch {data} />
|
||||
</DisclosurePanel>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -198,19 +193,34 @@
|
|||
{/if}
|
||||
</form>
|
||||
|
||||
{#if $gameStore?.length > 0}
|
||||
{#if $boredState.loading}
|
||||
<div class="games">
|
||||
<h1>Games Found:</h1>
|
||||
<div class="games-list">
|
||||
{#each $gameStore as game (game.id)}
|
||||
<Game
|
||||
on:handleRemoveWishlist={handleRemoveWishlist}
|
||||
on:handleRemoveCollection={handleRemoveCollection}
|
||||
{game}
|
||||
{#each placeholderList as game, i}
|
||||
<SkeletonPlaceholder
|
||||
style="width: 100%; height: 500px; border-radius: var(--borderRadius);"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
{#if showPagination}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="games">
|
||||
<h1>Games Found:</h1>
|
||||
<div class="games-list">
|
||||
{#if $gameStore?.length > 0}
|
||||
{#each $gameStore as game (game.id)}
|
||||
<Game
|
||||
on:handleRemoveWishlist={handleRemoveWishlist}
|
||||
on:handleRemoveCollection={handleRemoveCollection}
|
||||
{game}
|
||||
/>
|
||||
{/each}
|
||||
{:else}
|
||||
<h2>Sorry no games found!</h2>
|
||||
{/if}
|
||||
</div>
|
||||
{#if showPagination && $gameStore?.length > 0}
|
||||
<Pagination
|
||||
{pageSize}
|
||||
{page}
|
||||
|
|
@ -224,17 +234,6 @@
|
|||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{:else if $boredState.loading}
|
||||
<div class="games">
|
||||
<h1>Games Found:</h1>
|
||||
<div class="games-list">
|
||||
{#each placeholderList as game, i}
|
||||
<SkeletonPlaceholder
|
||||
style="width: 100%; height: 500px; border-radius: var(--borderRadius);"
|
||||
/>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style lang="postcss">
|
||||
|
|
|
|||
208
src/lib/types.ts
208
src/lib/types.ts
|
|
@ -1,125 +1,125 @@
|
|||
import type { SvelteComponent } from "svelte";
|
||||
import type { SvelteComponent } from 'svelte';
|
||||
|
||||
export type Dialog = {
|
||||
isOpen: boolean;
|
||||
content?: typeof SvelteComponent;
|
||||
additionalData?: SavedGameType | GameType;
|
||||
}
|
||||
isOpen: boolean;
|
||||
content?: typeof SvelteComponent;
|
||||
additionalData?: SavedGameType | GameType;
|
||||
};
|
||||
|
||||
export type Search = {
|
||||
name: string;
|
||||
minAge: string;
|
||||
minPlayers: string;
|
||||
maxPlayers: string;
|
||||
exactMinAge: string;
|
||||
exactMinPlayers: string;
|
||||
exactMaxPlayers: string;
|
||||
skip: number;
|
||||
currentPage: number;
|
||||
limit: number;
|
||||
}
|
||||
name: string;
|
||||
minAge: string;
|
||||
minPlayers: string;
|
||||
maxPlayers: string;
|
||||
exactMinAge: string;
|
||||
exactMinPlayers: string;
|
||||
exactMaxPlayers: string;
|
||||
skip: number;
|
||||
currentPage: number;
|
||||
limit: number;
|
||||
};
|
||||
|
||||
export type BoredStore = {
|
||||
loading: boolean;
|
||||
dialog: Dialog;
|
||||
loading: boolean;
|
||||
dialog: Dialog;
|
||||
};
|
||||
|
||||
export enum ToastType {
|
||||
INFO = 'INFO',
|
||||
ERROR = 'ERROR',
|
||||
WARNING = 'WARNING'
|
||||
INFO = 'INFO',
|
||||
ERROR = 'ERROR',
|
||||
WARNING = 'WARNING'
|
||||
}
|
||||
|
||||
export type ToastData = {
|
||||
id: number;
|
||||
duration: number;
|
||||
dismissible: boolean;
|
||||
showButton: boolean;
|
||||
autoDismiss: boolean;
|
||||
type: ToastType;
|
||||
message: string;
|
||||
id: number;
|
||||
duration: number;
|
||||
dismissible: boolean;
|
||||
showButton: boolean;
|
||||
autoDismiss: boolean;
|
||||
type: ToastType;
|
||||
message: string;
|
||||
};
|
||||
|
||||
export type SavedGameType = {
|
||||
id: string;
|
||||
name: string;
|
||||
thumb_url: string;
|
||||
players: string;
|
||||
playtime: string;
|
||||
}
|
||||
id: string;
|
||||
name: string;
|
||||
thumb_url: string;
|
||||
players: string;
|
||||
playtime: string;
|
||||
};
|
||||
|
||||
export type GameType = {
|
||||
id: string;
|
||||
handle: string;
|
||||
name: string;
|
||||
url: string;
|
||||
edit_url: string;
|
||||
thumb_url: string;
|
||||
image_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;
|
||||
description_preview: string;
|
||||
players: string;
|
||||
playtime: string;
|
||||
id: string;
|
||||
handle: string;
|
||||
name: string;
|
||||
url: string;
|
||||
edit_url: string;
|
||||
thumb_url: string;
|
||||
image_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;
|
||||
description_preview: string;
|
||||
players: string;
|
||||
playtime: string;
|
||||
};
|
||||
|
||||
export type SearchQuery = {
|
||||
client_id: string;
|
||||
limit?: number;
|
||||
skip?: number;
|
||||
ids?: string[];
|
||||
list_id?: string;
|
||||
kickstarter?: boolean;
|
||||
random?: boolean;
|
||||
name?: string;
|
||||
exact?: boolean;
|
||||
fuzzy_match?: boolean;
|
||||
designer?: string;
|
||||
publisher?: string;
|
||||
artist?: string;
|
||||
mechanics?: string;
|
||||
categories?: string;
|
||||
order_by?: string;
|
||||
ascending?: boolean;
|
||||
min_players?: number;
|
||||
max_players?: number;
|
||||
min_playtime?: number;
|
||||
max_playtime?: number;
|
||||
min_age?: number;
|
||||
year_published?: number;
|
||||
gt_min_players?: number;
|
||||
gt_max_players?: number;
|
||||
gt_min_playtime?: number;
|
||||
gt_max_playtime?: number;
|
||||
gt_min_age?: number;
|
||||
gt_year_published?: number;
|
||||
gt_price?: bigint;
|
||||
gt_msrp?: bigint;
|
||||
gt_discount?: bigint;
|
||||
gt_reddit_count?: number;
|
||||
gt_reddit_week_count?: number;
|
||||
gt_reddit_day_count?: number;
|
||||
lt_min_players?: number;
|
||||
lt_max_players?: number;
|
||||
lt_min_playtime?: number;
|
||||
lt_max_playtime?: number;
|
||||
lt_min_age?: number;
|
||||
lt_year_published?: number;
|
||||
lt_price?: bigint;
|
||||
lt_msrp?: bigint;
|
||||
lt_discount?: bigint;
|
||||
lt_reddit_count?: number;
|
||||
lt_reddit_week_count?: number;
|
||||
lt_reddit_day_count?: number;
|
||||
fields?: string;
|
||||
client_id: string;
|
||||
limit?: number;
|
||||
skip?: number;
|
||||
ids?: string[];
|
||||
list_id?: string;
|
||||
kickstarter?: boolean;
|
||||
random?: boolean;
|
||||
name?: string;
|
||||
exact?: boolean;
|
||||
fuzzy_match?: boolean;
|
||||
designer?: string;
|
||||
publisher?: string;
|
||||
artist?: string;
|
||||
mechanics?: string;
|
||||
categories?: string;
|
||||
order_by?: string;
|
||||
ascending?: boolean;
|
||||
min_players?: number;
|
||||
max_players?: number;
|
||||
min_playtime?: number;
|
||||
max_playtime?: number;
|
||||
min_age?: number;
|
||||
year_published?: number;
|
||||
gt_min_players?: number;
|
||||
gt_max_players?: number;
|
||||
gt_min_playtime?: number;
|
||||
gt_max_playtime?: number;
|
||||
gt_min_age?: number;
|
||||
gt_year_published?: number;
|
||||
gt_price?: bigint;
|
||||
gt_msrp?: bigint;
|
||||
gt_discount?: bigint;
|
||||
gt_reddit_count?: number;
|
||||
gt_reddit_week_count?: number;
|
||||
gt_reddit_day_count?: number;
|
||||
lt_min_players?: number;
|
||||
lt_max_players?: number;
|
||||
lt_min_playtime?: number;
|
||||
lt_max_playtime?: number;
|
||||
lt_min_age?: number;
|
||||
lt_year_published?: number;
|
||||
lt_price?: bigint;
|
||||
lt_msrp?: bigint;
|
||||
lt_discount?: bigint;
|
||||
lt_reddit_count?: number;
|
||||
lt_reddit_week_count?: number;
|
||||
lt_reddit_day_count?: number;
|
||||
fields?: string;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,154 +2,156 @@ import { z, ZodNumber, ZodOptional } from 'zod';
|
|||
// import zodToJsonSchema from 'zod-to-json-schema';
|
||||
|
||||
export const BoardGameSearch = z.object({
|
||||
minAge: z.number(),
|
||||
maxAge: z.number(),
|
||||
minPlayers: z.number(),
|
||||
maxPlayers: z.number()
|
||||
minAge: z.number(),
|
||||
maxAge: z.number(),
|
||||
minPlayers: z.number(),
|
||||
maxPlayers: z.number()
|
||||
});
|
||||
|
||||
export const saved_game_schema = z.object({
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
thumb_url: z.string(),
|
||||
players: z.string(),
|
||||
playtime: IntegerString(z.number()),
|
||||
id: z.string(),
|
||||
name: z.string(),
|
||||
thumb_url: z.string(),
|
||||
players: z.string(),
|
||||
playtime: IntegerString(z.number())
|
||||
});
|
||||
|
||||
// https://github.com/colinhacks/zod/discussions/330
|
||||
function IntegerString
|
||||
<schema extends (ZodNumber | ZodOptional<ZodNumber>)>
|
||||
(schema: schema)
|
||||
{
|
||||
return (
|
||||
z.preprocess((value) => (
|
||||
( (typeof value === "string") ? parseInt(value, 10)
|
||||
: (typeof value === "number") ? value
|
||||
: undefined
|
||||
)), schema)
|
||||
)
|
||||
function IntegerString<schema extends ZodNumber | ZodOptional<ZodNumber>>(schema: schema) {
|
||||
return z.preprocess(
|
||||
(value) =>
|
||||
typeof value === 'string'
|
||||
? parseInt(value, 10)
|
||||
: typeof value === 'number'
|
||||
? value
|
||||
: undefined,
|
||||
schema
|
||||
);
|
||||
}
|
||||
|
||||
export const search_schema = z.object({
|
||||
name: z.string().trim().optional(),
|
||||
minAge: IntegerString(z.number().min(1).max(120).optional()),
|
||||
minPlayers: IntegerString(z.number().min(1).max(50).optional()),
|
||||
maxPlayers: IntegerString(z.number().min(1).max(50).optional()),
|
||||
exactMinAge: z.preprocess((a) => Boolean(a), z.boolean().optional()),
|
||||
exactMinPlayers: z.preprocess((a) => Boolean(a), z.boolean().optional()),
|
||||
exactMaxPlayers: z.preprocess((a) => Boolean(a), z.boolean().optional())
|
||||
})
|
||||
.superRefine(({ minPlayers, maxPlayers, minAge, exactMinAge, exactMinPlayers, exactMaxPlayers }, ctx) => {
|
||||
console.log({ minPlayers, maxPlayers });
|
||||
if (minPlayers && maxPlayers && minPlayers > maxPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players must be smaller than Max Players',
|
||||
path: ['minPlayers'],
|
||||
});
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players must be smaller than Max Players',
|
||||
path: ['maxPlayers'],
|
||||
});
|
||||
}
|
||||
export const search_schema = z
|
||||
.object({
|
||||
name: z.string().trim().optional(),
|
||||
minAge: IntegerString(z.number().min(1).max(120).optional()),
|
||||
minPlayers: IntegerString(z.number().min(1).max(50).optional()),
|
||||
maxPlayers: IntegerString(z.number().min(1).max(50).optional()),
|
||||
exactMinAge: z.preprocess((a) => Boolean(a), z.boolean().optional()),
|
||||
exactMinPlayers: z.preprocess((a) => Boolean(a), z.boolean().optional()),
|
||||
exactMaxPlayers: z.preprocess((a) => Boolean(a), z.boolean().optional())
|
||||
})
|
||||
.superRefine(
|
||||
({ minPlayers, maxPlayers, minAge, exactMinAge, exactMinPlayers, exactMaxPlayers }, ctx) => {
|
||||
console.log({ minPlayers, maxPlayers });
|
||||
if (minPlayers && maxPlayers && minPlayers > maxPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players must be smaller than Max Players',
|
||||
path: ['minPlayers']
|
||||
});
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players must be smaller than Max Players',
|
||||
path: ['maxPlayers']
|
||||
});
|
||||
}
|
||||
|
||||
if (exactMinAge && !minAge) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Age required when searching for exact min age',
|
||||
path: ['minAge'],
|
||||
});
|
||||
}
|
||||
if (exactMinAge && !minAge) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Age required when searching for exact min age',
|
||||
path: ['minAge']
|
||||
});
|
||||
}
|
||||
|
||||
if (exactMinPlayers && !minPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players required when searching for exact min players',
|
||||
path: ['minPlayers'],
|
||||
});
|
||||
}
|
||||
if (exactMinPlayers && !minPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Min Players required when searching for exact min players',
|
||||
path: ['minPlayers']
|
||||
});
|
||||
}
|
||||
|
||||
if (exactMaxPlayers && !maxPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Max Players required when searching for exact max players',
|
||||
path: ['maxPlayers'],
|
||||
});
|
||||
}
|
||||
});
|
||||
if (exactMaxPlayers && !maxPlayers) {
|
||||
ctx.addIssue({
|
||||
code: 'custom',
|
||||
message: 'Max Players required when searching for exact max players',
|
||||
path: ['maxPlayers']
|
||||
});
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
export const search_result_schema = z.object({
|
||||
client_id: z.string(),
|
||||
limit: z.number(),
|
||||
skip: z.number(),
|
||||
ids: z.string().array(),
|
||||
list_id: z.string(),
|
||||
kickstarter: z.boolean(),
|
||||
random: z.boolean(),
|
||||
name: z.string(),
|
||||
exact: z.boolean(),
|
||||
fuzzy_match: z.boolean(),
|
||||
designer: z.string(),
|
||||
publisher: z.string(),
|
||||
artist: z.string(),
|
||||
mechanics: z.string(),
|
||||
categories: z.string(),
|
||||
order_by: z.string(),
|
||||
ascending: z.boolean(),
|
||||
min_players: z.number(),
|
||||
max_players: z.number(),
|
||||
min_playtime: z.number(),
|
||||
max_playtime: z.number(),
|
||||
min_age: z.number(),
|
||||
year_published: z.number(),
|
||||
gt_min_players: z.number(),
|
||||
gt_max_players: z.number(),
|
||||
gt_min_playtime: z.number(),
|
||||
gt_max_playtime: z.number(),
|
||||
gt_min_age: z.number(),
|
||||
gt_year_published:z.number(),
|
||||
gt_price: z.bigint(),
|
||||
gt_msrp: z.bigint(),
|
||||
gt_discount: z.bigint(),
|
||||
gt_reddit_count: z.number(),
|
||||
gt_reddit_week_count: z.number(),
|
||||
gt_reddit_day_count: z.number(),
|
||||
lt_min_players: z.number(),
|
||||
lt_max_players: z.number(),
|
||||
lt_min_playtime: z.number(),
|
||||
lt_max_playtime: z.number(),
|
||||
lt_min_age: z.number(),
|
||||
lt_year_published: z.number(),
|
||||
lt_price: z.bigint(),
|
||||
lt_msrp: z.bigint(),
|
||||
lt_discount: z.bigint(),
|
||||
lt_reddit_count: z.number(),
|
||||
lt_reddit_week_count: z.number(),
|
||||
lt_reddit_day_count: z.number(),
|
||||
fields: z.string(),
|
||||
client_id: z.string(),
|
||||
limit: z.number(),
|
||||
skip: z.number(),
|
||||
ids: z.string().array(),
|
||||
list_id: z.string(),
|
||||
kickstarter: z.boolean(),
|
||||
random: z.boolean(),
|
||||
name: z.string(),
|
||||
exact: z.boolean(),
|
||||
fuzzy_match: z.boolean(),
|
||||
designer: z.string(),
|
||||
publisher: z.string(),
|
||||
artist: z.string(),
|
||||
mechanics: z.string(),
|
||||
categories: z.string(),
|
||||
order_by: z.string(),
|
||||
ascending: z.boolean(),
|
||||
min_players: z.number(),
|
||||
max_players: z.number(),
|
||||
min_playtime: z.number(),
|
||||
max_playtime: z.number(),
|
||||
min_age: z.number(),
|
||||
year_published: z.number(),
|
||||
gt_min_players: z.number(),
|
||||
gt_max_players: z.number(),
|
||||
gt_min_playtime: z.number(),
|
||||
gt_max_playtime: z.number(),
|
||||
gt_min_age: z.number(),
|
||||
gt_year_published: z.number(),
|
||||
gt_price: z.bigint(),
|
||||
gt_msrp: z.bigint(),
|
||||
gt_discount: z.bigint(),
|
||||
gt_reddit_count: z.number(),
|
||||
gt_reddit_week_count: z.number(),
|
||||
gt_reddit_day_count: z.number(),
|
||||
lt_min_players: z.number(),
|
||||
lt_max_players: z.number(),
|
||||
lt_min_playtime: z.number(),
|
||||
lt_max_playtime: z.number(),
|
||||
lt_min_age: z.number(),
|
||||
lt_year_published: z.number(),
|
||||
lt_price: z.bigint(),
|
||||
lt_msrp: z.bigint(),
|
||||
lt_discount: z.bigint(),
|
||||
lt_reddit_count: z.number(),
|
||||
lt_reddit_week_count: z.number(),
|
||||
lt_reddit_day_count: z.number(),
|
||||
fields: z.string()
|
||||
});
|
||||
|
||||
export const game_schema = z.object({
|
||||
id: z.string(),
|
||||
handle: z.string(),
|
||||
name: z.string(),
|
||||
url: z.string(),
|
||||
edit_url: z.string(),
|
||||
price: z.number(),
|
||||
price_ca: z.number(),
|
||||
price_uk: z.number(),
|
||||
price_au: z.number(),
|
||||
msrp: z.number(),
|
||||
year_published: z.number(),
|
||||
min_players: z.number(),
|
||||
max_players: z.number(),
|
||||
min_playtime: z.number(),
|
||||
max_playtime: z.number(),
|
||||
min_age: z.number(),
|
||||
description: z.string(),
|
||||
players: z.string(),
|
||||
playtime: z.string()
|
||||
id: z.string(),
|
||||
handle: z.string(),
|
||||
name: z.string(),
|
||||
url: z.string(),
|
||||
edit_url: z.string(),
|
||||
price: z.number(),
|
||||
price_ca: z.number(),
|
||||
price_uk: z.number(),
|
||||
price_au: z.number(),
|
||||
msrp: z.number(),
|
||||
year_published: z.number(),
|
||||
min_players: z.number(),
|
||||
max_players: z.number(),
|
||||
min_playtime: z.number(),
|
||||
max_playtime: z.number(),
|
||||
min_age: z.number(),
|
||||
description: z.string(),
|
||||
players: z.string(),
|
||||
playtime: z.string()
|
||||
});
|
||||
|
||||
// export const game_raw_schema_json = zodToJsonSchema(game_schema, {
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
import { toast } from '$lib/components/toast/toast';
|
||||
import Toast from '$lib/components/toast/Toast.svelte';
|
||||
import '$root/styles/styles.postcss';
|
||||
import '$root/styles/styles.pcss';
|
||||
|
||||
$: {
|
||||
if ($navigating) {
|
||||
|
|
|
|||
|
|
@ -1,33 +1,23 @@
|
|||
/*
|
||||
This module is used by the /todos endpoint to
|
||||
make calls to api.svelte.dev, which stores todos
|
||||
for each user. The leading underscore indicates that this is
|
||||
a private module, _not_ an endpoint — visiting /todos/_api
|
||||
will net you a 404 response.
|
||||
|
||||
(The data on the todo app will expire periodically; no
|
||||
guarantees are made. Don't use it to organize your life.)
|
||||
*/
|
||||
import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
|
||||
import { URLSearchParams } from 'url';
|
||||
|
||||
const base = 'https://api.boardgameatlas.com/api';
|
||||
|
||||
export function boardGameApi(
|
||||
method: string,
|
||||
resource: string,
|
||||
queryParams: Record<string, string>,
|
||||
data?: Record<string, unknown>
|
||||
method: string,
|
||||
resource: string,
|
||||
queryParams: Record<string, string>,
|
||||
data?: Record<string, unknown>
|
||||
) {
|
||||
// console.log('queryParams', queryParams);
|
||||
queryParams.client_id = BOARD_GAME_ATLAS_CLIENT_ID;
|
||||
const urlQueryParams = new URLSearchParams(queryParams);
|
||||
const url = `${base}/${resource}${urlQueryParams ? `?${urlQueryParams}` : ''}`;
|
||||
return fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
},
|
||||
body: data && JSON.stringify(data)
|
||||
});
|
||||
// console.log('queryParams', queryParams);
|
||||
queryParams.client_id = BOARD_GAME_ATLAS_CLIENT_ID;
|
||||
const urlQueryParams = new URLSearchParams(queryParams);
|
||||
const url = `${base}/${resource}${urlQueryParams ? `?${urlQueryParams}` : ''}`;
|
||||
return fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: data && JSON.stringify(data)
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,25 @@
|
|||
import { error } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types'
|
||||
import type { PageServerLoad } from './$types';
|
||||
import { boardGameApi } from '../../api';
|
||||
|
||||
type GamePageParams = {
|
||||
params: {
|
||||
id: string;
|
||||
}
|
||||
}
|
||||
export const load: PageServerLoad = async ({ params, setHeaders }) => {
|
||||
const queryParams = {
|
||||
ids: `${params?.id}`
|
||||
};
|
||||
|
||||
export const load: PageServerLoad = async ({ params }: GamePageParams) => {
|
||||
const queryParams = {
|
||||
ids: `${params?.id}`
|
||||
};
|
||||
|
||||
const response = await boardGameApi('get', `search`, queryParams);
|
||||
const response = await boardGameApi('get', `search`, queryParams);
|
||||
|
||||
if (response.status === 200) {
|
||||
const gameResponse = await response.json();
|
||||
return {
|
||||
game: gameResponse?.games[0]
|
||||
};
|
||||
}
|
||||
if (response.status === 200) {
|
||||
const gameResponse = await response.json();
|
||||
|
||||
throw error(response.status, 'not found');
|
||||
setHeaders({
|
||||
'Cache-Control': 'max-age=3600'
|
||||
});
|
||||
|
||||
return {
|
||||
game: gameResponse?.games[0]
|
||||
};
|
||||
}
|
||||
|
||||
throw error(response.status, 'not found');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -25,7 +25,9 @@
|
|||
$: existsInWishlist = $wishlistStore.find((item: SavedGameType) => item.id === game.id);
|
||||
|
||||
export let data: PageData;
|
||||
export let game: GameType = data?.game;
|
||||
let game: GameType;
|
||||
$: ({ game } = data);
|
||||
// export let game: GameType = data?.game;
|
||||
let seeMore: boolean = false;
|
||||
let firstParagraphEnd = 0;
|
||||
if (game?.description?.indexOf('</p>') > 0) {
|
||||
|
|
@ -223,6 +225,7 @@
|
|||
place-items: center;
|
||||
gap: 1.5rem;
|
||||
margin: 1rem;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.overflow-description {
|
||||
|
|
|
|||
|
|
@ -1,149 +1,203 @@
|
|||
import type { Actions, PageServerLoad, RequestEvent } from '../$types';
|
||||
import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
|
||||
import { error, invalid, type ServerLoadEvent } from '@sveltejs/kit';
|
||||
import type { GameType, Search, SearchQuery } from '$root/lib/types';
|
||||
import { error, fail } from '@sveltejs/kit';
|
||||
import type { GameType, RandomSearch, Search, SearchQuery } from '$root/lib/types';
|
||||
import { mapAPIGameToBoredGame } from '$root/lib/util/gameMapper';
|
||||
import { search_schema } from '$root/lib/zodValidation';
|
||||
import { ZodError } from 'zod';
|
||||
|
||||
export const load: PageServerLoad = () => {
|
||||
return {
|
||||
games: [],
|
||||
totalCount: 0,
|
||||
}
|
||||
}
|
||||
export const load: PageServerLoad = async ({ fetch, url }) => {
|
||||
const formData = Object.fromEntries(url?.searchParams);
|
||||
formData.name = formData?.q;
|
||||
const limit = parseInt(formData?.limit) || 10;
|
||||
const skip = parseInt(formData?.skip) || 0;
|
||||
|
||||
const queryParams: SearchQuery = {
|
||||
order_by: 'rank',
|
||||
ascending: false,
|
||||
limit,
|
||||
skip,
|
||||
client_id: BOARD_GAME_ATLAS_CLIENT_ID,
|
||||
fuzzy_match: true,
|
||||
name: ''
|
||||
};
|
||||
|
||||
try {
|
||||
console.log('Parsing Search Schema');
|
||||
const { name, minAge, minPlayers, maxPlayers, exactMinAge, exactMinPlayers, exactMaxPlayers } =
|
||||
search_schema.parse(formData);
|
||||
|
||||
if (minAge) {
|
||||
if (exactMinAge) {
|
||||
queryParams.min_age = minAge;
|
||||
} else {
|
||||
queryParams.gt_min_age = minAge === 1 ? 0 : minAge - 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (minPlayers) {
|
||||
if (exactMinPlayers) {
|
||||
queryParams.min_players = minPlayers;
|
||||
} else {
|
||||
queryParams.gt_min_players = minPlayers === 1 ? 0 : minPlayers - 1;
|
||||
}
|
||||
}
|
||||
if (maxPlayers) {
|
||||
if (exactMaxPlayers) {
|
||||
queryParams.max_players = maxPlayers;
|
||||
} else {
|
||||
queryParams.lt_max_players = maxPlayers + 1;
|
||||
}
|
||||
}
|
||||
|
||||
if (name) {
|
||||
queryParams.name = name;
|
||||
}
|
||||
} catch (parsingError: unknown) {
|
||||
let errors;
|
||||
if (parsingError instanceof ZodError) {
|
||||
// console.log('Parse error');
|
||||
|
||||
// console.log(parsingError);
|
||||
const { fieldErrors } = parsingError.flatten();
|
||||
console.log(`Errors with user input ${fieldErrors}}`);
|
||||
errors = fieldErrors;
|
||||
//throw error(400, { message: 'There was an error searching for games!' }); // fail(400, { data: formData, errors });
|
||||
}
|
||||
return {
|
||||
errors,
|
||||
name: formData.name,
|
||||
minAge: formData.minAge,
|
||||
minPlayers: formData.minPlayers,
|
||||
maxPlayers: formData.maxPlayers,
|
||||
exactMinPlayers: formData.exactMinPlayers,
|
||||
exactMaxPlayers: formData.exactMaxPlayers,
|
||||
games: [],
|
||||
totalCount: 0,
|
||||
limit,
|
||||
skip
|
||||
};
|
||||
}
|
||||
|
||||
const newQueryParams: Record<string, string> = {};
|
||||
for (const key in queryParams) {
|
||||
// console.log('key', key);
|
||||
// console.log('queryParams[key]', queryParams[key as keyof SearchQuery]);
|
||||
newQueryParams[key] = `${queryParams[key as keyof SearchQuery]}`;
|
||||
}
|
||||
|
||||
const urlQueryParams = new URLSearchParams(newQueryParams);
|
||||
console.log('urlQueryParams', urlQueryParams);
|
||||
|
||||
try {
|
||||
const url = `https://api.boardgameatlas.com/api/search${
|
||||
urlQueryParams ? `?${urlQueryParams}` : ''
|
||||
}`;
|
||||
const response = await fetch(url, {
|
||||
method: 'get',
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
});
|
||||
// console.log('board game response', response);
|
||||
|
||||
if (!response.ok) {
|
||||
console.log('Status not 200', response.status);
|
||||
throw error(response.status);
|
||||
}
|
||||
|
||||
if (response.status === 200) {
|
||||
const gameResponse = await response.json();
|
||||
// console.log('gameResponse', gameResponse);
|
||||
const gameList = gameResponse?.games;
|
||||
const totalCount = gameResponse?.count;
|
||||
console.log('totalCount', totalCount);
|
||||
const games: GameType[] = [];
|
||||
gameList.forEach((game) => {
|
||||
games.push(mapAPIGameToBoredGame(game));
|
||||
});
|
||||
|
||||
// console.log('returning from search', games)
|
||||
|
||||
return {
|
||||
name: formData.name,
|
||||
minAge: formData.minAge,
|
||||
minPlayers: formData.minPlayers,
|
||||
maxPlayers: formData.maxPlayers,
|
||||
exactMinPlayers: formData.exactMinPlayers,
|
||||
exactMaxPlayers: formData.exactMaxPlayers,
|
||||
games,
|
||||
totalCount,
|
||||
limit,
|
||||
skip
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(`Error searching board games ${e}`);
|
||||
}
|
||||
return {
|
||||
games: [],
|
||||
totalCount: 0,
|
||||
limit,
|
||||
skip
|
||||
};
|
||||
};
|
||||
|
||||
export const actions: Actions = {
|
||||
default: async ({ request }: RequestEvent): Promise<any> => {
|
||||
console.log("In search action specific")
|
||||
// Do things in here
|
||||
const formData = Object.fromEntries(await request.formData()) as Search;
|
||||
console.log('formData', formData);
|
||||
console.log('passed in limit:', formData?.limit)
|
||||
console.log('passed in skip:', formData?.skip)
|
||||
const limit = formData?.limit || 10;
|
||||
const skip = formData?.skip || 0;
|
||||
random: async ({ request }: RequestEvent): Promise<any> => {
|
||||
const queryParams: SearchQuery = {
|
||||
order_by: 'rank',
|
||||
ascending: false,
|
||||
client_id: BOARD_GAME_ATLAS_CLIENT_ID,
|
||||
random: true
|
||||
};
|
||||
|
||||
const queryParams: SearchQuery = {
|
||||
order_by: 'rank',
|
||||
ascending: false,
|
||||
limit: +limit,
|
||||
skip: +skip,
|
||||
client_id: BOARD_GAME_ATLAS_CLIENT_ID,
|
||||
fuzzy_match: true,
|
||||
name: ''
|
||||
};
|
||||
const newQueryParams: Record<string, string> = {};
|
||||
for (const key in queryParams) {
|
||||
newQueryParams[key] = `${queryParams[key as keyof SearchQuery]}`;
|
||||
}
|
||||
|
||||
// TODO: Check name length and not search if not advanced search
|
||||
const urlQueryParams = new URLSearchParams(newQueryParams);
|
||||
|
||||
const random = formData?.random === 'on';
|
||||
try {
|
||||
const url = `https://api.boardgameatlas.com/api/search${
|
||||
urlQueryParams ? `?${urlQueryParams}` : ''
|
||||
}`;
|
||||
const response = await fetch(url, {
|
||||
method: 'get',
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
});
|
||||
// console.log('board game response', response);
|
||||
|
||||
if (random) {
|
||||
console.log('Random');
|
||||
queryParams.random = random;
|
||||
} else {
|
||||
try {
|
||||
const {
|
||||
name,
|
||||
minAge,
|
||||
minPlayers,
|
||||
maxPlayers,
|
||||
exactMinAge,
|
||||
exactMinPlayers,
|
||||
exactMaxPlayers
|
||||
} = search_schema.parse(formData);
|
||||
if (!response.ok) {
|
||||
console.log('Status not 200', response.status);
|
||||
throw error(response.status);
|
||||
}
|
||||
|
||||
|
||||
if (minAge) {
|
||||
if (exactMinAge) {
|
||||
queryParams.min_age = minAge;
|
||||
} else {
|
||||
queryParams.gt_min_age = minAge === 1 ? 0 : minAge - 1;
|
||||
}
|
||||
}
|
||||
if (response.status === 200) {
|
||||
const gameResponse = await response.json();
|
||||
// console.log('gameResponse', gameResponse);
|
||||
const gameList = gameResponse?.games;
|
||||
const totalCount = gameResponse?.count;
|
||||
console.log('totalCount', totalCount);
|
||||
const games: GameType[] = [];
|
||||
gameList.forEach((game) => {
|
||||
games.push(mapAPIGameToBoredGame(game));
|
||||
});
|
||||
|
||||
if (minPlayers) {
|
||||
if (exactMinPlayers) {
|
||||
queryParams.min_players = minPlayers;
|
||||
} else {
|
||||
queryParams.gt_min_players = minPlayers === 1 ? 0 : minPlayers - 1;
|
||||
}
|
||||
}
|
||||
if (maxPlayers) {
|
||||
if (exactMaxPlayers) {
|
||||
queryParams.max_players = maxPlayers;
|
||||
} else {
|
||||
queryParams.lt_max_players = maxPlayers + 1;
|
||||
}
|
||||
}
|
||||
// console.log('returning from search', games)
|
||||
|
||||
if (name) {
|
||||
queryParams.name = name;
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
if (error instanceof ZodError) {
|
||||
console.log(error);
|
||||
|
||||
const { fieldErrors: errors } = error.flatten();
|
||||
return invalid(400, { data: formData, errors });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const newQueryParams: Record<string, string> = {};
|
||||
for (const key in queryParams) {
|
||||
console.log('key', key);
|
||||
console.log('queryParams[key]', queryParams[key as keyof SearchQuery]);
|
||||
newQueryParams[key] = `${queryParams[key as keyof SearchQuery]}`;
|
||||
}
|
||||
|
||||
const urlQueryParams = new URLSearchParams(newQueryParams);
|
||||
console.log('urlQueryParams', urlQueryParams);
|
||||
|
||||
try {
|
||||
const url = `https://api.boardgameatlas.com/api/search${urlQueryParams ? `?${urlQueryParams}` : ''
|
||||
}`;
|
||||
const response = await fetch(url, {
|
||||
method: 'get',
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
}
|
||||
});
|
||||
// console.log('board game response', response);
|
||||
|
||||
if (!response.ok) {
|
||||
console.log('Status not 200', response.status);
|
||||
throw error(response.status);
|
||||
}
|
||||
|
||||
if (response.status === 200) {
|
||||
const gameResponse = await response.json();
|
||||
// console.log('gameResponse', gameResponse);
|
||||
const gameList = gameResponse?.games;
|
||||
const totalCount = gameResponse?.count;
|
||||
console.log('totalCount', totalCount);
|
||||
const games: GameType[] = [];
|
||||
gameList.forEach((game) => {
|
||||
games.push(mapAPIGameToBoredGame(game));
|
||||
});
|
||||
|
||||
// console.log('returning from search', games)
|
||||
|
||||
return {
|
||||
games,
|
||||
totalCount,
|
||||
limit: parseInt(limit),
|
||||
skip: parseInt(skip),
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(`Error searching board games ${e}`);
|
||||
}
|
||||
return {
|
||||
games: [],
|
||||
totalCount: 0,
|
||||
limit,
|
||||
skip
|
||||
};
|
||||
}
|
||||
}
|
||||
return {
|
||||
games
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
console.log(`Error searching board games ${e}`);
|
||||
}
|
||||
return {
|
||||
games: []
|
||||
};
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@
|
|||
export let data: PageData;
|
||||
export let form: ActionData;
|
||||
|
||||
console.log('data limit', data?.limit);
|
||||
|
||||
$: if (data?.games) {
|
||||
gameStore.removeAll();
|
||||
gameStore.addAll(data?.games);
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
import { error } from '@sveltejs/kit';
|
||||
import { api } from './api';
|
||||
import type { PageServerLoad, Action } from './$types';
|
||||
|
||||
type Todo = {
|
||||
uid: string;
|
||||
created_at: Date;
|
||||
text: string;
|
||||
done: boolean;
|
||||
pending_delete: boolean;
|
||||
};
|
||||
|
||||
export const load: PageServerLoad = async ({ locals }) => {
|
||||
// locals.userid comes from src/hooks.js
|
||||
const response = await api('GET', `todos/${locals.userid}`);
|
||||
|
||||
if (response.status === 404) {
|
||||
// user hasn't created a todo list.
|
||||
// start with an empty array
|
||||
return {
|
||||
todos: [] as Todo[]
|
||||
};
|
||||
}
|
||||
|
||||
if (response.status === 200) {
|
||||
return {
|
||||
todos: (await response.json()) as Todo[]
|
||||
};
|
||||
}
|
||||
|
||||
throw error(response.status);
|
||||
};
|
||||
|
||||
export const POST: Action = async ({ request, locals }) => {
|
||||
const form = await request.formData();
|
||||
|
||||
await api('POST', `todos/${locals.userid}`, {
|
||||
text: form.get('text')
|
||||
});
|
||||
};
|
||||
|
||||
export const PATCH: Action = async ({ request, locals }) => {
|
||||
const form = await request.formData();
|
||||
|
||||
await api('PATCH', `todos/${locals.userid}/${form.get('uid')}`, {
|
||||
text: form.has('text') ? form.get('text') : undefined,
|
||||
done: form.has('done') ? !!form.get('done') : undefined
|
||||
});
|
||||
};
|
||||
|
||||
export const DELETE: Action = async ({ request, locals }) => {
|
||||
const form = await request.formData();
|
||||
|
||||
await api('DELETE', `todos/${locals.userid}/${form.get('uid')}`);
|
||||
};
|
||||
|
|
@ -1,180 +0,0 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import { enhance } from '$lib/form';
|
||||
import { scale } from 'svelte/transition';
|
||||
import { flip } from 'svelte/animate';
|
||||
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Todos</title>
|
||||
<meta name="description" content="A todo list app" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="todos">
|
||||
<h1>Todos</h1>
|
||||
|
||||
<form
|
||||
class="new"
|
||||
action="/todos"
|
||||
method="post"
|
||||
use:enhance={{
|
||||
result: async ({ form }) => {
|
||||
form.reset();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input name="text" aria-label="Add todo" placeholder="+ tap to add a todo" />
|
||||
</form>
|
||||
|
||||
{#each data.todos as todo (todo.uid)}
|
||||
<div
|
||||
class="todo"
|
||||
class:done={todo.done}
|
||||
transition:scale|local={{ start: 0.7 }}
|
||||
animate:flip={{ duration: 200 }}
|
||||
>
|
||||
<form
|
||||
action="/todos?_method=PATCH"
|
||||
method="post"
|
||||
use:enhance={{
|
||||
pending: ({ data }) => {
|
||||
todo.done = !!data.get('done');
|
||||
}
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="uid" value={todo.uid} />
|
||||
<input type="hidden" name="done" value={todo.done ? '' : 'true'} />
|
||||
<button class="toggle" aria-label="Mark todo as {todo.done ? 'not done' : 'done'}" />
|
||||
</form>
|
||||
|
||||
<form class="text" action="/todos?_method=PATCH" method="post" use:enhance>
|
||||
<input type="hidden" name="uid" value={todo.uid} />
|
||||
<input aria-label="Edit todo" type="text" name="text" value={todo.text} />
|
||||
<button class="save" aria-label="Save todo" />
|
||||
</form>
|
||||
|
||||
<form
|
||||
action="/todos?_method=DELETE"
|
||||
method="post"
|
||||
use:enhance={{
|
||||
pending: () => (todo.pending_delete = true)
|
||||
}}
|
||||
>
|
||||
<input type="hidden" name="uid" value={todo.uid} />
|
||||
<button class="delete" aria-label="Delete todo" disabled={todo.pending_delete} />
|
||||
</form>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.todos {
|
||||
width: 100%;
|
||||
max-width: var(--column-width);
|
||||
margin: var(--column-margin-top) auto 0 auto;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.new {
|
||||
margin: 0 0 0.5rem 0;
|
||||
}
|
||||
|
||||
input {
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
input:focus-visible {
|
||||
box-shadow: inset 1px 1px 6px rgba(0, 0, 0, 0.1);
|
||||
border: 1px solid #ff3e00 !important;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.new input {
|
||||
font-size: 28px;
|
||||
width: 100%;
|
||||
padding: 0.5em 1em 0.3em 1em;
|
||||
box-sizing: border-box;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.todo {
|
||||
display: grid;
|
||||
grid-template-columns: 2rem 1fr 2rem;
|
||||
grid-gap: 0.5rem;
|
||||
align-items: center;
|
||||
margin: 0 0 0.5rem 0;
|
||||
padding: 0.5rem;
|
||||
background-color: white;
|
||||
border-radius: 8px;
|
||||
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
|
||||
transform: translate(-1px, -1px);
|
||||
transition: filter 0.2s, transform 0.2s;
|
||||
}
|
||||
|
||||
.done {
|
||||
transform: none;
|
||||
opacity: 0.4;
|
||||
filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.1));
|
||||
}
|
||||
|
||||
form.text {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.todo input {
|
||||
flex: 1;
|
||||
padding: 0.5em 2em 0.5em 0.8em;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.todo button {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
button.toggle {
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
background-size: 1em auto;
|
||||
}
|
||||
|
||||
.done .toggle {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='22' height='16' viewBox='0 0 22 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 1.5L7.4375 14.5L1.5 8.5909' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
.delete {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.5 5V22H19.5V5H4.5Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M10 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 10V16.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2 5H22' stroke='%23676778' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 5L9.6445 2H14.3885L16 5H8Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
|
||||
opacity: 0.2;
|
||||
}
|
||||
|
||||
.delete:hover,
|
||||
.delete:focus {
|
||||
transition: opacity 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.save {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
opacity: 0;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.5 2H3.5C2.67158 2 2 2.67157 2 3.5V20.5C2 21.3284 2.67158 22 3.5 22H20.5C21.3284 22 22 21.3284 22 20.5V3.5C22 2.67157 21.3284 2 20.5 2Z' fill='%23676778' stroke='%23676778' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M17 2V11H7.5V2H17Z' fill='white' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3Cpath d='M13.5 5.5V7.5' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M5.99844 2H18.4992' stroke='%23676778' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.todo input:focus + .save,
|
||||
.save:focus {
|
||||
transition: opacity 0.2s;
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
/*
|
||||
This module is used by the /todos endpoint to
|
||||
make calls to api.svelte.dev, which stores todos
|
||||
for each user.
|
||||
|
||||
(The data on the todo app will expire periodically; no
|
||||
guarantees are made. Don't use it to organise your life.)
|
||||
*/
|
||||
|
||||
const base = 'https://api.svelte.dev';
|
||||
|
||||
export function api(method: string, resource: string, data?: Record<string, unknown>) {
|
||||
return fetch(`${base}/${resource}`, {
|
||||
method,
|
||||
headers: {
|
||||
'content-type': 'application/json'
|
||||
},
|
||||
body: data && JSON.stringify(data)
|
||||
});
|
||||
}
|
||||
3
src/styles/styles.pcss
Normal file
3
src/styles/styles.pcss
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
@import 'reset.pcss';
|
||||
@import 'global.pcss';
|
||||
@import '$root/styles/theme.pcss';
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
@import 'reset.postcss';
|
||||
@import 'global.postcss';
|
||||
@import 'theme.postcss';
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
import adapter from '@sveltejs/adapter-auto';
|
||||
import preprocess from 'svelte-preprocess';
|
||||
import adapter from '@sveltejs/adapter-vercel';
|
||||
import { vitePreprocess } from '@sveltejs/kit/vite';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
preprocess({
|
||||
postcss: true
|
||||
})
|
||||
vitePreprocess({
|
||||
postcss: true,
|
||||
}),
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter(),
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@ import { sveltekit } from '@sveltejs/kit/vite';
|
|||
import type { UserConfig } from 'vite';
|
||||
|
||||
const config: UserConfig = {
|
||||
plugins: [sveltekit()]
|
||||
plugins: [sveltekit()],
|
||||
test: {
|
||||
include: ['src/**/*.{test,spec}.{js,ts}']
|
||||
}
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
|
|
|||
Loading…
Reference in a new issue