-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathcustom.html
2 lines (2 loc) · 3.78 KB
/
custom.html
1
2
<!DOCTYPE html><html><head><title>LiberationValues</title><link href="./dist/style.css" rel="stylesheet" type="text/css"><link rel="icon" type="x-icon" href="./assets/icon.png"><link rel="shortcut icon" type="x-icon" href="./assets/icon.png"><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta name="theme-color" content="#000000" data-react-helmet="true"><meta property="og:ttl" content="60"><meta property="og:title" content="LiberationValues"><meta property="og:type" content="website"><meta property="og:site_name" content="LiberationValues"><meta property="og:url" content="https://liberationvalues.github.io/"><meta property="og:description" content="LibertationValues is a political quiz aimed at anti-authoritarian leftists"><meta property="og:image" content="https://liberationvalues.github.io/assets/previcon.png"><meta property="og:image:width" content="1024"><meta property="og:image:height" content="1024"></head><body><label class="switch" for="theme-toggle"><input type="checkbox" id="theme-toggle" name="theme-toggle"><div class="slider"></div></label><h1>LiberationValues</h1><hr><h1>Custom scores</h1><div id="custom-holder"><canvas id="custom"></canvas><button id="download">Download</button><div class="expl"><div> Click on the bars or the values to
set your desired score.</div></div></div><script>window.VERSION = "2.2.0";</script><script type="module">import{themeChange as t,Canvas as e,findTier as s,currentTheme as n}from"./dist/common.js";function i(t,e,s){return!(t<e)&&!(t>s)}function a(t,e){const s=t%e;return[Math.floor(t/e),s]}class o extends e{name;state;values;canvas;touchEv;constructor(t,e,s,n=null,i=null){super(t,e),this.canvas=t,this.touchEv=t=>this.touchEvent(t),this.canvas.addEventListener("click",this.touchEv),this.state=n??Array(7).fill(50),this.name=i??"Touch to enter custom name",this.values=s,this.drawAll(!0)}destructor(){this.canvas.removeEventListener("click",this.touchEv)}toJSON(){return{color:"#EEE"===this.params.bg?"light":"dark",state:this.state,name:this.name,time:new Date}}clear(){this.ctx.fillStyle=this.params.bg,this.ctx.fillRect(0,0,800,170);for(let t=0;t<7;t++){const e=150+120*t;this.ctx.fillRect(120,e,562,30)}}async drawAll(t=!1){this.clear(),this.drawHeader(this.name,"custom");for(const[e,n]of this.values.entries()){const i=this.state[e],a=s(i,n.tiers);await this.drawAxis(n,i,e,a,t)}}async touchEvent(t){const e=t.target.getBoundingClientRect(),s=t.clientX-e.left,n=t.clientY-e.top,o=e.right-e.left,r=e.top-e.bottom,c=Math.round(s/(o/800)),l=-Math.round(n/(r/1e3));if(i(l,90,148)){const t=prompt("Insert the desired username",this.name);return t&&(this.name=t),void await this.drawAll()}if(l>180&&i(c,120,682)){const t=l-180,[e,s]=a(t,120);if(s>80)return;const n=(c-120)/562,i=5*Math.round(20*n);return this.state[e]=i,void await this.drawAll()}if(l>170&&i(c,20,120)){const t=l-170,[e,s]=a(t,120);if(s>100)return;return this.state[e]<=95&&(this.state[e]+=5),void await this.drawAll()}if(l>170&&i(c,680,780)){const t=l-170,[e,s]=a(t,120);if(s>100)return;return this.state[e]>=5&&(this.state[e]-=5),void await this.drawAll()}}}const r=document.getElementById("custom"),c=await(await fetch("./dist/values.json")).json();let l,h;const d=new FinalizationRegistry((t=>{console.info("Destroyed: ",t)}));function u(){let t=null,e=null;l&&(t=l.name,e=l.state,l.destructor(),console.info("Oldref: ",h?.deref()??"GCed/unassigned"),h=new WeakRef(l),d.register(l,JSON.stringify(l),l)),l=new o(r,function(){const[t,e]="dark"===n()?["#141414","#EEE"]:["#EEE","#141414"];return{bg:t,fg:e,version:window.VERSION}}(),c,e,t)}window.addEventListener("load",u),t("theme-toggle",u),setTimeout((()=>{const t=new Event("load");window.dispatchEvent(t)}),1e3);document.getElementById("download").addEventListener("click",(()=>{e.downloadCanvas(r)}));</script></body></html>