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

Mergin searces.

Browse source
This commit is contained in:
Bradley Shellnut 2022-08-07 14:53:21 -07:00
parent d7665d1a94
commit bb08f03b9c
5 changed files with 127 additions and 123 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -17,12 +17,12 @@
"@rgossiaux/svelte-headlessui": "1.0.2", "@rgossiaux/svelte-headlessui": "1.0.2",
"@rgossiaux/svelte-heroicons": "^0.1.2", "@rgossiaux/svelte-heroicons": "^0.1.2",
"@sveltejs/adapter-auto": "1.0.0-next.64", "@sveltejs/adapter-auto": "1.0.0-next.64",
"@sveltejs/kit": "1.0.0-next.403", "@sveltejs/kit": "1.0.0-next.405",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"@types/node": "^18.6.4", "@types/node": "^18.6.4",
"@typescript-eslint/eslint-plugin": "^5.32.0", "@typescript-eslint/eslint-plugin": "^5.32.0",
"@typescript-eslint/parser": "^5.32.0", "@typescript-eslint/parser": "^5.32.0",
"carbon-components-svelte": "^0.67.5", "carbon-components-svelte": "^0.67.7",
"carbon-icons-svelte": "^11.2.0", "carbon-icons-svelte": "^11.2.0",
"eslint": "^8.21.0", "eslint": "^8.21.0",
"eslint-config-prettier": "^8.1.0", "eslint-config-prettier": "^8.1.0",

17
pnpm-lock.yaml
View file

@ -9,13 +9,13 @@ specifiers:
'@rgossiaux/svelte-headlessui': 1.0.2 '@rgossiaux/svelte-headlessui': 1.0.2
'@rgossiaux/svelte-heroicons': ^0.1.2 '@rgossiaux/svelte-heroicons': ^0.1.2
'@sveltejs/adapter-auto': 1.0.0-next.64 '@sveltejs/adapter-auto': 1.0.0-next.64
'@sveltejs/kit': 1.0.0-next.403 '@sveltejs/kit': 1.0.0-next.405
'@types/cookie': ^0.5.1 '@types/cookie': ^0.5.1
'@types/feather-icons': ^4.7.0 '@types/feather-icons': ^4.7.0
'@types/node': ^18.6.4 '@types/node': ^18.6.4
'@typescript-eslint/eslint-plugin': ^5.32.0 '@typescript-eslint/eslint-plugin': ^5.32.0
'@typescript-eslint/parser': ^5.32.0 '@typescript-eslint/parser': ^5.32.0
carbon-components-svelte: ^0.67.5 carbon-components-svelte: ^0.67.7
carbon-icons-svelte: ^11.2.0 carbon-icons-svelte: ^11.2.0
cookie: ^0.5.0 cookie: ^0.5.0
eslint: ^8.21.0 eslint: ^8.21.0
@ -49,12 +49,12 @@ devDependencies:
'@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.49.0 '@rgossiaux/svelte-headlessui': 1.0.2_svelte@3.49.0
'@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.49.0 '@rgossiaux/svelte-heroicons': 0.1.2_svelte@3.49.0
'@sveltejs/adapter-auto': 1.0.0-next.64 '@sveltejs/adapter-auto': 1.0.0-next.64
'@sveltejs/kit': 1.0.0-next.403_svelte@3.49.0+vite@3.0.4 '@sveltejs/kit': 1.0.0-next.405_svelte@3.49.0+vite@3.0.4
'@types/cookie': 0.5.1 '@types/cookie': 0.5.1
'@types/node': 18.6.4 '@types/node': 18.6.4
'@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy '@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy
'@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq '@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
carbon-components-svelte: 0.67.5 carbon-components-svelte: 0.67.7
carbon-icons-svelte: 11.2.0 carbon-icons-svelte: 11.2.0
eslint: 8.21.0 eslint: 8.21.0
eslint-config-prettier: 8.5.0_eslint@8.21.0 eslint-config-prettier: 8.5.0_eslint@8.21.0
@ -268,8 +268,8 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@sveltejs/kit/1.0.0-next.403_svelte@3.49.0+vite@3.0.4: /@sveltejs/kit/1.0.0-next.405_svelte@3.49.0+vite@3.0.4:
resolution: {integrity: sha512-pKlmthl1SZkbx671Jp+LBoRne0vNzsjSgta9iRhqW/bt/0mx/IjlMd/NOeLuJGo30dAJdefrySoSamiaq47M/g==} resolution: {integrity: sha512-jHSa74F7k+hC+0fof75g/xm/+1M5sM66Qt6v8eLLMSgjkp36Lb5xOioBhbl6w0NYoE5xysLsBWuu+yHytfvCBA==}
engines: {node: '>=16.9'} engines: {node: '>=16.9'}
hasBin: true hasBin: true
requiresBuild: true requiresBuild: true
@ -281,6 +281,7 @@ packages:
chokidar: 3.5.3 chokidar: 3.5.3
sade: 1.8.1 sade: 1.8.1
svelte: 3.49.0 svelte: 3.49.0
tiny-glob: 0.2.9
vite: 3.0.4_sass@1.54.3 vite: 3.0.4_sass@1.54.3
transitivePeerDependencies: transitivePeerDependencies:
- diff-match-patch - diff-match-patch
@ -601,8 +602,8 @@ packages:
engines: {node: '>=6'} engines: {node: '>=6'}
dev: true dev: true
/carbon-components-svelte/0.67.5: /carbon-components-svelte/0.67.7:
resolution: {integrity: sha512-2azoyIy5xuWYOW+voMJe5p1J72bi8L+BpxkZR0FXCxv/+eK8wrDySaLRmyeYku/qNcD1/PAm4Fl4JZoakeGW4A==} resolution: {integrity: sha512-fx/O38tzw9uLiquqqB9zOI5ARA8pSBTOt1gSbgMNwLADYW0weAsr1dLvLnOmSLmXr3T0jaPgWHSkuEv4VTeo/w==}
dependencies: dependencies:
flatpickr: 4.6.9 flatpickr: 4.6.9
dev: true dev: true

