boredgame/src/lib/components/random/index.svelte

48 lines
1.7 KiB
Svelte

<script lang="ts">
import { boredState } from '$lib/stores/boredState';
import { gameStore } from '$lib/stores/gameSearchStore';
import { collectionStore } from '$lib/stores/collectionStore';
import { toast } from '$lib/components/toast/toast';
import { ToastType, type SavedGameType } from '$lib/types';
import { mapSavedGameToGame } from '$root/lib/util/gameMapper';
async function getRandomCollectionGame() {
if ($collectionStore.length > 0) {
boredState.update((n) => ({ ...n, loading: true }));
let randomNumber: number = Math.round(Math.random() * $collectionStore.length - 1);
if ($collectionStore.at(randomNumber)) {
gameStore.removeAll();
const randomGame: SavedGameType = $collectionStore.at(randomNumber)!;
// const response = await fetch(`/api/game/${randomGame?.id}`, {
// method: 'GET',
// headers: { accept: 'application/json' }
// });
// const responseData = await response.json();
// console.log('responseData', responseData);
// gameStore.add(responseData?.game);
gameStore.add(mapSavedGameToGame(randomGame));
boredState.update((n) => ({ ...n, loading: false }));
} else {
toast.send('Error!', { duration: 3000, type: ToastType.ERROR, dismissible: true });
}
boredState.update((n) => ({ ...n, loading: false }));
} else {
toast.send('No items in your collection!', {
duration: 3000,
type: ToastType.ERROR,
dismissible: true
});
}
}
</script>
<button class="btn" type="button" on:click={() => getRandomCollectionGame()}
>Random from collection 🎲</button
>
<style lang="scss">
button {
max-width: 450px;
padding: var(--spacing-8) var(--spacing-16);
}
</style>