-
Notifications
You must be signed in to change notification settings - Fork 5
/
results.html
1 lines (1 loc) · 6.24 KB
/
results.html
1
<!DOCTYPE html><html lang="en-US"><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>Results</h1><div class="results"><h2>Radicality Axis: <span class="axis-labels" id="radicality-label"></span></h2><div class="axis"><img class="value" src="./assets/values/moderate.svg"><div class="left-bar" style="background-color: #006AA7;" id="bar-moderate"><div class="text-wrapper" id="span-moderate"></div></div><div class="right-bar" style="background-color: #F00;" id="bar-radical"><div class="text-wrapper" id="span-radical"></div></div><img class="value" src="./assets/values/radical.svg"></div><h2>Co-operation Axis: <span class="axis-labels" id="co-operation-label"></span></h2><div class="axis"><img class="value" src="./assets/values/leftunity.svg"><div class="left-bar" style="background-color: #CD0000;" id="bar-left-unity"><div class="text-wrapper" id="span-left-unity"></div></div><div class="right-bar" style="background-color: #F60;" id="bar-lib-unity"><div class="text-wrapper" id="span-lib-unity"></div></div><img class="value" src="./assets/values/libunity.svg"></div><h2>Ownership Axis: <span class="axis-labels" id="ownership-label"></span></h2><div class="axis"><img class="value" src="./assets/values/centralized.svg"><div class="left-bar" style="background-color: #FFE000;" id="bar-centralized"><div class="text-wrapper" id="span-centralized"></div></div><div class="right-bar" style="background-color: #FFF;" id="bar-decentralized"><div class="text-wrapper" id="span-decentralized"></div></div><img class="value" src="./assets/values/decentralized.svg"></div><h2>World Axis: <span class="axis-labels" id="world-label"></span></h2><div class="axis"><img class="value" src="./assets/values/localist.svg"><div class="left-bar" style="background-color: #FF9800;" id="bar-localist"><div class="text-wrapper" id="span-localist"></div></div><div class="right-bar" style="background-color: #03A9F4;" id="bar-globalist"><div class="text-wrapper" id="span-globalist"></div></div><img class="value" src="./assets/values/globalist.svg"></div><h2>Culture Axis: <span class="axis-labels" id="culture-label"></span></h2><div class="axis"><img class="value" src="./assets/values/traditionalist.svg"><div class="left-bar" style="background-color: #6C9569;" id="bar-traditionalist"><div class="text-wrapper" id="span-traditionalist"></div></div><div class="right-bar" style="background-color: #FF42FF;" id="bar-progressive"><div class="text-wrapper" id="span-progressive"></div></div><img class="value" src="./assets/values/progressive.svg"></div><h2>Rebelliousness Axis: <span class="axis-labels" id="rebelliousness-label"></span></h2><div class="axis"><img class="value" src="./assets/values/reform.svg"><div class="left-bar" style="background-color: #FFAFE4;" id="bar-reform"><div class="text-wrapper" id="span-reform"></div></div><div class="right-bar" style="background-color: #890000;" id="bar-revolution"><div class="text-wrapper" id="span-revolution"></div></div><img class="value" src="./assets/values/revolution.svg"></div><h2>Market Axis: <span class="axis-labels" id="market-label"></span></h2><div class="axis"><img class="value" src="./assets/values/markets.svg"><div class="left-bar" style="background-color: #21B8E7;" id="bar-markets"><div class="text-wrapper" id="span-markets"></div></div><div class="right-bar" style="background-color: #FF4900;" id="bar-planning"><div class="text-wrapper" id="span-planning"></div></div><img class="value" src="./assets/values/planning.svg"></div></div><h2>Closest Match: <span id="ideology-label"></span></h2><canvas id="results"></canvas><a href="index.html"><button>Back</button></a><button id="download-button">Download your scores</button><a href="custom.html"><button>Create your custom scores</button></a><script>window.VERSION = "2.2.0";</script><script type="module">import{themeChange as e,currentTheme as t,Canvas as n,orderScores as o,findTier as s}from"./dist/common.js";const[a,d]=await Promise.all((await Promise.all([fetch("./dist/values.json"),fetch("./dist/ideologies.json")])).map((e=>e.json()))),i=new URLSearchParams(location.search),l=new Map;for(const e of a){const t=i.get(e.alias);if(!t)throw new Error(`Missing value ${e.name}`);const n=parseFloat(t);if(isNaN(n)||n>100||n<0)throw new Error(`Invalid score for ${e.name}: ${n}`);l.set(e.alias,n)}function r(){const e=t(),[i,r]="dark"===e?["#141414","#EEE"]:["#EEE","#141414"],c={bg:i,fg:r,version:window.VERSION},m=document.getElementById("results"),w=new n(m,c),E=o(l,d)[0].name;w.drawHeader(E),document.getElementById("ideology-label").textContent=E;const f=(e,t)=>{const n=document.getElementById("span-"+e),o=document.getElementById("bar-"+e);if(!n||!o)return;const s=t.toFixed(1)+"%";n.textContent=s,o.style.width=s,n.offsetWidth+20>o.offsetWidth&&(n.style.visibility="hidden")};for(const[e,t]of a.entries()){const n=l.get(t.alias),o=s(n,t.tiers);w.drawAxis(t,n,e,o);const a=t.labels.map((e=>e.toLowerCase()));f(a[0],n),f(a[1],100-n),document.getElementById(t.name.toLowerCase()+"-label").textContent=o}}e("theme-toggle",r),window.addEventListener("load",r),document.getElementById("download-button")?.addEventListener("click",(()=>{n.downloadCanvas(document.getElementById("results"))})),setTimeout((()=>{const e=new Event("load");window.dispatchEvent(e)}),1e3);</script></body></html>