quasus
/
gamao-obsoleto


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106
							<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<body>

<h2>New table</h2>
<div id="new-table-buttons" class="new-table-buttons">
<button type="button" class="pure-button" onclick="newMatch(0)">$</button>
<button type="button" class="pure-button" onclick="newMatch(1)">1</button>
<button type="button" class="pure-button" onclick="newMatch(3)">3</button>
<button type="button" class="pure-button" onclick="newMatch(5)">5</button>
<button type="button" class="pure-button" onclick="newMatch(7)">7</button>
<button type="button" class="pure-button" onclick="newMatch(9)">9</button>
<button type="button" class="pure-button" onclick="newMatch(11)">11</button>
<button type="button" class="pure-button" onclick="newMatch(13)">13</button>
<button type="button" class="pure-button" onclick="newMatch(15)">15</button>
<button type="button" class="pure-button" onclick="newMatch(17)">17</button>
<button type="button" class="pure-button" onclick="newMatch(19)">19</button>
<button type="button" class="pure-button" onclick="newMatch(21)">21</button>
</div>

<div>
<h2>Tables</h2>
<table class="pure-table pure-table-horizontal" id="tables">
    <thead>
    <tr>
    <th></th>
    <th>White</th>
    <th>Black</th>
    <th>Length</th>
    <th>Score</th>
    </thead>
    <tbody>
    </tbody>

</table>
</div>

</body>


<script>
function newMatch(limit) {
    window.open("/newmatch?limit=" + limit, "_blanck");
}

function fetchTableInfo() {
var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     updateTableInfo(JSON.parse(this.responseText));
    }
  };
  xhttp.open("GET", "/tables-info", true);
  xhttp.send();
}

function updateTableInfo(tables) {
    var table = $("#tables tbody");
    table.empty();
    tables.forEach(function(t, i) {
    console.log(i);
        var p;
        if (t.BLACK) {
            p = "<tr" + (i % 2 == 1 ? "" : " class='pure-table-odd'") + "><td><a href=" + t.URI + ">WATCH</a></td><td>" + t.WHITE +
            "</td><td>" + t.BLACK + "</td><td>" +
            (t.LIMIT.length != 0 ? t.LIMIT : "money session") + "</td><td>" +
            t.SCORE[0] + " : " + t.SCORE[1] + "</td></tr>";
        } else {
            p = "<tr" + (i % 2 == 1 ? "" : " class='pure-table-odd'") + ">" + "<td></td><td>" + t.WHITE +
            "</td><td>" + "<a href=/proposal?table=" + t.URI.replace(/\/[^\/]*\//, "") + ">JOIN</a>" +
            "</td><td>" + (t.LIMIT.length != 0 ? t.LIMIT : "money session") + "</td><td>" +
            t.SCORE[0] + " : " + t.SCORE[1] + "</td></tr>";
        }
        table.append(p);
    });
}

/*
function updateTableInfo(tables) {
    var table = document.getElementById("tables");
    table.innerHTML = "";
    tables.forEach(function(t) {
        var p = document.createElement("p");
        if (t.BLACK) {
            p.innerHTML = t.WHITE + " - " + t.BLACK + " " + t.SCORE[0] + " : " + t.SCORE[1] + " " +
                (t.LIMIT.length != 0 ? "(to " + t.LIMIT + ")" : "(money session)") +
                " " + "<a href=" + t.URI + ">WATCH</a>";
        } else {
            p.innerHTML = t.WHITE + " " +
                (t.LIMIT.length != 0 ? "(to " + t.LIMIT + ")" : "(money session)")
                + " " + "<a href=/proposal?table=" + t.URI.replace(/\/[^\/]*\//, "") + ">JOIN</a>";
        }
        table.appendChild(p);
    });
}
*/

setInterval(fetchTableInfo, 2000);

</script>
</html>