Mercurial Mercurial > 2048-js-ai / comparison
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help
Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
2048.html
changeset 73 a50828ac954d
parent 72 0d1e5bbcde82
child 74 93cb48b73b39
equal deleted inserted replaced
72:0d1e5bbcde82 73:a50828ac954d 
    91       display: none;
 
    91       display: none;
 
    92     }
 
    92     }
 
    93     table.report-by-maxval {
 
    93     table.report-by-maxval {
 
    94       border-collapse: collapse;
 
    94       border-collapse: collapse;
 
    95       margin: 2px;
 
    95       margin: 2px;
 
       
    96       font-size: 10pt;
 
    96     }
 
    97     }
 
    97     table.report-by-maxval > tr > th {
 
    98     table.report-by-maxval > tr > th {
 
    98       border: 2px solid green;
 
    99       border: 2px solid green;
 
    99       padding: 2px;
 
   100       padding: 2px;
 
   100     }
 
   101     }
 
   248   </div>
 
   249   </div>
 
   249 
   250 
   250   <script>
 
   251   <script>
 
   251     "use strict";
 
   252     "use strict";
 
   252 
   253 
       
   254     var ui = {};
 
       
   255 
       
   256     ////////////////////////////////////////////////////////////////
 
       
   257     // UI widgets.
 
       
   258 
       
   259     ui.dom = {};
 
       
   260     ui.dom.table = function(tbl, cols, cfg) {
 
       
   261       var tableDom = document.createElement('table');
 
       
   262       if (typeof cfg.tableClass === 'string')
 
       
   263         tableDom.classList.add(cfg.tableClass);
 
       
   264       var trDom = document.createElement('tr');
 
       
   265       for (var i = 0; i < cols.length; i++) {
 
       
   266         var thDom = document.createElement('td');
 
       
   267         thDom.appendChild(document.createTextNode(cols[i]));
 
       
   268         trDom.appendChild(thDom);
 
       
   269       }
 
       
   270       tableDom.appendChild(trDom);
 
       
   271       for (var i = 0; i < tbl.length; i++) {
 
       
   272         var row = tbl[i];
 
       
   273         var trDom = document.createElement('tr');
 
       
   274         for (var j = 0; j < row.length; j++) {
 
       
   275           var tdDom = document.createElement('td');
 
       
   276           tdDom.appendChild(document.createTextNode(row[j]));
 
       
   277           trDom.appendChild(tdDom);
 
       
   278         }
 
       
   279         tableDom.appendChild(trDom);
 
       
   280       }
 
       
   281       return tableDom;
 
       
   282     };
 
       
   283 
       
   284     ////////////////////////////////////////////////////////////////
 
       
   285     // Board.
 
       
   286 
   253     var boardDom = document.getElementById("board");
 
   287     var boardDom = document.getElementById("board");
 
   254     var ui = {};
 
       
   255     ui.board = {};
 
   288     ui.board = {};
 
   256     ui.board.val2048Dom = document.getElementById('2048');
 
   289     ui.board.val2048Dom = document.getElementById('2048');
 
   257     ui.board.val2048Dom.addEventListener("click", function(event) {
 
   290     ui.board.val2048Dom.addEventListener("click", function(event) {
 
   258       event.preventDefault(); event.stopPropagation();
 
   291       event.preventDefault(); event.stopPropagation();
 
   259       ui.board.update(ui.board.position);
 
   292       ui.board.update(ui.board.position);
 
   626     ////////////////////////////////////////////////////////////////
 
   659     ////////////////////////////////////////////////////////////////
 
   627     // Reports and statistic.
 
   660     // Reports and statistic.
 
   628 
   661 
   629     var reportsDom = document.getElementById('reports');
 
   662     var reportsDom = document.getElementById('reports');
 
   630 
   663 
   631     function statistic() {
 
   664     ui.report = {};
 
       
   665 
       
   666     ui.report.stat = function() {
 
   632       var stats = [];
 
   667       var stats = [];
 
   633       var cnt = parseInt(document.getElementById('stat-count-limit').value);
 
   668       var cnt = parseInt(document.getElementById('stat-count-limit').value);
 
   634       if (isNaN(cnt) || !isFinite(cnt) || cnt < 1)
 
   669       if (isNaN(cnt) || !isFinite(cnt) || cnt < 1)
 
   635         cnt = 100;
 
   670         cnt = 100;
 
   636       var tsLimit = parseFloat(document.getElementById('stat-count-limit').value);
 
   671       var tsLimit = parseFloat(document.getElementById('stat-count-limit').value);
 
   696       var reportDom = document.createElement('div');
 
   731       var reportDom = document.createElement('div');
 
   697       reportDom.classList.add('report');
 
   732       reportDom.classList.add('report');
 
   698       var h5Dom = document.createElement('h5');
 
   733       var h5Dom = document.createElement('h5');
 
   699       h5Dom.appendChild(document.createTextNode(ui.ai.currentName));
 
   734       h5Dom.appendChild(document.createTextNode(ui.ai.currentName));
 
   700       reportDom.appendChild(h5Dom);
 
   735       reportDom.appendChild(h5Dom);
 
   701       var tableDom = document.createElement('table');
 
       
   702       tableDom.classList.add('report-by-maxval');
 
       
   703       var trDom = document.createElement('tr');
 
       
   704       var thDom = document.createElement('td');
 
       
   705       thDom.appendChild(document.createTextNode('maxVal'));
 
       
   706       trDom.appendChild(thDom);
 
       
   707       var thDom = document.createElement('td');
 
       
   708       thDom.appendChild(document.createTextNode('n'));
 
       
   709       trDom.appendChild(thDom);
 
       
   710       var thDom = document.createElement('td');
 
       
   711       thDom.appendChild(document.createTextNode('%'));
 
       
   712       trDom.appendChild(thDom);
 
       
   713       var thDom = document.createElement('td');
 
       
   714       thDom.appendChild(document.createTextNode('min\nscore'));
 
       
   715       trDom.appendChild(thDom);
 
       
   716       var thDom = document.createElement('td');
 
       
   717       thDom.appendChild(document.createTextNode('mean score'));
 
       
   718       trDom.appendChild(thDom);
 
       
   719       var thDom = document.createElement('td');
 
       
   720       thDom.appendChild(document.createTextNode('max score'));
 
       
   721       trDom.appendChild(thDom);
 
       
   722       tableDom.appendChild(trDom);
 
       
   723       var maxVals = Object.keys(histo).sort(function(a,b){return a - b});
 
   736       var maxVals = Object.keys(histo).sort(function(a,b){return a - b});
 
       
   737       var tbl = [];
 
   724       for (var i = maxVals.length-1; i >= 0; i--) {
 
   738       for (var i = maxVals.length-1; i >= 0; i--) {
 
   725         var maxVal = maxVals[i];
 
   739         var maxVal = maxVals[i];
 
   726         var row = histo[maxVals[i]];
 
   740         var row = histo[maxVals[i]];
 
   727         console.log("%d: %o", maxVals[i], row);
 
   741         var perc = parseFloat((100 * row.n / gameCnt).toPrecision(3));
 
   728         var trDom = document.createElement('tr');
 
   742         var meanScore = parseFloat(row.meanScore.toPrecision(3));
 
   729         var tdDom = document.createElement('td');
 
   743         tbl.push([maxVal, row.n, perc, row.minScore, meanScore, row.maxScore]);
 
   730         tdDom.appendChild(document.createTextNode(maxVal));
 
   744       }
 
   731         trDom.appendChild(tdDom);
 
   745       var tableDom = ui.dom.table(
 
   732         var tdDom = document.createElement('td');
 
   746         tbl,
 
   733         tdDom.appendChild(document.createTextNode(row.n));
 
   747         ['maxVal', 'n', '%', 'min score', 'mean score', 'max score'],
 
   734         trDom.appendChild(tdDom);
 
   748         { tableClass: 'report-by-maxval' });
 
   735         var tdDom = document.createElement('td');
 
       
   736         tdDom.appendChild(document.createTextNode(parseFloat((100 * row.n / gameCnt).toPrecision(3))));
 
       
   737         trDom.appendChild(tdDom);
 
       
   738         var tdDom = document.createElement('td');
 
       
   739         tdDom.appendChild(document.createTextNode(row.minScore));
 
       
   740         trDom.appendChild(tdDom);
 
       
   741         var tdDom = document.createElement('td');
 
       
   742         tdDom.appendChild(document.createTextNode(parseFloat(row.meanScore.toPrecision(3))));
 
       
   743         trDom.appendChild(tdDom);
 
       
   744         var tdDom = document.createElement('td');
 
       
   745         tdDom.appendChild(document.createTextNode(row.maxScore));
 
       
   746         trDom.appendChild(tdDom);
 
       
   747         tableDom.appendChild(trDom);
 
       
   748       }
 
       
   749       reportDom.appendChild(tableDom);
 
   749       reportDom.appendChild(tableDom);
 
   750       reportsDom.insertBefore(reportDom, reportsDom.firstChild);
 
   750       reportsDom.insertBefore(reportDom, reportsDom.firstChild);
 
   751     }
 
   751     }
 
   752 
   752 
   753     var statisticBtn = document.getElementById('statistic');
 
   753     var statisticBtn = document.getElementById('statistic');
 
   754     statisticBtn.addEventListener("click", statistic, false);
 
   754     statisticBtn.addEventListener("click", ui.report.stat, false);
 
   755 
   755 
   756 
   756 
   757     ////////////////////////////////////////////////////////////////
 
   757     ////////////////////////////////////////////////////////////////
 
   758     // Initialise game.
 
   758     // Initialise game.
 
   759 
   759
2048-js-ai