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