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

Removing APIs, automatically saving to local storage on add/remove, added export to JSON button.

Browse source
This commit is contained in:
Bradley Shellnut 2022-10-26 22:38:30 -04:00
parent 8b090b5a4c
commit 7c947b7f48
14 changed files with 507 additions and 678 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -22,8 +22,6 @@
"@types/node": "^18.11.7",
"@typescript-eslint/eslint-plugin": "^5.41.0",
"@typescript-eslint/parser": "^5.41.0",
"carbon-components-svelte": "^0.70.12",
"carbon-icons-svelte": "^11.4.0",
"eslint": "^8.26.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-svelte3": "^4.0.0",

18
pnpm-lock.yaml
View file

@ -15,8 +15,6 @@ specifiers:
'@types/node': ^18.11.7
'@typescript-eslint/eslint-plugin': ^5.41.0
'@typescript-eslint/parser': ^5.41.0
carbon-components-svelte: ^0.70.12
carbon-icons-svelte: ^11.4.0
cookie: ^0.5.0
eslint: ^8.26.0
eslint-config-prettier: ^8.1.0
@ -56,8 +54,6 @@ devDependencies:
'@types/node': 18.11.7
'@typescript-eslint/eslint-plugin': 5.41.0_huremdigmcnkianavgfk3x6iou
'@typescript-eslint/parser': 5.41.0_wyqvi574yv7oiwfeinomdzmc3m
carbon-components-svelte: 0.70.12
carbon-icons-svelte: 11.4.0
eslint: 8.26.0
eslint-config-prettier: 8.5.0_eslint@8.26.0
eslint-plugin-svelte3: 4.0.0_l6ppk7eerpslmlsqymzic46t24
@ -650,16 +646,6 @@ packages:
engines: {node: '>=6'}
dev: true
/carbon-components-svelte/0.70.12:
resolution: {integrity: sha512-CSVXWr53kSP/6ITaLxcCd/7rZStM3Mgl1tXedlwgvkViqDgCexWzSsK1u2RoSptmqL5IggUehabcETD6tm5EFg==}
dependencies:
flatpickr: 4.6.9
dev: true
/carbon-icons-svelte/11.4.0:
resolution: {integrity: sha512-p/llZde2kP2BI9SOqM+QFKGfQnYrW+4dVxF1rAYriEADXDsjt9EYlh+KpQ5qf4JpXAq+e2+TB/r/lIG1xdUbAQ==}
dev: true
/chalk/4.1.2:
resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==}
engines: {node: '>=10'}
@ -1462,10 +1448,6 @@ packages:
rimraf: 3.0.2
dev: true
/flatpickr/4.6.9:
resolution: {integrity: sha512-F0azNNi8foVWKSF+8X+ZJzz8r9sE1G4hl06RyceIaLvyltKvDl6vqk9Lm/6AUUCi5HWaIjiUbk7UpeE/fOXOpw==}
dev: true
/flatted/3.2.7:
resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==}
dev: true

5
src/lib/components/dialog/RemoveCollectionDialog.svelte
View file

@ -7,12 +7,17 @@
DialogTitle
} from '@rgossiaux/svelte-headlessui';
import { boredState } from '$root/lib/stores/boredState';
import { collectionStore } from '$root/lib/stores/collectionStore';
import { removeFromCollection } from '$root/lib/util/manipulateCollection';
import { browser } from '$app/environment';
function removeGame() {
if ($boredState?.dialog?.additionalData) {
removeFromCollection($boredState?.dialog?.additionalData);
}
if (browser) {
localStorage.collection = JSON.stringify($collectionStore);
}
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
}

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

