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

Update dependencies and add gap.

Browse source
This commit is contained in:
Bradley Shellnut 2022-08-04 23:19:27 -07:00
parent 93a13eec94
commit d7665d1a94
4 changed files with 138 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
package.json
View file

@ -19,10 +19,10 @@
"@sveltejs/adapter-auto": "1.0.0-next.64", "@sveltejs/adapter-auto": "1.0.0-next.64",
"@sveltejs/kit": "1.0.0-next.403", "@sveltejs/kit": "1.0.0-next.403",
"@types/cookie": "^0.5.1", "@types/cookie": "^0.5.1",
"@types/node": "^18.6.3", "@types/node": "^18.6.4",
"@typescript-eslint/eslint-plugin": "^5.32.0", "@typescript-eslint/eslint-plugin": "^5.32.0",
"@typescript-eslint/parser": "^5.32.0", "@typescript-eslint/parser": "^5.32.0",
"carbon-components-svelte": "^0.67.4", "carbon-components-svelte": "^0.67.5",
"carbon-icons-svelte": "^11.2.0", "carbon-icons-svelte": "^11.2.0",
"eslint": "^8.21.0", "eslint": "^8.21.0",
"eslint-config-prettier": "^8.1.0", "eslint-config-prettier": "^8.1.0",
@ -30,7 +30,7 @@
"just-debounce-it": "^3.0.1", "just-debounce-it": "^3.0.1",
"prettier": "^2.7.1", "prettier": "^2.7.1",
"prettier-plugin-svelte": "^2.7.0", "prettier-plugin-svelte": "^2.7.0",
"sass": "^1.54.2", "sass": "^1.54.3",
"svelte": "^3.49.0", "svelte": "^3.49.0",
"svelte-check": "^2.8.0", "svelte-check": "^2.8.0",
"svelte-preprocess": "^4.10.7", "svelte-preprocess": "^4.10.7",

50
pnpm-lock.yaml
View file

