can hide games

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

View File

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

View File

@ -9,7 +9,9 @@
import 'beercss/dist/cdn/beer.min.css'; import 'beercss/dist/cdn/beer.min.css';
import { setContext } from 'svelte'; import { setContext } from 'svelte';
import { dev, browser } from '$app/environment'; 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/'; const prefix = dev ? '/dev/' : '/db/';
@ -38,6 +40,20 @@
return () => {}; return () => {};
}); });
setContext('sellers', sellers); 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> </script>
<style> <style>

View File

@ -1,11 +1,27 @@
<div class="options">
<label class="switch icon">
<input type="checkbox" bind:checked={show_hidden} />
<span> show hidden </span>
</label>
</div>
<div class="games"> <div class="games">
{#each games as game} {#each games as game}
{#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"> <div class="grid top-align">
<a <a
class="s12 m2" class="s12 m2"
target="_blank" target="_blank"
href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}> href={`https://boardgamegeek.com/boardgame/${game.bgg_id}`}>
<img loading="lazy" src={game.thumbnail} height="80" /></a> <img
loading="lazy"
src={game.thumbnail}
height="80" /></a>
<div class="grid s12 m10"> <div class="grid s12 m10">
<div class="s8 left-align"> <div class="s8 left-align">
<strong> <strong>
@ -35,22 +51,49 @@
<div class="s1 right-align"> <div class="s1 right-align">
{game.price ? '$' + game.price : ''} {game.price ? '$' + game.price : ''}
</div> </div>
<div class="notes s8">{game.notes}</div> <div class="notes s8">
{#if game.updated_at} {game.notes}
<div class="s4 updated-at">
{pretty_date(game.updated_at)}
</div> </div>
<div class="s3 updated-at">
{#if game.updated_at}
{pretty_date(game.updated_at)}
{/if} {/if}
</div> </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>
<div class="medium-divider"></div> <div class="medium-divider"></div>
</div>
{/if}
{/each} {/each}
</div> </div>
<script> <script>
import { getContext } from 'svelte';
import { slide, fade } from 'svelte/transition';
export let games; export let games;
export let sellers = {}; export let sellers = {};
let show_hidden = false;
// add filter // add filter
// add sort (user, game, price) // add sort (user, game, price)
@ -59,6 +102,9 @@
return date.replace(/T.*/, ''); return date.replace(/T.*/, '');
} }
const games_hidden = getContext('games_hidden');
const toggle_game_visibility = games_hidden.toggle;
</script> </script>
<style> <style>
@ -87,4 +133,15 @@
.neighbourhood { .neighbourhood {
font-size: smaller; 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> </style>