2048.html
changeset 71 aa0240db128a
parent 70 01076b56feae
child 72 0d1e5bbcde82
--- 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');