124 lines
4.3 KiB
HTML
124 lines
4.3 KiB
HTML
<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>
|