mirror of
https://github.com/BradNut/boredgame
synced 2025-09-08 17:40:22 +00:00
Removing unused CSS.
This commit is contained in:
Bradley Shellnut
parent
eaf286b5c9
commit
0562b3c0cf
12 changed files with 8 additions and 217 deletions
|
|
@ -1,16 +1,15 @@
|
|||
import cookie from 'cookie';
|
||||
import { v4 as uuid } from '@lukeed/uuid';
|
||||
import type { Handle } from '@sveltejs/kit';
|
||||
import * as cookie from 'cookie';
|
||||
|
||||
export const handle: Handle = async ({ event, resolve }) => {
|
||||
const cookies = cookie.parse(event.request.headers.get('cookie') || '');
|
||||
event.locals.userid = cookies.userid || uuid();
|
||||
event.locals.userid = cookies['userid'] || crypto.randomUUID();
|
||||
|
||||
const response = await resolve(event);
|
||||
|
||||
if (!cookies.userid) {
|
||||
if (!cookies['userid']) {
|
||||
// if this is the first time the user has visited this app,
|
||||
// set a cookie so that we recognize them when they return
|
||||
// set a cookie so that we recognise them when they return
|
||||
response.headers.set(
|
||||
'set-cookie',
|
||||
cookie.serialize('userid', event.locals.userid, {
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
</a>
|
||||
</div>
|
||||
|
||||
{#if !minimal && game?.year_published && game.players && game.max_players && game.playtime}
|
||||
{#if !minimal}
|
||||
<div class="game-details">
|
||||
<p>{game.year_published}</p>
|
||||
<p>{game.players} {game.max_players === 1 ? 'player' : 'players'}</p>
|
||||
|
|
@ -51,10 +51,6 @@
|
|||
</article>
|
||||
|
||||
<style lang="scss">
|
||||
h2 .thumbnail {
|
||||
align-self: start;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,46 +57,6 @@
|
|||
--background: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
svg {
|
||||
width: 2em;
|
||||
height: 3em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
path {
|
||||
fill: var(--background);
|
||||
}
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
height: 3em;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
background: var(--background);
|
||||
background-size: contain;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
li.active::before {
|
||||
--size: 6px;
|
||||
content: '';
|
||||
width: 0;
|
||||
height: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: calc(50% - var(--size));
|
||||
border: var(--size) solid transparent;
|
||||
border-top: var(--size) solid var(--accent-color);
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -50,11 +50,6 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.panel-contents {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
|
|||
|
|
@ -1,24 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { boredState } from '$lib/stores/boredState';
|
||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
|
||||
// async function handleSubmit(event: SubmitEvent) {
|
||||
// // submitting = true;
|
||||
// boredState.set({ loading: true });
|
||||
// const form = event.target as HTMLFormElement;
|
||||
// console.log('form', form);
|
||||
// const response = await fetch('/api/games', {
|
||||
// method: 'POST',
|
||||
// headers: { accept: 'application/json' },
|
||||
// body: new FormData(form)
|
||||
// });
|
||||
// const responseData = await response.json();
|
||||
// // submitting = false;
|
||||
// boredState.set({ loading: false });
|
||||
// gameStore.removeAll();
|
||||
// gameStore.addAll(responseData?.games);
|
||||
// // games = responseData?.games;
|
||||
// }
|
||||
|
||||
let submitting = $boredState?.loading;
|
||||
let minAge = 1;
|
||||
|
|
@ -85,14 +66,6 @@
|
|||
|
||||
<!-- </form> -->
|
||||
<style lang="scss">
|
||||
button {
|
||||
border-radius: 10px;
|
||||
margin: 0.5rem;
|
||||
padding: 1rem;
|
||||
color: var(--clr-input-txt);
|
||||
background-color: var(--color-btn-primary-active);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
|
|
|
|||
|
|
@ -3,12 +3,10 @@
|
|||
import { Disclosure, DisclosureButton, DisclosurePanel } from '@rgossiaux/svelte-headlessui';
|
||||
import { ChevronRightIcon } from '@rgossiaux/svelte-heroicons/solid';
|
||||
import { boredState } from '$lib/stores/boredState';
|
||||
import { gameStore } from '$lib/stores/gameSearchStore';
|
||||
import AdvancedSearch from '$lib/components/search/advancedSearch/index.svelte';
|
||||
|
||||
export let showButton: boolean = false;
|
||||
export let advancedSearch: boolean = false;
|
||||
// console.log('showButton', showButton);
|
||||
|
||||
let submitting = $boredState?.loading;
|
||||
let name = '';
|
||||
|
|
@ -70,9 +68,6 @@
|
|||
place-items: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
}
|
||||
button {
|
||||
padding: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
{#if transition.type === 'stagger'}
|
||||
<div
|
||||
class="stagger"
|
||||
style:animation-duration="{transition.duration * 300}ms"
|
||||
style:animation-duration="{transition.duration || 1 * 300}ms"
|
||||
style:animation-delay="{transition.delay}ms"
|
||||
>
|
||||
<slot />
|
||||
|
|
|
|||
|
|
@ -49,41 +49,6 @@
|
|||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.loading {
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 101;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
gap: 1rem;
|
||||
|
||||
h3 {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.background {
|
||||
background: black;
|
||||
opacity: 0.8;
|
||||
cursor: none;
|
||||
inset: 0;
|
||||
position: fixed;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
h1 {
|
||||
width: 100%;
|
||||
}
|
||||
button {
|
||||
border-radius: 10px;
|
||||
margin: 0.5rem;
|
||||
padding: 1rem;
|
||||
color: var(--clr-input-txt);
|
||||
background-color: var(--color-btn-primary-active);
|
||||
}
|
||||
|
||||
.games {
|
||||
margin: 2rem 0rem;
|
||||
|
||||
|
|
@ -105,22 +70,6 @@
|
|||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
.game-search {
|
||||
border-radius: 4px;
|
||||
box-shadow: var(--level-2);
|
||||
background: rgba(0, 0, 0, 0.02);
|
||||
border: 2px solid var(--clr-primary);
|
||||
padding: 20px;
|
||||
|
||||
fieldset {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
label {
|
||||
display: grid;
|
||||
margin: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.random-buttons {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
import { browser, dev } from '$app/env';
|
||||
|
||||
// we don't need any JS on this page, though we'll load
|
||||
// it in dev so that we get hot module replacement...
|
||||
export const hydrate = dev;
|
||||
|
||||
// ...but if the client-side router is already loaded
|
||||
// (i.e. we came here from elsewhere in the app), use it
|
||||
export const router = browser;
|
||||
|
||||
// since there's no dynamic data here, we can prerender
|
||||
// it so that it gets served as a static asset in prod
|
||||
export const prerender = true;
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
<script context="module">
|
||||
throw new Error("@migration task: Check code was safely removed (https://github.com/sveltejs/kit/discussions/5774#discussioncomment-3292722)");
|
||||
|
||||
// import { browser, dev } from '$app/env';
|
||||
|
||||
// // we don't need any JS on this page, though we'll load
|
||||
// // it in dev so that we get hot module replacement...
|
||||
// export const hydrate = dev;
|
||||
|
||||
// // ...but if the client-side router is already loaded
|
||||
// // (i.e. we came here from elsewhere in the app), use it
|
||||
// export const router = browser;
|
||||
|
||||
// // since there's no dynamic data here, we can prerender
|
||||
// // it so that it gets served as a static asset in prod
|
||||
// export const prerender = true;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>About</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="content">
|
||||
<h1>About this app</h1>
|
||||
|
||||
<p>
|
||||
This is a <a href="https://kit.svelte.dev">SvelteKit</a> app. You can make your own by typing the
|
||||
following into your command line and following the prompts:
|
||||
</p>
|
||||
|
||||
<!-- TODO lose the @next! -->
|
||||
<pre>npm init svelte@next</pre>
|
||||
|
||||
<p>
|
||||
The page you're looking at is purely static HTML, with no client-side interactivity needed.
|
||||
Because of that, we don't need to load any JavaScript. Try viewing the page's source, or opening
|
||||
the devtools network panel and reloading.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
The <a href="/todos">TODOs</a> page illustrates SvelteKit's data loading and form handling. Try using
|
||||
it with JavaScript disabled!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.content {
|
||||
width: 100%;
|
||||
max-width: var(--column-width);
|
||||
margin: var(--column-margin-top) auto 0 auto;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -21,20 +21,9 @@
|
|||
h1 {
|
||||
width: 100%;
|
||||
}
|
||||
button {
|
||||
border-radius: 10px;
|
||||
margin: 0.5rem;
|
||||
padding: 1rem;
|
||||
color: var(--clr-input-txt);
|
||||
background-color: var(--color-btn-primary-active);
|
||||
}
|
||||
|
||||
.games {
|
||||
margin: 2rem 0rem;
|
||||
|
||||
h1 {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.games-list {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
<script lang="ts">
|
||||
import type { PageData } from './$types';
|
||||
import { enhance } from '$lib/form';
|
||||
import { scale } from 'svelte/transition';
|
||||
import { flip } from 'svelte/animate';
|
||||
import type { PageData } from './$types';
|
||||
|
||||
export let data: Pagedata;
|
||||
export let data: PageData;
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
|
|||
Loading…
Reference in a new issue