mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Moving form posts to actions slowly.
This commit is contained in:
parent
a3f0d811f9
commit
0864159546
9 changed files with 313 additions and 157 deletions
15
src/app.d.ts
vendored
15
src/app.d.ts
vendored
|
|
@ -1,11 +1,14 @@
|
||||||
/// <reference types="@sveltejs/kit" />
|
|
||||||
|
|
||||||
// See https://kit.svelte.dev/docs/types#app
|
// See https://kit.svelte.dev/docs/types#app
|
||||||
// for information about these interfaces
|
// for information about these interfaces
|
||||||
// and what to do when importing types
|
// and what to do when importing types
|
||||||
declare namespace App {
|
declare namespace App {
|
||||||
// interface Locals {}
|
interface Locals {
|
||||||
// interface Platform {}
|
userid: string;
|
||||||
// interface Session {}
|
}
|
||||||
// interface Stuff {}
|
|
||||||
|
// interface PageData {}
|
||||||
|
|
||||||
|
// interface PageError {}
|
||||||
|
|
||||||
|
// interface Platform {}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,23 +1,16 @@
|
||||||
import type { Handle } from '@sveltejs/kit';
|
import type { Handle } from '@sveltejs/kit';
|
||||||
import * as cookie from 'cookie';
|
|
||||||
|
|
||||||
export const handle: Handle = async ({ event, resolve }) => {
|
export const handle: Handle = async ({ event, resolve }) => {
|
||||||
const cookies = cookie.parse(event.request.headers.get('cookie') || '');
|
let userid = event.cookies.get('userid');
|
||||||
event.locals.userid = cookies['userid'] || crypto.randomUUID();
|
|
||||||
|
|
||||||
const response = await resolve(event);
|
if (!userid) {
|
||||||
|
// if this is the first time the user has visited this app,
|
||||||
|
// set a cookie so that we recognise them when they return
|
||||||
|
userid = crypto.randomUUID();
|
||||||
|
event.cookies.set('userid', userid, { path: '/' });
|
||||||
|
}
|
||||||
|
|
||||||
if (!cookies['userid']) {
|
event.locals.userid = userid;
|
||||||
// if this is the first time the user has visited this app,
|
|
||||||
// set a cookie so that we recognise them when they return
|
|
||||||
response.headers.set(
|
|
||||||
'set-cookie',
|
|
||||||
cookie.serialize('userid', event.locals.userid, {
|
|
||||||
path: '/',
|
|
||||||
httpOnly: true
|
|
||||||
})
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
return response;
|
return resolve(event);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,5 @@
|
||||||
|
import type { PageServerLoad, Actions } from './$types';
|
||||||
|
|
||||||
export const actions: Actions = {
|
export const actions: Actions = {
|
||||||
default: async ({ request, locals }): Promise<any> => {
|
default: async ({ request, locals }): Promise<any> => {
|
||||||
// Do things in here
|
// Do things in here
|
||||||
|
|
|
||||||
|
|
@ -1,165 +1,191 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import type { GameType, SavedGameType } from '$root/lib/types';
|
import { enhance, applyAction } from '$app/forms';
|
||||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
import type { PageData } from './$types';
|
||||||
import { boredState } from '$root/lib/stores/boredState';
|
import { ToastType, type GameType, type SavedGameType } from '$root/lib/types';
|
||||||
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
|
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||||
import Game from '$lib/components/game/index.svelte';
|
import { boredState } from '$root/lib/stores/boredState';
|
||||||
import TextSearch from '$lib/components/search/textSearch/index.svelte';
|
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
|
||||||
import RandomSearch from '$lib/components/search/random/index.svelte';
|
import Game from '$lib/components/game/index.svelte';
|
||||||
import Random from '$lib/components/random/index.svelte';
|
import TextSearch from '$lib/components/search/textSearch/index.svelte';
|
||||||
import Pagination from '$lib/components/pagination/index.svelte';
|
import RandomSearch from '$lib/components/search/random/index.svelte';
|
||||||
|
import Random from '$lib/components/random/index.svelte';
|
||||||
|
import Pagination from '$lib/components/pagination/index.svelte';
|
||||||
|
import { toast } from '$root/lib/components/toast/toast';
|
||||||
|
|
||||||
let pageSize: number;
|
export let data: PageData;
|
||||||
let currentPage: number;
|
console.log('Formed data:', JSON.stringify(data));
|
||||||
$: totalItems = 0;
|
let pageSize: number;
|
||||||
console.log('totalItems', totalItems);
|
let currentPage: number;
|
||||||
|
$: totalItems = 0;
|
||||||
|
console.log('totalItems', totalItems);
|
||||||
|
|
||||||
async function handleSearch(event: SubmitEvent) {
|
async function handleSearch(event: SubmitEvent) {
|
||||||
boredState.update((n) => ({ ...n, loading: true }));
|
boredState.update((n) => ({ ...n, loading: true }));
|
||||||
const form = event.target as HTMLFormElement;
|
const form = event.target as HTMLFormElement;
|
||||||
console.log('form', form);
|
console.log('form', form);
|
||||||
const response = await fetch('/api/game', {
|
const response = await fetch('/api/game', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { accept: 'application/json' },
|
headers: { accept: 'application/json' },
|
||||||
body: new FormData(form)
|
body: new FormData(form)
|
||||||
});
|
});
|
||||||
const responseData = await response.json();
|
const responseData = await response.json();
|
||||||
boredState.update((n) => ({ ...n, loading: false }));
|
boredState.update((n) => ({ ...n, loading: false }));
|
||||||
gameStore.removeAll();
|
gameStore.removeAll();
|
||||||
gameStore.addAll(responseData?.games);
|
gameStore.addAll(responseData?.games);
|
||||||
totalItems = responseData?.totalCount;
|
totalItems = responseData?.totalCount;
|
||||||
}
|
}
|
||||||
|
|
||||||
// async function handleItemsPerPageChange(event) {
|
// async function handleItemsPerPageChange(event) {
|
||||||
// const perPage = event?.detail;
|
// const perPage = event?.detail;
|
||||||
// if ($gameStore.length )
|
// if ($gameStore.length )
|
||||||
// }
|
// }
|
||||||
async function handleNextPageEvent(event: CustomEvent) {
|
async function handleNextPageEvent(event: CustomEvent) {
|
||||||
console.log('Next page called', event);
|
console.log('Next page called', event);
|
||||||
boredState.update((n) => ({ ...n, loading: true }));
|
boredState.update((n) => ({ ...n, loading: true }));
|
||||||
const form = event.target as HTMLFormElement;
|
const form = event.target as HTMLFormElement;
|
||||||
console.log('form', form);
|
console.log('form', form);
|
||||||
const response = await fetch('/api/game', {
|
const response = await fetch('/api/game', {
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
headers: { accept: 'application/json' },
|
headers: { accept: 'application/json' },
|
||||||
body: new FormData(form)
|
body: new FormData(form)
|
||||||
});
|
});
|
||||||
const responseData = await response.json();
|
const responseData = await response.json();
|
||||||
boredState.update((n) => ({ ...n, loading: false }));
|
boredState.update((n) => ({ ...n, loading: false }));
|
||||||
gameStore.removeAll();
|
gameStore.removeAll();
|
||||||
gameStore.addAll(responseData?.games);
|
gameStore.addAll(responseData?.games);
|
||||||
const skip = $boredState?.search?.skip;
|
const skip = $boredState?.search?.skip;
|
||||||
const pageSize = $boredState?.search?.pageSize;
|
const pageSize = $boredState?.search?.pageSize;
|
||||||
const currentPage = $boredState?.search?.currentPage;
|
const currentPage = $boredState?.search?.currentPage;
|
||||||
const totalCount = responseData?.totalCount;
|
const totalCount = responseData?.totalCount;
|
||||||
boredState.update((n) => ({
|
boredState.update((n) => ({
|
||||||
...n,
|
...n,
|
||||||
search: { totalCount, skip, pageSize, currentPage }
|
search: { totalCount, skip, pageSize, currentPage }
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
|
|
||||||
let isOpen: boolean = false;
|
let isOpen: boolean = false;
|
||||||
let gameToRemove: GameType | SavedGameType;
|
let gameToRemove: GameType | SavedGameType;
|
||||||
console.log('isOpen', isOpen);
|
console.log('isOpen', isOpen);
|
||||||
|
|
||||||
interface RemoveGameEvent extends Event {
|
interface RemoveGameEvent extends Event {
|
||||||
detail: GameType | SavedGameType;
|
detail: GameType | SavedGameType;
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleRemoveGame(event: RemoveGameEvent) {
|
function handleRemoveGame(event: RemoveGameEvent) {
|
||||||
console.log('event', event);
|
console.log('event', event);
|
||||||
gameToRemove = event?.detail;
|
gameToRemove = event?.detail;
|
||||||
boredState.update((n) => ({
|
boredState.update((n) => ({
|
||||||
...n,
|
...n,
|
||||||
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
|
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
|
||||||
}));
|
}));
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>Bored Game | Home</title>
|
<title>Bored Game | Home</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<h1>Search Boardgames!</h1>
|
<h1>Search Boardgames!</h1>
|
||||||
<p style="margin: 1rem 0;">
|
<p style="margin: 1rem 0;">
|
||||||
Input your requirements to search for board game that match your criteria.
|
Input your requirements to search for board game that match your criteria.
|
||||||
</p>
|
</p>
|
||||||
<div class="game-search">
|
<div class="game-search">
|
||||||
<form on:submit|preventDefault={handleSearch} method="post">
|
<form
|
||||||
<TextSearch showButton advancedSearch />
|
action="/search?/search"
|
||||||
</form>
|
method="post"
|
||||||
<section>
|
use:enhance={() => {
|
||||||
<p>Or pick a random game!</p>
|
boredState.update((n) => ({ ...n, loading: true }));
|
||||||
<div class="random-buttons">
|
return async ({ result }) => {
|
||||||
<RandomSearch />
|
boredState.update((n) => ({ ...n, loading: false }));
|
||||||
<Random />
|
// `result` is an `ActionResult` object
|
||||||
</div>
|
if (result.type === 'error') {
|
||||||
</section>
|
toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
|
||||||
|
await applyAction(result);
|
||||||
|
} else {
|
||||||
|
gameStore.removeAll();
|
||||||
|
gameStore.addAll(result?.data?.games);
|
||||||
|
totalItems = result?.data?.totalCount;
|
||||||
|
console.log(`Frontend result: ${JSON.stringify(result)}`);
|
||||||
|
toast.send('Sucess!', { duration: 3000, type: ToastType.INFO, dismissible: true });
|
||||||
|
await applyAction(result);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TextSearch showButton advancedSearch />
|
||||||
|
</form>
|
||||||
|
<section>
|
||||||
|
<p>Or pick a random game!</p>
|
||||||
|
<div class="random-buttons">
|
||||||
|
<RandomSearch />
|
||||||
|
<Random />
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if $gameStore?.length > 0}
|
{#if $gameStore?.length > 0}
|
||||||
<div class="games">
|
<div class="games">
|
||||||
<h1>Games Found:</h1>
|
<h1>Games Found:</h1>
|
||||||
<div class="games-list">
|
<div class="games-list">
|
||||||
{#each $gameStore as game (game.id)}
|
{#each $gameStore as game (game.id)}
|
||||||
<Game on:removeGameEvent={handleRemoveGame} {game} />
|
<Game on:removeGameEvent={handleRemoveGame} {game} />
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
<Pagination
|
<Pagination
|
||||||
{pageSize}
|
{pageSize}
|
||||||
{currentPage}
|
{currentPage}
|
||||||
{totalItems}
|
{totalItems}
|
||||||
forwardText="Next"
|
forwardText="Next"
|
||||||
backwardText="Prev"
|
backwardText="Prev"
|
||||||
pageSizes={[10, 25, 50, 100]}
|
pageSizes={[10, 25, 50, 100]}
|
||||||
on:nextPageEvent={handleNextPageEvent}
|
on:nextPageEvent={handleNextPageEvent}
|
||||||
on:previousPageEvent={(event) => console.log('Prev page called', event)}
|
on:previousPageEvent={(event) => console.log('Prev page called', event)}
|
||||||
on:perPageEvent={(event) => console.log('Per page called', event)}
|
on:perPageEvent={(event) => console.log('Per page called', event)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.game-search {
|
.game-search {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
|
||||||
section {
|
section {
|
||||||
display: grid;
|
display: grid;
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.games {
|
.games {
|
||||||
margin: 2rem 0rem;
|
margin: 2rem 0rem;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin-bottom: 2rem;
|
margin-bottom: 2rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.games-list {
|
.games-list {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
grid-template-columns: repeat(3, minmax(200px, 1fr));
|
||||||
gap: 2rem;
|
gap: 2rem;
|
||||||
|
|
||||||
@media (max-width: 800px) {
|
@media (max-width: 800px) {
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
grid-template-columns: 1fr;
|
grid-template-columns: 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.random-buttons {
|
.random-buttons {
|
||||||
display: flex;
|
display: flex;
|
||||||
place-content: space-between;
|
place-content: space-between;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
|
|
||||||
@media (max-width: 650px) {
|
@media (max-width: 650px) {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr;
|
grid-template-columns: 1fr 1fr;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
13
src/routes/about/+page.svelte
Normal file
13
src/routes/about/+page.svelte
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<svelte:head>
|
||||||
|
<title>Bored Game | About</title>
|
||||||
|
<meta name="description" content="About Bored Game" />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="content">
|
||||||
|
<h1>About Bored Game</h1>
|
||||||
|
<p>
|
||||||
|
One day we were bored and wanted to play one of our board games. Our problem was that we didn't
|
||||||
|
know which one to play.
|
||||||
|
</p>
|
||||||
|
<p>Rather than just pick one I decided to make this overcomplicated version of choice.</p>
|
||||||
|
</div>
|
||||||
9
src/routes/about/+page.ts
Normal file
9
src/routes/about/+page.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
||||||
|
import { dev } from '$app/environment';
|
||||||
|
|
||||||
|
// we don't need any JS on this page, though we'll load
|
||||||
|
// it in dev so that we get hot module replacement...
|
||||||
|
export const csr = dev;
|
||||||
|
|
||||||
|
// since there's no dynamic data here, we can prerender
|
||||||
|
// it so that it gets served as a static asset in prod
|
||||||
|
export const prerender = true;
|
||||||
6
src/routes/search/+page.server.ts
Normal file
6
src/routes/search/+page.server.ts
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
import type { Actions } from '../$types';
|
||||||
|
import { Games } from '$root/search/actions';
|
||||||
|
|
||||||
|
export const actions: Actions = {
|
||||||
|
search: Games.search,
|
||||||
|
}
|
||||||
1
src/routes/search/+page.svelte
Normal file
1
src/routes/search/+page.svelte
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
<h1>Search</h1>
|
||||||
|
|
@ -1,10 +1,113 @@
|
||||||
|
import type { RequestEvent } from '@sveltejs/kit';
|
||||||
|
import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
|
||||||
|
import type { GameType, SearchQuery } from "$root/lib/types";
|
||||||
|
import { mapAPIGameToBoredGame } from "$root/lib/util/gameMapper";
|
||||||
|
|
||||||
interface Actions {
|
interface Actions {
|
||||||
[key: string]: any // Action
|
[key: string]: any // Action
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Games: Actions = {
|
export const Games: Actions = {
|
||||||
search: async function search({ request, locals }): Promise<any> {
|
search: async ({ request, locals }: RequestEvent): Promise<any> => {
|
||||||
|
console.log("In search action specific")
|
||||||
|
// Do things in here
|
||||||
|
const form = await request.formData();
|
||||||
|
console.log('form', form);
|
||||||
|
const queryParams: SearchQuery = {
|
||||||
|
order_by: 'rank',
|
||||||
|
ascending: false,
|
||||||
|
limit: 20,
|
||||||
|
client_id: BOARD_GAME_ATLAS_CLIENT_ID
|
||||||
|
};
|
||||||
|
|
||||||
|
const id = form.get('id');
|
||||||
|
const ids = form.get('ids');
|
||||||
|
const minAge = form.get('minAge');
|
||||||
|
const minPlayers = form.get('minPlayers');
|
||||||
|
const maxPlayers = form.get('maxPlayers');
|
||||||
|
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;
|
||||||
|
|
||||||
|
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 (id) {
|
||||||
|
queryParams.ids = new Array(`${id}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ids) {
|
||||||
|
// TODO: Pass in ids array from localstorage / game store
|
||||||
|
queryParams.ids = new Array(ids);
|
||||||
|
}
|
||||||
|
|
||||||
|
queryParams.random = random;
|
||||||
|
console.log('queryParams', queryParams);
|
||||||
|
|
||||||
|
const newQueryParams: Record<string, string> = {};
|
||||||
|
for (const key in queryParams) {
|
||||||
|
newQueryParams[key] = `${queryParams[key as keyof typeof queryParams]}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
const urlQueryParams = new URLSearchParams(newQueryParams);
|
||||||
|
|
||||||
|
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.status === 404) {
|
||||||
|
// user hasn't created a todo list.
|
||||||
|
// start with an empty array
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
games: [],
|
||||||
|
totalCount: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
if (response.status === 200) {
|
||||||
|
const gameResponse = await response.json();
|
||||||
|
const gameList = gameResponse?.games;
|
||||||
|
const games: GameType[] = [];
|
||||||
|
gameList.forEach((game: GameType) => {
|
||||||
|
games.push(mapAPIGameToBoredGame(game));
|
||||||
|
});
|
||||||
|
console.log('games', games);
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
games,
|
||||||
|
totalCount: games.length
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return { success: false };
|
||||||
}
|
}
|
||||||
// create: async function create({ request, locals }): Promise<any> {
|
// create: async function create({ request, locals }): Promise<any> {
|
||||||
// const data = await getFormDataObject<any>(request);
|
// const data = await getFormDataObject<any>(request);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue