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

Merge pull request #2 from BradNut/merge-searches

Browse source 
Merge searches
This commit is contained in:
Bradley Shellnut 2022-08-08 16:39:53 -07:00 committed by GitHub
commit 31ec4c981b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 238 additions and 132 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -22,7 +22,7 @@
"@types/node": "^18.6.4",
"@typescript-eslint/eslint-plugin": "^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",
"eslint": "^8.21.0",
"eslint-config-prettier": "^8.1.0",

8
pnpm-lock.yaml
View file

@ -15,7 +15,7 @@ specifiers:
'@types/node': ^18.6.4
'@typescript-eslint/eslint-plugin': ^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
cookie: ^0.5.0
eslint: ^8.21.0
@ -54,7 +54,7 @@ devDependencies:
'@types/node': 18.6.4
'@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy
'@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
eslint: 8.21.0
eslint-config-prettier: 8.5.0_eslint@8.21.0
@ -601,8 +601,8 @@ packages:
engines: {node: '>=6'}
dev: true
/carbon-components-svelte/0.67.5:
resolution: {integrity: sha512-2azoyIy5xuWYOW+voMJe5p1J72bi8L+BpxkZR0FXCxv/+eK8wrDySaLRmyeYku/qNcD1/PAm4Fl4JZoakeGW4A==}
/carbon-components-svelte/0.67.7:
resolution: {integrity: sha512-fx/O38tzw9uLiquqqB9zOI5ARA8pSBTOt1gSbgMNwLADYW0weAsr1dLvLnOmSLmXr3T0jaPgWHSkuEv4VTeo/w==}
dependencies:
flatpickr: 4.6.9
dev: true

21
src/lib/components/game/index.svelte
View file

