random-stuff/polcomp-visualizer.html

124 lines
4.3 KiB
HTML
Raw Permalink Normal View History

2020-08-12 18:16:20 +00:00
<title>styropyro discord political compass visualizer</title>
<meta charset="utf8"/>
<style>
canvas {
border: 1px solid black;
/* TODO */
width: 500px;
height: 500px;
}
.name {
font-weight: 500;
}
#selected {
padding: 1em;
}
#frame {
display: flex;
}
</style>
<h1>styropyro discord political compass visualizer</h1>
<div id="frame">
<canvas></canvas>
<div id="selected"></div>
</div>
<script>
const canv = document.querySelector("canvas")
const selected = document.querySelector("#selected")
canv.height = 500
canv.width = 500
const ctx = canv.getContext("2d")
const drawRect = (c, x, y, w, h) => {
ctx.fillStyle = c
ctx.fillRect(x, y, w, h)
}
drawRect("salmon", 0, 0, 250, 250)
drawRect("aquamarine", 250, 0, 250, 250)
drawRect("lightgreen", 0, 250, 250, 250)
drawRect(Math.random() > 0.5 ? "orchid" : "yellow", 250, 250, 250, 250)
const drawLine = (x1, y1, x2, y2) => {
// technically there's a line thing *anyway*
ctx.fillRect(x1, y1, x2 - x1, y2 - y1)
}
ctx.fillStyle = "black"
for (let x = 1; x < 20; x++) {
drawLine(x * 25, 0, x * 25 + 1, 500)
}
for (let y = 1; y < 20; y++) {
drawLine(0, y * 25, 500, y * 25 + 1)
}
drawLine(0, 248, 500, 252)
drawLine(248, 0, 252, 500)
const results = new Map([
["C4M0K41#2507", { x: -8.9, y: -8.9, prog: -6.5, color: "#9a0200" }],
["gollark#3909", { x: 2 , y: 6.7 , prog: 12 , color: "#04d9ff" }],
["dunnousername#8672", { x: -0.1, y: 5 , prog: 8.5 , color: "#f97306" }],
["ThatRedKite#0815", { x: -3.6, y: -0.3, prog: 13.5, color: "#77926f" }], // formerly -3.9, -1.3, 12.5
["Billy Mays#5049", { x: -7.2, y: 2.3 , prog: 9 , color: "#0b5509" }],
["charizardrekt#0312", { x: -0.3, y: 2.3 , prog: 4.9 , color: "#3675ab" }],
["Tiki#9380", { x: 1.6 , y: 0.3 , prog: 9.9 , color: "#00d5dc" }],
["0x1c1ean#1489", { x: 1 , y: 1.3 , prog: 6.4 , color: "#21fc0d" }],
["Curiosity#5280", { x: -3.3, y: 3.3 , prog: 11 , color: "#fe019a" }],
["P-α3#3732", { x: 3.9, y: -7.3, prog: 0.5 , color: "#ff073a" }],
["komrad kit#8767", { x: -8 , y: -7.3, prog: 7 , color: "#ffc512" }], // approx - he may have meant +7.3 on y
["Armor Plated Meme#2957", { x: -2.3, y: -4 , prog: -2 , color: "#6258c4" }],
["Qwerty#1111", { x:3.6 , y: 3 , prog:2.5 , color: "#019529" }],
["Lemon_Emu#6143", { x: -1.6, y: -1 , prog: 0.5 , color: "#fff917" }],
["Kitty Strafe#3480", { x: -1.3, y: -3 , prog: 8 , color: "#1f0954" }]
])
for (const [k, v] of results) {
v.cx = Math.round((v.x * 25) + 250)
v.cy = Math.round((v.y * 25) + 250)
drawRect(v.color, v.cx - 8, v.cy - 8, 16, 16)
}
const e = (cls, parent, content) => {
const element = document.createElement("div")
element.classList.add(cls)
if (content) { element.appendChild(document.createTextNode(content)) }
if (parent) { parent.appendChild(element) }
return element
}
const clearSelected = () => { while (selected.firstChild) { selected.removeChild(selected.firstChild) } }
const updateSelected = info => {
e("name", selected, info.name)
e("xaxis", selected, `Rightism (X, L/R): ${info.x}`)
e("yaxis", selected, `Libertarianism (Y, Auth/Lib): ${info.y}`)
e("culturalaxis", selected, `Progressiveness (Conservative/Progressive): ${info.prog}`)
}
const updateFromEvent = (ev, clear) => {
const mx = ev.clientX - canv.offsetLeft
const my = ev.clientY - canv.offsetTop
for (const [k, v] of results) {
if (Math.abs(v.cx - mx) < 16 && Math.abs(v.cy - my) < 16) {
console.log("selecting", k)
clearSelected()
updateSelected({ ...v, name: k })
return
}
}
if (clear) { clearSelected() }
}
canv.addEventListener("click", ev => {
updateFromEvent(ev, true)
})
canv.addEventListener("mousemove", ev => {
updateFromEvent(ev, false)
})
</script>