mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Removing APIs, automatically saving to local storage on add/remove, added export to JSON button.
This commit is contained in:
parent
8b090b5a4c
commit
7c947b7f48
14 changed files with 507 additions and 678 deletions
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,82 +1,87 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
Dialog,
|
||||
DialogDescription,
|
||||
DialogOverlay,
|
||||
DialogTitle
|
||||
} from '@rgossiaux/svelte-headlessui';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
import { removeFromCollection } from '$root/lib/util/manipulateCollection';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
Dialog,
|
||||
DialogDescription,
|
||||
DialogOverlay,
|
||||
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);
|
||||
}
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}
|
||||
function removeGame() {
|
||||
if ($boredState?.dialog?.additionalData) {
|
||||
removeFromCollection($boredState?.dialog?.additionalData);
|
||||
}
|
||||
if (browser) {
|
||||
localStorage.collection = JSON.stringify($collectionStore);
|
||||
}
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}
|
||||
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
</script>
|
||||
|
||||
<Dialog
|
||||
open={isOpen}
|
||||
on:close={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}
|
||||
static
|
||||
open={isOpen}
|
||||
on:close={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}
|
||||
static
|
||||
>
|
||||
<div transition:fade>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<div class="dialog">
|
||||
<DialogTitle>Remove from collection</DialogTitle>
|
||||
<DialogDescription>Are you sure you want to remove from your collection?</DialogDescription>
|
||||
<div transition:fade>
|
||||
<DialogOverlay class="dialog-overlay" />
|
||||
<div class="dialog">
|
||||
<DialogTitle>Remove from collection</DialogTitle>
|
||||
<DialogDescription>Are you sure you want to remove from your collection?</DialogDescription>
|
||||
|
||||
<div class="dialog-footer">
|
||||
<button on:click={removeGame}>Remove</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}>Cancel</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="dialog-footer">
|
||||
<button on:click={removeGame}>Remove</button>
|
||||
<button
|
||||
on:click={() => {
|
||||
boredState.update((n) => ({ ...n, dialog: { isOpen: false } }));
|
||||
}}>Cancel</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Dialog>
|
||||
|
||||
<style lang="scss">
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-input-bg);
|
||||
padding: 2rem;
|
||||
min-width: 400px;
|
||||
.dialog {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
border-radius: 10px;
|
||||
background-color: var(--clr-input-bg);
|
||||
padding: 2rem;
|
||||
min-width: 400px;
|
||||
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
button {
|
||||
display: flex;
|
||||
place-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--color-btn-primary-active-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,112 +1,119 @@
|
|||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
|
||||
import type { GameType, SavedGameType } from '$lib/types';
|
||||
import { collectionStore } from '$lib/stores/collectionStore';
|
||||
import { addToCollection, removeFromCollection } from '$lib/util/manipulateCollection';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { MinusCircleIcon, PlusCircleIcon } from '@rgossiaux/svelte-heroicons/outline';
|
||||
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;
|
||||
export let detailed: boolean = false;
|
||||
export let game: GameType | SavedGameType;
|
||||
export let minimal: boolean = false;
|
||||
export let detailed: boolean = false;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function removeGame() {
|
||||
dispatch('removeGameEvent', game);
|
||||
}
|
||||
function removeGame() {
|
||||
dispatch('removeGameEvent', game);
|
||||
}
|
||||
|
||||
$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
|
||||
$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
|
||||
</script>
|
||||
|
||||
<article class="game-container" transition:fade>
|
||||
<div class="game-info">
|
||||
<h2>{game.name}</h2>
|
||||
<a class="thumbnail" href={`/game/${game.id}`}>
|
||||
<img width="140" height="140" src={game.thumb_url} alt={`Image of ${game.name}`} />
|
||||
</a>
|
||||
</div>
|
||||
<div class="game-info">
|
||||
<h2>{game.name}</h2>
|
||||
<a class="thumbnail" href={`/game/${game.id}`}>
|
||||
<img width="140" height="140" src={game.thumb_url} alt={`Image of ${game.name}`} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{#if !minimal}
|
||||
<div class="game-details">
|
||||
<p>{game.year_published}</p>
|
||||
<p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
|
||||
<p>{game.playtime} minutes</p>
|
||||
<p>Minimum Age: {game.min_age}</p>
|
||||
<a href={`/game/${game.id}`}>View Game</a>
|
||||
{#if detailed}
|
||||
<div class="description">{@html game.description}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if existsInCollection}
|
||||
<button
|
||||
aria-label="Remove from collection"
|
||||
class="btn"
|
||||
type="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
|
||||
>
|
||||
{/if}
|
||||
{#if !minimal}
|
||||
<div class="game-details">
|
||||
<p>{game.year_published}</p>
|
||||
<p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
|
||||
<p>{game.playtime} minutes</p>
|
||||
<p>Minimum Age: {game.min_age}</p>
|
||||
<a href={`/game/${game.id}`}>View Game</a>
|
||||
{#if detailed}
|
||||
<div class="description">{@html game.description}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
{#if existsInCollection}
|
||||
<button
|
||||
aria-label="Remove from collection"
|
||||
class="btn"
|
||||
type="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);
|
||||
if (browser) {
|
||||
localStorage.collection = JSON.stringify($collectionStore);
|
||||
}
|
||||
}}>Add to collection <PlusCircleIcon width="24" height="24" /></button
|
||||
>
|
||||
{/if}
|
||||
</article>
|
||||
|
||||
<style lang="scss">
|
||||
img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
}
|
||||
|
||||
.game-container {
|
||||
/* display: grid; */
|
||||
/* grid-template-rows: minmax(25px, 50px) 1fr minmax(50px, 75px); */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.game-container {
|
||||
/* display: grid; */
|
||||
/* grid-template-rows: minmax(25px, 50px) 1fr minmax(50px, 75px); */
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media (max-width: 650px) {
|
||||
max-width: none;
|
||||
}
|
||||
@media (max-width: 650px) {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
gap: var(--spacing-16);
|
||||
padding: var(--spacing-16) var(--spacing-16);
|
||||
transition: all 0.3s;
|
||||
border-radius: 8px;
|
||||
background-color: var(--primary);
|
||||
&:hover {
|
||||
background-color: hsla(222, 9%, 65%, 1);
|
||||
}
|
||||
gap: var(--spacing-16);
|
||||
padding: var(--spacing-16) var(--spacing-16);
|
||||
transition: all 0.3s;
|
||||
border-radius: 8px;
|
||||
background-color: var(--primary);
|
||||
&:hover {
|
||||
background-color: hsla(222, 9%, 65%, 1);
|
||||
}
|
||||
|
||||
.game-info {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin: 0.2rem;
|
||||
}
|
||||
.game-info {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
margin: 0.2rem;
|
||||
}
|
||||
|
||||
.game-details {
|
||||
p,
|
||||
a {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
.game-details {
|
||||
p,
|
||||
a {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
max-height: 50px;
|
||||
}
|
||||
}
|
||||
.btn {
|
||||
max-height: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,57 +1,77 @@
|
|||
<script lang="ts">
|
||||
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 { toast } from '../toast/toast';
|
||||
import { browser } from '$app/environment';
|
||||
import { collectionStore } from '$root/lib/stores/collectionStore';
|
||||
import { ToastType } from '$root/lib/types';
|
||||
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 saveCollection() {
|
||||
if (!browser) return;
|
||||
localStorage.collection = JSON.stringify($collectionStore);
|
||||
toast.send('Saved collection', { duration: 3000, type: ToastType.INFO });
|
||||
}
|
||||
|
||||
function clearCollection() {
|
||||
if (!browser) return;
|
||||
localStorage.collection = [];
|
||||
toast.send('Cleared 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 = [];
|
||||
toast.send('Cleared collection', { duration: 3000, type: ToastType.INFO });
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<span class="collection-title">Your Collection</span>
|
||||
</div>
|
||||
<div class="collection-buttons">
|
||||
<button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
|
||||
><SaveIcon width="24" height="24" />Save</button
|
||||
>
|
||||
<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}
|
||||
><TrashIcon width="24" height="24" />Clear</button
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<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
|
||||
>
|
||||
<button type="button" aria-label="Clear saved collection" on:click={() => clearCollection()}
|
||||
><TrashIcon width="24" height="24" />Clear</button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
:global(.collection-title) {
|
||||
padding-bottom: var(--spacing-8);
|
||||
font-size: var(--font-24);
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
}
|
||||
<style lang="scss">
|
||||
:global(.collection-title) {
|
||||
padding-bottom: var(--spacing-8);
|
||||
font-size: var(--font-24);
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
:global(.collection-buttons) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
gap: 6rem;
|
||||
}
|
||||
:global(.collection-buttons) {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
// gap: 6rem;
|
||||
|
||||
button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
gap: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,136 +1,146 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
|
||||
import { CogIcon } from '@rgossiaux/svelte-heroicons/outline';
|
||||
import Themes from './themes.svelte';
|
||||
import GameCollection from './gameCollection.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
|
||||
import { CogIcon } from '@rgossiaux/svelte-heroicons/outline';
|
||||
import Themes from './themes.svelte';
|
||||
import GameCollection from './gameCollection.svelte';
|
||||
</script>
|
||||
|
||||
<div class="container">
|
||||
<Popover let:open class="popover">
|
||||
<PopoverButton aria-label="Preferences">
|
||||
<CogIcon width="24" height="24" />
|
||||
</PopoverButton>
|
||||
<Popover let:open class="popover">
|
||||
<PopoverButton aria-label="Preferences">
|
||||
<CogIcon width="24" height="24" />
|
||||
</PopoverButton>
|
||||
|
||||
{#if open}
|
||||
<div transition:fade={{ duration: 100 }}>
|
||||
<PopoverPanel class="popover-panel" static>
|
||||
<div class="preferences">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
class="arrow"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
id="inside"
|
||||
d="M23 24H1L11.0909 1.98341C11.4474 1.20562 12.5526 1.20562 12.9091 1.98341L23 24Z"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
id="outside"
|
||||
d="M12.8944 1.78885L24 24H23L12.9021 2.88628C12.5396 2.12822 11.4604 2.12822 11.0979 2.88628L1 24H0L11.1056 1.78885C11.4741 1.05181 12.5259 1.0518 12.8944 1.78885Z"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
{#if open}
|
||||
<div transition:fade={{ duration: 100 }}>
|
||||
<PopoverPanel class="popover-panel" static>
|
||||
<div class="preferences">
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
class="arrow"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
id="inside"
|
||||
d="M23 24H1L11.0909 1.98341C11.4474 1.20562 12.5526 1.20562 12.9091 1.98341L23 24Z"
|
||||
fill="none"
|
||||
/>
|
||||
<path
|
||||
id="outside"
|
||||
d="M12.8944 1.78885L24 24H23L12.9021 2.88628C12.5396 2.12822 11.4604 2.12822 11.0979 2.88628L1 24H0L11.1056 1.78885C11.4741 1.05181 12.5259 1.0518 12.8944 1.78885Z"
|
||||
fill="none"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<span class="title">Preferences</span>
|
||||
<span class="title">Preferences</span>
|
||||
|
||||
<div class="options">
|
||||
<Themes />
|
||||
<GameCollection />
|
||||
</div>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</div>
|
||||
{/if}
|
||||
</Popover>
|
||||
<div class="options">
|
||||
<Themes />
|
||||
<GameCollection />
|
||||
</div>
|
||||
</div>
|
||||
</PopoverPanel>
|
||||
</div>
|
||||
{/if}
|
||||
</Popover>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
z-index: 10;
|
||||
}
|
||||
.container {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.container :global(.popover) {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.container :global(.popover) {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container :global(.popover-panel) {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: -22px;
|
||||
z-index: 10;
|
||||
}
|
||||
.container :global(.popover-panel) {
|
||||
position: absolute;
|
||||
top: 48px;
|
||||
right: -22px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.preferences {
|
||||
background-image: var(--clr-menu-bg);
|
||||
padding: var(--spacing-24);
|
||||
border: 1px solid var(--clr-menu-border);
|
||||
border-radius: var(--rounded-20);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
.preferences {
|
||||
background-image: var(--clr-menu-bg);
|
||||
padding: var(--spacing-24);
|
||||
border: 1px solid var(--clr-menu-border);
|
||||
border-radius: var(--rounded-20);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.preferences .arrow {
|
||||
position: absolute;
|
||||
top: -23px;
|
||||
right: 22px;
|
||||
}
|
||||
.preferences .arrow {
|
||||
position: absolute;
|
||||
top: -23px;
|
||||
right: 22px;
|
||||
}
|
||||
|
||||
.preferences .arrow #inside {
|
||||
fill: var(--clr-menu-arrow-bg);
|
||||
}
|
||||
.preferences .arrow #inside {
|
||||
fill: var(--clr-menu-arrow-bg);
|
||||
}
|
||||
|
||||
.preferences .arrow #outside {
|
||||
fill: var(--clr-menu-border);
|
||||
}
|
||||
.preferences .arrow #outside {
|
||||
fill: var(--clr-menu-border);
|
||||
}
|
||||
|
||||
.preferences .title {
|
||||
display: block;
|
||||
padding-bottom: var(--spacing-8);
|
||||
font-size: var(--font-24);
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid var(--clr-menu-border);
|
||||
}
|
||||
.preferences .title {
|
||||
display: block;
|
||||
padding-bottom: var(--spacing-8);
|
||||
font-size: var(--font-24);
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
border-bottom: 1px solid var(--clr-menu-border);
|
||||
}
|
||||
|
||||
.preferences .options {
|
||||
font-weight: 500;
|
||||
color: var(--clr-menu-text);
|
||||
}
|
||||
.preferences .options {
|
||||
font-weight: 500;
|
||||
color: var(--clr-menu-text);
|
||||
}
|
||||
|
||||
.preferences .options > :global(*) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--spacing-32);
|
||||
padding: var(--spacing-24) 0;
|
||||
}
|
||||
.preferences .options > :global(*) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--spacing-32);
|
||||
padding: var(--spacing-24) 0;
|
||||
}
|
||||
|
||||
.preferences .options > :global(*:not(:last-child)) {
|
||||
border-bottom: 1px solid var(--clr-menu-border);
|
||||
}
|
||||
.preferences .options > :global(*:not(:last-child)) {
|
||||
border-bottom: 1px solid var(--clr-menu-border);
|
||||
}
|
||||
|
||||
.preferences .options > :global(*:last-child) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.preferences .options > :global(*:last-child) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.preferences .options span {
|
||||
max-width: 180px;
|
||||
}
|
||||
.preferences .options span {
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.preferences {
|
||||
width: 420px;
|
||||
}
|
||||
// @media (min-width: 650px) {
|
||||
// .preferences {
|
||||
// width: 500px;
|
||||
// }
|
||||
|
||||
.preferences .options > :global(*) {
|
||||
gap: var(--spacing-64);
|
||||
}
|
||||
}
|
||||
// .preferences .options > :global(*) {
|
||||
// gap: var(--spacing-64);
|
||||
// }
|
||||
// }
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.preferences {
|
||||
width: 500px;
|
||||
}
|
||||
|
||||
.preferences .options > :global(*) {
|
||||
gap: var(--spacing-32);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script lang="ts">
|
||||
import type { ActionData } from './$types';
|
||||
import { boredState } from '$lib/stores/boredState';
|
||||
|
||||
export let form: ActionData;
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
|
|
|
|||
|
|
@ -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 });
|
||||
};
|
||||
|
|
@ -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 });
|
||||
};
|
||||
|
|
@ -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 });
|
||||
};
|
||||
|
|
@ -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');
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,155 +1,168 @@
|
|||
<script lang="ts">
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
ExternalLinkIcon,
|
||||
MinusCircleIcon,
|
||||
MinusIcon,
|
||||
PlusCircleIcon,
|
||||
PlusIcon
|
||||
} from '@rgossiaux/svelte-heroicons/outline';
|
||||
import type { GameType, SavedGameType } from '$lib/types';
|
||||
import { collectionStore } from '$lib/stores/collectionStore';
|
||||
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
|
||||
import { addToCollection } from '$lib/util/manipulateCollection';
|
||||
import type { PageData } from './$types';
|
||||
import { boredState } from '$root/lib/stores/boredState';
|
||||
import { fade } from 'svelte/transition';
|
||||
import {
|
||||
ExternalLinkIcon,
|
||||
MinusCircleIcon,
|
||||
MinusIcon,
|
||||
PlusCircleIcon,
|
||||
PlusIcon
|
||||
} from '@rgossiaux/svelte-heroicons/outline';
|
||||
import type { GameType, SavedGameType } from '$lib/types';
|
||||
import { collectionStore } from '$lib/stores/collectionStore';
|
||||
import RemoveCollectionDialog from '$root/lib/components/dialog/RemoveCollectionDialog.svelte';
|
||||
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);
|
||||
$: existsInCollection = $collectionStore.find((item: SavedGameType) => item.id === game.id);
|
||||
|
||||
export let data: PageData;
|
||||
export let game: GameType = data?.game;
|
||||
console.log('page game', game);
|
||||
let seeMore: boolean = false;
|
||||
console.log(game?.description?.indexOf('</p>'));
|
||||
let firstParagraphEnd = 0;
|
||||
if (game?.description?.indexOf('</p>') > 0) {
|
||||
firstParagraphEnd = game?.description?.indexOf('</p>') + 4;
|
||||
} else if (game?.description?.indexOf('</ p>') > 0) {
|
||||
firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
|
||||
}
|
||||
console.log('firstParagraphEnd', firstParagraphEnd);
|
||||
export let data: PageData;
|
||||
export let game: GameType = data?.game;
|
||||
console.log('page game', game);
|
||||
let seeMore: boolean = false;
|
||||
console.log(game?.description?.indexOf('</p>'));
|
||||
let firstParagraphEnd = 0;
|
||||
if (game?.description?.indexOf('</p>') > 0) {
|
||||
firstParagraphEnd = game?.description?.indexOf('</p>') + 4;
|
||||
} else if (game?.description?.indexOf('</ p>') > 0) {
|
||||
firstParagraphEnd = game?.description?.indexOf('</ p>') + 5;
|
||||
}
|
||||
console.log('firstParagraphEnd', firstParagraphEnd);
|
||||
|
||||
function removeGame() {
|
||||
boredState.update((n) => ({
|
||||
...n,
|
||||
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: game }
|
||||
}));
|
||||
}
|
||||
function removeGame() {
|
||||
boredState.update((n) => ({
|
||||
...n,
|
||||
dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: game }
|
||||
}));
|
||||
if (browser) {
|
||||
localStorage.collection = JSON.stringify($collectionStore);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>{game?.name} | Bored Game</title>
|
||||
<title>{game?.name} | Bored Game</title>
|
||||
</svelte:head>
|
||||
|
||||
<h2>{game?.name}</h2>
|
||||
|
||||
<section class="games">
|
||||
<div>
|
||||
<a class="thumbnail" href={game.url}>
|
||||
<img src={game.image_url} alt={`Image of ${game.name}`} />
|
||||
</a>
|
||||
</div>
|
||||
<div class="details">
|
||||
<p>Year Published: {game?.year_published}</p>
|
||||
<p>Players: {game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
|
||||
<p>Playtime: {game.playtime} minutes</p>
|
||||
<p>Minimum Age: {game.min_age}</p>
|
||||
<p>Price: ${game?.price}</p>
|
||||
<a
|
||||
class="with-icon"
|
||||
style="display: flex; gap: 1rem;"
|
||||
href={game.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={`Board Game Atlas Link for ${game.name}`}
|
||||
>Board Game Atlas Link <ExternalLinkIcon width="24" height="24" /></a
|
||||
>
|
||||
{#if existsInCollection}
|
||||
<button class="btn" type="button" on:click={() => removeGame()}
|
||||
>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
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
<div>
|
||||
<a class="thumbnail" href={game.url}>
|
||||
<img src={game.image_url} alt={`Image of ${game.name}`} />
|
||||
</a>
|
||||
</div>
|
||||
<div class="details">
|
||||
<p>Year Published: {game?.year_published}</p>
|
||||
<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;"
|
||||
href={game.url}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
aria-label={`Board Game Atlas Link for ${game.name}`}
|
||||
>Board Game Atlas Link <ExternalLinkIcon width="24" height="24" /></a
|
||||
>
|
||||
{#if existsInCollection}
|
||||
<button class="btn" type="button" on:click={() => removeGame()}
|
||||
>Remove from collection <MinusCircleIcon width="24" height="24" /></button
|
||||
>
|
||||
{:else}
|
||||
<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>
|
||||
</section>
|
||||
{#if firstParagraphEnd > 0}
|
||||
<section class="description">
|
||||
<span>
|
||||
{@html game?.description?.substring(0, firstParagraphEnd)}
|
||||
</span>
|
||||
{#if game?.description?.substring(firstParagraphEnd + 1) !== ''}
|
||||
{#if seeMore}
|
||||
<span transition:fade>
|
||||
{@html game?.description?.substring(firstParagraphEnd + 1)}
|
||||
</span>
|
||||
{/if}
|
||||
<button class="btn" type="button" on:click={() => (seeMore = !seeMore)}
|
||||
>See
|
||||
{#if !seeMore}
|
||||
More <PlusIcon width="24" height="24" />
|
||||
{:else}
|
||||
Less <MinusIcon width="24" height="24" />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</section>
|
||||
<section class="description">
|
||||
<span>
|
||||
{@html game?.description?.substring(0, firstParagraphEnd)}
|
||||
</span>
|
||||
{#if game?.description?.substring(firstParagraphEnd + 1) !== ''}
|
||||
{#if seeMore}
|
||||
<span transition:fade>
|
||||
{@html game?.description?.substring(firstParagraphEnd + 1)}
|
||||
</span>
|
||||
{/if}
|
||||
<button class="btn" type="button" on:click={() => (seeMore = !seeMore)}
|
||||
>See
|
||||
{#if !seeMore}
|
||||
More <PlusIcon width="24" height="24" />
|
||||
{:else}
|
||||
Less <MinusIcon width="24" height="24" />
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
</section>
|
||||
{:else}
|
||||
<section class="description">
|
||||
<span>
|
||||
{@html game?.description}
|
||||
</span>
|
||||
</section>
|
||||
<section class="description">
|
||||
<span>
|
||||
{@html game?.description}
|
||||
</span>
|
||||
</section>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
h2 {
|
||||
text-align: center;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
max-width: 30rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-radius: 4px;
|
||||
margin: 0;
|
||||
padding: 1rem;
|
||||
max-width: 30rem;
|
||||
background-color: var(--color-btn-primary-active);
|
||||
}
|
||||
|
||||
.games {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
.games {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 2rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.details {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
align-content: center;
|
||||
justify-content: start;
|
||||
margin: 1rem;
|
||||
a,
|
||||
p {
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
.details {
|
||||
display: grid;
|
||||
gap: 0.5rem;
|
||||
align-content: center;
|
||||
justify-content: start;
|
||||
margin: 1rem;
|
||||
a,
|
||||
p {
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.description {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
.description {
|
||||
display: grid;
|
||||
gap: 1.5rem;
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.with-icon {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
.with-icon {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in a new issue