144
src/lib/components/search/advancedSearch/index.svelte
View file

@ -2,23 +2,23 @@
import { boredState } from '$lib/stores/boredState'; import { boredState } from '$lib/stores/boredState';
import { gameStore } from '$lib/stores/gameSearchStore'; import { gameStore } from '$lib/stores/gameSearchStore';
async function handleSubmit(event: SubmitEvent) { // async function handleSubmit(event: SubmitEvent) {
// submitting = true; // // submitting = true;
boredState.set({ loading: true }); // boredState.set({ 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/games', { // const response = await fetch('/api/games', {
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();
// submitting = false; // // submitting = false;
boredState.set({ loading: false }); // boredState.set({ loading: false });
gameStore.removeAll(); // gameStore.removeAll();
gameStore.addAll(responseData?.games); // gameStore.addAll(responseData?.games);
// games = responseData?.games; // // games = responseData?.games;
} // }
let submitting = $boredState?.loading; let submitting = $boredState?.loading;
let minAge = 1; let minAge = 1;
@ -28,62 +28,62 @@
let exactMaxPlayers = false; let exactMaxPlayers = false;
</script> </script>
<form on:submit|preventDefault={handleSubmit} method="post"> <!-- <form on:submit|preventDefault={handleSubmit} method="post"> -->
<fieldset aria-busy={submitting} disabled={submitting}> <fieldset class="advanced-search" aria-busy={submitting} disabled={submitting}>
<div> <div>
<label for="minAge"> <label for="minAge">
Min Age Min Age
<input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} /> <input id="minAge" name="minAge" bind:value={minAge} type="number" min={1} max={120} />
</label> </label>
</div> </div>
<div> <div>
<label for="minPlayers"> <label for="minPlayers">
Min Players Min Players
<input <input
id="minPlayers" id="minPlayers"
name="minPlayers" name="minPlayers"
bind:value={minPlayers} bind:value={minPlayers}
type="number" type="number"
min={0} min={0}
max={50} max={50}
/> />
</label> </label>
<label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;"> <label for="exactMinPlayers" style="display: flex; gap: 1rem; place-items: center;">
<span>Exact?</span> <span>Exact?</span>
<input <input
id="exactMinPlayers" id="exactMinPlayers"
type="checkbox" type="checkbox"
name="exactMinPlayers" name="exactMinPlayers"
bind:checked={exactMinPlayers} bind:checked={exactMinPlayers}
/> />
</label> </label>
</div> </div>
<div> <div>
<label for="maxPlayers"> <label for="maxPlayers">
Max Players Max Players
<input <input
id="maxPlayers" id="maxPlayers"
name="maxPlayers" name="maxPlayers"
bind:value={maxPlayers} bind:value={maxPlayers}
type="number" type="number"
min={0} min={0}
max={50} max={50}
/> />
</label> </label>
<label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;"> <label for="exactMaxPlayers" style="display: flex; gap: 1rem; place-items: center;">
<span>Exact?</span> <span>Exact?</span>
<input <input
id="exactMaxPlayers" id="exactMaxPlayers"
type="checkbox" type="checkbox"
name="exactMaxPlayers" name="exactMaxPlayers"
bind:checked={exactMaxPlayers} bind:checked={exactMaxPlayers}
/> />
</label> </label>
</div> </div>
</fieldset> </fieldset>
<button type="submit" disabled={submitting}>Submit</button> <!-- <button type="submit" disabled={submitting}>Submit</button> -->
</form>
<!-- </form> -->
<style lang="scss"> <style lang="scss">
button { button {
border-radius: 10px; border-radius: 10px;

63
src/lib/components/search/textSearch/index.svelte
View file

@ -1,21 +1,7 @@
<script lang="ts"> <script lang="ts">
import { boredState } from '$lib/stores/boredState'; import { boredState } from '$lib/stores/boredState';
import { gameStore } from '$lib/stores/gameSearchStore'; import { gameStore } from '$lib/stores/gameSearchStore';
import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
async function handleSearch(event: SubmitEvent) {
boredState.set({ loading: true });
const form = event.target as HTMLFormElement;
console.log('form', form);
const response = await fetch('/api/game', {
method: 'POST',
headers: { accept: 'application/json' },
body: new FormData(form)
});
const responseData = await response.json();
boredState.set({ loading: false });
gameStore.removeAll();
gameStore.addAll(responseData?.games);
}
export let showButton: boolean = false; export let showButton: boolean = false;
export let advancedSearch: boolean = false; export let advancedSearch: boolean = false;
@ -25,30 +11,29 @@
let name = ''; let name = '';
</script> </script>
<form on:submit|preventDefault={handleSearch} method="post"> <!-- <form on:submit|preventDefault={handleSearch} method="post"> -->
<fieldset aria-busy={submitting} disabled={submitting}> <fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
<label for="name"> <label for="name">
Search Search
<input <input
id="name" id="name"
name="name" name="name"
bind:value={name} bind:value={name}
type="text" type="text"
aria-label="Search boardgame" aria-label="Search boardgame"
placeholder="Search boardgame" placeholder="Search boardgame"
/> />
{#if showButton} </label>
<button class="btn" type="submit" disabled={submitting}>Search</button> </fieldset>
{/if} {#if advancedSearch}
</label> <AdvancedSearch />
</fieldset> {/if}
</form> {#if showButton}
<button class="btn" type="submit" disabled={submitting}>Submit</button>
{/if}
<!-- </form> -->
<style lang="scss"> <style lang="scss">
form {
display: grid;
place-items: start;
}
h1 { h1 {
width: 100%; width: 100%;
} }
@ -64,8 +49,8 @@
margin: 1rem; margin: 1rem;
@media (max-width: 850px) { @media (max-width: 850px) {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
} }
</style> </style>

22
src/routes/index.svelte
View file

@ -6,6 +6,22 @@
import RandomSearch from '$lib/components/search/random/index.svelte'; import RandomSearch from '$lib/components/search/random/index.svelte';
import Random from '$lib/components/random/index.svelte'; import Random from '$lib/components/random/index.svelte';
import { gameStore } from '$lib/stores/gameSearchStore'; import { gameStore } from '$lib/stores/gameSearchStore';
import { boredState } from '$root/lib/stores/boredState';
async function handleSearch(event: SubmitEvent) {
boredState.set({ loading: true });
const form = event.target as HTMLFormElement;
console.log('form', form);
const response = await fetch('/api/game', {
method: 'POST',
headers: { accept: 'application/json' },
body: new FormData(form)
});
const responseData = await response.json();
boredState.set({ loading: false });
gameStore.removeAll();
gameStore.addAll(responseData?.games);
}
</script> </script>
<svelte:head> <svelte:head>
@ -15,8 +31,10 @@
<h1>Search Boardgames!</h1> <h1>Search Boardgames!</h1>
<p>Input your requirements to search for board game that match your criteria</p> <p>Input your requirements to search for board game that match your criteria</p>
<div class="game-search"> <div class="game-search">
<TextSearch showButton /> <form on:submit|preventDefault={handleSearch} method="post">
<AdvancedSearch /> <TextSearch showButton advancedSearch />
</form>
<!-- <AdvancedSearch /> -->
<div class="random-buttons"> <div class="random-buttons">
<RandomSearch /> <RandomSearch />
<Random /> <Random />