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

Change 18xx example

Browse Source
This commit is contained in:
Paul Brinkmeier 2024-03-19 03:18:39 +01:00
parent 8d867e4d13
commit c695f27186
2 changed files with 48 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
18xx/index.html
View File

@ -1,18 +1,62 @@
<h1>18xx.games graph bookmarklet</h1> <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
margin: 0 auto;
font-size: 20px;
width: 40em;
font-family: Helvetica, sans-serif;
}
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> <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. <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>
<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> 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.
</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>
</p> </p>
<h2>Usage</h2> <h2>Usage</h2>
<p> <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. 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. 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. 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). The editor will render the graph for you (if it doesn't, try clicking the Run button).
</p> </p>
</body>
</html>

BIN
18xx/visualisation-example.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 183 KiB