dark-firepit/jillo-bot
dark-firepit
/
jillo-bot
5
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add more stuff to main page

This commit is contained in:
Jill 2023-11-18 15:49:50 +03:00
parent 07e6e162ff
commit fd3dbfa65b
Signed by: oat
GPG Key ID: 33489AA58A955108
6 changed files with 59 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.ts
View File

@ -29,7 +29,7 @@ async function init() {
log.nonsense('booting chip...'); log.nonsense('booting chip...');
log.nonsense('starting up web interface...'); log.nonsense('starting up web interface...');
await startServer(sitePort); await startServer(bot, sitePort);
log.nonsense('setting up connection...'); log.nonsense('setting up connection...');

10
src/web.ts
View File

@ -2,8 +2,9 @@ import express from 'express';
import * as log from './lib/log'; import * as log from './lib/log';
import { CustomItem, db } from './lib/db'; import { CustomItem, db } from './lib/db';
import { defaultItems } from './lib/rpg/items'; 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(); const app = express();
app.use(express.static('static/')); app.use(express.static('static/'));
@ -24,5 +25,12 @@ export async function startServer(port: number) {
res.json([...defaultItems, ...customItems]); 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}`)); app.listen(port, () => log.info(`web interface listening on ${port}`));
} }

4
static/create-recipe/script.js
View File

@ -128,10 +128,10 @@ Promise.all([
fetch(`/api/items${document.location.search}`) fetch(`/api/items${document.location.search}`)
.then(res => res.json()), .then(res => res.json()),
loaded loaded
]).then(items => { ]).then(([items]) => {
const itemsContainer = document.querySelector('.items'); const itemsContainer = document.querySelector('.items');
itemsContainer.textContent = ''; itemsContainer.textContent = '';
items[0].forEach(item => items.forEach(item =>
itemsContainer.appendChild(renderItem(item)) itemsContainer.appendChild(renderItem(item))
); );
document.querySelectorAll('.item-list').forEach(elem => { document.querySelectorAll('.item-list').forEach(elem => {

5
static/index.html
View File

@ -12,6 +12,8 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Balsamiq+Sans&display=swap" rel="stylesheet">
<script src="/script.js"></script>
</head> </head>
<body> <body>
<div id="main"> <div id="main">
@ -22,6 +24,9 @@
&middot; &middot;
<a href="https://git.oat.zone/dark-firepit/jillo-bot" target="_blank" rel="noopener">repo</a> <a href="https://git.oat.zone/dark-firepit/jillo-bot" target="_blank" rel="noopener">repo</a>
</div> </div>
<div id="status">
&middot;&middot;&middot;
</div>
</div> </div>
</body> </body>
</html> </html>

29
static/script.js Normal file
View File

@ -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 = `
<div class="status"></div> online &middot; ${status.guilds} guilds &middot; up for <span id="uptime">${formatUptime(status.uptime)}</span>
`;
const firstRender = Date.now();
setInterval(() => {
document.querySelector('#uptime').innerText = formatUptime(status.uptime + Date.now() - firstRender);
}, 1000);
});
document.addEventListener('DOMContentLoaded', () => resolveLoaded());

15
static/style.css
View File

@ -62,11 +62,11 @@ a:hover {
animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
transition: transform 0.15s, opacity 0.1s; transition: transform 0.15s, opacity 0.1s;
} }
#main img:active { #main > img:active {
transform: scale(0.97); transform: scale(0.97);
opacity: 0.9; opacity: 0.9;
} }
#main :not(img) { #main > :not(img) {
animation: 0.8s fadein; animation: 0.8s fadein;
} }
#main h1 { #main h1 {
@ -74,6 +74,17 @@ a:hover {
margin-top: 0.5rem; margin-top: 0.5rem;
margin-bottom: 1rem; 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 { @keyframes fadein {
0% { opacity: 0; } 0% { opacity: 0; }