create Game component
This commit is contained in:
parent
cdb0bfaca8
commit
45d8dc33b2
@ -6,6 +6,16 @@ vars:
|
||||
GREETING: Hello, World!
|
||||
|
||||
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:
|
||||
deps: [build]
|
||||
cmds:
|
||||
|
||||
@ -2,16 +2,22 @@ import { test, expect } from '@playwright/test';
|
||||
|
||||
test('hide game', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
const nbr_games = await page
|
||||
.locator('.games > div')
|
||||
.all()
|
||||
.then((games) => games.length);
|
||||
|
||||
let nbr_games = 0;
|
||||
|
||||
await expect(async () => {
|
||||
nbr_games = await page
|
||||
.locator('.game')
|
||||
.all()
|
||||
.then((games) => games.length);
|
||||
expect(nbr_games).toBeGreaterThan(0);
|
||||
}).toPass();
|
||||
|
||||
await page.getByRole('button', { name: 'visibility' }).first().click();
|
||||
|
||||
await expect(async () => {
|
||||
const one_hidden = await page
|
||||
.locator('.games > div')
|
||||
.locator('.game')
|
||||
.all()
|
||||
.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);
|
||||
}) as game}
|
||||
{#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>
|
||||
<Game
|
||||
on:toggle_visibility={() => toggle_visibility(game.id)}
|
||||
{...game}
|
||||
seller={sellers[game.username]} />
|
||||
<div class="medium-divider"></div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<script>
|
||||
import { getContext, createEventDispatcher } from 'svelte';
|
||||
import { slide, fade } from 'svelte/transition';
|
||||
import Game from './Game.svelte';
|
||||
|
||||
export let games = [];
|
||||
export let sellers = {};
|
||||
@ -105,12 +44,6 @@
|
||||
|
||||
// add filter
|
||||
// add sort (user, game, price)
|
||||
|
||||
function pretty_date(date) {
|
||||
if (!date) return '';
|
||||
|
||||
return date.replace(/T.*/, '');
|
||||
}
|
||||
</script>
|
||||
|
||||
<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