@ -12,10 +12,10 @@ specifiers:
'@sveltejs/kit': 1.0.0-next.403 '@sveltejs/kit': 1.0.0-next.403
'@types/cookie': ^0.5.1 '@types/cookie': ^0.5.1
'@types/feather-icons': ^4.7.0 '@types/feather-icons': ^4.7.0
'@types/node': ^18.6.3 '@types/node': ^18.6.4
'@typescript-eslint/eslint-plugin': ^5.32.0 '@typescript-eslint/eslint-plugin': ^5.32.0
'@typescript-eslint/parser': ^5.32.0 '@typescript-eslint/parser': ^5.32.0
carbon-components-svelte: ^0.67.4 carbon-components-svelte: ^0.67.5
carbon-icons-svelte: ^11.2.0 carbon-icons-svelte: ^11.2.0
cookie: ^0.5.0 cookie: ^0.5.0
eslint: ^8.21.0 eslint: ^8.21.0
@ -25,7 +25,7 @@ specifiers:
just-debounce-it: ^3.0.1 just-debounce-it: ^3.0.1
prettier: ^2.7.1 prettier: ^2.7.1
prettier-plugin-svelte: ^2.7.0 prettier-plugin-svelte: ^2.7.0
sass: ^1.54.2 sass: ^1.54.3
svelte: ^3.49.0 svelte: ^3.49.0
svelte-check: ^2.8.0 svelte-check: ^2.8.0
svelte-preprocess: ^4.10.7 svelte-preprocess: ^4.10.7
@ -51,10 +51,10 @@ devDependencies:
'@sveltejs/adapter-auto': 1.0.0-next.64 '@sveltejs/adapter-auto': 1.0.0-next.64
'@sveltejs/kit': 1.0.0-next.403_svelte@3.49.0+vite@3.0.4 '@sveltejs/kit': 1.0.0-next.403_svelte@3.49.0+vite@3.0.4
'@types/cookie': 0.5.1 '@types/cookie': 0.5.1
'@types/node': 18.6.3 '@types/node': 18.6.4
'@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy '@typescript-eslint/eslint-plugin': 5.32.0_iosr3hrei2tubxveewluhu5lhy
'@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq '@typescript-eslint/parser': 5.32.0_qugx7qdu5zevzvxaiqyxfiwquq
carbon-components-svelte: 0.67.4 carbon-components-svelte: 0.67.5
carbon-icons-svelte: 11.2.0 carbon-icons-svelte: 11.2.0
eslint: 8.21.0 eslint: 8.21.0
eslint-config-prettier: 8.5.0_eslint@8.21.0 eslint-config-prettier: 8.5.0_eslint@8.21.0
@ -62,13 +62,13 @@ devDependencies:
just-debounce-it: 3.0.1 just-debounce-it: 3.0.1
prettier: 2.7.1 prettier: 2.7.1
prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi prettier-plugin-svelte: 2.7.0_o3ioganyptcsrh6x4hnxvjkpqi
sass: 1.54.2 sass: 1.54.3
svelte: 3.49.0 svelte: 3.49.0
svelte-check: 2.8.0_sass@1.54.2+svelte@3.49.0 svelte-check: 2.8.0_sass@1.54.3+svelte@3.49.0
svelte-preprocess: 4.10.7_sds2662lehtce3ogrgkmwkedb4 svelte-preprocess: 4.10.7_p5qsoo3fc2fgoyqptb7gjc3l7u
tslib: 2.4.0 tslib: 2.4.0
typescript: 4.7.4 typescript: 4.7.4
vite: 3.0.4_sass@1.54.2 vite: 3.0.4_sass@1.54.3
packages: packages:
@ -202,7 +202,7 @@ packages:
engines: {node: '>=14'} engines: {node: '>=14'}
hasBin: true hasBin: true
dependencies: dependencies:
'@types/node': 18.6.3 '@types/node': 18.6.4
playwright-core: 1.24.2 playwright-core: 1.24.2
dev: true dev: true
@ -281,7 +281,7 @@ packages:
chokidar: 3.5.3 chokidar: 3.5.3
sade: 1.8.1 sade: 1.8.1
svelte: 3.49.0 svelte: 3.49.0
vite: 3.0.4_sass@1.54.2 vite: 3.0.4_sass@1.54.3
transitivePeerDependencies: transitivePeerDependencies:
- diff-match-patch - diff-match-patch
- supports-color - supports-color
@ -305,7 +305,7 @@ packages:
magic-string: 0.26.2 magic-string: 0.26.2
svelte: 3.49.0 svelte: 3.49.0
svelte-hmr: 0.14.12_svelte@3.49.0 svelte-hmr: 0.14.12_svelte@3.49.0
vite: 3.0.4_sass@1.54.2 vite: 3.0.4_sass@1.54.3
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
dev: true dev: true
@ -322,8 +322,8 @@ packages:
resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==} resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
dev: true dev: true
/@types/node/18.6.3: /@types/node/18.6.4:
resolution: {integrity: sha512-6qKpDtoaYLM+5+AFChLhHermMQxc3TOEFIDzrZLPRGHPrLEwqFkkT5Kx3ju05g6X7uDPazz3jHbKPX0KzCjntg==} resolution: {integrity: sha512-I4BD3L+6AWiUobfxZ49DlU43gtI+FTHSv9pE2Zekg6KjMpre4ByusaljW3vYSLJrvQ1ck1hUaeVu8HVlY3vzHg==}
dev: true dev: true
/@types/pug/2.0.6: /@types/pug/2.0.6:
@ -333,7 +333,7 @@ packages:
/@types/sass/1.43.1: /@types/sass/1.43.1:
resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==} resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
dependencies: dependencies:
'@types/node': 18.6.3 '@types/node': 18.6.4
dev: true dev: true
/@typescript-eslint/eslint-plugin/5.32.0_iosr3hrei2tubxveewluhu5lhy: /@typescript-eslint/eslint-plugin/5.32.0_iosr3hrei2tubxveewluhu5lhy:
@ -601,8 +601,8 @@ packages:
engines: {node: '>=6'} engines: {node: '>=6'}
dev: true dev: true
/carbon-components-svelte/0.67.4: /carbon-components-svelte/0.67.5:
resolution: {integrity: sha512-+YbPAYInOQyT6bAVPPdtZ18Zm6oTHYOl+gTzO517QebDzz+Czf+HJiyJnlAkpz9PMOf3sCAhB9JiojO+auuEMQ==} resolution: {integrity: sha512-2azoyIy5xuWYOW+voMJe5p1J72bi8L+BpxkZR0FXCxv/+eK8wrDySaLRmyeYku/qNcD1/PAm4Fl4JZoakeGW4A==}
dependencies: dependencies:
flatpickr: 4.6.9 flatpickr: 4.6.9
dev: true dev: true
@ -2010,8 +2010,8 @@ packages:
rimraf: 2.7.1 rimraf: 2.7.1
dev: true dev: true
/sass/1.54.2: /sass/1.54.3:
resolution: {integrity: sha512-wbVV26sejsCIbBScZZtNkvnrB/bVCQ8hSlZ01D9nzsVh9zLqCkWrlpvTb3YEb6xsuNi9cx75hncqwikHFSz7tw==} resolution: {integrity: sha512-fLodey5Qd41Pxp/Tk7Al97sViYwF/TazRc5t6E65O7JOk4XF8pzwIW7CvCxYVOfJFFI/1x5+elDyBIixrp+zrw==}
engines: {node: '>=12.0.0'} engines: {node: '>=12.0.0'}
hasBin: true hasBin: true
dependencies: dependencies:
@ -2127,7 +2127,7 @@ packages:
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
dev: true dev: true
/svelte-check/2.8.0_sass@1.54.2+svelte@3.49.0: /svelte-check/2.8.0_sass@1.54.3+svelte@3.49.0:
resolution: {integrity: sha512-HRL66BxffMAZusqe5I5k26mRWQ+BobGd9Rxm3onh7ZVu0nTk8YTKJ9vu3LVPjUGLU9IX7zS+jmwPVhJYdXJ8vg==} resolution: {integrity: sha512-HRL66BxffMAZusqe5I5k26mRWQ+BobGd9Rxm3onh7ZVu0nTk8YTKJ9vu3LVPjUGLU9IX7zS+jmwPVhJYdXJ8vg==}
hasBin: true hasBin: true
peerDependencies: peerDependencies:
@ -2140,7 +2140,7 @@ packages:
picocolors: 1.0.0 picocolors: 1.0.0
sade: 1.8.1 sade: 1.8.1
svelte: 3.49.0 svelte: 3.49.0
svelte-preprocess: 4.10.7_sds2662lehtce3ogrgkmwkedb4 svelte-preprocess: 4.10.7_p5qsoo3fc2fgoyqptb7gjc3l7u
typescript: 4.7.4 typescript: 4.7.4
transitivePeerDependencies: transitivePeerDependencies:
- '@babel/core' - '@babel/core'
@ -2164,7 +2164,7 @@ packages:
svelte: 3.49.0 svelte: 3.49.0
dev: true dev: true
/svelte-preprocess/4.10.7_sds2662lehtce3ogrgkmwkedb4: /svelte-preprocess/4.10.7_p5qsoo3fc2fgoyqptb7gjc3l7u:
resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==}
engines: {node: '>= 9.11.2'} engines: {node: '>= 9.11.2'}
requiresBuild: true requiresBuild: true
@ -2209,7 +2209,7 @@ packages:
'@types/sass': 1.43.1 '@types/sass': 1.43.1
detect-indent: 6.1.0 detect-indent: 6.1.0
magic-string: 0.25.9 magic-string: 0.25.9
sass: 1.54.2 sass: 1.54.3
sorcery: 0.10.0 sorcery: 0.10.0
strip-indent: 3.0.0 strip-indent: 3.0.0
svelte: 3.49.0 svelte: 3.49.0
@ -2305,7 +2305,7 @@ packages:
resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==} resolution: {integrity: sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==}
dev: true dev: true
/vite/3.0.4_sass@1.54.2: /vite/3.0.4_sass@1.54.3:
resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==} resolution: {integrity: sha512-NU304nqnBeOx2MkQnskBQxVsa0pRAH5FphokTGmyy8M3oxbvw7qAXts2GORxs+h/2vKsD+osMhZ7An6yK6F1dA==}
engines: {node: ^14.18.0 || >=16.0.0} engines: {node: ^14.18.0 || >=16.0.0}
hasBin: true hasBin: true
@ -2328,7 +2328,7 @@ packages:
postcss: 8.4.14 postcss: 8.4.14
resolve: 1.22.1 resolve: 1.22.1
rollup: 2.77.2 rollup: 2.77.2
sass: 1.54.2 sass: 1.54.3
optionalDependencies: optionalDependencies:
fsevents: 2.3.2 fsevents: 2.3.2
dev: true dev: true

