yanick/bgg-ottawa-sell-club
2
0
Fork 0
Code Issues 8 Pull Requests Packages Projects Releases Wiki Activity

can hide games

Browse Source
This commit is contained in:
Yanick Champoux 2024-02-05 14:35:35 -05:00
parent 31c47f4c8b
commit b8ac795ad6
3 changed files with 117 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -37,10 +37,12 @@
"@sveltejs/adapter-node": "^4.0.1",
"@sveltejs/adapter-static": "^3.0.1",
"@vincjo/datatables": "^1.14.4",
"@yanick/updeep-remeda": "^2.2.0",
"beercss": "^3.4.13",
"better-sqlite3": "^9.3.0",
"cheerio": "1.0.0-rc.12",
"node-fetch": "^3.3.2",
"svelte-persisted-store": "^0.9.0",
"vite-multiple-assets": "^1.2.10"
}
}

18
src/routes/+layout.svelte
View File

@ -9,7 +9,9 @@
import 'beercss/dist/cdn/beer.min.css';
import { setContext } from 'svelte';
import { dev, browser } from '$app/environment';
import { readable } from 'svelte/store';
import { readable, writable } from 'svelte/store';
import { persisted } from 'svelte-persisted-store';
import u from '@yanick/updeep-remeda';
const prefix = dev ? '/dev/' : '/db/';
@ -38,6 +40,20 @@
return () => {};
});
setContext('sellers', sellers);
const games_hidden = writable(
JSON.parse(localStorage.getItem('games_hidden') || '{}'),
);
games_hidden.toggle = (username, bgg_id) => {
console.log({ username, bgg_id });
games_hidden.update(
u.updateIn([username, bgg_id].join('!'), (v) => !v),
);
};
setContext('games_hidden', games_hidden);
games_hidden.subscribe((data) =>
localStorage.setItem('games_hidden', JSON.stringify(data)),
);
</script>
<style>

139
src/routes/GameList.svelte
View File

@ -1,56 +1,99 @@
<div class="options">
<label class="switch icon">
<input type="checkbox" bind:checked={show_hidden} />
<span> show hidden </span>
</label>
</div>
<div class="games">
{#each games as game}
<div class="grid top-align">
<a
class="s12 m2"
target="_blank"
href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
<img loading="lazy" src={game.thumbnail} height="80" /></a>
<div class="grid s12 m10">
<div class="s8 left-align">
<strong>
<a
class="game-desc"
target="_blank"
href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
{game.name}</a>
</strong>
</div>
<div class="s3">
<div>
<a
target="_blank"
href={`https://boardgamegeek.com/collection/user/${game.username}?trade=1&subtype=boardgame&ff=1`}
>{game.username}</a>
&nbsp;
<a
target="_blank"
href={`https://boardgamegeek.com/geekmail/compose?touser=${game.username}`}>
<i>email</i></a>
</div>
<div class="neighbourhood">
{sellers[game.username]?.neighbourhood ?? ''}
{#if show_hidden || !$games_hidden[[game.username, game.bgg_id].join('!')]}
<div
transition:slide={{ delay: 250, duration: 300 }}
class:hidden={$games_hidden[
[game.username, game.bgg_id].join('!')
]}>
<div class="grid top-align">
<a
class="s12 m2"
target="_blank"
href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
<img
loading="lazy"
src={game.thumbnail}
height="80" /></a>
<div class="grid s12 m10">
<div class="s8 left-align">
<strong>
<a
class="game-desc"
target="_blank"
href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
{game.name}</a>
</strong>
</div>
<div class="s3">
<div>
<a
target="_blank"
href={`https://boardgamegeek.com/collection/user/${game.username}?trade=1&subtype=boardgame&ff=1`}
>{game.username}</a>
&nbsp;
<a
target="_blank"
href={`https://boardgamegeek.com/geekmail/compose?touser=${game.username}`}>
<i>email</i></a>
</div>
<div class="neighbourhood">
{sellers[game.username]?.neighbourhood ?? ''}
</div>
</div>
<div class="s1 right-align">
{game.price ? '$' + game.price : ''}
</div>
<div class="notes s8">
{game.notes}
</div>
<div class="s3 updated-at">
{#if game.updated_at}
{pretty_date(game.updated_at)}
{/if}
</div>
<div class="s1">
<div>
<button
class="transparent round"
title="hide game"
on:click={() =>
toggle_game_visibility(
game.username,
game.bgg_id,
)}
>{#if $games_hidden[[game.username, game.bgg_id].join('!')]}<i
>visibility_off</i
>{:else}
<i>visibility</i>
{/if}
</button>
</div>
</div>
</div>
</div>
<div class="s1 right-align">
{game.price ? '$' + game.price : ''}
</div>
<div class="notes s8">{game.notes}</div>
{#if game.updated_at}
<div class="s4 updated-at">
{pretty_date(game.updated_at)}
</div>
{/if}
<div class="medium-divider"></div>
</div>
</div>
<div class="medium-divider"></div>
{/if}
{/each}
</div>
<script>
import { getContext } from 'svelte';
import { slide, fade } from 'svelte/transition';
export let games;
export let sellers = {};
let show_hidden = false;
// add filter
// add sort (user, game, price)
@ -59,6 +102,9 @@
return date.replace(/T.*/, '');
}
const games_hidden = getContext('games_hidden');
const toggle_game_visibility = games_hidden.toggle;
</script>
<style>
@ -87,4 +133,15 @@
.neighbourhood {
font-size: smaller;
}
.hidden {
opacity: 60%;
}
.switch span {
font-size: var(--font-size-10);
padding-left: 1em;
}
.options {
display: flex;
flex-direction: row-reverse;
}
</style>