63 lines
4.8 KiB
HTML
63 lines
4.8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<style>
|
|
body {
|
|
margin: 0 auto;
|
|
font-size: 20px;
|
|
width: 40em;
|
|
font-family: Helvetica, sans-serif;
|
|
}
|
|
p {
|
|
line-height: 1.2;
|
|
}
|
|
figure {
|
|
margin: 0;
|
|
padding: 1em;
|
|
border: 1px solid black;
|
|
box-sizing: border-box;
|
|
}
|
|
figure > img {
|
|
width: 100%;
|
|
}
|
|
figcaption {
|
|
text-align: center;
|
|
font-size: .8em;
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
body {
|
|
margin: 0 .5em;
|
|
width: auto;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1>18xx.Games Graph Bookmarklet</h1>
|
|
|
|
<p>
|
|
<figure>
|
|
<img src="visualisation-example.png">
|
|
<figcaption>Example graph for a 6-player game of 1880: China that was stopped as soon as it was clear who'd win.</figcaption>
|
|
</figure>
|
|
</p>
|
|
|
|
<p>
|
|
The following bookmarklet can be used to create graphs of the player value for <a href="https://18xx.games">18xx.Games</a> games, like the one above.
|
|
</p>
|
|
|
|
<p>
|
|
Don't click this, bookmark it: <a href='javascript:(function(){var e={background:"white",axes:"black",grid:"grey",palette:["red","green","blue","orange","purple","yellow"]},t=[[60,20],[20,70]],n=[10,10],r=[0,20];function o(e,t){var n=document.createElement(e);return Object.keys(t).forEach(function(e){"style"===e?Object.keys(t[e]).forEach(function(r){n.style[r]=t[e][r]}):n.setAttribute(e,t[e])}),n}function $(e,t){var n=document.createElementNS("http://www.w3.org/2000/svg",e);return Object.keys(t).forEach(function(e){n.setAttribute(e,t[e])}),n}function a(e){return e.map(function(e,t){return(0===t?"M":"L")+" "+String(e[0])+" "+String(e[1])}).join(" ")}function l(e,t,n,r,o){return n+(o-e)/(t-e)*(r-n)}var i,d,p,u,h=document.querySelector("#player_or_history"),c=Array.from((i=h).previousElementSibling.querySelectorAll(".name")).map(function(e){return%20e.textContent}),_=Array.from((d=h).querySelectorAll("tr")),f=(p=_).map(function(e){return%20e.querySelector("th").textContent}).reverse(),s=(u=_).map(function(e){return%20Array.from(e.querySelectorAll("td")).map(function(e){return%20Number(e.textContent.replaceAll(/[^0-9]/g,""))})}).reverse(),g=function%20i(d,p,u){var%20h,c,_,f=u.map(function(e){return%20e.reduce(function(e,t){return%20Math.max(e,t)})}).reduce(function(e,t){return%20Math.max(e,t)}),s=22*d.length,g=s+r[0]+r[1],m=[500+2*n[0],400+2*n[1]],y=[m[0]+t[0][0]+t[0][1],m[1]+t[1][0]+t[1][1]+g],v=[t[0][0],t[1][0]],x=[t[0][0],t[1][0]+m[1]],C=[t[0][0]+m[0],t[1][0]+m[1]],w=[t[0][0]+n[0],t[1][0]+n[1]],k=[t[0][0]+n[0]+500,t[1][0]+n[1]+400],b=[x[0],x[1]+t[1][1]+r[0]],S=[m[0],s],E=f-0,q=(_=Math.pow(10,Math.floor(Math.log10(c=(h=E)/10))))===c?_:c<=2*_?2*_:c<=5*_?5*_:10*_,A=Math.ceil(E/q)+(E%q!=0);f=(A-1)*q;var%20j=$("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0%200%20"+String(y[0])+"%20"+String(y[1])});j.appendChild($("rect",{x:"0",y:"0",width:String(y[0]),height:String(y[1]),fill:e.background})),p.forEach(function(t,n){j.appendChild($("path",{d:a([[l(0,u.length-1,w[0],k[0],n),C[1]],[l(0,u.length-1,w[0],k[0],n),w[1]]]),stroke:e.grid,"stroke-width":1}));var%20r=l(0,u.length-1,w[0],k[0],n),o=C[1]+5,i=$("text",{x:r,y:o,"text-anchor":"end","text-align":"end","dominant-baseline":"middle",transform:"rotate(-90,%20"+String(r)+",%20"+String(o)+")"});i.textContent=t,j.appendChild(i)});for(var%20R=0;R<A;R++){j.appendChild($("path",{d:a([[v[0],l(0,f,k[1],w[1],R*q)],[k[0],l(0,f,k[1],w[1],R*q)]]),stroke:e.grid,"stroke-width":1}));var%20T=$("text",{x:v[0]-5,y:l(0,f,k[1],w[1],R*q),"text-anchor":"end","text-align":"end","dominant-baseline":"middle"});T.textContent=String(R*q),j.appendChild(T)}d.forEach(function(t,n){j.appendChild($("path",{d:a(u.map(function(e,t){return[l(0,u.length-1,w[0],k[0],t),l(0,f,k[1],w[1],e[n])]})),fill:"none",stroke:e.palette[n%e.palette.length],"stroke-width":"2"}))}),j.appendChild($("path",{d:a([x,v]),stroke:e.axes,"stroke-width":2})),j.appendChild($("path",{d:a([x,C]),stroke:e.axes,"stroke-width":2}));var%20B,G,L=$("foreignObject",{x:b[0],y:b[1],width:S[0],height:S[1]});return%20L.appendChild((B=d,G=o("div",{style:{display:"grid",gridTemplateRows:"auto",gridTemplateColumns:"auto%20auto",columnGap:".5em",justifyContent:"center",height:"100%"}}),B.forEach(function(t,n){var%20r=o("div",{style:{width:".8em",height:".8em",borderRadius:".4em",backgroundColor:e.palette[n%e.palette.length]}}),$=o("div",{style:{alignSelf:"center"}});$.appendChild(r);var%20a=o("div",{style:{alignSelf:"center",color:"black"}});a.textContent=t,G.appendChild($),G.appendChild(a),console.log($)}),G)),j.appendChild(L),j}(c,f,s),m=o("div",{style:{float:"left",marginRight:"1rem",width:"40rem"}});m.appendChild(g),document.querySelector("#player_table").after(m)})();'>copy 18xx graph</a>.
|
|
</p>
|
|
|
|
<h2>Usage</h2>
|
|
|
|
<p>
|
|
Simply bookmark the link above (right click, then bookmark link), head to the <strong>spreadsheet tab</strong> of an 18xx.games game, make sure the player history table is set to <strong>show total values</strong> and click the bookmark. The graph will be inserted into the page.
|
|
</p>
|
|
</body>
|
|
</html>
|