BradNut/boredgame
1
0
Fork 0
mirror of https://github.com/BradNut/boredgame synced 2025-09-08 17:40:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Bring back layout transition, fix showing games on collection and wishlist.

Browse source
This commit is contained in:
Bradley Shellnut 2023-08-13 23:51:34 -07:00
parent bdfc1dfd3f
commit 78f5bba669
6 changed files with 131 additions and 134 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/lib/components/game/index.svelte
View file

@ -24,7 +24,7 @@
<a
class="thumbnail"
href={`/game/${game.id}`}
title={`View ${game.game_name}`}
title={`View ${game.name}`}
data-sveltekit-preload-data
>
<img src={game.thumb_url} alt={`Image of ${game.name}`} loading="lazy" decoding="async" />

160
src/routes/(protected)/collection/+page.server.ts
View file

@ -1,4 +1,4 @@
import { fail, redirect } from '@sveltejs/kit';
import { error, fail, redirect } from '@sveltejs/kit';
import { setError, superValidate } from 'sveltekit-superforms/server';
import type { PageServerLoad } from '../../$types.js';
import prisma from '$lib/prisma.js';
@ -71,13 +71,11 @@ export const load: PageServerLoad = async ({ fetch, url, locals }) => {
const game = item.game;
if (game) {
let collectionItem: ListGame = {
id: item.id,
id: game.id,
collection_id: item.collection_id,
game_id: game.id,
game_name: game.name,
name: game.name,
thumb_url: game.thumb_url,
times_played: item.times_played,
wishlist_id: '',
in_collection: true
};
collectionItems.push(collectionItem);
@ -106,38 +104,56 @@ export const actions = {
const { params, locals, request } = event;
const form = await superValidate(event, modifyListGameSchema);
const session = await locals.auth.validate();
if (!session) {
throw redirect(302, '/auth/signin');
}
let game = await prisma.game.findUnique({
where: {
id: form.id
try {
const session = await locals.auth.validate();
if (!session) {
throw redirect(302, '/auth/signin');
}
});
if (!game) {
game = await prisma.game.create({
data: {
name: form.name
let game = await prisma.game.findUnique({
where: {
id: form.data.id
}
});
throw redirect(302, '/404');
}
if (game) {
const wishlist = await prisma.collectionItem.create({
data: {
user_id: session.userId,
name: form.name
if (!game) {
// game = await prisma.game.create({
// data: {
// name: form.name
// }
// });
console.log('game not found');
throw redirect(302, '/404');
}
if (game) {
const collection = await prisma.collection.findUnique({
where: {
user_id: session.user.userId
}
});
if (!collection) {
console.log('Wishlist not found');
return error(404, 'Wishlist not found');
}
});
}
return {
form
};
await prisma.collectionItem.create({
data: {
game_id: game.id,
collection_id: collection.id,
times_played: 0
}
});
}
return {
form
};
} catch (e) {
console.error(e);
return error(500, 'Something went wrong');
}
},
// Create new wishlist
create: async ({ params, locals, request }) => {
@ -145,6 +161,7 @@ export const actions = {
if (!session) {
throw redirect(302, '/auth/signin');
}
return error(405, 'Method not allowed');
},
// Delete a wishlist
delete: async ({ params, locals, request }) => {
@ -152,56 +169,61 @@ export const actions = {
if (!session) {
throw redirect(302, '/auth/signin');
}
return error(405, 'Method not allowed');
},
// Remove game from a wishlist
remove: async (event) => {
const { params, locals, request } = event;
const form = await superValidate(event, modifyListGameSchema);
const session = await locals.auth.validate();
if (!session) {
throw redirect(302, '/auth/signin');
}
console.log('form', form);
let collectionItem = await prisma.collectionItem.findUnique({
where: {
id: form.data.id
},
include: {
collection: {
select: {
user_id: true
}
}
try {
const session = await locals.auth.validate();
if (!session) {
throw redirect(302, '/auth/signin');
}
});
console.log('collectionItem', collectionItem);
const belongsToUser = collectionItem?.collection?.user_id === session.userId;
console.log('belongsToUser', belongsToUser);
if (!collectionItem || !belongsToUser) {
// game = await prisma.game.create({
// data: {
// name: form.name
// }
// });
throw redirect(302, '/404');
}
if (collectionItem) {
console.log('Going to delete');
await prisma.collectionItem.delete({
let game = await prisma.game.findUnique({
where: {
id: collectionItem.id
id: form.data.id
}
});
}
return {
form,
collection: []
};
if (!game) {
// game = await prisma.game.create({
// data: {
// name: form.name
// }
// });
console.log('game not found');
throw redirect(302, '/404');
}
if (game) {
const collection = await prisma.collection.findUnique({
where: {
user_id: session.user.userId
}
});
if (!collection) {
console.log('Wishlist not found');
return error(404, 'Wishlist not found');
}
await prisma.collectionItem.delete({
where: {
collection_id: collection.id,
game_id: game.id
}
});
}
return {
form
};
} catch (e) {
console.error(e);
return error(500, 'Something went wrong');
}
}
};

56
src/routes/(protected)/collection/+page.svelte
View file

@ -1,66 +1,12 @@
<script lang="ts">
// import { tick, onDestroy } from 'svelte';
import Game from '$lib/components/game/index.svelte';
import type { SearchSchema } from '$lib/zodValidation.js';
import { superForm } from 'sveltekit-superforms/client';
import type { SuperValidated } from 'sveltekit-superforms';
import type { ModifyListGame } from '$lib/config/zod-schemas.js';
import { onMount } from 'svelte';
import toast from 'svelte-french-toast';
// import { collectionStore } from '$lib/stores/collectionStore';
// import type { GameType, SavedGameType } from '$lib/types';
// import { boredState } from '$lib/stores/boredState';
// import Pagination from '$lib/components/pagination/index.svelte';
// import RemoveCollectionDialog from '$lib/components/dialog/RemoveCollectionDialog.svelte';
// import RemoveWishlistDialog from '$lib/components/dialog/RemoveWishlistDialog.svelte';
// import { createSearchStore, searchHandler } from '$lib/stores/search';
export let data;
console.log(`Page data: ${JSON.stringify(data)}`);
let collectionItems = data?.collection || [];
console.log('collectionItems', collectionItems);
// let gameToRemove: GameType | SavedGameType;
// let pageSize = 10;
// let page = 1;
// const searchStore = createSearchStore($collectionStore);
// console.log('searchStore', $searchStore);
// const unsubscribe = searchStore.subscribe((model) => searchHandler(model));
// onDestroy(() => {
// unsubscribe();
// });
// $: skip = (page - 1) * pageSize;
// $: gamesShown = $searchStore.data.slice(skip, skip + pageSize);
// $: totalItems = $searchStore.search === '' ? $collectionStore.length : $searchStore.filtered.length;
// interface RemoveGameEvent extends Event {
// detail: GameType | SavedGameType;
// }
// function handleRemoveCollection(event: RemoveGameEvent) {
// console.log('Remove collection event handler');
// console.log('event', event);
// gameToRemove = event?.detail;
// boredState.update((n) => ({
// ...n,
// dialog: { isOpen: true, content: RemoveCollectionDialog, additionalData: gameToRemove }
// }));
// }
// function handleRemoveWishlist(event: RemoveGameEvent) {
// console.log('Remove wishlist event handler');
// console.log('event', event);
// gameToRemove = event?.detail;
// boredState.update((n) => ({
// ...n,
// dialog: { isOpen: true, content: RemoveWishlistDialog, additionalData: gameToRemove }
// }));
// }
// async function handleNextPageEvent(event: CustomEvent) {
// if (+event?.detail?.page === page + 1) {
// page += 1;
@ -95,7 +41,7 @@
<h2>No games in your collection</h2>
{:else}
{#each collectionItems as game (game.game_id)}
<Game {game} data={data.listManageForm} />
<Game {game} />
{/each}
{/if}
</div>

4
src/routes/(protected)/wishlist/+page.server.ts
View file

@ -39,7 +39,7 @@ export async function load({ params, locals }) {
console.log('wishlist', wishlist);
return {
games: wishlist?.items
items: wishlist?.items
};
} catch (e) {
console.error(e);
@ -109,6 +109,7 @@ export const actions = {
if (!session) {
throw redirect(302, '/auth/signin');
}
return error(405, 'Method not allowed');
},
// Delete a wishlist
delete: async ({ params, locals, request }) => {
@ -116,6 +117,7 @@ export const actions = {
if (!session) {
throw redirect(302, '/auth/signin');
}
return error(405, 'Method not allowed');
},
// Remove game from a wishlist
remove: async (event) => {

38
src/routes/(protected)/wishlist/+page.svelte
View file

@ -3,20 +3,46 @@
export let data;
console.log('data', data);
const games = data.games;
const items = data.items || [];
</script>
<svelte:head>
<title>{`Your Wishlist | Bored Game`}</title>
</svelte:head>
<h2>Games on your wishlist:</h2>
<h1>Your wishlist</h1>
<div class="games-list">
{#if games.length > 0}
{#each games as game (game.id)}
<Game {game} />
{#if items.length > 0}
{#each items as item (item.id)}
<Game game={item.game} />
{/each}
{:else}
<h2>Sorry no games found!</h2>
{/if}
</div>
</div>
<style lang="postcss">
h1 {
margin: 1.5rem 0rem;
width: 100%;
}
.games {
margin: 2rem 0rem;
}
.games-list {
display: grid;
grid-template-columns: repeat(3, minmax(200px, 1fr));
gap: 2rem;
@media (max-width: 800px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 550px) {
grid-template-columns: 1fr;
}
}
</style>

5
src/routes/+layout.svelte
View file

@ -7,6 +7,7 @@
import { browser } from '$app/environment';
import debounce from 'just-debounce-it';
import 'iconify-icon';
import Transition from '$lib/components/transition/index.svelte';
import Analytics from '$lib/components/analytics.svelte';
import Header from '$lib/components/header/index.svelte';
import Footer from '$lib/components/footer.svelte';
@ -122,9 +123,9 @@
<Header user={data.user} />
<main>
<!-- <Transition url={data.url} transition={{ type: 'page' }}> -->
<Transition url={data.url} transition={{ type: 'page' }}>
<slot />
<!-- </Transition> -->
</Transition>
</main>
<Footer />