From 611cee6f405f1bf8b8a87f597ff5a4222621493a Mon Sep 17 00:00:00 2001
From: Paul Brinkmeier <hallo@pbrinkmeier.de>
Date: Sat, 14 Jun 2025 17:23:11 +0200
Subject: [PATCH] Update 18xx bookmarklet

---
 18xx/index.html | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/18xx/index.html b/18xx/index.html
index a72ea7b..2292662 100644
--- a/18xx/index.html
+++ b/18xx/index.html
@@ -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>