@ -1,13 +1,14 @@
<script lang="ts">
import { fade } from 'svelte/transition';
import { ToastType, type GameType } from '$lib/types';
import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
import { ToastType, type GameType, type SavedGameType } from '$lib/types';
import { collectionStore } from '$lib/stores/collectionStore';
import { toast } from '$lib/components/toast/toast';
import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
export let game: GameType;
export let detailed: boolean = false;
$: existsInCollection = $collectionStore.find((item: GameType) => item.id === game.id);
$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
</script>
<article class="game-container" transition:fade>
@ -29,12 +30,12 @@
{/if}
</div>
{#if existsInCollection}
<button class="btn" type="button" on:click={() => removeFromCollection(game)}
>Remove from collection -</button
<button aria-label="Remove from collection" class="btn" type="button" on:click={() => removeFromCollection(game)}
>Remove <MinusCircleIcon class="icon" /></button
>
{:else}
<button class="btn" type="button" on:click={() => addToCollection(game)}
>Add to collection +</button
<button aria-label="Add to collection" class="btn" type="button" on:click={() => addToCollection(game)}
>Add to collection <PlusCircleIcon class="icon" /></button
>
{/if}
</article>
@ -49,12 +50,20 @@
}
button {
display: flex;
justify-content: space-between;
gap: 1rem;
width: 100%;
border-radius: 10px;
padding: 1rem;
background-color: var(--color-btn-primary-active);
}
/* :global(.icon) {
width: 24px;
height: 24px;
} */
.game-container {
display: flex;
flex-wrap: wrap;

15
src/lib/components/random/index.svelte
View file

@ -3,15 +3,22 @@
import { gameStore } from '$lib/stores/gameSearchStore';
import { collectionStore } from '$lib/stores/collectionStore';
import { toast } from '$lib/components/toast/toast';
import { ToastType } from '$lib/types';
import { ToastType, type SavedGameType } from '$lib/types';
function getRandomCollectionGame() {
async function getRandomCollectionGame() {
if ($collectionStore.length > 0) {
boredState.set({ loading: true });
let randomNumber: number = Math.round(Math.random() * $collectionStore.length - 1);
if ($collectionStore.at(randomNumber)) {
gameStore.removeAll();
gameStore.add($collectionStore.at(randomNumber)!);
const randomGame: SavedGameType = $collectionStore.at(randomNumber)!;
const response = await fetch(`/api/game/${randomGame?.id}`, {
method: 'GET',
headers: { accept: 'application/json' },
});
const responseData = await response.json();
console.log('responseData', responseData);
gameStore.add(responseData?.game);
boredState.set({ loading: false });
} else {
toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
@ -27,6 +34,6 @@
}
</script>
<button class="btn" type="button" on:click={getRandomCollectionGame}
<button class="btn" type="button" on:click={() => getRandomCollectionGame()}
>Random from collection 🎲</button
>

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

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

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

@ -1,21 +1,14 @@
<script lang="ts">
import { fade } from "svelte/transition";
import {
Disclosure,
DisclosureButton,
DisclosurePanel,
} from "@rgossiaux/svelte-headlessui";
import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid";
import { boredState } from '$lib/stores/boredState';
import { gameStore } from '$lib/stores/gameSearchStore';
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);
}
import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
export let showButton: boolean = false;
export let advancedSearch: boolean = false;
@ -25,8 +18,9 @@
let name = '';
</script>
<form on:submit|preventDefault={handleSearch} method="post">
<fieldset aria-busy={submitting} disabled={submitting}>
<!-- <form on:submit|preventDefault={handleSearch} method="post"> -->
<div class="search">
<fieldset class="text-search" aria-busy={submitting} disabled={submitting}>
<label for="name">
Search
<input
@ -37,35 +31,63 @@
aria-label="Search boardgame"
placeholder="Search boardgame"
/>
{#if showButton}
<button class="btn" type="submit" disabled={submitting}>Search</button>
{/if}
</label>
</fieldset>
</form>
{#if advancedSearch}
<Disclosure let:open>
<DisclosureButton class="disclosure-button">
<span>Advanced Search?</span>
<ChevronRightIcon class="icon disclosure-icon" style={open ? "transform: rotate(90deg); transition: transform 0.5s ease;" : "transform: rotate(0deg); transition: transform 0.5s ease;"} />
</DisclosureButton>
{#if open}
<div transition:fade>
<!-- Using `static`, `DisclosurePanel` is always rendered,
and ignores the `open` state -->
<DisclosurePanel static>
<AdvancedSearch />
</DisclosurePanel>
</div>
{/if}
</Disclosure>
{/if}
</div>
{#if showButton}
<button class="btn" type="submit" disabled={submitting}>Submit</button>
{/if}
<!-- </form> -->
<style lang="scss">
form {
.search {
display: grid;
place-items: start;
gap: 1rem;
}
:global(.disclosure-button) {
display: flex;
gap: 0.25rem;
place-items: center;
}
h1 {
width: 100%;
}
button {
padding: 1rem;
margin: 1.5rem 0;
}
label {
display: grid;
grid-template-columns: auto auto auto;
grid-template-columns: auto auto;
gap: 1rem;
place-content: start;
place-items: center;
margin: 1rem;
@media (max-width: 850px) {
display: flex;
flex-wrap: wrap;
display: flex;
flex-wrap: wrap;
}
}
</style>

10
src/lib/stores/collectionStore.ts
View file

@ -1,23 +1,23 @@
import { writable } from 'svelte/store';
import type { GameType } from '$lib/types';
import type { SavedGameType } from '$lib/types';
// Custom store
const state = () => {
const { subscribe, set, update } = writable<GameType[]>([]);
const { subscribe, set, update } = writable<SavedGameType[]>([]);
function addAll(games: GameType[]) {
function addAll(games: SavedGameType[]) {
for (const game of games) {
add(game);
}
}
function add(game: GameType) {
function add(game: SavedGameType) {
update((store) => [...store, game]);
}
function remove(id: string) {
update((store) => {
const newStore = store.filter((item: GameType) => item.id !== id);
const newStore = store.filter((item: SavedGameType) => item.id !== id);
return [...newStore];
});
}

4
src/lib/stores/gameSearchStore.ts
View file

@ -3,7 +3,7 @@ import type { GameType } from '$lib/types';
// Custom store
const newGameStore = () => {
const { subscribe, update } = writable<GameType[]>([]);
const { subscribe, set, update } = writable<GameType[]>([]);
function add(game: GameType) {
update((store) => [...store, game]);
@ -26,7 +26,7 @@ const newGameStore = () => {
});
}
return { subscribe, add, addAll, remove, removeAll };
return { subscribe, set, update, add, addAll, remove, removeAll };
};
export const gameStore = newGameStore();

5
src/lib/types.ts
View file

@ -18,6 +18,11 @@ export type ToastData = {
message: string;
};
export type SavedGameType = {
id: string;
name: string;
}
export type GameType = {
id: string;
handle: string;

11
src/lib/util/manipulateCollection.ts
View file

@ -1,9 +1,16 @@
import { collectionStore } from '$lib/stores/collectionStore';
import { toast } from '$lib/components/toast/toast';
import { ToastType, type GameType } from '$lib/types';
import { ToastType, type GameType, type SavedGameType } from '$lib/types';
function convertToSavedGame(game: GameType): SavedGameType {
return {
id: game.id,
name: game.name,
};
}
export function addToCollection(game: GameType) {
collectionStore.add(game);
collectionStore.add(convertToSavedGame(game));
toast.send("Added to collection", { duration: 3000, type: ToastType.INFO });
}

6
src/routes/__layout.svelte
View file

@ -7,6 +7,7 @@
import Portal from '$lib/Portal.svelte';
import { boredState } from '$lib/stores/boredState';
import { collectionStore } from '$lib/stores/collectionStore';
import { gameStore } from '$lib/stores/gameSearchStore';
import { toast } from '$lib/components/toast/toast';
// import 'carbon-components-svelte/css/all.css';
import '$root/styles/styles.scss';
@ -18,11 +19,10 @@
console.log('collectionEmpty', collectionEmpty);
console.log('localStorage.collection', localStorage.collection);
if (
browser &&
collectionEmpty &&
localStorage &&
localStorage.collection &&
localStorage.collection !== 0
localStorage.collection.length !== 0
) {
const collection = JSON.parse(localStorage.collection);
console.log('collection', collection);
@ -36,7 +36,7 @@
</script>
{#if dev}
<Toy register={{ boredState, collectionStore, toast }} />
<Toy register={{ boredState, collectionStore, gameStore, toast }} />
{/if}
<Transition transition={{ type: 'fade', duration: 250 }}>
<div class="wrapper">

33
src/routes/api/game/[id]/index.ts Normal file
View file

@ -0,0 +1,33 @@
import { boardGameApi } from '$root/routes/_api';
import type { RequestHandler } from '@sveltejs/kit';
export const GET: RequestHandler = async ({ params }) => {
const queryParams = {
ids: `${params?.id}`
};
console.log('queryParams', queryParams);
const response = await boardGameApi('get', `search`, queryParams);
if (response.status === 404) {
return {
body: {
games: []
}
};
}
if (response.status === 200) {
const gameResponse = await response.json();
// console.log('gameResponse', gameResponse);
// const games = gameResponse?.games;
console.log('game', gameResponse?.games[0]);
return {
body: {
game: gameResponse?.games[0]
}
};
}
return {
status: response.status
};
};

2
src/routes/api/game/index.ts
View file

@ -54,7 +54,7 @@ export const POST: RequestHandler = async ({ request }) => {
});
return {
body: {
games: gameResponse?.games
games
}
};
}

4
src/routes/game/[id].svelte
View file

@ -2,10 +2,10 @@
import { fade } from 'svelte/transition';
import Icon from '$lib/components/Icon.svelte';
import { collectionStore } from '$lib/stores/collectionStore';
import type { GameType } from '$lib/types';
import type { GameType, SavedGameType } from '$lib/types';
import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
$: existsInCollection = $collectionStore.find((item: GameType) => item.id === game.id);
$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
export let game: GameType;
let seeMore: boolean = false;
console.log(game?.description?.indexOf('</p>'));

24
src/routes/index.svelte
View file

@ -6,6 +6,22 @@
import RandomSearch from '$lib/components/search/random/index.svelte';
import Random from '$lib/components/random/index.svelte';
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>
<svelte:head>
@ -15,8 +31,10 @@
<h1>Search Boardgames!</h1>
<p>Input your requirements to search for board game that match your criteria</p>
<div class="game-search">
<TextSearch showButton />
<AdvancedSearch />
<form on:submit|preventDefault={handleSearch} method="post">
<TextSearch showButton advancedSearch />
</form>
<!-- <AdvancedSearch /> -->
<div class="random-buttons">
<RandomSearch />
<Random />
@ -81,7 +99,7 @@
grid-template-columns: 1fr 1fr;
}
@media (max-width: 550px) {
@media (max-width: 650px) {
grid-template-columns: 1fr;
}
}

5
src/styles/global.scss
View file

@ -271,4 +271,9 @@ ol {
padding: var(--spacing-20) 0;
background-color: var(--color-placeholder);
border-radius: var(--radius-base);
}
.icon {
width: 24px;
height: 24px;
}