Show statistic reports.
--- a/2048.html Wed Sep 17 20:42:07 2014 +0300
+++ b/2048.html Wed Sep 17 22:46:35 2014 +0300
@@ -48,10 +48,7 @@
margin-left: -.5em;
padding: 0;
}
- .report > .name {
- font-weight: bold;
- }
- div.ai, div.settings {
+ div.ai, div.settings, div#reports {
border: 1px red solid;
margin-top: 20px;
padding: 2px;
@@ -61,7 +58,7 @@
div.ai.enabled {
background-color: wheat;
}
- div.ai > h5 {
+ div.ai > h5, div.report > h5 {
margin: 2px 0 2px 6em;
}
button.ai {
@@ -74,7 +71,7 @@
float: left;
margin: 3px 4px;
}
- div.ai > div.option, div.setting {
+ div.ai > div.option, div.setting, div.report {
display: inline-block;
float: left;
margin: 1px 4px;
@@ -93,6 +90,18 @@
#test {
display: none;
}
+ table.report-by-maxval {
+ border-collapse: collapse;
+ margin: 2px;
+ }
+ table.report-by-maxval > tr > th {
+ border: 2px solid green;
+ padding: 2px;
+ }
+ table.report-by-maxval > tr > td {
+ border: 1px solid green;
+ padding: 2px;
+ }
</style>
</head>
<body>
@@ -233,24 +242,8 @@
<button id="statistic">Start</button>
<div class="clearfix"></div>
</div>
- <div class="report">
- <div class="name">next max score</div>
- <table>
- <tr>
- <th>Max</th>
- <th>Count</th>
- <th>%</th>
- </tr>
- <tr>
- <td>128</td><td>8</td><td><div style="background: red; width: 100px">x</div></td>
- </tr>
- <tr>
- <td>256</td><td>4</td><td><div style="background: red; width: 50px">x</div></td>
- </tr>
- <tr>
- <td>512</td><td>12</td><td><div style="background: red; width: 150px">x</div></td>
- </tr>
- </table>
+ <div id="reports">
+ <div class="clearfix"></div>
</div>
</div>
@@ -626,12 +619,15 @@
ui.ai.current.cleanup();
ui.ai.moveToTop(aiDom);
ui.ai.current = ui.ai.algList[aiDom.id](aiDom);
+ ui.ai.currentName = aiDom.id;
}
////////////////////////////////////////////////////////////////
// Reports and statistic.
+ var reportsDom = document.getElementById('reports');
+
function statistic() {
var stats = [];
var cnt = parseInt(document.getElementById('stat-count-limit').value);
@@ -644,7 +640,7 @@
tsLimit = 1000 * tsLimit;
var safeBdr = board.create();
var tsLimitFrom = new Date().getTime();
- for (var i = 0; i < cnt; i++) {
+ for (var gameCnt = 0; gameCnt < cnt; gameCnt++) {
var turn = 0;
var brd = board.create();
board.putRandom(brd);
@@ -697,7 +693,61 @@
row.meanTurn = row.meanTurn / n;
row.meanScore = row.meanScore / n;
}
- console.log(histo);
+ var reportDom = document.createElement('div');
+ reportDom.classList.add('report');
+ var h5Dom = document.createElement('h5');
+ h5Dom.appendChild(document.createTextNode(ui.ai.currentName));
+ reportDom.appendChild(h5Dom);
+ var tableDom = document.createElement('table');
+ tableDom.classList.add('report-by-maxval');
+ var trDom = document.createElement('tr');
+ var thDom = document.createElement('td');
+ thDom.appendChild(document.createTextNode('maxVal'));
+ trDom.appendChild(thDom);
+ var thDom = document.createElement('td');
+ thDom.appendChild(document.createTextNode('n'));
+ trDom.appendChild(thDom);
+ var thDom = document.createElement('td');
+ thDom.appendChild(document.createTextNode('%'));
+ trDom.appendChild(thDom);
+ var thDom = document.createElement('td');
+ thDom.appendChild(document.createTextNode('min\nscore'));
+ trDom.appendChild(thDom);
+ var thDom = document.createElement('td');
+ thDom.appendChild(document.createTextNode('mean score'));
+ trDom.appendChild(thDom);
+ var thDom = document.createElement('td');
+ thDom.appendChild(document.createTextNode('max score'));
+ trDom.appendChild(thDom);
+ tableDom.appendChild(trDom);
+ var maxVals = Object.keys(histo).sort();
+ for (var i = maxVals.length-1; i >= 0; i--) {
+ var maxVal = maxVals[i];
+ var row = histo[maxVals[i]];
+ console.log("%d: %o", maxVals[i], row);
+ var trDom = document.createElement('tr');
+ var tdDom = document.createElement('td');
+ tdDom.appendChild(document.createTextNode(maxVal));
+ trDom.appendChild(tdDom);
+ var tdDom = document.createElement('td');
+ tdDom.appendChild(document.createTextNode(row.n));
+ trDom.appendChild(tdDom);
+ var tdDom = document.createElement('td');
+ tdDom.appendChild(document.createTextNode(parseFloat((100 * row.n / gameCnt).toPrecision(3))));
+ trDom.appendChild(tdDom);
+ var tdDom = document.createElement('td');
+ tdDom.appendChild(document.createTextNode(row.minScore));
+ trDom.appendChild(tdDom);
+ var tdDom = document.createElement('td');
+ tdDom.appendChild(document.createTextNode(parseFloat(row.meanScore.toPrecision(3))));
+ trDom.appendChild(tdDom);
+ var tdDom = document.createElement('td');
+ tdDom.appendChild(document.createTextNode(row.maxScore));
+ trDom.appendChild(tdDom);
+ tableDom.appendChild(trDom);
+ }
+ reportDom.appendChild(tableDom);
+ reportsDom.insertBefore(reportDom, reportsDom.firstChild);
}
var statisticBtn = document.getElementById('statistic');