Merge branch 'move-game-outta-gameList'
This commit is contained in:
commit
80e1b52137
@ -6,6 +6,16 @@ vars:
|
|||||||
GREETING: Hello, World!
|
GREETING: Hello, World!
|
||||||
|
|
||||||
tasks:
|
tasks:
|
||||||
|
is-clean: git is-clean
|
||||||
|
integrate:
|
||||||
|
deps: [is-clean, test]
|
||||||
|
cmds:
|
||||||
|
- echo "do something"
|
||||||
|
test:unit:
|
||||||
|
cmds:
|
||||||
|
- vitest run
|
||||||
|
test:
|
||||||
|
deps: [test:unit, test:e2e]
|
||||||
preview:
|
preview:
|
||||||
deps: [build]
|
deps: [build]
|
||||||
cmds:
|
cmds:
|
||||||
|
|||||||
@ -2,16 +2,22 @@ import { test, expect } from '@playwright/test';
|
|||||||
|
|
||||||
test('hide game', async ({ page }) => {
|
test('hide game', async ({ page }) => {
|
||||||
await page.goto('/');
|
await page.goto('/');
|
||||||
const nbr_games = await page
|
|
||||||
.locator('.games > div')
|
let nbr_games = 0;
|
||||||
|
|
||||||
|
await expect(async () => {
|
||||||
|
nbr_games = await page
|
||||||
|
.locator('.game')
|
||||||
.all()
|
.all()
|
||||||
.then((games) => games.length);
|
.then((games) => games.length);
|
||||||
|
expect(nbr_games).toBeGreaterThan(0);
|
||||||
|
}).toPass();
|
||||||
|
|
||||||
await page.getByRole('button', { name: 'visibility' }).first().click();
|
await page.getByRole('button', { name: 'visibility' }).first().click();
|
||||||
|
|
||||||
await expect(async () => {
|
await expect(async () => {
|
||||||
const one_hidden = await page
|
const one_hidden = await page
|
||||||
.locator('.games > div')
|
.locator('.game')
|
||||||
.all()
|
.all()
|
||||||
.then((games) => games.length);
|
.then((games) => games.length);
|
||||||
|
|
||||||
|
|||||||
114
src/routes/Game.svelte
Normal file
114
src/routes/Game.svelte
Normal file
@ -0,0 +1,114 @@
|
|||||||
|
<div
|
||||||
|
transition:slide={{ delay: 250, duration: 300 }}
|
||||||
|
class:hidden={is_hidden}
|
||||||
|
class="game">
|
||||||
|
<div class="grid top-align">
|
||||||
|
<a
|
||||||
|
class="s12 m2"
|
||||||
|
target="_blank"
|
||||||
|
href={`https://boardgamegeek.com/boardgame/${bgg_id}`}>
|
||||||
|
<img alt="" loading="lazy" src={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/${bgg_id}`}>
|
||||||
|
{name}</a>
|
||||||
|
</strong>
|
||||||
|
</div>
|
||||||
|
<div class="s3">
|
||||||
|
<div>
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href={`https://boardgamegeek.com/collection/user/${username}?trade=1&subtype=boardgame&ff=1`}
|
||||||
|
>{username}</a>
|
||||||
|
|
||||||
|
<a
|
||||||
|
target="_blank"
|
||||||
|
href={`https://boardgamegeek.com/geekmail/compose?touser=${username}`}>
|
||||||
|
<i>email</i></a>
|
||||||
|
</div>
|
||||||
|
<div class="neighbourhood">
|
||||||
|
{seller?.neighbourhood ?? ''}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="s1 right-align">
|
||||||
|
{price ? '$' + price : ''}
|
||||||
|
</div>
|
||||||
|
<div class="notes s8">
|
||||||
|
{notes}
|
||||||
|
</div>
|
||||||
|
<div class="s3 updated-at">
|
||||||
|
{#if updated_at}
|
||||||
|
{pretty_date(updated_at)}
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="s1">
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
class="transparent round"
|
||||||
|
title="hide game"
|
||||||
|
on:click={toggle_game_visibility}
|
||||||
|
>{#if is_hidden}<i>visibility_off</i>{:else}
|
||||||
|
<i>visibility</i>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { createEventDispatcher } from 'svelte';
|
||||||
|
import { slide, fade } from 'svelte/transition';
|
||||||
|
|
||||||
|
export let username = '';
|
||||||
|
export let name = '';
|
||||||
|
export let is_hidden = false;
|
||||||
|
export let bgg_id = '';
|
||||||
|
export let thumbnail = '';
|
||||||
|
export let seller = {};
|
||||||
|
export let price = null;
|
||||||
|
export let notes = '';
|
||||||
|
export let updated_at = null;
|
||||||
|
|
||||||
|
function pretty_date(date) {
|
||||||
|
if (!date) return '';
|
||||||
|
|
||||||
|
return date.replace(/T.*/, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const toggle_game_visibility = () => dispatch('toggle_visibility');
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
a {
|
||||||
|
color: var(--primary);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
margin-right: 2em;
|
||||||
|
font-size: var(--font-size-10);
|
||||||
|
}
|
||||||
|
.notes {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
.updated-at {
|
||||||
|
font-size: smaller;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.updated-at::before {
|
||||||
|
content: 'last update: ';
|
||||||
|
}
|
||||||
|
.neighbourhood {
|
||||||
|
font-size: smaller;
|
||||||
|
}
|
||||||
|
.hidden {
|
||||||
|
opacity: 60%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -19,79 +19,18 @@
|
|||||||
.includes(target);
|
.includes(target);
|
||||||
}) as game}
|
}) as game}
|
||||||
{#if show_hidden || !game.is_hidden}
|
{#if show_hidden || !game.is_hidden}
|
||||||
<div
|
<Game
|
||||||
transition:slide={{ delay: 250, duration: 300 }}
|
on:toggle_visibility={() => toggle_visibility(game.id)}
|
||||||
class:hidden={game.is_hidden}>
|
{...game}
|
||||||
<div class="grid top-align">
|
seller={sellers[game.username]} />
|
||||||
<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>
|
|
||||||
|
|
||||||
<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_visibility(game.id)}
|
|
||||||
>{#if game.is_hidden}<i>visibility_off</i
|
|
||||||
>{:else}
|
|
||||||
<i>visibility</i>
|
|
||||||
{/if}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="medium-divider"></div>
|
<div class="medium-divider"></div>
|
||||||
</div>
|
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { getContext, createEventDispatcher } from 'svelte';
|
import { getContext, createEventDispatcher } from 'svelte';
|
||||||
import { slide, fade } from 'svelte/transition';
|
import Game from './Game.svelte';
|
||||||
|
|
||||||
export let games = [];
|
export let games = [];
|
||||||
export let sellers = {};
|
export let sellers = {};
|
||||||
@ -105,12 +44,6 @@
|
|||||||
|
|
||||||
// add filter
|
// add filter
|
||||||
// add sort (user, game, price)
|
// add sort (user, game, price)
|
||||||
|
|
||||||
function pretty_date(date) {
|
|
||||||
if (!date) return '';
|
|
||||||
|
|
||||||
return date.replace(/T.*/, '');
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
162
src/routes/GameList.svelte.orig
Normal file
162
src/routes/GameList.svelte.orig
Normal file
@ -0,0 +1,162 @@
|
|||||||
|
<div class="options">
|
||||||
|
<label class="switch icon">
|
||||||
|
<input type="checkbox" bind:checked={show_hidden} />
|
||||||
|
<span> show hidden </span>
|
||||||
|
</label>
|
||||||
|
<div class="field label prefix border">
|
||||||
|
<i>search</i>
|
||||||
|
<input type="text" bind:value={search_text} />
|
||||||
|
<label>Search</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="games">
|
||||||
|
{#each games.filter((game) => {
|
||||||
|
if (search_text.length < 3) return true;
|
||||||
|
const target = search_text.toLowerCase();
|
||||||
|
return game.name.toLowerCase().includes(target) || game.username
|
||||||
|
.toLowerCase()
|
||||||
|
.includes(target);
|
||||||
|
}) as game}
|
||||||
|
<<<<<<< HEAD
|
||||||
|
{#if show_hidden || !game.is_hidden}
|
||||||
|
<div
|
||||||
|
transition:slide={{ delay: 250, duration: 300 }}
|
||||||
|
class:hidden={game.is_hidden}>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<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_visibility(game.id)}
|
||||||
|
>{#if game.is_hidden}<i>visibility_off</i
|
||||||
|
>{:else}
|
||||||
|
<i>visibility</i>
|
||||||
|
{/if}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="medium-divider"></div>
|
||||||
|
</div>
|
||||||
|
=======
|
||||||
|
{#if show_hidden || !$games_hidden[[game.username, game.bgg_id].join('!')]}
|
||||||
|
<Game />
|
||||||
|
<div class="medium-divider"></div>
|
||||||
|
>>>>>>> 09f4064 (wip)
|
||||||
|
{/if}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getContext, createEventDispatcher } from 'svelte';
|
||||||
|
import { slide, fade } from 'svelte/transition';
|
||||||
|
|
||||||
|
export let games = [];
|
||||||
|
export let sellers = {};
|
||||||
|
|
||||||
|
let show_hidden = false;
|
||||||
|
|
||||||
|
let search_text = '';
|
||||||
|
|
||||||
|
const dispatch = createEventDispatcher();
|
||||||
|
const toggle_visibility = (id) => dispatch('toggle_game_visibility', id);
|
||||||
|
|
||||||
|
// add filter
|
||||||
|
// add sort (user, game, price)
|
||||||
|
|
||||||
|
function pretty_date(date) {
|
||||||
|
if (!date) return '';
|
||||||
|
|
||||||
|
return date.replace(/T.*/, '');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.games {
|
||||||
|
margin-top: 3em;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--primary);
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.grid {
|
||||||
|
margin-right: 2em;
|
||||||
|
font-size: var(--font-size-10);
|
||||||
|
}
|
||||||
|
.notes {
|
||||||
|
margin-top: 1em;
|
||||||
|
margin-left: 1em;
|
||||||
|
}
|
||||||
|
.updated-at {
|
||||||
|
font-size: smaller;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
.updated-at::before {
|
||||||
|
content: 'last update: ';
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
.options > div {
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user