63 lines
2.8 KiB
HTML
63 lines
2.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;
|
|
}
|
|
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 <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>
|
|
|
|
<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).
|
|
</p>
|
|
</body>
|
|
</html>
|