<html>
<head>
<title>VolkoV's BGG Top Trumps Generator</title>
<script>
function getText(xmlDoc,selector,attr) {
if(selector=="")
return "";
return xmlDoc.querySelector(selector).getAttribute(attr);
}
function getTextMinMax(xmlDoc,selectormin,selectormax,attr) {
var min=xmlDoc.querySelector(selectormin).getAttribute(attr);
var max=xmlDoc.querySelector(selectormax).getAttribute(attr);
var res=min+"-"+max;
if(min==max)
res=min;
return res;
}
function getPoll(xmlDoc,selector,sort,attr,altselector,altattr) {
var show=999999;
var max=0;
var min=999999;
var results=xmlDoc.querySelectorAll(selector);
if(results.length==0)
return getText(xmlDoc,altselector,altattr);
results.forEach(function(item){
var sorta=parseInt(item.getAttribute(sort));
var showa=parseInt(item.getAttribute(attr));
if(sorta>max) {
max=sorta;
show=showa;
}
if(showa<min)
min=showa;
});
if(max==0)
return getText(xmlDoc,altselector,altattr);
return (1+show-min);
}
function loadCard() {
var id=parseInt(document.getElementById("gameid").value);
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function () {
if(xhr.readyState===4) {
var parser=new DOMParser();
var xmlDoc=parser.parseFromString(xhr.responseText,"text/xml");
var game=xmlDoc.querySelector("item[type='boardgame'");
if(game===null)
return;
var rating=(Math.round(parseFloat(getText(xmlDoc,"ratings>average","value"))*10)/10).toFixed(1);
var weight=(Math.round(parseFloat(getText(xmlDoc,"ratings>averageweight","value"))*10)/10).toFixed(1);
var card='<table>'
+'<tr><td colspan="2" class="name">'
+getText(xmlDoc,"name[type='primary']","value")
+'</td></tr><tr><td class="thumb" colspan="2">'
+'<img src="'+xmlDoc.querySelector("thumbnail").innerHTML+'">'
+'</td></tr><tr><th>Published</th><td>'
+getText(xmlDoc,"yearpublished","value")
+'</td></tr><tr><th>Players</th><td>'
+getTextMinMax(xmlDoc,"minplayers","maxplayers","value")
+'</td></tr><tr><th>Playing Time</th><td>'
+getTextMinMax(xmlDoc,"minplaytime","maxplaytime","value")
+'</td></tr><tr><th>Age</th><td>'
+getPoll(xmlDoc,"poll[name='suggested_playerage']>results>result","numvotes","value","minage","value")
+'</td></tr><tr><th>Language</th><td>'
+getPoll(xmlDoc,"poll[name='language_dependence']>results>result","numvotes","level","","")
+'</td></tr><tr><th>Rating</th><td>'
+rating
+'</td></tr><tr><th>Weight</th><td>'
+weight
+'</td></tr>'
+'</table>';
var carde=document.createElement('div');
carde.classList.add('card');
carde.innerHTML=card;
document.getElementById("cards").appendChild(carde);
}
}
xhr.open('GET','https://api.geekdo.com/xmlapi2/thing?id='+id+'&stats=1');
xhr.send();
}
</script>
<style>
#cards {
width:700px;
}
div.card {
border:1px solid gray;
border-radius:20px;
padding:10px;
width:200px;
height:300px;
float:left;
overflow:hidden;
}
table {
width:100%;
height:100%;
table-layout:fixed;
border-collapse:collapse;
}
td,th {
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-family:sans-serif;
font-size:12px;
border-bottom:1px solid gray;
text-align:right;
width:100px;
}
th {
text-align:left;
font-weight:normal;
}
td.name {
text-align:center;
font-weight:bold;
}
td.thumb {
text-align:center;
width:200px;
height:150px;
padding:0px;
}
td.thumb img {
max-width:100%;
max-height:100%;
}
</style>
</head>
<body>
<div>
<input id="gameid" value="1">
<input type="button" value="Create Card" onclick="loadCard()">
</div>
<div id="cards">
</div>
</body>
</html>