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

Add 18xx.games bookmarklet page

Browse Source
This commit is contained in:
Paul Brinkmeier 2024-03-07 00:35:23 +01:00
parent 680ac7d9c4
commit 8d867e4d13
1 changed files with 18 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
18xx/index.html Normal file
View File

@ -0,0 +1,18 @@
<h1>18xx.games graph bookmarklet</h1>
<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.
</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:%22Value%22,sort:%7Bfield:%22order%22%7D,axis:%7Bgrid:true%7D%7D,y:%7Bfield:%22value%22,type:%22quantitative%22,title:%22Round%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>
</p>
<h2>Usage</h2>
<p>
Simply bookmark the link above (right click, then bookmark link), <strong>head to the spreadsheet tab</strong> of an 18xx.games game 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).
</p>