2048.html
author Oleksandr Gavenko <gavenkoa@gmail.com>
Thu, 18 Sep 2014 02:23:01 +0300
changeset 88 97acd9f4288b
parent 86 203f9afeaf2f
child 93 c2bf15c3b80b
child 94 8bbd7570f437
permissions -rw-r--r--
Fix navigation header.

<!DOCTYPE html>
<html>
<head>
  <title>2048 AI</title>
  <meta name="viewport" content="width=device-width; initial-scale=1.0"/>
  <meta charset="utf-8"/>

  <script src="rule.js"></script>
  <script src="board.js"></script>
  <script src="perf.js"></script>
  <script src="ai.js"></script>

  <style>
    body {
      font-size: 11pt;
    }
    h1, div.area {
      text-align: center;
      margin: 10px auto;
    }
    #board {
      margin: 10px auto;
    }
    #board td {
      width: 40px;
      height: 40px;
      border: 1px solid red;
      margin: 0;
      text-align: center;
    }
    div.ai-control, div.move-control, div.score-conrol {
      border: 1px red solid;
      display: inline-block;
      margin: 10px 0 2px 0;
      background-color: cornsilk;
    }
    div.move-control, div.score-conrol {
      padding: 3px;
    }
    div.move-control button.suggestion {
      background-color: cyan;
    }
    div.ai-control {
      padding: 2px 2px 2px 1em;
    }
    div.ai-control:before {
      content: "AI: ";
      margin-left: -.5em;
      padding: 0;
    }
    div.ai, div.settings, div#reports {
      border: 1px red solid;
      margin-top: 20px;
      padding: 2px;
      position: relative;
      background-color: cornsilk;
    }
    div.ai.enabled {
      background-color: wheat;
    }
    div.ai > h5 {
      margin: 2px 0 2px 6em;
    }
    button.ai {
      position: absolute;
      left: 1em;
      top: -1em;
    }
    button#statistic {
      display: inline-block;
      float: left;
      margin: 3px 4px;
    }
    div.ai > div.option, div.setting, div.report {
      display: inline-block;
      float: left;
      margin: 1px 4px;
      padding: 2px;
      border: 1px solid tan;
      border-radius: 4px;
    }
    div.ai > div.option > input.positive, div.settings > div.setting > input {
      text-align: right;
      max-width: 4em;
      margin-right: 2px;
    }
    .clearfix {
      clear: both;
    }
    #test {
      display: none;
    }
    div.report > h5 {
      margin: 2px 0;
    }
    table.report-by-maxval {
      border-collapse: collapse;
      margin: 2px;
      font-size: 10pt;
    }
    table.report-by-maxval > tr > th {
      border: 2px solid green;
      padding: 2px;
    }
    table.report-by-maxval > tr > td {
      border: 1px solid green;
      padding: 2px;
    }
    table.report-by-maxval > tr > td:nth-child(3) {
      background-color: yellow;
    }
  </style>
</head>
<body>

  <div class="area">[ <a href="README.html">About</a> | <a href="CHANGES.html">Changes</a> | <a href="HACKING.html">Hacking</a> | <a href="AUTHORS.html">Authors</a> ]</div>

  <h1>2048</h1>

  <div id="score-area" class="area">
    <div class="score-conrol">
      Score: <span id="score">0</span>, Max: <span id="max">0</span>, Turn: <span id="turn">0</span>, Speed: <span id="speed">0</span> t/s
    </div>
  </div>

  <div id="message-area" class="area"></div>

  <table id="board">
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>

  <div id="control-area" class="area">
    <div>
      <button id="start">Start</button>
      <span><input type="checkbox" id="2048" checked> 2048</span>
    </div>
    <div class="ai-control">
      <button id="suggest">Suggest</button>
      <button id="step">Step</button>
      <button id="finish">Finish</button>
    </div>
    <div class="clearfix"></div>
    <div class="move-control">
      <table>
        <tr>
          <td></td><td><button id="up">↑</button></td><td></td>
        </tr>
        <tr>
          <td><button id="left">←</button></td><td><button id="down">↓</button></td><td><button id="right">→</button></td>
        </tr>
      </table>
      <button id="test">test</button>
    </div>
    <h1>AIs</h1>
    <div>
      <div class="ai" id="ai-blind-random">
        <button class="ai">enable</button>
        <h5>bling random</h5>
      </div>
      <div class="ai" id="ai-blind-weight-random">
        <button class="ai">enable</button>
        <h5>bling weight random</h5>
        <div class="option">
          <input type="text" name="left" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> left weight
        </div>
        <div class="option">
          <input type="text" name="right" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> right weight
        </div>
        <div class="option">
          <input type="text" name="up" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> up weight
        </div>
        <div class="option">
          <input type="text" name="down" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> down weight
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="ai" id="ai-blind-cycle">
        <button class="ai">enable</button>
        <h5>blind cycle</h5>
        <div class="option">
          <input type="checkbox" name="clockwise"/> clockwise
        </div>
        <div class="option">
          <input type="checkbox" name="whilePossible"/> max move in one direction
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="ai" id="ai-one-step-deep">
        <button class="ai">enable</button>
        <h5>next merge makes max value</h5>
        <div class="option">
          <input type="text" name="scoreCoef" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> score weight
        </div>
        <div class="option">
          <input type="text" name="maxValCoef" class="positive" pattern="[0-9]*[.]?[0-9]*" value="0"/> max value weight
        </div>
        <div class="option">
          <input type="text" name="cornerBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="100"/> max value at corner bonus
        </div>
        <div class="option">
          <input type="text" name="edgeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="0"/> max value at edge bonus
        </div>
        <div class="option">
          <input type="text" name="freeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> free cell coefficient
        </div>
        <div class="clearfix"></div>
      </div>
      <div class="ai" id="ai-deep-max-score">
        <button class="ai">enable</button>
        <h5>deep merges without simulation make max score</h5>
      </div>
      <div class="ai" id="ai-deep-max-score-corner">
        <button class="ai">enable</button>
        <h5>deep merges without simulation make max score + bonus if max value at corner/edge</h5>
      </div>
      <div class="ai" id="ai-expectimax">
        <button class="ai">enable</button>
        <h5>expectimax</h5>
        <div class="option">
          <input type="text" name="depth" class="positive" pattern="[0-9]*" value="3"/> recursion depth
        </div>
        <div class="option">
          <input type="text" name="balance" class="positive" pattern="[0-9]*[.]?[0-9]*" value=".9"/> probability of 2
        </div>
        <div class="option">
          <input type="text" name="scoreCoef" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> score weight
        </div>
        <div class="option">
          <input type="text" name="maxValCoef" class="positive" pattern="[0-9]*[.]?[0-9]*" value="0"/> max value weight
        </div>
        <div class="option">
          <input type="text" name="cornerBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="100"/> max value at corner bonus
        </div>
        <div class="option">
          <input type="text" name="edgeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="0"/> max value at edge bonus
        </div>
        <div class="option">
          <input type="text" name="freeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> free cell coefficient
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>

  <div id="report-area" class="area">
    <h1>Reports</h1>
    <div class="settings">
      <div class="setting"><input type="text" id="stat-count-limit" value="100"> times</div>
      <div class="setting">limit to <input type="text" id="stat-time-limit" value="10"> sec</div>
      <button id="statistic">Start</button>
      <div class="setting"><input type="checkbox" id="report-score"/> score</div>
      <div class="setting"><input type="checkbox" id="report-turn"/> turn</div>
      <div class="setting"><input type="checkbox" id="report-speed"/> speed</div>
      <div class="clearfix"></div>
    </div>
    <div id="reports">
      <div class="clearfix"></div>
    </div>
  </div>

  <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");
    ui.board = {};
    ui.board.val2048Dom = document.getElementById('2048');
    ui.board.val2048Dom.addEventListener("click", function(event) {
      event.preventDefault(); event.stopPropagation();
      ui.board.update(ui.board.position);
      localStorage.val2048 = ui.board.val2048Dom.checked;
      event.target.blur();
    }, false);
    ui.board.val2048 = function(val) {
      if (ui.board.val2048Dom.checked)
        return Math.pow(2, val);
      return val;
    }
    /* 'val' typesafe.  */
    ui.board.set = function(i, j, val) {
      if (typeof val !== 'number')
        val = 0;
      var dom = boardDom.querySelectorAll("tr")[i].querySelectorAll("td")[j];
      if (0 < val && val < 15) {
        dom.innerHTML = ui.board.val2048(val);
        var rgb = 'rgb(255,'+ (255-5*val-2*(val%2)) +','+ (255-10*val-5*((val-1)%2)) +')';
      } else {
        dom.innerHTML = '';
        var rgb = 'white';
      }
      dom.style.backgroundColor = rgb;
    }
    ui.board.update = function(brd) {
      for (var i = 0; i < 4; i++) {
        for (var j = 0; j < 4; j++) {
          ui.board.set(i, j, brd[i][j]);
        }
      }
    }
    ui.board.handleEdit = function(tdDom, i, j) {
      if (!tdDom.firstChild || tdDom.firstChild.nodeType === Node.TEXT_NODE) {
        if (tdDom.firstChild)
          tdDom.removeChild(tdDom.firstChild);
        var inputDom = document.createElement('input');
        inputDom.value = ui.board.position[i][j];
        inputDom.style.width = '1em';
        tdDom.appendChild(inputDom);
        inputDom.focus();
        inputDom.select();
        inputDom.addEventListener("blur", function(tdDom, i, j) {
          return function(event) {
            event.preventDefault(); event.stopPropagation();
            ui.board.handleEdit(tdDom, i, j);
          }
        }(tdDom, i, j), false);
      } else {
        var inputDom = tdDom.firstChild;
        var val = parseInt(inputDom.value);
        if (0 <= val && val < 15) {
          ui.board.position[i][j] = val;
          ui.board.set(i, j, val);
        } else {
          ui.board.set(i, j, ui.board.position[i][j]);
        }
      }
    }
    ui.board.enableEdit = function() {
      var trDoms = boardDom.querySelectorAll("tr");
      for (var i = 0; i < 4; i++) {
        var tdDoms = trDoms[i].querySelectorAll("td");
        for (var j = 0; j < 4; j++) {
          var tdDom = tdDoms[j];
          tdDom.addEventListener("click", function(tdDom, i, j) {
            return function(event) {
              event.preventDefault(); event.stopPropagation();
              ui.board.handleEdit(tdDom, i, j);
            }
          }(tdDom, i, j), false);
          tdDom.addEventListener("keyup", function(tdDom, i, j) {
            return function(event) {
              event.preventDefault(); event.stopPropagation();
              if (event.keyCode === 13)
                ui.board.handleEdit(tdDom, i, j);
            }
          }(tdDom, i, j), false);
        }
      }
    }
    ui.board.enableEdit();

    ////////////////////////////////////////////////////////////////
    // Score statistic.

    ui.score = {};
    var scoreDom = document.getElementById("score");
    var maxDom = document.getElementById("max");
    var speedDom = document.getElementById("speed");
    var turnDom = document.getElementById("turn");
    ui.score.clear = function(brd) {
      scoreDom.innerHTML = '0';
      maxDom.innerHTML = '0';
      speedDom.innerHTML = '0';
      turnDom.innerHTML = '0';
    }
    ui.score.update = function(brd, turn) {
      var score = board.score(brd);
      scoreDom.innerHTML = '' + score.score;
      maxDom.innerHTML = '' + ui.board.val2048(score.max);
      turnDom.innerHTML = '' + turn;
    }
    ui.score.speed = function(speed, turn) {
      speedDom.innerHTML = '' + speed;
      turnDom.innerHTML = '' + turn;
    }

    ////////////////////////////////////////////////////////////////
    // Suggestion UI.

    ui.suggestion = {};
    ui.suggestion.btns = document.querySelectorAll('div.move-control button');
    ui.suggestion.clear = function() {
      for (var i = 0; i < ui.suggestion.btns.length; i++)
        ui.suggestion.btns[i].classList.remove('suggestion');
    }
    ui.suggestion.set = function(dir) {
      document.getElementById(dir).classList.add('suggestion');
    }

    ////////////////////////////////////////////////////////////////
    // Game flow.

    ui.game = {};
    ui.game.dirs = ["up", "right", "down", "left"];

    var messageDom = document.getElementById("message-area");
    ui.game.clearMessage = function() {
      messageDom.innerHTML = "";
    }
    ui.game.setMessage = function(msg) {
      messageDom.innerHTML = msg;
    }

    ui.game.checkGameOver = function() {
      if (board.gameOver(ui.board.position)) {
        ui.game.setMessage("Game over!");
        return true;
      } else {
        return false;
      }
    }
    ui.game.checkMoveValid = function(move) {
      var tmpBrd = board.create();
      board.copy(ui.board.position, tmpBrd);
      if (ui.game.dirs.indexOf(move) === -1) {
        ui.game.setMessage("AI can't find move!");
        return false;
      }
      if ( ! board.move[move].call(null, tmpBrd)) {
        ui.game.setMessage("AI move "+move+" is ivalid!");
        return false;
      }
      return true;
    }

    ui.game.beginStep = function() {
      ui.suggestion.clear();
      ui.game.clearMessage();
      if (ui.game.checkGameOver())
        return false;
      return true;
    }
    ui.game.finishStep = function() {
      board.putRandom(ui.board.position);
      ui.board.turn++;
      ui.board.update(ui.board.position);
      ui.score.update(ui.board.position, ui.board.turn);
      localStorage.savedBoard = JSON.stringify(ui.board.position);
      localStorage.savedTurn = ui.board.turn;
    }

    ////////////////////////////////////////////////////////////////
    // Actions.

    ui.action = {};

    ui.action.start = function() {
      ui.score.clear();
      ui.suggestion.clear();
      ui.game.clearMessage();
      ui.board.turn = 0;
      ui.board.position = board.create();
      board.putRandom(ui.board.position);
      ui.board.update(ui.board.position);
    }
    document.getElementById("start").addEventListener("click", ui.action.start, false);

    for (var i = 0; i < ui.game.dirs.length; i++) {
      var dir = ui.game.dirs[i];
      ui.action[dir] = function(dir) {
        return function(event) {
          event.preventDefault(); event.stopPropagation();
          if (ui.game.checkGameOver())
            return;
          ui.suggestion.clear();
          var updated = board.move[dir](ui.board.position);
          if (updated) {
            ui.game.finishStep();
            ui.ai.current && ui.ai.current.cleanup();
          }
        }
      } (dir);
      document.getElementById(dir).addEventListener("click", ui.action[dir], false);
    }

    document.body.addEventListener("keydown", function(event) {
      if (document.activeElement.value)
        return;
      if (event.altKey || event.ctrlKey || event.shiftKey || event.metaKey)
        return;
      var key = event.keyCode || event.which;
      var keyMoves = {38: "up", 40: "down", 37: "left", 39: "right"};
      if (key in keyMoves) {
        ui.action[keyMoves[key]](event);
      }
    }, false);

    document.getElementById("test").addEventListener("click", function() {
      event.preventDefault(); event.stopPropagation();
      board.move.replaceByBoardJS(ui.brdEngine);
    }, false);

    ui.action.suggest = function(event) {
      event.preventDefault(); event.stopPropagation();
      if ( ! ui.ai.current) {
        ui.game.setMessage('Select AI!');
        return;
      }
      if ( ! ui.game.beginStep())
        return;
      var tmpBrd = board.create();
      board.copy(ui.board.position, tmpBrd);
      var move = ui.ai.current.analyse(tmpBrd);
      ui.ai.current.cleanup();
      if ( ! ui.game.checkMoveValid(move))
        return;
      ui.suggestion.set(move);
    }
    document.getElementById("suggest").addEventListener("click", ui.action.suggest, false);
    ui.action.step = function() {
      if ( ! ui.ai.current) {
        ui.game.setMessage('Select AI!');
        return;
      }
      if ( ! ui.game.beginStep())
        return;
      var tmpBrd = board.create();
      board.copy(ui.board.position, tmpBrd);
      var move = ui.ai.current.analyse(tmpBrd);
      ui.ai.current.cleanup();
      if ( ! ui.game.checkMoveValid(move))
        return;
      board.move[move].call(null, ui.board.position);
      ui.game.finishStep();
    }
    document.getElementById("step").addEventListener("click", ui.action.step, false);

    ui.action.finish = function() {
      if ( ! ui.ai.current) {
        ui.game.setMessage('Select AI!');
        return;
      }
      ui.game.beginStep();
      var step = 0;
      var safeBdr = board.create();
      var tsFrom = new Date().getTime();
      while (!board.gameOver(ui.board.position)) {
        board.copy(ui.board.position, safeBdr);
        var move = ui.ai.current.analyse(safeBdr);
        if (typeof move === 'undefined') {
          ui.game.setMessage("I don't know how to move!");
          return;
        }
        var updated = board.move[move].call(null, ui.board.position);
        if (updated) {
          board.putRandom(ui.board.position);
        } else {
          ui.game.finishStep();
          ui.game.setMessage("Wrong move!");
          return;
        }
        step++; 
      }
      var tsTo = new Date().getTime();
      ui.game.finishStep();
      ui.score.speed(parseFloat((step*1000.0/(tsTo-tsFrom)).toPrecision(3)), step);
      ui.game.setMessage("Game over!");
      ui.ai.current && ui.ai.current.cleanup();
    }
    document.getElementById("finish").addEventListener("click", ui.action.finish, false);

    ////////////////////////////////////////////////////////////////
    // Register AIs.

    ui.ai = {};
    ui.ai.current = null;
    ui.ai.parseCfg = function(aiDom, cfg) {
      var optDoms = aiDom.querySelectorAll("div.option > input.positive[type='text']");
      for (var i = 0; i < optDoms.length; i++) {
        var val = parseFloat(optDoms[i].value);
        if (val === NaN || val < 0) {
          ui.game.setMessage('' + optDoms[i].name + ' is not a positive number!');
          cfg[optDoms[i].name] = 1;
          continue;
        }
        cfg[optDoms[i].name] = val;
      }
    }

    ui.ai.algList = {
      "ai-blind-random": function() {
        return new ai.BlindRandom(ui.brdEngine);
      },
      "ai-blind-weight-random": function(aiDom) {
        var cfg = {};
        ui.ai.parseCfg(aiDom, cfg);
        return new ai.BlindWeightRandom(ui.brdEngine, cfg);
      },
      "ai-blind-cycle": function(aiDom) {
        var cfg = {};
        cfg.clockwise = aiDom.querySelectorAll("input[name='clockwise']")[0].checked;
        cfg.whilePossible = aiDom.querySelectorAll("input[name='whilePossible']")[0].checked;
        return new ai.BlindCycle(ui.brdEngine, cfg);
      },
      "ai-one-step-deep": function(aiDom) {
        var cfg = {};
        ui.ai.parseCfg(aiDom, cfg);
        return new ai.OneStepDeep(ui.brdEngine, cfg);
      },
      "ai-deep-max-score": function() {
        return new ai.DeepMaxScore(ui.brdEngine);
      },
      "ai-deep-max-score-corner": function() {
        return new ai.DeepMaxScoreCorner(ui.brdEngine);
      },
      "ai-expectimax": function(aiDom) {
        var cfg = {};
        ui.ai.parseCfg(aiDom, cfg);
        return new ai.expectimax(ui.brdEngine, cfg);
      },
      // "": function() {
      //   return new ai.(ui.brdEngine);
      // },
    };
    ui.ai.domList = document.querySelectorAll('div.ai');
    for (var i = 0; i < ui.ai.domList.length; i++) {
      ui.ai.domList[i].querySelectorAll('button.ai')[0].addEventListener("click", function (event) {
        ui.ai.enable(event.target.parentNode);
      }, false);
    }

    ui.ai.moveToTop = function(aiDom) {
      for (var i = 0; i < ui.ai.domList.length; i++) {
        ui.ai.domList[i].classList.remove('enabled');
      }
      var rootDom = aiDom.parentNode;
      rootDom.removeChild(aiDom);
      rootDom.insertBefore(aiDom, rootDom.firstChild);
      aiDom.classList.add('enabled');
    }
    ui.ai.enable = function(aiDom) {
      if (ui.ai.current)
        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');

    ui.report = {};

    ui.report.stat = function() {
      var stats = [];
      var cnt = parseInt(document.getElementById('stat-count-limit').value);
      if (isNaN(cnt) || !isFinite(cnt) || cnt < 1)
        cnt = 100;
      var tsLimit = parseFloat(document.getElementById('stat-count-limit').value);
      if (isNaN(tsLimit) || !isFinite(tsLimit) || tsLimit < 1 || tsLimit > 60)
        tsLimit = 1000 * 10;
      else
        tsLimit = 1000 * tsLimit;
      var safeBdr = board.create();
      var tsLimitFrom = new Date().getTime();
      for (var gameCnt = 0; gameCnt++ < cnt; void(0)) {
        var turn = 0;
        var brd = board.create();
        board.putRandom(brd);
        var tsFrom = new Date().getTime();
        while (!board.gameOver(brd)) {
          board.copy(brd, safeBdr);
          var move = ui.ai.current.analyse(safeBdr);
          if (ui.game.dirs.indexOf(move) < 0) {
            ui.game.setMessage("I don't know how to move!");
            return;
          }
          var updated = board.move[move].call(null, brd);
          if (!updated) {
            ui.game.setMessage("Wrong move!");
            return;
          }
          board.putRandom(brd);
          turn++;
        }
        var tsTo = new Date().getTime();
        var stat = board.score(brd);
        stat.turn = turn;
        stat.ts = tsTo - tsFrom;
        stats.push(stat);
        if (tsTo - tsLimitFrom >= tsLimit)
          break;
      }
      var scoreChecked = document.getElementById('report-score').checked;
      var turnChecked = document.getElementById('report-turn').checked;
      var speedChecked = document.getElementById('report-speed').checked;
      var histo = {};
      for (i = stats.length-1; i >= 0; i--) {
        var stat = stats[i];
        if ( ! histo[stat.max])
          histo[stat.max] = { n: 0, minSpeed: Infinity, meanSpeed: 0, maxSpeed: 0, minTurn: Infinity, meanTurn: 0, maxTurn: 0, minScore: Infinity, meanScore: 0, maxScore: 0 };
        var row = histo[stat.max];
        row.n++;
        if (scoreChecked) {
          row.minScore = Math.min(row.minScore, stat.score);
          row.meanScore += stat.score;
          row.maxScore = Math.max(row.maxScore, stat.score);
        }
        if (turnChecked) {
          row.minTurn = Math.min(row.minTurn, stat.turn);
          row.meanTurn += stat.turn;
          row.maxTurn = Math.max(row.maxTurn, stat.turn);
        }
        if (speedChecked) {
          var speed = (stat.turn * 1000.0) / stat.ts;
          row.minSpeed = Math.min(row.minSpeed, speed);
          row.meanSpeed += speed;
          row.maxSpeed = Math.max(row.maxSpeed, speed);
        }
      }
      for (var i in histo) {
        var row = histo[i];
        var n = row.n;
        if (scoreChecked)
          row.meanScore = row.meanScore / n;
        if (turnChecked)
          row.meanTurn = row.meanTurn / n;
        if (speedChecked)
          row.meanSpeed = row.meanSpeed / n;
      }
      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 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]];
        var perc = parseFloat((100 * row.n / gameCnt).toPrecision(3));
        var tblRow = [maxVal, row.n, perc];
        if (scoreChecked) {
          tblRow.push(row.minScore);
          var meanScore = parseFloat(row.meanScore.toPrecision(3));
          tblRow.push(meanScore);
          tblRow.push(row.maxScore);
        }
        if (turnChecked) {
          tblRow.push(row.minTurn);
          tblRow.push(Math.floor(row.meanTurn));
          tblRow.push(row.maxTurn);
        }
        if (speedChecked) {
          tblRow.push(parseFloat(row.minSpeed.toPrecision(3)));
          tblRow.push(parseFloat(row.meanSpeed.toPrecision(3)));
          tblRow.push(parseFloat(row.maxSpeed.toPrecision(3)));
        }
        tbl.push(tblRow);
      }
      var tblCols = ['maxVal', 'n', '%'];
      if (scoreChecked) {
        tblCols.push('min score');
        tblCols.push('mean score');
        tblCols.push('max score');
      }
      if (turnChecked) {
        tblCols.push('min turn');
        tblCols.push('mean turn');
        tblCols.push('max turn');
      }
      if (speedChecked) {
        tblCols.push('min speed');
        tblCols.push('mean speed');
        tblCols.push('max speed');
      }
      var tableDom = ui.dom.table(tbl, tblCols, { tableClass: 'report-by-maxval' });
      reportDom.appendChild(tableDom);
      reportsDom.insertBefore(reportDom, reportsDom.firstChild);
    }

    var statisticBtn = document.getElementById('statistic');
    statisticBtn.addEventListener("click", ui.report.stat, false);


    ////////////////////////////////////////////////////////////////
    // Initialise game.

    ui.brdEngine = BoardArr2d; // TODO make user selectable

    if (localStorage.val2048) {
      try {
        ui.board.val2048Dom.checked = JSON.parse(localStorage.val2048);
      } catch (ex) { }
    }
    if (localStorage.savedBoard) {
      try {
        ui.board.position = JSON.parse(localStorage.savedBoard);
        if (localStorage.savedTurn)
          ui.board.turn = JSON.parse(localStorage.savedTurn);
        else
          ui.board.turn = 0;
        ui.board.update(ui.board.position);
        ui.score.update(ui.board.position, ui.board.turn);
      } catch (ex) { }
    } else {
      ui.action.start();
    }

  </script>
  
</body>
</html>