From fd3dbfa65b28db16fcb6d3f8830620eadcc86bc0 Mon Sep 17 00:00:00 2001 From: "Jill \"oatmealine\" Monoids" Date: Sat, 18 Nov 2023 15:49:50 +0300 Subject: [PATCH] add more stuff to main page --- src/index.ts | 2 +- src/web.ts | 10 +++++++++- static/create-recipe/script.js | 4 ++-- static/index.html | 5 +++++ static/script.js | 29 +++++++++++++++++++++++++++++ static/style.css | 15 +++++++++++++-- 6 files changed, 59 insertions(+), 6 deletions(-) create mode 100644 static/script.js diff --git a/src/index.ts b/src/index.ts index 3ce7cc5..a0d3592 100644 --- a/src/index.ts +++ b/src/index.ts @@ -29,7 +29,7 @@ async function init() { log.nonsense('booting chip...'); log.nonsense('starting up web interface...'); - await startServer(sitePort); + await startServer(bot, sitePort); log.nonsense('setting up connection...'); diff --git a/src/web.ts b/src/web.ts index b2c625a..32326fb 100644 --- a/src/web.ts +++ b/src/web.ts @@ -2,8 +2,9 @@ import express from 'express'; import * as log from './lib/log'; import { CustomItem, db } from './lib/db'; import { defaultItems } from './lib/rpg/items'; +import { Client } from 'discord.js'; -export async function startServer(port: number) { +export async function startServer(bot: Client, port: number) { const app = express(); app.use(express.static('static/')); @@ -24,5 +25,12 @@ export async function startServer(port: number) { res.json([...defaultItems, ...customItems]); }); + app.get('/api/status', async (_, res) => { + res.json({ + guilds: bot.guilds.cache.size, + uptime: bot.uptime + }); + }); + app.listen(port, () => log.info(`web interface listening on ${port}`)); } \ No newline at end of file diff --git a/static/create-recipe/script.js b/static/create-recipe/script.js index 3b498a7..f705817 100644 --- a/static/create-recipe/script.js +++ b/static/create-recipe/script.js @@ -128,10 +128,10 @@ Promise.all([ fetch(`/api/items${document.location.search}`) .then(res => res.json()), loaded -]).then(items => { +]).then(([items]) => { const itemsContainer = document.querySelector('.items'); itemsContainer.textContent = ''; - items[0].forEach(item => + items.forEach(item => itemsContainer.appendChild(renderItem(item)) ); document.querySelectorAll('.item-list').forEach(elem => { diff --git a/static/index.html b/static/index.html index d4b4966..5283dc7 100644 --- a/static/index.html +++ b/static/index.html @@ -12,6 +12,8 @@ + +
@@ -22,6 +24,9 @@ · repo
+
+ ··· +
\ No newline at end of file diff --git a/static/script.js b/static/script.js new file mode 100644 index 0000000..83c38e8 --- /dev/null +++ b/static/script.js @@ -0,0 +1,29 @@ +let resolveLoaded; +const loaded = new Promise(resolve => resolveLoaded = resolve); + +function formatUptime(s) { + let units = [ + ['d', (s / (1000 * 60 * 60 * 24))], + ['h', (s / (1000 * 60 * 60)) % 24], + ['m', (s / (1000 * 60)) % 60], + ['s', (s / 1000) % 60] + ]; + + return units.filter(([_, t]) => t > 1).map(([sh, t]) => `${Math.ceil(t)}${sh}`).join(' '); +} + +Promise.all([ + fetch('/api/status') + .then(res => res.json()), + loaded +]).then(([status]) => { + document.querySelector('#status').innerHTML = ` +
online · ${status.guilds} guilds · up for ${formatUptime(status.uptime)} + `; + const firstRender = Date.now(); + setInterval(() => { + document.querySelector('#uptime').innerText = formatUptime(status.uptime + Date.now() - firstRender); + }, 1000); +}); + +document.addEventListener('DOMContentLoaded', () => resolveLoaded()); \ No newline at end of file diff --git a/static/style.css b/static/style.css index db33617..4ca85c8 100644 --- a/static/style.css +++ b/static/style.css @@ -62,11 +62,11 @@ a:hover { animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); transition: transform 0.15s, opacity 0.1s; } -#main img:active { +#main > img:active { transform: scale(0.97); opacity: 0.9; } -#main :not(img) { +#main > :not(img) { animation: 0.8s fadein; } #main h1 { @@ -74,6 +74,17 @@ a:hover { margin-top: 0.5rem; margin-bottom: 1rem; } +#main #status { + color: var(--text-color-light); + font-size: 0.85rem; +} +#status .status { + width: 0.5rem; + height: 0.5rem; + background-color: #00a55e; + display: inline-block; + border-radius: 1rem; +} @keyframes fadein { 0% { opacity: 0; }