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

Merge branch 'master' of github.com:BradNut/boredgame into development

Browse source
This commit is contained in:
Bradley Shellnut 2023-05-14 21:11:00 -07:00
commit dd9fdb4fa0
10 changed files with 126 additions and 116 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
.eslintrc.cjs
View file

@ -1,20 +1,31 @@
module.exports = { module.exports = {
root: true, root: true,
parser: '@typescript-eslint/parser', parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'], extends: ['plugin:svelte/recommended'],
plugins: ['svelte3', '@typescript-eslint'], plugins: ['@typescript-eslint'],
ignorePatterns: ['*.cjs'], ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }], overrides: [
settings: { {
'svelte3/typescript': () => require('typescript') files: ['*.svelte'],
}, parser: 'svelte-eslint-parser',
parserOptions: { // Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
sourceType: 'module', parserOptions: {
ecmaVersion: 2020 parser: '@typescript-eslint/parser'
}, }
env: { }
browser: true, ],
es2017: true, settings: {
node: true 'svelte3/typescript': () => require('typescript')
} },
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020,
project: './tsconfig.json',
extraFileExtensions: ['.svelte'] // This is a required setting in `@typescript-eslint/parser` v4.24.0.
},
env: {
browser: true,
es2017: true,
node: true
}
}; };

1
package.json
View file

@ -69,3 +69,4 @@
"zod-to-json-schema": "^3.21.1" "zod-to-json-schema": "^3.21.1"
} }
} }

76
src/app.html
View file

@ -1,50 +1,44 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="description" content="Bored? Find a game! Bored Game!" />
<link rel="icon" href="%sveltekit.assets%/favicon-bored.png" />
<meta name="viewport" content="width=device-width" />
<script>
const htmlElement = document.documentElement;
const userTheme = localStorage.theme;
const userFont = localStorage.font;
<head> const prefersDarkMode = window.matchMedia('prefers-color-scheme: dark').matches;
<meta charset="utf-8" /> const prefersLightMode = window.matchMedia('prefers-color-scheme: light').matches;
<meta name="description" content="Bored? Find a game! Bored Game!" />
<link rel="icon" href="%sveltekit.assets%/favicon-bored.png" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script>
const htmlElement = document.documentElement;
const userTheme = localStorage.theme;
const userFont = localStorage.font;
const prefersDarkMode = window.matchMedia( // check if the user set a theme
'prefers-color-scheme: dark' if (userTheme) {
).matches; htmlElement.dataset.theme = userTheme;
const prefersLightMode = window.matchMedia( }
'prefers-color-scheme: light'
).matches;
// check if the user set a theme // otherwise check for user preference
if (userTheme) { if (!userTheme && prefersDarkMode) {
htmlElement.dataset.theme = userTheme; htmlElement.dataset.theme = '🌛 Night';
} localStorage.theme = '🌛 Night';
}
// otherwise check for user preference if (!userTheme && prefersLightMode) {
if (!userTheme && prefersDarkMode) { htmlElement.dataset.theme = '☀️ Daylight';
htmlElement.dataset.theme = '🌛 Night'; localStorage.theme = '☀️ Daylight';
localStorage.theme = '🌛 Night'; }
}
if (!userTheme && prefersLightMode) { // if nothing is set default to dark mode
htmlElement.dataset.theme = '☀️ Daylight'; if (!userTheme && !prefersDarkMode && !prefersLightMode) {
localStorage.theme = '☀️ Daylight'; htmlElement.dataset.theme = '🌛 Night';
} localStorage.theme = '🌛 Night';
}
// if nothing is set default to dark mode </script>
if (!userTheme && !prefersDarkMode && !prefersLightMode) { %sveltekit.head%
htmlElement.dataset.theme = '🌛 Night'; </head>
localStorage.theme = '🌛 Night';
}
</script>
%sveltekit.head%
</head>
<body>
<div id="svelte">%sveltekit.body%</div>
</body>
<body>
<div id="svelte">%sveltekit.body%</div>
</body>
</html> </html>

3
src/lib/components/analytics.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { PUBLIC_UMAMI_DO_NOT_TRACK, PUBLIC_UMAMI_URL, PUBLIC_UMAMI_ID } from '$env/static/public'; import { PUBLIC_UMAMI_DO_NOT_TRACK, PUBLIC_UMAMI_URL, PUBLIC_UMAMI_ID } from '$env/static/public';
const analyticsURL = `https://${PUBLIC_UMAMI_URL}/umami.js`;
</script> </script>
<svelte:head> <svelte:head>
@ -9,6 +8,6 @@
defer defer
data-website-id={PUBLIC_UMAMI_ID} data-website-id={PUBLIC_UMAMI_ID}
data-do-not-track={PUBLIC_UMAMI_DO_NOT_TRACK} data-do-not-track={PUBLIC_UMAMI_DO_NOT_TRACK}
src={analyticsURL} src={PUBLIC_UMAMI_URL}
></script> ></script>
</svelte:head> </svelte:head>

