142 lines
3.9 KiB
HTML
142 lines
3.9 KiB
HTML
|
<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>
|