mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Fixing env in the game page.
This commit is contained in:
parent
036c821cb0
commit
79e401a917
3 changed files with 140 additions and 139 deletions
|
|
@ -1,159 +1,159 @@
|
|||
<script lang="ts">
|
||||
import { browser } from '$app/environment';
|
||||
import { navigating } from '$app/stores';
|
||||
import { fade } from 'svelte/transition';
|
||||
import debounce from 'just-debounce-it';
|
||||
import { Toy } from '@leveluptuts/svelte-toy';
|
||||
import Header from '$lib/components/header/Header.svelte';
|
||||
import Loading from '$lib/components/loading.svelte';
|
||||
import Transition from '$lib/components/transition/index.svelte';
|
||||
import Portal from '$lib/Portal.svelte';
|
||||
import { boredState } from '$lib/stores/boredState';
|
||||
import { collectionStore } from '$lib/stores/collectionStore';
|
||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
import { toast } from '$lib/components/toast/toast';
|
||||
import Toast from '$lib/components/toast/Toast.svelte';
|
||||
import '$root/styles/styles.scss';
|
||||
import { browser } from '$app/environment';
|
||||
import { navigating } from '$app/stores';
|
||||
import { fade } from 'svelte/transition';
|
||||
import debounce from 'just-debounce-it';
|
||||
import { Toy } from '@leveluptuts/svelte-toy';
|
||||
import Header from '$lib/components/header/Header.svelte';
|
||||
import Loading from '$lib/components/loading.svelte';
|
||||
import Transition from '$lib/components/transition/index.svelte';
|
||||
import Portal from '$lib/Portal.svelte';
|
||||
import { boredState } from '$lib/stores/boredState';
|
||||
import { collectionStore } from '$lib/stores/collectionStore';
|
||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
import { toast } from '$lib/components/toast/toast';
|
||||
import Toast from '$lib/components/toast/Toast.svelte';
|
||||
import '$root/styles/styles.scss';
|
||||
|
||||
$: {
|
||||
if ($navigating) {
|
||||
debounce(() => {
|
||||
boredState.update((n) => ({ ...n, loading: true }));
|
||||
}, 250);
|
||||
}
|
||||
if (!$navigating) {
|
||||
boredState.update((n) => ({ ...n, loading: false }));
|
||||
}
|
||||
}
|
||||
$: {
|
||||
if ($navigating) {
|
||||
debounce(() => {
|
||||
boredState.update((n) => ({ ...n, loading: true }));
|
||||
}, 250);
|
||||
}
|
||||
if (!$navigating) {
|
||||
boredState.update((n) => ({ ...n, loading: false }));
|
||||
}
|
||||
}
|
||||
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
$: isOpen = $boredState?.dialog?.isOpen;
|
||||
|
||||
if (browser) {
|
||||
let collectionEmpty = $collectionStore.length === 0 || false;
|
||||
console.log('collectionEmpty', collectionEmpty);
|
||||
console.log('localStorage.collection', localStorage.collection);
|
||||
if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
|
||||
const collection = JSON.parse(localStorage.collection);
|
||||
console.log('collection', collection);
|
||||
if (collection?.length !== 0) {
|
||||
collectionStore.addAll(collection);
|
||||
}
|
||||
}
|
||||
}
|
||||
if (browser) {
|
||||
let collectionEmpty = $collectionStore.length === 0 || false;
|
||||
console.log('collectionEmpty', collectionEmpty);
|
||||
console.log('localStorage.collection', localStorage.collection);
|
||||
if (collectionEmpty && localStorage?.collection && localStorage?.collection?.length !== 0) {
|
||||
const collection = JSON.parse(localStorage.collection);
|
||||
console.log('collection', collection);
|
||||
if (collection?.length !== 0) {
|
||||
collectionStore.addAll(collection);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const dev = process.env.NODE_ENV !== 'production';
|
||||
const dev = process.env.NODE_ENV !== 'production';
|
||||
</script>
|
||||
|
||||
{#if dev}
|
||||
<Toy register={{ boredState, collectionStore, gameStore, toast }} />
|
||||
<Toy register={{ boredState, collectionStore, gameStore, toast }} />
|
||||
{/if}
|
||||
<Transition transition={{ type: 'fade', duration: 250 }}>
|
||||
<div class="wrapper">
|
||||
<Header />
|
||||
<Transition transition={{ type: 'page' }}>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</Transition>
|
||||
<footer>
|
||||
<p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
|
||||
<p>
|
||||
<a
|
||||
target="__blank"
|
||||
href="https://www.flaticon.com/free-icons/board-game"
|
||||
title="board game icons">Board game icons created by Freepik - Flaticon</a
|
||||
>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
{#if $boredState?.loading}
|
||||
<Portal>
|
||||
<Transition transition={{ type: 'fade', duration: 0 }}>
|
||||
<div class="loading">
|
||||
<Loading />
|
||||
<h3>Loading...</h3>
|
||||
</div>
|
||||
</Transition>
|
||||
<div class="background" />
|
||||
</Portal>
|
||||
{/if}
|
||||
{#if isOpen}
|
||||
<div class="container">
|
||||
<svelte:component this={$boredState?.dialog?.content} />
|
||||
</div>
|
||||
{/if}
|
||||
<Toast />
|
||||
<div class="wrapper">
|
||||
<Header />
|
||||
<Transition transition={{ type: 'page' }}>
|
||||
<main>
|
||||
<slot />
|
||||
</main>
|
||||
</Transition>
|
||||
<footer>
|
||||
<p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
|
||||
<p>
|
||||
<a
|
||||
target="__blank"
|
||||
href="https://www.flaticon.com/free-icons/board-game"
|
||||
title="board game icons">Board game icons created by Freepik - Flaticon</a
|
||||
>
|
||||
</p>
|
||||
</footer>
|
||||
</div>
|
||||
{#if $boredState?.loading}
|
||||
<Portal>
|
||||
<Transition transition={{ type: 'fade', duration: 0 }}>
|
||||
<div class="loading">
|
||||
<Loading />
|
||||
<h3>Loading...</h3>
|
||||
</div>
|
||||
</Transition>
|
||||
<div class="background" />
|
||||
</Portal>
|
||||
{/if}
|
||||
{#if isOpen}
|
||||
<div class="container">
|
||||
<svelte:component this={$boredState?.dialog?.content} />
|
||||
</div>
|
||||
{/if}
|
||||
<Toast />
|
||||
</Transition>
|
||||
|
||||
<style lang="scss">
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 1rem;
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
background: black;
|
||||
opacity: 0.8;
|
||||
cursor: none;
|
||||
inset: 0;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
.background {
|
||||
background: black;
|
||||
opacity: 0.8;
|
||||
cursor: none;
|
||||
inset: 0;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
.wrapper {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 0rem;
|
||||
max-width: 80%;
|
||||
main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 850px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem 0rem;
|
||||
max-width: 80%;
|
||||
|
||||
@media (min-width: 1500px) {
|
||||
max-width: 60%;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@media (min-width: 1500px) {
|
||||
max-width: 60%;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
}
|
||||
footer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
footer a {
|
||||
font-weight: bold;
|
||||
}
|
||||
footer a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
footer {
|
||||
padding: 40px 0;
|
||||
}
|
||||
}
|
||||
@media (min-width: 480px) {
|
||||
footer {
|
||||
padding: 40px 0;
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dialog-overlay) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background-color: rgb(0 0 0);
|
||||
opacity: 0.8;
|
||||
}
|
||||
:global(.dialog-overlay) {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 100;
|
||||
background-color: rgb(0 0 0);
|
||||
opacity: 0.8;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
(The data on the todo app will expire periodically; no
|
||||
guarantees are made. Don't use it to organize your life.)
|
||||
*/
|
||||
|
||||
import { BOARD_GAME_ATLAS_CLIENT_ID } from '$env/static/private';
|
||||
import { URLSearchParams } from 'url';
|
||||
|
||||
const base = 'https://api.boardgameatlas.com/api';
|
||||
|
|
@ -20,7 +20,7 @@ export function boardGameApi(
|
|||
data?: Record<string, unknown>
|
||||
) {
|
||||
// console.log('queryParams', queryParams);
|
||||
queryParams.client_id = import.meta.env.VITE_PUBLIC_CLIENT_ID;
|
||||
queryParams.client_id = BOARD_GAME_ATLAS_CLIENT_ID;
|
||||
const urlQueryParams = new URLSearchParams(queryParams);
|
||||
const url = `${base}/${resource}${urlQueryParams ? `?${urlQueryParams}` : ''}`;
|
||||
return fetch(url, {
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@ type GamePageParams = {
|
|||
// }
|
||||
|
||||
export const load: PageServerLoad = async ({ params }: GamePageParams) => {
|
||||
console.log('params', params);
|
||||
console.log('params', params);
|
||||
debugger;
|
||||
const queryParams = {
|
||||
ids: `${params?.id}`
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue