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 71 aa0240db128a
parent 70 01076b56feae
child 72 0d1e5bbcde82
equal deleted inserted replaced
70:01076b56feae 71:aa0240db128a 
    46     div.ai-control:before {
 
    46     div.ai-control:before {
 
    47       content: "AI: ";
 
    47       content: "AI: ";
 
    48       margin-left: -.5em;
 
    48       margin-left: -.5em;
 
    49       padding: 0;
 
    49       padding: 0;
 
    50     }
 
    50     }
 
    51     .report > .name {
 
    51     div.ai, div.settings, div#reports {
 
    52       font-weight: bold;
 
       
    53     }
 
       
    54     div.ai, div.settings {
 
       
    55       border: 1px red solid;
 
    52       border: 1px red solid;
 
    56       margin-top: 20px;
 
    53       margin-top: 20px;
 
    57       padding: 2px;
 
    54       padding: 2px;
 
    58       position: relative;
 
    55       position: relative;
 
    59       background-color: cornsilk;
 
    56       background-color: cornsilk;
 
    60     }
 
    57     }
 
    61     div.ai.enabled {
 
    58     div.ai.enabled {
 
    62       background-color: wheat;
 
    59       background-color: wheat;
 
    63     }
 
    60     }
 
    64     div.ai > h5 {
 
    61     div.ai > h5, div.report > h5 {
 
    65       margin: 2px 0 2px 6em;
 
    62       margin: 2px 0 2px 6em;
 
    66     }
 
    63     }
 
    67     button.ai {
 
    64     button.ai {
 
    68       position: absolute;
 
    65       position: absolute;
 
    69       left: 1em;
 
    66       left: 1em;
 
    72     button#statistic {
 
    69     button#statistic {
 
    73       display: inline-block;
 
    70       display: inline-block;
 
    74       float: left;
 
    71       float: left;
 
    75       margin: 3px 4px;
 
    72       margin: 3px 4px;
 
    76     }
 
    73     }
 
    77     div.ai > div.option, div.setting {
 
    74     div.ai > div.option, div.setting, div.report {
 
    78       display: inline-block;
 
    75       display: inline-block;
 
    79       float: left;
 
    76       float: left;
 
    80       margin: 1px 4px;
 
    77       margin: 1px 4px;
 
    81       padding: 2px;
 
    78       padding: 2px;
 
    82       border: 1px solid tan;
 
    79       border: 1px solid tan;
 
    90     .clearfix {
 
    87     .clearfix {
 
    91       clear: both;
 
    88       clear: both;
 
    92     }
 
    89     }
 
    93     #test {
 
    90     #test {
 
    94       display: none;
 
    91       display: none;
 
       
    92     }
 
       
    93     table.report-by-maxval {
 
       
    94       border-collapse: collapse;
 
       
    95       margin: 2px;
 
       
    96     }
 
       
    97     table.report-by-maxval > tr > th {
 
       
    98       border: 2px solid green;
 
       
    99       padding: 2px;
 
       
   100     }
 
       
   101     table.report-by-maxval > tr > td {
 
       
   102       border: 1px solid green;
 
       
   103       padding: 2px;
 
    95     }
 
   104     }
 
    96   </style>
 
   105   </style>
 
    97 </head>
 
   106 </head>
 
    98 <body>
 
   107 <body>
 
    99 
   108 
   231       <div class="setting"><input type="text" id="stat-count-limit" value="100"> times</div>
 
   240       <div class="setting"><input type="text" id="stat-count-limit" value="100"> times</div>
 
   232       <div class="setting">limit to <input type="text" id="stat-time-limit" value="10"> sec</div>
 
   241       <div class="setting">limit to <input type="text" id="stat-time-limit" value="10"> sec</div>
 
   233       <button id="statistic">Start</button>
 
   242       <button id="statistic">Start</button>
 
   234       <div class="clearfix"></div>
 
   243       <div class="clearfix"></div>
 
   235     </div>
 
   244     </div>
 
   236     <div class="report">
 
   245     <div id="reports">
 
   237       <div class="name">next max score</div>
 
   246       <div class="clearfix"></div>
 
   238       <table>
 
       
   239         <tr>
 
       
   240           <th>Max</th>
 
       
   241           <th>Count</th>
 
       
   242           <th>%</th>
 
       
   243         </tr>
 
       
   244         <tr>
 
       
   245           <td>128</td><td>8</td><td><div style="background: red; width: 100px">x</div></td>
 
       
   246         </tr>
 
       
   247         <tr>
 
       
   248           <td>256</td><td>4</td><td><div style="background: red; width: 50px">x</div></td>
 
       
   249         </tr>
 
       
   250         <tr>
 
       
   251           <td>512</td><td>12</td><td><div style="background: red; width: 150px">x</div></td>
 
       
   252         </tr>
 
       
   253       </table>
 
       
   254     </div>
 
   247     </div>
 
   255   </div>
 
   248   </div>
 
   256 
   249 
   257   <script>
 
   250   <script>
 
   258     "use strict";
 
   251     "use strict";
 
   624     ui.ai.enable = function(aiDom) {
 
   617     ui.ai.enable = function(aiDom) {
 
   625       if (ui.ai.current)
 
   618       if (ui.ai.current)
 
   626         ui.ai.current.cleanup();
 
   619         ui.ai.current.cleanup();
 
   627       ui.ai.moveToTop(aiDom);
 
   620       ui.ai.moveToTop(aiDom);
 
   628       ui.ai.current = ui.ai.algList[aiDom.id](aiDom);
 
   621       ui.ai.current = ui.ai.algList[aiDom.id](aiDom);
 
       
   622       ui.ai.currentName = aiDom.id;
 
   629     }
 
   623     }
 
   630 
   624 
   631 
   625 
   632     ////////////////////////////////////////////////////////////////
 
   626     ////////////////////////////////////////////////////////////////
 
   633     // Reports and statistic.
 
   627     // Reports and statistic.
 
       
   628 
       
   629     var reportsDom = document.getElementById('reports');
 
   634 
   630 
   635     function statistic() {
 
   631     function statistic() {
 
   636       var stats = [];
 
   632       var stats = [];
 
   637       var cnt = parseInt(document.getElementById('stat-count-limit').value);
 
   633       var cnt = parseInt(document.getElementById('stat-count-limit').value);
 
   638       if (isNaN(cnt) || !isFinite(cnt) || cnt < 1)
 
   634       if (isNaN(cnt) || !isFinite(cnt) || cnt < 1)
 
   642         tsLimit = 1000 * 10;
 
   638         tsLimit = 1000 * 10;
 
   643       else
 
   639       else
 
   644         tsLimit = 1000 * tsLimit;
 
   640         tsLimit = 1000 * tsLimit;
 
   645       var safeBdr = board.create();
 
   641       var safeBdr = board.create();
 
   646       var tsLimitFrom = new Date().getTime();
 
   642       var tsLimitFrom = new Date().getTime();
 
   647       for (var i = 0; i < cnt; i++) {
 
   643       for (var gameCnt = 0; gameCnt < cnt; gameCnt++) {
 
   648         var turn = 0;
 
   644         var turn = 0;
 
   649         var brd = board.create();
 
   645         var brd = board.create();
 
   650         board.putRandom(brd);
 
   646         board.putRandom(brd);
 
   651         var tsFrom = new Date().getTime();
 
   647         var tsFrom = new Date().getTime();
 
   652         while (!board.gameOver(brd)) {
 
   648         while (!board.gameOver(brd)) {
 
   695         var n = row.n;
 
   691         var n = row.n;
 
   696         row.meanSpeed = row.meanSpeed / n;
 
   692         row.meanSpeed = row.meanSpeed / n;
 
   697         row.meanTurn = row.meanTurn / n;
 
   693         row.meanTurn = row.meanTurn / n;
 
   698         row.meanScore = row.meanScore / n;
 
   694         row.meanScore = row.meanScore / n;
 
   699       }
 
   695       }
 
   700       console.log(histo);
 
   696       var reportDom = document.createElement('div');
 
       
   697       reportDom.classList.add('report');
 
       
   698       var h5Dom = document.createElement('h5');
 
       
   699       h5Dom.appendChild(document.createTextNode(ui.ai.currentName));
 
       
   700       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();
 
       
   724       for (var i = maxVals.length-1; i >= 0; i--) {
 
       
   725         var maxVal = maxVals[i];
 
       
   726         var row = histo[maxVals[i]];
 
       
   727         console.log("%d: %o", maxVals[i], row);
 
       
   728         var trDom = document.createElement('tr');
 
       
   729         var tdDom = document.createElement('td');
 
       
   730         tdDom.appendChild(document.createTextNode(maxVal));
 
       
   731         trDom.appendChild(tdDom);
 
       
   732         var tdDom = document.createElement('td');
 
       
   733         tdDom.appendChild(document.createTextNode(row.n));
 
       
   734         trDom.appendChild(tdDom);
 
       
   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);
 
       
   750       reportsDom.insertBefore(reportDom, reportsDom.firstChild);
 
   701     }
 
   751     }
 
   702 
   752 
   703     var statisticBtn = document.getElementById('statistic');
 
   753     var statisticBtn = document.getElementById('statistic');
 
   704     statisticBtn.addEventListener("click", statistic, false);
 
   754     statisticBtn.addEventListener("click", statistic, false);
 
   705 
   755
2048-js-ai