--- a/2048.html	Wed Sep 17 23:05:39 2014 +0300
+++ b/2048.html	Wed Sep 17 23:30:02 2014 +0300
@@ -93,6 +93,7 @@
     table.report-by-maxval {
       border-collapse: collapse;
       margin: 2px;
+      font-size: 10pt;
     }
     table.report-by-maxval > tr > th {
       border: 2px solid green;
@@ -250,8 +251,40 @@
   <script>
     "use strict";
 
+    var ui = {};
+
+    ////////////////////////////////////////////////////////////////
+    // UI widgets.
+
+    ui.dom = {};
+    ui.dom.table = function(tbl, cols, cfg) {
+      var tableDom = document.createElement('table');
+      if (typeof cfg.tableClass === 'string')
+        tableDom.classList.add(cfg.tableClass);
+      var trDom = document.createElement('tr');
+      for (var i = 0; i < cols.length; i++) {
+        var thDom = document.createElement('td');
+        thDom.appendChild(document.createTextNode(cols[i]));
+        trDom.appendChild(thDom);
+      }
+      tableDom.appendChild(trDom);
+      for (var i = 0; i < tbl.length; i++) {
+        var row = tbl[i];
+        var trDom = document.createElement('tr');
+        for (var j = 0; j < row.length; j++) {
+          var tdDom = document.createElement('td');
+          tdDom.appendChild(document.createTextNode(row[j]));
+          trDom.appendChild(tdDom);
+        }
+        tableDom.appendChild(trDom);
+      }
+      return tableDom;
+    };
+
+    ////////////////////////////////////////////////////////////////
+    // Board.
+
     var boardDom = document.getElementById("board");
-    var ui = {};
     ui.board = {};
     ui.board.val2048Dom = document.getElementById('2048');
     ui.board.val2048Dom.addEventListener("click", function(event) {
@@ -628,7 +661,9 @@
 
     var reportsDom = document.getElementById('reports');
 
-    function statistic() {
+    ui.report = {};
+
+    ui.report.stat = function() {
       var stats = [];
       var cnt = parseInt(document.getElementById('stat-count-limit').value);
       if (isNaN(cnt) || !isFinite(cnt) || cnt < 1)
@@ -698,60 +733,25 @@
       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(function(a,b){return a - b});
+      var tbl = [];
       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);
+        var perc = parseFloat((100 * row.n / gameCnt).toPrecision(3));
+        var meanScore = parseFloat(row.meanScore.toPrecision(3));
+        tbl.push([maxVal, row.n, perc, row.minScore, meanScore, row.maxScore]);
       }
+      var tableDom = ui.dom.table(
+        tbl,
+        ['maxVal', 'n', '%', 'min score', 'mean score', 'max score'],
+        { tableClass: 'report-by-maxval' });
       reportDom.appendChild(tableDom);
       reportsDom.insertBefore(reportDom, reportsDom.firstChild);
     }
 
     var statisticBtn = document.getElementById('statistic');
-    statisticBtn.addEventListener("click", statistic, false);
+    statisticBtn.addEventListener("click", ui.report.stat, false);
 
 
     ////////////////////////////////////////////////////////////////