30
src/lib/components/footer.svelte Normal file
View file

@ -0,0 +1,30 @@
<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>
<style lang="postcss">
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
}
footer a {
font-weight: bold;
}
@media (min-width: 480px) {
footer {
padding: 40px 0;
}
}
</style>

8
src/lib/components/footer/index.svelte
View file

@ -1,8 +0,0 @@
<footer>
<p>Built by <a target="__blank" href="https://bradleyshellnut.com">Bradley Shellnut</a></p>
<p>
<a href="https://www.flaticon.com/free-icons/board-game" title="board game icons"
>Board game icons created by Freepik - Flaticon</a
>
</p>
</footer>

0
src/lib/components/header/Header.svelte → src/lib/components/header/index.svelte
View file

24
src/lib/components/transition/index.svelte
View file

@ -1,6 +1,5 @@
<script lang="ts"> <script lang="ts">
import { fly } from 'svelte/transition'; import { fade, fly } from 'svelte/transition';
import { page } from '$app/stores';
interface Transition { interface Transition {
type: 'fade' | 'stagger' | 'page'; type: 'fade' | 'stagger' | 'page';
@ -8,20 +7,23 @@
delay?: number; delay?: number;
} }
export let url: string = "";
export let transition: Transition; export let transition: Transition;
</script> </script>
{#if transition.type === 'page'} {#if transition.type === 'page' && url}
{#key $page.url} <div class="transition" style="display: grid;">
<div in:fly={{ y: -50, duration: 250 }}> {#key url}
<slot /> <div style="grid-row: 1 / -1; grid-column: 1 / -1;" in:fade={{ duration: 400, delay: 400 }} out:fade={{ duration: 400}}>
</div> <slot />
{/key} </div>
{/key}
</div>
{/if} {/if}
{#if transition.type === 'fade'} {#if transition.type === 'fade'}
<div <div
class="fade" class="fade transition"
style:animation-duration="{transition.duration}ms" style:animation-duration="{transition.duration}ms"
style:animation-delay="{transition.delay}ms" style:animation-delay="{transition.delay}ms"
> >
@ -31,7 +33,7 @@
{#if transition.type === 'stagger'} {#if transition.type === 'stagger'}
<div <div
class="stagger" class="stagger transition"
style:animation-duration="{transition.duration || 1 * 300}ms" style:animation-duration="{transition.duration || 1 * 300}ms"
style:animation-delay="{transition.delay}ms" style:animation-delay="{transition.delay}ms"
> >
@ -40,7 +42,7 @@
{/if} {/if}
<style> <style>
div { .transition {
height: 100%; height: 100%;
} }

5
src/routes/+layout.server.ts Normal file
View file

@ -0,0 +1,5 @@
export async function load({ url }) {
return {
url: url.pathname
};
}

48
src/routes/+layout.svelte
View file

@ -4,7 +4,8 @@
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 Analytics from '$lib/components/analytics.svelte'; import Analytics from '$lib/components/analytics.svelte';
import Header from '$lib/components/header/Header.svelte'; import Header from '$root/lib/components/header/index.svelte';
import Footer from '$lib/components/footer.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';
@ -68,6 +69,8 @@
} }
const dev = process.env.NODE_ENV !== 'production'; const dev = process.env.NODE_ENV !== 'production';
export let data;
</script> </script>
{#if !dev} {#if !dev}
@ -86,33 +89,24 @@
/> />
{/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' }}>
<main> <main>
<slot /> <Transition url={data.url} transition={{ type: 'page' }}>
<slot />
</Transition>
</main> </main>
</Transition> <Footer />
<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> </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}
@ -122,7 +116,7 @@
</div> </div>
{/if} {/if}
<Toast /> <Toast />
</Transition> <!-- </Transition> -->
<style lang="postcss"> <style lang="postcss">
.loading { .loading {
@ -171,24 +165,6 @@
box-sizing: border-box; box-sizing: border-box;
} }
footer {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 40px;
}
footer a {
font-weight: bold;
}
@media (min-width: 480px) {
footer {
padding: 40px 0;
}
}
:global(.dialog-overlay) { :global(.dialog-overlay) {
position: fixed; position: fixed;
inset: 0; inset: 0;