Simp-O-Matic

Dumb Discord bot in TS.
git clone git://git.knutsen.co/Simp-O-Matic
Log | Files | Refs | README | LICENSE

index.html (7067B)


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Simp'O'Matic &mdash; Discord Bot</title>
	{{FAVICONS}}
	<link href="/main.css" rel="stylesheet">
	<style>
		#content {
			height: 100vh;
			display: flex;
			align-items: center;
			justify-content: center;
			background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='500' height='537' viewBox='0 0 500 537' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='b'%3E%3Cstop stop-color='%23FFDDF1' offset='0%25'/%3E%3Cstop stop-color='%23FBC8E5' offset='42%25'/%3E%3Cstop stop-color='%23DFA1C5' offset='42%25'/%3E%3Cstop stop-color='%23F08CC7' offset='100%25'/%3E%3C/linearGradient%3E%3ClinearGradient x1='50%25' y1='0%25' x2='50%25' y2='100%25' id='a'%3E%3Cstop stop-color='%23FDEAF5' offset='0%25'/%3E%3Cstop stop-color='%23FDEAF5' offset='42%25'/%3E%3Cstop stop-color='%23F5DEEC' offset='42%25'/%3E%3Cstop stop-color='%23FCE2F1' offset='100%25'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg opacity='0.13' fill='none' fill-rule='evenodd'%3E%3Cpath d='M388 101.5a80.25 80.25 0 0156.92 23.58A80.25 80.25 0 01468.5 182h0v320.5c0 7.93-4.81 18.31-12.4 23.68-7.66 5.4-18.03 5.82-18.85 5.82-7.86 0-16.75-5.23-25.49-10.76-2.52-1.59-5.02-3.17-7.49-4.58-18.53-10.57-27.79-16.02-34.23-19.8-4.27-2.52-7.28-4.3-10.96-6.36h0H111a80.25 80.25 0 01-56.92-23.58A80.25 80.25 0 0130.5 410h0V182a80.25 80.25 0 0123.58-56.92A80.25 80.25 0 01111 101.5h0zm-.02 34H111c-12.7 0-24.21 5.1-32.6 13.35a46.35 46.35 0 00-13.9 32.36V410c0 12.7 5.1 24.21 13.35 32.6a46.35 46.35 0 0032.36 13.9h257.24c43.7 25.2 47.68 27.5 67.1 38.36.04-10.81 0-26.42-.05-41.44v-1.35c-.07-17.82-.11-34.57 0-41.28V182c0-12.7-5.1-24.21-13.35-32.6a46.35 46.35 0 00-32.36-13.9h-.8z' stroke='url(%23a)' stroke-width='9' fill='url(%23b)' fill-rule='nonzero'/%3E%3Cpath d='M258 67v39h-15V67c3.22.92 5.72 1.38 7.5 1.38 1.78 0 4.28-.46 7.5-1.38zm-8-67a30 30 0 110 60 30 30 0 010-60zm0 15a15 15 0 100 30 15 15 0 000-30z' fill='%23FCA0D6'/%3E%3Cpath d='M29 207c.3 0 6-.02 6 0v149H24a21 21 0 01-21-21V228a21 21 0 0121-21h5zm0 15h-5a6 6 0 00-6 5.78V335a6 6 0 005.78 6H29a6 6 0 006-5.78V228a6 6 0 00-5.78-6H29zM470 207h-6v149h11a21 21 0 0021-21V228a21 21 0 00-21-21h-5zm0 15h5a6 6 0 016 5.78v107.23a6 6 0 01-5.77 6H470a6 6 0 01-6-5.78V228.01a6 6 0 015.78-6h.22z' fill='%23FCA0D6' fill-rule='nonzero' opacity='.9'/%3E%3Cpath d='M182.1 347.6c10.1-4.7 16.7-14 20.5-28.6 3-11.1 1.9-37.4-1.8-45.5-1.4-3.2-5.7-4.9-9-3.6-3.9 1.5-5.1 5.6-3.9 13.2 1.6 9.5 1.4 27.5-.4 34.4-3.2 12.3-10.5 18.5-22 18.5-11.1-.1-17.6-5.1-20.6-16-1.8-6.4-1.5-23.9.6-34.8 1.6-8.4 1.6-9.4.1-11.6-2.9-4.5-9.2-4.6-12-.3-3.9 5.8-6 36.8-3.5 48.9 2.1 9.9 8.3 19.4 15.5 23.9 6.3 3.8 11.3 4.9 21.4 4.6 7.8-.3 10.5-.9 15.1-3.1zm169.1.1c9.2-4.5 15.2-12.5 18.3-24.4 3-11.5 1-43.8-3.1-50-2.8-4.3-9.1-4.2-12 .2-1.4 2.2-1.4 3.3.2 12.2 2 11.5 2.2 27.9.5 34.3-3 10.9-9.5 15.9-20.6 16-11.5 0-18.8-6.2-22-18.5-1.8-6.9-2-24.9-.4-34.4 1.2-7.7.1-11.4-4-13.1-3.5-1.4-7.4.2-8.9 3.5-3.7 8.1-4.8 34.4-1.8 45.5 4.6 17.4 13.4 27.6 27 31.1 1.7.4 7.2.7 12.2.6 7.5-.2 10-.7 14.6-3z' fill='%23666472' fill-rule='nonzero'/%3E%3Cpath d='M243 396.1c1.4-1 3.6-3.5 5-5.5 2.2-3.4 2.6-3.6 3.5-2 .5 1 2.6 3.6 4.6 5.6 3.3 3.5 4.1 3.8 9 3.8 6.3 0 10.9-2.4 14-7.2 1.7-2.8 2-4.5 1.6-11.3-.4-8.3-3.6-17.8-6.3-18.9-1.9-.7-4.7 2.3-3.8 4.3 6.7 15.3 5.5 25-3.1 26.7-6.9 1.3-10.7-3.6-12.8-16.6-1.1-7-1.4-7.5-3.7-7.5-2.7 0-3.1.8-5 10.7-1.9 9.8-7.1 15-13.4 13.4-7-1.7-8.6-9.2-4.1-20.1 3-7.1 3.1-9.1.8-10-2.3-.8-4.6 2-7.3 9.3-2.7 7.1-3 15.6-.7 19.9 4 7.5 14.9 10.2 21.7 5.4z' fill='%23989AA1' fill-rule='nonzero'/%3E%3Cpath d='M152 379a1 1 0 011 1v10a1 1 0 11-2 0v-10a1 1 0 011-1zm5.5 0a1 1 0 011 1v10a1 1 0 11-2 0v-10a1 1 0 011-1zm5.5 0a1 1 0 011 1v10a1 1 0 11-2 0v-10a1 1 0 011-1zM338 379a1 1 0 011 1v10a1 1 0 11-2 0v-10a1 1 0 011-1zm5.5 0a1 1 0 011 1v10a1 1 0 11-2 0v-10a1 1 0 011-1zm5.5 0a1 1 0 011 1v10a1 1 0 11-2 0v-10a1 1 0 011-1z' fill='%23DFA1C5'/%3E%3C/g%3E%3C/svg%3E");
			background-size: cover;
			background-position: center;

		}
		.center {
			color: var(--grey);
			--font-height: 3em;
			text-align: center;
		}
		.center p {
			letter-spacing: -1px;
			width: 16em;
			display: inline-block;
			margin: 0;
			font-size: 1.2em;
			opacity: 0.7;
		}
		.center h1 {
			font-size: var(--font-height);
			filter: drop-shadow(0px 2px 4px rgba(0,0,0,0.13));
		}
		.center h1 img {
			height: calc(var(--font-height) / 2);
			margin: 0 0.2em;
		}
		.center h1 .pink {
			/* font-size: calc(var(--font-height) * 0.2); */
		}
		.bar {
			display: inline-block;
			height: 1.1em;
			width: 0.3em;
			border-radius: 3px;
			background: var(--pink);
		}
		.simp {
			font-family: "Baloo 2";
			font-weight: 800;
		}
		.matic, .o {
			font-family: "Exo 2";
			font-weight: 100;
			position: relative;
			top: -5px;
		}
		.o {
			font-weight: 300
		}
	</style>
