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 = {
root: true,
parser: '@typescript-eslint/parser',
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
plugins: ['svelte3', '@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
settings: {
'svelte3/typescript': () => require('typescript')
},
parserOptions: {
sourceType: 'module',
ecmaVersion: 2020
},
env: {
browser: true,
es2017: true,
node: true
}
root: true,
parser: '@typescript-eslint/parser',
extends: ['plugin:svelte/recommended'],
plugins: ['@typescript-eslint'],
ignorePatterns: ['*.cjs'],
overrides: [
{
files: ['*.svelte'],
parser: 'svelte-eslint-parser',
// Parse the `<script>` in `.svelte` as TypeScript by adding the following configuration.
parserOptions: {
parser: '@typescript-eslint/parser'
}
}
],
settings: {
'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"
}
}

76
src/app.html
View file

@ -1,50 +1,44 @@
<!DOCTYPE html>
<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>
<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, initial-scale=1" />
<script>
const htmlElement = document.documentElement;
const userTheme = localStorage.theme;
const userFont = localStorage.font;
const prefersDarkMode = window.matchMedia('prefers-color-scheme: dark').matches;
const prefersLightMode = window.matchMedia('prefers-color-scheme: light').matches;
const prefersDarkMode = window.matchMedia(
'prefers-color-scheme: dark'
).matches;
const prefersLightMode = window.matchMedia(
'prefers-color-scheme: light'
).matches;
// check if the user set a theme
if (userTheme) {
htmlElement.dataset.theme = userTheme;
}
// check if the user set a theme
if (userTheme) {
htmlElement.dataset.theme = userTheme;
}
// otherwise check for user preference
if (!userTheme && prefersDarkMode) {
htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night';
}
// otherwise check for user preference
if (!userTheme && prefersDarkMode) {
htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night';
}
if (!userTheme && prefersLightMode) {
htmlElement.dataset.theme = '☀️ Daylight';
localStorage.theme = '☀️ Daylight';
}
if (!userTheme && prefersLightMode) {
htmlElement.dataset.theme = '☀️ Daylight';
localStorage.theme = '☀️ Daylight';
}
// if nothing is set default to dark mode
if (!userTheme && !prefersDarkMode && !prefersLightMode) {
htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night';
}
</script>
%sveltekit.head%
</head>
<body>
<div id="svelte">%sveltekit.body%</div>
</body>
// if nothing is set default to dark mode
if (!userTheme && !prefersDarkMode && !prefersLightMode) {
htmlElement.dataset.theme = '🌛 Night';
localStorage.theme = '🌛 Night';
}
</script>
%sveltekit.head%
</head>
<body>
<div id="svelte">%sveltekit.body%</div>
</body>
</html>

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

@ -1,6 +1,5 @@
<script lang="ts">
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>
<svelte:head>
@ -9,6 +8,6 @@
defer
data-website-id={PUBLIC_UMAMI_ID}
data-do-not-track={PUBLIC_UMAMI_DO_NOT_TRACK}
src={analyticsURL}
src={PUBLIC_UMAMI_URL}
></script>
</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">
import { fly } from 'svelte/transition';
import { page } from '$app/stores';
import { fade, fly } from 'svelte/transition';
interface Transition {
type: 'fade' | 'stagger' | 'page';
@ -8,20 +7,23 @@
delay?: number;
}
export let url: string = "";
export let transition: Transition;
</script>
{#if transition.type === 'page'}
{#key $page.url}
<div in:fly={{ y: -50, duration: 250 }}>
<slot />
</div>
{/key}
{#if transition.type === 'page' && url}
<div class="transition" style="display: grid;">
{#key url}
<div style="grid-row: 1 / -1; grid-column: 1 / -1;" in:fade={{ duration: 400, delay: 400 }} out:fade={{ duration: 400}}>
<slot />
</div>
{/key}
</div>
{/if}
{#if transition.type === 'fade'}
<div
class="fade"
class="fade transition"
style:animation-duration="{transition.duration}ms"
style:animation-delay="{transition.delay}ms"
>
@ -31,7 +33,7 @@
{#if transition.type === 'stagger'}
<div
class="stagger"
class="stagger transition"
style:animation-duration="{transition.duration || 1 * 300}ms"
style:animation-delay="{transition.delay}ms"
>
@ -40,7 +42,7 @@
{/if}
<style>
div {
.transition {
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 { Toy } from '@leveluptuts/svelte-toy';
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 Transition from '$lib/components/transition/index.svelte';
import Portal from '$lib/Portal.svelte';
@ -68,6 +69,8 @@
}
const dev = process.env.NODE_ENV !== 'production';
export let data;
</script>
{#if !dev}
@ -86,33 +89,24 @@
/>
{/if}
<Transition transition={{ type: 'fade', duration: 250 }}>
<!-- <Transition transition={{ type: 'fade', duration: 250 }}> -->
<div class="wrapper">
<Header />
<Transition transition={{ type: 'page' }}>
<main>
<slot />
<Transition url={data.url} transition={{ type: 'page' }}>
<slot />
</Transition>
</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>
<Footer />
</div>
{#if $boredState?.loading}
<Portal>
<Transition transition={{ type: 'fade', duration: 0 }}>
<!-- <Transition transition={{ type: 'fade', duration: 0 }}> -->
<div class="loading">
<Loading />
<h3>Loading...</h3>
</div>
</Transition>
<!-- </Transition> -->
<div class="background" />
</Portal>
{/if}
@ -122,7 +116,7 @@
</div>
{/if}
<Toast />
</Transition>
<!-- </Transition> -->
<style lang="postcss">
.loading {
@ -171,24 +165,6 @@
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) {
position: fixed;
inset: 0;