@ -5,6 +5,7 @@
import type { GameType, SavedGameType } from '$lib/types';
import { collectionStore } from '$lib/stores/collectionStore';
import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
import { browser } from '$app/environment';
export let game: GameType | SavedGameType;
export let minimal: boolean = false;
@ -44,15 +45,21 @@
aria-label="Remove from collection"
class="btn"
type="button"
on:click={() => removeGame()}>Remove <MinusCircleIcon width="24" height="24" /></button
on:click={() => {
removeGame();
}}>Remove <MinusCircleIcon width="24" height="24" /></button
>
{:else}
<button
aria-label="Add to collection"
class="btn"
type="button"
on:click={() => addToCollection(game)}
>Add to collection <PlusCircleIcon width="24" height="24" /></button
on:click={() => {
addToCollection(game);
if (browser) {
localStorage.collection = JSON.stringify($collectionStore);
}
}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
>
{/if}
</article>

30
src/lib/components/preferences/gameCollection.svelte
View file

@ -2,17 +2,30 @@
import { browser } from '$app/environment';
import { collectionStore } from '$root/lib/stores/collectionStore';
import { ToastType } from '$root/lib/types';
import { SaveIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
import { SaveIcon, ShareIcon, TrashIcon } from '@rgossiaux/svelte-heroicons/outline';
import { toast } from '../toast/toast';
function saveCollection() {
console.log('Saving collection');
console.log('collectionStore', $collectionStore);
if (!browser) return;
localStorage.collection = JSON.stringify($collectionStore);
toast.send('Saved collection', { duration: 3000, type: ToastType.INFO });
}
function exportCollection() {
if (!browser) return;
const collectionBlob = new Blob([JSON.stringify($collectionStore)], {
type: 'application/json;charset=utf-8'
});
let url = window.URL || window.webkitURL;
let link = url.createObjectURL(collectionBlob);
let a = document.createElement('a');
a.setAttribute('download', `collection.json`);
a.setAttribute('href', link);
a.click();
document.body.removeChild(a);
toast.send('Exported collection', { duration: 3000, type: ToastType.INFO });
}
function clearCollection() {
if (!browser) return;
localStorage.collection = [];
@ -25,6 +38,9 @@
<span class="collection-title">Your Collection</span>
</div>
<div class="collection-buttons">
<button type="button" aria-label="Export Collection" on:click={() => exportCollection()}
><ShareIcon width="24" height="24" />Export</button
>
<button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
><SaveIcon width="24" height="24" />Save</button
>
@ -34,7 +50,7 @@
</div>
</div>
<style>
<style lang="scss">
:global(.collection-title) {
padding-bottom: var(--spacing-8);
font-size: var(--font-24);
@ -46,7 +62,11 @@
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 6rem;
// gap: 6rem;
@media (min-width: 480px) {
gap: 3rem;
}
}
button {

14
src/lib/components/preferences/profile.svelte
View file

@ -124,13 +124,23 @@
max-width: 180px;
}
// @media (min-width: 650px) {
// .preferences {
// width: 500px;
// }
// .preferences .options > :global(*) {
// gap: var(--spacing-64);
// }
// }
@media (min-width: 480px) {
.preferences {
width: 420px;
width: 500px;
}
.preferences .options > :global(*) {
gap: var(--spacing-64);
gap: var(--spacing-32);
}
}
</style>

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

@ -1,4 +1,5 @@
<script lang="ts">
import type { ActionData } from './$types';
import { boredState } from '$lib/stores/boredState';
export let form: ActionData;

2
src/lib/components/search/random/index.svelte
View file

@ -31,6 +31,7 @@
action="/search"
method="POST"
use:enhance={() => {
gameStore.removeAll();
boredState.update((n) => ({ ...n, loading: true }));
return async ({ result }) => {
boredState.update((n) => ({ ...n, loading: false }));
@ -38,7 +39,6 @@
// `result` is an `ActionResult` object
if (result.type === 'success') {
console.log('In success');
gameStore.removeAll();
const resultGames = result?.data?.games;
if (resultGames?.length <= 0) {
toast.send('No results!', { duration: 3000, type: ToastType.INFO, dismissible: true });

2
src/routes/+page.svelte
View file

@ -80,6 +80,7 @@
action="/search"
method="post"
use:enhance={() => {
gameStore.removeAll();
boredState.update((n) => ({ ...n, loading: true }));
return async ({ result }) => {
boredState.update((n) => ({ ...n, loading: false }));
@ -87,7 +88,6 @@
// `result` is an `ActionResult` object
if (result.type === 'success') {
console.log('In success');
gameStore.removeAll();
const resultGames = result?.data?.games;
if (resultGames?.length <= 0) {
toast.send('No results!', { duration: 3000, type: ToastType.INFO, dismissible: true });

64
src/routes/api/game/+server.ts
View file

@ -1,64 +0,0 @@
import { json as json$1 } from '@sveltejs/kit';
import type { RequestHandler } from '@sveltejs/kit';
import type { GameType, SearchQuery } from '$lib/types';
import { mapAPIGameToBoredGame } from '$lib/util/gameMapper';
export const POST: RequestHandler = async ({ request }) => {
const form = await request.formData();
console.log('form', form);
const queryParams: SearchQuery = {
order_by: 'rank',
ascending: false,
limit: 10,
skip: 0,
client_id: import.meta.env.VITE_PUBLIC_CLIENT_ID,
fuzzy_match: true,
name: ''
};
queryParams.name = `${form.get('name')}`;
const newQueryParams = {};
for (const key in queryParams) {
console.log('key', key);
console.log('queryParams[key]', queryParams[key]);
newQueryParams[key] = `${queryParams[key]}`;
}
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 json$1({
games: []
});
}
if (response.status === 200) {
const gameResponse = await response.json();
const gameList = gameResponse?.games;
const totalCount = gameResponse?.count;
console.log('totalCount', totalCount);
const games: GameType[] = [];
gameList.forEach((game) => {
games.push(mapAPIGameToBoredGame(game));
});
return json$1({
totalCount,
games
});
}
return new Response(undefined, { status: response.status });
};

28
src/routes/api/game/[id]/+server.ts
View file

@ -1,28 +0,0 @@
import { json as json$1 } from '@sveltejs/kit';
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 json$1({
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 json$1({
game: gameResponse?.games[0]
});
}
return new Response(undefined, { status: response.status });
};

100
src/routes/api/games/+server.ts
View file

@ -1,100 +0,0 @@
import { json as json$1 } from '@sveltejs/kit';
import type { RequestHandler } from '@sveltejs/kit';
import type { GameType, SearchQuery } from '$lib/types';
import { mapAPIGameToBoredGame } from '$lib/util/gameMapper';
export const POST: RequestHandler = async ({ request }) => {
const form = await request.formData();
console.log('form', form);
const queryParams: SearchQuery = {
order_by: 'rank',
ascending: false,
limit: 20,
client_id: import.meta.env.VITE_PUBLIC_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 json$1({
games: []
});
}
if (response.status === 200) {
const gameResponse = await response.json();
const gameList = gameResponse?.games;
const games: GameType[] = [];
gameList.forEach((game) => {
games.push(mapAPIGameToBoredGame(game));
});
console.log('games', games);
return {
games
};
}
return new Response(undefined, { status: response.status });
};

19
src/routes/game/[id]/+page.server.ts
View file

@ -1,7 +1,6 @@
import { error } from '@sveltejs/kit';
import type { PageServerLoad } from './$types'
import { boardGameApi } from '../../api';
// import { Games } from '$lib/db/actions';
type GamePageParams = {
params: {
@ -9,33 +8,19 @@ type GamePageParams = {
}
}
// export const actions = {
// default Games.create,
// }
export const load: PageServerLoad = async ({ params }: GamePageParams) => {
console.log('params', params);
const queryParams = {
ids: `${params?.id}`
};
// console.log('queryParams', queryParams);
const response = await boardGameApi('get', `search`, queryParams);
if (response.status === 404) {
return {
game: []
};
}
if (response.status === 200) {
const gameResponse = await response.json();
// console.log('gameResponse', gameResponse);
// const games = gameResponse?.games;
// console.log('game response', gameResponse?.games[0]);
return {
game: gameResponse?.games[0]
};
}
throw error(response.status);
// throw new Error("@migration task: Migrate this return statement (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292699)");
throw error(response.status, 'not found');
};

17
src/routes/game/[id]/+page.svelte
View file

@ -13,6 +13,7 @@
import { addToCollection } from '$lib/util/manipulateCollection';
import type { PageData } from './$types';
import { boredState } from '$root/lib/stores/boredState';
import { browser } from '$app/environment';
$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
@ -34,6 +35,9 @@
...n,
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: game }
}));
if (browser) {
localStorage.collection = JSON.stringify($collectionStore);
}
}
</script>
@ -54,7 +58,9 @@
<p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
<p>Playtime: {game.playtime} minutes</p>
<p>Minimum Age: {game.min_age}</p>
{#if +game?.price !== 0.0}
<p>Price: ${game?.price}</p>
{/if}
<a
class="with-icon"
style="display: flex; gap: 1rem;"
@ -69,8 +75,15 @@
>Remove from collection <MinusCircleIcon width="24" height="24" /></button
>
{:else}
<button class="btn" type="button" on:click={() => addToCollection(game)}
>Add to collection <PlusCircleIcon width="24" height="24" /></button
<button
class="btn"
type="button"
on:click={() => {
addToCollection(game);
if (browser) {
localStorage.collection = JSON.stringify($collectionStore);
}
}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
>
{/if}
</div>