</head>
<body>
	<div id="content">
		<div class="center">
			<h1>
				<div class="bar"></div>
				<span class="grey" style="position: relative; top: -3px"><span class="simp">simp</span><span class="o">'o'</span><span class="matic">matic</span></span>
				<span class="pink">is Online</span>
				<img
					class="emoji"
					alt="uwu"
					src="https://discordemoji.com/assets/emoji/BlobUWU.png" />
			</h1>
			<p>Active in <span class="pink">{{GUILD_COUNT}}</span> Guilds!</p>
			<p id="chart">
				Aggregate command usage chart:
			</p>
		</div>
	</div>
	<!-- GitLink -->
	<style>
		.gitlink {
			position: fixed;
			bottom: 1.8em;
			right: 1.9em;
			padding: 1em 1em 0.9em 1em;
			background: #fff;
			border: 1px solid #0001;
			border-radius: 6px;
		}

		.gitlink img {
			transition: all .1s ease-in-out;
			opacity: 0.3;
		}

		.gitlink img:hover {
			opacity: 1;
			cursor: pointer;
		}

		.gitlink,
		.gitlink img {
			margin: 0;
		}

		.gitlink img {
			padding: 0;
		}
	</style>
	<a class="gitlink" target="_blank" href="https://github.com/Demonstrandum/Simp-O-Matic">
		<img src="https://cdn.jsdelivr.net/npm/simple-icons@latest/icons/github.svg" height=22 alt="GitHub" />
	</a>
	<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
	<script src="https://cdn.jsdelivr.net/npm/@observablehq/plot@0.5"></script>
	<script>
	const mergeWithSum = (a, b) =>
		[...Object.keys(a), ...Object.keys(b)].reduce((combined, key) => {
			combined[key] = (a[key] ?? 0) + (b[key] ?? 0);
			return combined;
		}, {});
	async function load() {
		let url = 'https://simp.knutsen.co/config.json'
		let config = await (await fetch(url)).json();
		let statsAgg = Object.entries(Object.entries(config.guilds).map(([k, v]) => v.stats.commands).reduce((acc, a) => mergeWithSum(acc, a), {})).map(([k, v]) => {
			return {
				cmd: k,
				freq: v
			}
		})
		console.log(statsAgg)
		document.getElementById('chart').append(Plot.plot({
				marks: [
				Plot.barY(statsAgg, {x: "cmd", y: "freq", fill: "steelblue", sort: {x: "y", reverse: true}}),
				Plot.ruleY([0])
				]
			}))
	}
	load();
	</script>
</body>
</html>