6
src/lib/components/preferences/gameCollection.svelte
View file

@ -21,7 +21,9 @@
</script> </script>
<div> <div>
<span class="collection-title">Your Collection</span> <div>
<span class="collection-title">Your Collection</span>
</div>
<div class="collection-buttons"> <div class="collection-buttons">
<button type="button" aria-label="Save Collection" on:click={() => saveCollection()} <button type="button" aria-label="Save Collection" on:click={() => saveCollection()}
><SaveIcon class="preferences-icon" />Save</button ><SaveIcon class="preferences-icon" />Save</button
@ -49,7 +51,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; justify-content: space-between;
gap: 1.5rem; gap: 6rem;
} }
button { button {

212
src/lib/components/preferences/profile.svelte
View file

@ -1,52 +1,52 @@
<script lang="ts"> <script lang="ts">
import { fade } from 'svelte/transition'; import { fade } from 'svelte/transition';
import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui'; import { Popover, PopoverButton, PopoverPanel } from '@rgossiaux/svelte-headlessui';
import { CogIcon } from '@rgossiaux/svelte-heroicons/outline' import { CogIcon } from '@rgossiaux/svelte-heroicons/outline';
import Themes from './themes.svelte'; import Themes from './themes.svelte';
import GameCollection from './gameCollection.svelte'; import GameCollection from './gameCollection.svelte';
</script> </script>
<div class="container"> <div class="container">
<Popover let:open class="popover"> <Popover let:open class="popover">
<PopoverButton aria-label="Preferences"> <PopoverButton aria-label="Preferences">
<CogIcon width="24" height="24" /> <CogIcon width="24" height="24" />
</PopoverButton> </PopoverButton>
{#if open} {#if open}
<div transition:fade={{ duration: 100 }}> <div transition:fade={{ duration: 100 }}>
<PopoverPanel class="popover-panel" static> <PopoverPanel class="popover-panel" static>
<div class="preferences"> <div class="preferences">
<svg <svg
width="24" width="24"
height="24" height="24"
class="arrow" class="arrow"
viewBox="0 0 24 24" viewBox="0 0 24 24"
fill="none" fill="none"
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
> >
<path <path
id="inside" id="inside"
d="M23 24H1L11.0909 1.98341C11.4474 1.20562 12.5526 1.20562 12.9091 1.98341L23 24Z" d="M23 24H1L11.0909 1.98341C11.4474 1.20562 12.5526 1.20562 12.9091 1.98341L23 24Z"
fill="none" fill="none"
/> />
<path <path
id="outside" id="outside"
d="M12.8944 1.78885L24 24H23L12.9021 2.88628C12.5396 2.12822 11.4604 2.12822 11.0979 2.88628L1 24H0L11.1056 1.78885C11.4741 1.05181 12.5259 1.0518 12.8944 1.78885Z" d="M12.8944 1.78885L24 24H23L12.9021 2.88628C12.5396 2.12822 11.4604 2.12822 11.0979 2.88628L1 24H0L11.1056 1.78885C11.4741 1.05181 12.5259 1.0518 12.8944 1.78885Z"
fill="none" fill="none"
/> />
</svg> </svg>
<span class="title">Preferences</span> <span class="title">Preferences</span>
<div class="options"> <div class="options">
<Themes /> <Themes />
<GameCollection /> <GameCollection />
</div> </div>
</div> </div>
</PopoverPanel> </PopoverPanel>
</div> </div>
{/if} {/if}
</Popover> </Popover>
</div> </div>
<style lang="scss"> <style lang="scss">
@ -56,86 +56,86 @@ import GameCollection from './gameCollection.svelte';
} }
.container { .container {
width: 24px; width: 24px;
height: 24px; height: 24px;
z-index: 10; z-index: 10;
} }
.container :global(.popover) { .container :global(.popover) {
height: 100%; height: 100%;
position: relative; position: relative;
} }
.container :global(.popover-panel) { .container :global(.popover-panel) {
position: absolute; position: absolute;
top: 48px; top: 48px;
right: -22px; right: -22px;
z-index: 10; z-index: 10;
} }
.preferences { .preferences {
background-image: var(--clr-menu-bg); background-image: var(--clr-menu-bg);
padding: var(--spacing-24); padding: var(--spacing-24);
border: 1px solid var(--clr-menu-border); border: 1px solid var(--clr-menu-border);
border-radius: var(--rounded-20); border-radius: var(--rounded-20);
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
} }
.preferences .arrow { .preferences .arrow {
position: absolute; position: absolute;
top: -23px; top: -23px;
right: 22px; right: 22px;
} }
.preferences .arrow #inside { .preferences .arrow #inside {
fill: var(--clr-menu-arrow-bg); fill: var(--clr-menu-arrow-bg);
} }
.preferences .arrow #outside { .preferences .arrow #outside {
fill: var(--clr-menu-border); fill: var(--clr-menu-border);
} }
.preferences .title { .preferences .title {
display: block; display: block;
padding-bottom: var(--spacing-8); padding-bottom: var(--spacing-8);
font-size: var(--font-24); font-size: var(--font-24);
font-weight: 700; font-weight: 700;
line-height: 32px; line-height: 32px;
border-bottom: 1px solid var(--clr-menu-border); border-bottom: 1px solid var(--clr-menu-border);
} }
.preferences .options { .preferences .options {
font-weight: 500; font-weight: 500;
color: var(--clr-menu-text); color: var(--clr-menu-text);
} }
.preferences .options > :global(*) { .preferences .options > :global(*) {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
gap: var(--spacing-32); gap: var(--spacing-32);
padding: var(--spacing-24) 0; padding: var(--spacing-24) 0;
} }
.preferences .options > :global(*:not(:last-child)) { .preferences .options > :global(*:not(:last-child)) {
border-bottom: 1px solid var(--clr-menu-border); border-bottom: 1px solid var(--clr-menu-border);
} }
.preferences .options > :global(*:last-child) { .preferences .options > :global(*:last-child) {
padding-bottom: 0; padding-bottom: 0;
} }
.preferences .options span { .preferences .options span {
max-width: 180px; max-width: 180px;
} }
@media (min-width: 480px) { @media (min-width: 480px) {
.preferences { .preferences {
width: 420px; width: 420px;
} }
.preferences .options > :global(*) { .preferences .options > :global(*) {
gap: var(--spacing-64); gap: var(--spacing-64);
} }
} }
</style> </style>