diff options
| -rw-r--r-- | .env.example | 1 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rw-r--r-- | src/hooks.ts | 38 | ||||
| -rw-r--r-- | src/lib/sections/Collections.svelte | 7 | ||||
| -rw-r--r-- | src/lib/sections/Inventories.svelte | 12 | ||||
| -rw-r--r-- | src/lib/sections/Skills.svelte | 6 | ||||
| -rw-r--r-- | src/routes/loggedin.ts | 36 | ||||
| -rw-r--r-- | src/routes/login.ts | 35 | ||||
| -rw-r--r-- | src/routes/player/[player]/[profile].svelte | 15 | ||||
| -rw-r--r-- | svelte.config.js | 2 |
10 files changed, 123 insertions, 32 deletions
diff --git a/.env.example b/.env.example new file mode 100644 index 0000000..313d6ac --- /dev/null +++ b/.env.example @@ -0,0 +1 @@ +DISCORD_CLIENT_ID=The client/application ID of the Discord app.
\ No newline at end of file diff --git a/package.json b/package.json index 378d7fc..2e7dfd2 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,8 @@ "@sveltejs/adapter-static": "^1.0.0-next.28", "@sveltejs/adapter-vercel": "^1.0.0-next.43", "cookie": "^0.4.1", + "dotenv": "^16.0.0", "skyblock-assets": "^2.0.7" }, "packageManager": "yarn@3.1.1" -}
\ No newline at end of file +} diff --git a/src/hooks.ts b/src/hooks.ts index d767555..9cd6ca4 100644 --- a/src/hooks.ts +++ b/src/hooks.ts @@ -1,24 +1,24 @@ -import cookie from 'cookie'; -import { v4 as uuid } from '@lukeed/uuid'; -import type { Handle } from '@sveltejs/kit'; +import cookie from 'cookie' +import { v4 as uuid } from '@lukeed/uuid' +import type { Handle } from '@sveltejs/kit' export const handle: Handle = async ({ event, resolve }) => { - const cookies = cookie.parse(event.request.headers.get('cookie') || ''); - event.locals.userid = cookies.userid || uuid(); + // const cookies = cookie.parse(event.request.headers.get('cookie') || ''); + // event.locals.userid = cookies.userid || uuid(); - const response = await resolve(event); + const response = await resolve(event) - if (!cookies.userid) { - // if this is the first time the user has visited this app, - // set a cookie so that we recognise them when they return - response.headers.set( - 'set-cookie', - cookie.serialize('userid', event.locals.userid, { - path: '/', - httpOnly: true - }) - ); - } + // if (!cookies.userid) { + // // if this is the first time the user has visited this app, + // // set a cookie so that we recognise them when they return + // response.headers.set( + // 'set-cookie', + // cookie.serialize('userid', event.locals.userid, { + // path: '/', + // httpOnly: true + // }) + // ); + // } - return response; -}; + return response +} diff --git a/src/lib/sections/Collections.svelte b/src/lib/sections/Collections.svelte index 7ca1969..ca2da16 100644 --- a/src/lib/sections/Collections.svelte +++ b/src/lib/sections/Collections.svelte @@ -42,10 +42,11 @@ <style> ul { margin: 0; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-column-gap: 0; + display: flex; + flex-wrap: wrap; width: fit-content; + /* this ensures there's at most 2 lines */ + max-width: 30em; } ul > :global(li) { diff --git a/src/lib/sections/Inventories.svelte b/src/lib/sections/Inventories.svelte index 6af64e9..84480ea 100644 --- a/src/lib/sections/Inventories.svelte +++ b/src/lib/sections/Inventories.svelte @@ -124,4 +124,16 @@ .inventory-tab-active { background-color: rgba(40, 40, 40, 0.9); } + + @media only screen and (max-width: 480px) { + .inventory-content:global(#inventory .item) { + /* there's no good way to override the existing 32px size without !important :( */ + font-size: 24px !important; + } + } + @media only screen and (max-width: 350px) { + .inventory-content:global(#inventory .item) { + font-size: 16px !important; + } + } </style> diff --git a/src/lib/sections/Skills.svelte b/src/lib/sections/Skills.svelte index fd720f9..34f7339 100644 --- a/src/lib/sections/Skills.svelte +++ b/src/lib/sections/Skills.svelte @@ -64,9 +64,9 @@ ul { margin-top: 0; - display: grid; - grid-template-columns: repeat(2, 1fr); - grid-column-gap: 2em; + display: flex; + flex-wrap: wrap; + max-width: 30em; } ul > li { width: 10em; diff --git a/src/routes/loggedin.ts b/src/routes/loggedin.ts new file mode 100644 index 0000000..eb7236d --- /dev/null +++ b/src/routes/loggedin.ts @@ -0,0 +1,36 @@ +import { API_URL } from '$lib/api' +import type { RequestHandler } from '@sveltejs/kit' +import type { JSONValue } from '@sveltejs/kit/types/internal' + +export const get: RequestHandler = async ({ params }) => { + const code = params.code + const response = await fetch(`${API_URL}accounts/createsession`, { + method: 'POST', + headers: { + 'content-type': 'application/json', + }, + body: JSON.stringify({ + code + }), + }).then(res => { + if (res.status !== 200) + throw new Error(res.statusText) + return res.json() + }) + console.log(response) + if (response.ok) { + return { + status: 303, + headers: { + location: '/verify', + 'Set-Cookie': `sid=${response.session_id}; Max-Age=31536000000; Path=/; HttpOnly; SameSite=Strict` + } + } + } + return { + status: 303, + headers: { + location: '/login', + } + } +} diff --git a/src/routes/login.ts b/src/routes/login.ts new file mode 100644 index 0000000..03ca5ee --- /dev/null +++ b/src/routes/login.ts @@ -0,0 +1,35 @@ +import type { RequestHandler } from '@sveltejs/kit' + +const DISCORD_CLIENT_ID = process.env.DISCORD_CLIENT_ID +if (!DISCORD_CLIENT_ID) + console.warn('DISCORD_CLIENT_ID is not set as an environment variable. This is required for logging in with Discord to work.') + +export const get: RequestHandler = async ({ request }) => { + const host = request.headers.get('host') + if (!DISCORD_CLIENT_ID) + return { + status: 500, + headers: { + 'content-type': 'text/plain', + }, + body: 'DISCORD_CLIENT_ID is not set as an environment variable. Please contact the owner of the website if this was expected to work.', + } + + if (!host) + return { + status: 400, + headers: { + 'content-type': 'text/plain', + }, + body: 'Host header is required.', + } + + const protocol = request.url.startsWith('https') ? 'https' : 'http' + + return { + status: 303, + headers: { + location: `https://discord.com/oauth2/authorize?client_id=${DISCORD_CLIENT_ID}&redirect_uri=${protocol}://${host}%2Floggedin&response_type=code&scope=identify` + } + } +} diff --git a/src/routes/player/[player]/[profile].svelte b/src/routes/player/[player]/[profile].svelte index b763b7f..b87741c 100644 --- a/src/routes/player/[player]/[profile].svelte +++ b/src/routes/player/[player]/[profile].svelte @@ -143,12 +143,14 @@ {/if} {#if data.member.stats} {#each categories as category} - <section> - <Collapsible id={category}> - <h2 slot="title">{cleanId(category)}</h2> - <StatList stats={data.member.stats.filter(s => s.category === category)} /> - </Collapsible> - </section> + {#if data.member.stats?.find(s => s.category === category)} + <section> + <Collapsible id={category}> + <h2 slot="title">{cleanId(category)}</h2> + <StatList stats={data.member.stats.filter(s => s.category === category)} /> + </Collapsible> + </section> + {/if} {/each} {/if} <section> @@ -207,6 +209,7 @@ section { margin-bottom: 0.5em; + max-width: fit-content; } @media only screen and (max-width: 1040px) { diff --git a/svelte.config.js b/svelte.config.js index 9201300..4945e1e 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,7 +1,9 @@ // import adapter from '@sveltejs/adapter-cloudflare' import adapter from '@sveltejs/adapter-auto' import preprocess from 'svelte-preprocess' +import dotenv from 'dotenv' +dotenv.config() /** @type {import('@sveltejs/kit').Config} */ |