From 4ab739d681c1f724f1da52306264579cd2b7cd94 Mon Sep 17 00:00:00 2001 From: "Jill \"oatmealine\" Monoids" Date: Mon, 20 Nov 2023 07:30:14 +0300 Subject: [PATCH] simple profile screen --- src/web/web.ts | 48 ++++++++++++++++++++++++---- static/style.css | 59 ++++++++++++++++++++++++++++++++++- views/home.handlebars | 6 +--- views/layouts/main.handlebars | 34 ++++++++++++++++++++ views/profile.handlebars | 27 ++++++++++++++++ 5 files changed, 162 insertions(+), 12 deletions(-) create mode 100644 views/layouts/main.handlebars create mode 100644 views/profile.handlebars diff --git a/src/web/web.ts b/src/web/web.ts index 2583f11..99dcfab 100644 --- a/src/web/web.ts +++ b/src/web/web.ts @@ -1,17 +1,47 @@ import express from 'express'; -import { engine } from 'express-handlebars'; +import { create } from 'express-handlebars'; import * as log from '../lib/log'; -import { CustomItem, Session, db } from '../lib/db'; +import { CustomItem, Counter, Session, CustomCraftingRecipe, db } from '../lib/db'; import { defaultItems } from '../lib/rpg/items'; import { Client, CDN } from 'discord.js'; import { getToken, getSessionString, getSession, setSession, updateCookie } from './oauth2'; import { getUser, getGuilds } from './user'; +async function getGuildInfo(bot: Client, id: string) { + const guild = await bot.guilds.cache.get(id); + if (!guild) return; + + const items = await db('customItems') + .where('guild', guild) + .count({count: '*'}); + + const counters = await db('counters') + .where('guild', guild) + .count({count: '*'}); + + const recipes = await db('customCraftingRecipes') + .where('guild', guild) + .count({count: '*'}); + + return { + items: items[0].count as number, + counters: counters[0].count as number, + recipes: recipes[0].count as number, + } +} + export async function startServer(bot: Client, port: number) { const app = express(); const cdn = new CDN(); - app.engine('handlebars', engine()); + const hbs = create({ + helpers: { + avatar: (id: string, hash: string) => (id && hash) ? cdn.avatar(id, hash, { size: 128 }) : '/assets/avatar.png', + icon: (id: string, hash: string) => (id && hash) ? cdn.icon(id, hash, { size: 128, forceStatic: true }) : '/assets/avatar.png', + } + }) + + app.engine('handlebars', hbs.engine); app.set('view engine', 'handlebars'); app.set('views', './views'); @@ -70,7 +100,7 @@ export async function startServer(bot: Client, port: number) { res.render('home', { signedIn: session !== undefined, username: user?.global_name, - avatar: user?.avatar ? cdn.avatar(user.id, user.avatar, { size: 128 }) : null, + avatar: user?.avatar ? cdn.avatar(user.id, user.avatar, { size: 128 }) : '/assets/avatar.png', layout: false, }); }); @@ -80,12 +110,18 @@ export async function startServer(bot: Client, port: number) { if (!session) return res.redirect(`https://discord.com/api/oauth2/authorize?client_id=${bot.config.clientId}&redirect_uri=${encodeURIComponent(bot.config.siteURL)}&response_type=code&scope=identify%20guilds`); const user = await getUser(session); + if (!user) return; const guilds = await getGuilds(session); + if (!guilds) return; //res.sendFile('profile/index.html', { root: 'static/' }); - res.json({ + res.render('profile', { user, - guilds + guilds: await Promise.all( + guilds.map(async guild => + ({...guild, jillo: await getGuildInfo(bot, guild.id)}) + ) + ), }); }); diff --git a/static/style.css b/static/style.css index 4eb5244..4b140e3 100644 --- a/static/style.css +++ b/static/style.css @@ -21,6 +21,7 @@ body { -webkit-text-size-adjust: 100%; display: flex; flex-direction: column; + justify-content: flex-start; } :root { @@ -133,7 +134,7 @@ a:hover { #content { max-width: 1000px; width: 100%; - margin: auto; + margin: 0 auto; margin-bottom: 6rem; } @@ -293,4 +294,60 @@ pre { .note { font-style: italic; color: var(--text-color-light); +} + +.user { + display: flex; + flex-direction: row; + height: 2rem; + padding: 0.5em; + align-items: center; + width: fit-content; + margin: 0 auto; +} +.user .avatar { + display: block; + aspect-ratio: 1 / 1; + border-radius: 2rem; + width: auto; + height: 100%; + margin-right: 0.5em; +} + +.guilds { + display: flex; + flex-direction: column; + align-items: center; +} +.guild { + order: 0; + display: flex; + width: 600px; + max-width: 100%; + height: 3rem; + padding: 0.5rem; + gap: 0.5rem; + margin: 0.5rem; + background-color: var(--background-color-dark); +} +.guild.unavailable { + order: 1; +} +.guild.unavailable .icon { + filter: grayscale(100%); +} +.guild .icon { + flex: 0 0 auto; + display: block; + aspect-ratio: 1 / 1; + border-radius: 2rem; + width: auto; + height: 100%; +} +.guild .right { + display: flex; + flex-direction: column; +} +.guild .info { + color: var(--text-color-light); } \ No newline at end of file diff --git a/views/home.handlebars b/views/home.handlebars index b25b020..7c53449 100644 --- a/views/home.handlebars +++ b/views/home.handlebars @@ -22,11 +22,7 @@ {{else}}
log in
{{/if}} - {{#if avatar}} - - {{else}} - - {{/if}} +
diff --git a/views/layouts/main.handlebars b/views/layouts/main.handlebars new file mode 100644 index 0000000..bc10d4a --- /dev/null +++ b/views/layouts/main.handlebars @@ -0,0 +1,34 @@ + + + + + + jillo + + + + + + + + + + +
+
+
+
+ jillo +
+
+ invite + · + repo + +
+
+ + {{{body}}} +
+ + \ No newline at end of file diff --git a/views/profile.handlebars b/views/profile.handlebars new file mode 100644 index 0000000..52b8ba8 --- /dev/null +++ b/views/profile.handlebars @@ -0,0 +1,27 @@ +
+ +
Logged in as {{user.global_name}}
+
+ +
+

Guilds

+ {{#each guilds}} + {{#if jillo}} +
+ +
+
{{name}}
+
{{jillo.counters}} counters · {{jillo.items}} items · {{jillo.recipes}} recipes
+
+
+ {{else}} +
+ +
+
{{name}}
+
Jillo is not in this server
+
+
+ {{/if}} + {{/each}} +
\ No newline at end of file