paul/pbrinkmeier.de
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update 18xx bookmarklet

Browse Source
This commit is contained in:
Paul Brinkmeier 2025-06-14 17:23:11 +02:00
parent bab3208e61
commit 611cee6f40
1 changed files with 6 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
18xx/index.html
View File

@ -9,6 +9,9 @@ body {
width: 40em;
font-family: Helvetica, sans-serif;
}
p {
line-height: 1.2;
}
figure {
margin: 0;
padding: 1em;
@ -43,20 +46,17 @@ figcaption {
</p>
<p>
The following bookmarklet can be used to create <a href="https://vega.github.io/vega-lite/">Vega-Lite</a> graphs of the player value for <a href="https://18xx.games">18xx.Games</a> games, like the one above.
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()%7Bconst%20names=Array.from(document.querySelector('#player_details').nextElementSibling.querySelectorAll('.name')).map(x%20=%3E%20x.innerHTML);%20%20%20const%20rows%20=%20Array.from(document.querySelector('#player_or_history').querySelectorAll('tr'));%20%20%20const%20roundLabels%20=%20rows.map(row%20=%3E%20row.querySelector('th').textContent).reverse();%20%20%20const%20roundData%20=%20rows.map(row%20=%3E%20Array.from(row.querySelectorAll('td')).map(cell%20=%3E%20Number(cell.textContent.replaceAll(/%5B%5E0-9%5D/g,%20'')))).reverse();%20%20%20const%20data%20=%20names.map((symbol,%20i)%20=%3E%20roundLabels.map((label,%20j)%20=%3E%20%7B%20return%20%7B%20symbol,%20label,%20value:%20roundData%5Bj%5D%5Bi%5D,%20order:%20j%20%7D;%20%7D)).reduce((a,%20b)%20=%3E%20a.concat(b));%20%20%20navigator.clipboard.writeText(JSON.stringify(%7B$schema:%22https://vega.github.io/schema/vega-lite/v5.json%22,width:600,height:400,data:%7Bvalues:data%7D,mark:%22line%22,encoding:%7Bx:%7Bfield:%22label%22,type:%22nominal%22,title:%22Round%22,sort:%7Bfield:%22order%22%7D,axis:%7Bgrid:true%7D%7D,y:%7Bfield:%22value%22,type:%22quantitative%22,title:%22Value%22%7D,color:%7Bfield:%22symbol%22,type:%22nominal%22%7D%7D%7D,%20null,%202));alert('Graph%20copied%20to%20clipboard!%20Head%20to%20https://vega.github.io/editor/%20and%20paste%20it%20there.')%7D)();">copy 18xx graph</a>
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.
If it worked, an alert will pop up.
You can then head to <a href="https://vega.github.io/editor/">the vega online editor</a> and paste the JSON into the code box on the left.
The editor will render the graph for you (if it doesn't, try clicking the Run button).
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>