# HG changeset patch
# User Oleksandr Gavenko <gavenkoa@gmail.com>
# Date 1411419657 -10800
# Node ID 4bb8ed8448bc3c6e184ca06935a7aa4a38a8f1de
# Parent  7b9d1bb9c471d91726ab6f10ddbe7d54234b8328
Reduce CSS style classes.

diff -r 7b9d1bb9c471 -r 4bb8ed8448bc 2048.html
--- a/2048.html	Mon Sep 22 22:36:03 2014 +0300
+++ b/2048.html	Tue Sep 23 00:00:57 2014 +0300
@@ -28,38 +28,33 @@
       margin: 0;
       text-align: center;
     }
-    div.ai-control, div.move-control, div.score-conrol {
+    div.control {
+      text-align: left;
       border: 1px red solid;
       display: inline-block;
-      margin: 10px 0 2px 0;
+      margin: 3px 2px;
       background-color: cornsilk;
+      padding: 2px;
     }
-    div.move-control, div.score-conrol {
-      padding: 3px;
-    }
-    div.move-control button.suggestion {
+    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.wide.control {
+      display: block;
     }
-    div.ai, div.settings, div#reports {
-      border: 1px red solid;
-      margin-top: 20px;
-      padding: 2px;
+    div.ai.control {
       position: relative;
-      background-color: cornsilk;
+      margin-bottom: 1em;
     }
-    div.ai.enabled {
+    div.ai.control.enabled {
       background-color: wheat;
     }
-    div.ai > h5 {
-      margin: 2px 0 2px 6em;
+    div.control h5 {
+      text-align: center;
+      margin: 2px 0;
+    }
+    div.ai.control h5 {
+      margin-left: 6em;
     }
     button.ai {
       position: absolute;
@@ -68,33 +63,23 @@
     }
     button#statistic, button#statistic-clean {
       display: inline-block;
-      float: left;
       margin: 3px 4px;
     }
-    div.ai > div.option, div.setting, div.report {
+    div.control > div.option {
       display: inline-block;
       margin: 1px 4px;
       padding: 2px;
       border: 1px solid tan;
       border-radius: 4px;
     }
-    div.ai > div.option, div.setting {
-      float: left;
-    }
-    div.ai > div.option > input.positive, div.settings > div.setting > input, div.ai-control input.positive {
+    div.control 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;
@@ -120,7 +105,7 @@
   <h1>2048</h1>
 
   <div id="score-area" class="area">
-    <div class="score-conrol">
+    <div class="control">
       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>
@@ -155,22 +140,24 @@
   </table>
 
   <div id="control-area" class="area">
-    <div>
+    <div class="control">
       <button id="start">Start</button>
-      <span><input type="checkbox" id="2048" checked> 2048</span>
+      <div class="option"><input type="checkbox" id="2048" checked> 2048</div>
     </div>
-    <div class="ai-control">
+    <br>
+    <div class="control">
       <button id="suggest">Suggest</button>
       <button id="step">Step</button>
       <button id="finish">Finish</button>
     </div>
-    <div class="ai-control">
+    <br>
+    <div class="control">
       <button id="until">Continue</button>
-      until <input type="text" class="positive" id="until-score" value="10000"> score
-      and <input type="text" class="positive" id="until-max-value" value="9"> max value
+      <div class="option">until <input type="text" class="positive" id="until-score" value="10000"> score</div>
+      and <div class="option"><input type="text" class="positive" id="until-max-value" value="9"> max value</div>
     </div>
-    <div class="clearfix"></div>
-    <div class="move-control">
+    <br>
+    <div class="move control">
       <table>
         <tr>
           <td></td><td><button id="up">↑</button></td><td></td>
@@ -182,12 +169,12 @@
       <button id="test">test</button>
     </div>
     <h1>AIs</h1>
-    <div>
-      <div class="ai" id="ai-blind-random">
+    <div class="ai-list">
+      <div class="ai wide control" id="ai-blind-random">
         <button class="ai">enable</button>
         <h5>bling random</h5>
       </div>
-      <div class="ai" id="ai-blind-weight-random">
+      <div class="ai wide control" id="ai-blind-weight-random">
         <button class="ai">enable</button>
         <h5>bling weight random</h5>
         <div class="option">
@@ -202,9 +189,8 @@
         <div class="option">
           <input type="text" name="down" class="positive" pattern="[0-9]*[.]?[0-9]*" value="8"/> down weight
         </div>
-        <div class="clearfix"></div>
       </div>
-      <div class="ai" id="ai-blind-cycle">
+      <div class="ai wide control" id="ai-blind-cycle">
         <button class="ai">enable</button>
         <h5>blind cycle</h5>
         <div class="option">
@@ -213,9 +199,8 @@
         <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-ahead">
+      <div class="ai wide control" id="ai-one-step-ahead">
         <button class="ai">enable</button>
         <h5>one step ahead</h5>
         <div class="option">
@@ -233,9 +218,8 @@
         <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-static-deep-merges">
+      <div class="ai wide control" id="ai-static-deep-merges">
         <button class="ai">enable</button>
         <h5>deep merges without random simulation</h5>
         <div class="option">
@@ -256,9 +240,8 @@
         <div class="option">
           <input type="text" name="weightThreshold" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> score threshold
         </div>
-        <div class="clearfix"></div>
       </div>
-      <div class="ai" id="ai-expectimax">
+      <div class="ai wide control" id="ai-expectimax">
         <button class="ai">enable</button>
         <h5>expectimax</h5>
         <div class="option">
@@ -282,26 +265,22 @@
         <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">
+  <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>
+    <div class="control">
+      <div class="option"><input type="text" id="stat-count-limit" value="100"> times</div>
+      <div class="option">limit to <input type="text" id="stat-time-limit" value="10"> sec</div>
       <button id="statistic">Start</button>
       <button id="statistic-clean">Clean</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 class="option"><input type="checkbox" id="report-score"/> score</div>
+      <div class="option"><input type="checkbox" id="report-turn"/> turn</div>
+      <div class="option"><input type="checkbox" id="report-speed"/> speed</div>
     </div>
-    <div id="reports">
-      <div class="clearfix"></div>
-    </div>
+    <div id="reports" class="wide control"></div>
   </div>
 
   <script>
@@ -313,11 +292,6 @@
     // UI widgets.
 
     ui.dom = {};
-    ui.dom.clearfix = function() {
-      var divDom = document.createElement('div');
-      divDom.classList.add("clearfix");
-      return divDom;
-    }
     ui.dom.table = function(tbl, cols, cfg) {
       var tableDom = document.createElement('table');
       if (typeof cfg.tblClass === 'string')
@@ -461,7 +435,7 @@
     // Suggestion UI.
 
     ui.suggestion = {};
-    ui.suggestion.btns = document.querySelectorAll('div.move-control button');
+    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');
@@ -759,7 +733,7 @@
       //   return new ai.(ui.brdEngine);
       // },
     };
-    ui.ai.domList = document.querySelectorAll('div.ai');
+    ui.ai.domList = document.querySelectorAll('div.ai-list > 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);
@@ -871,7 +845,7 @@
           row.meanSpeed = row.meanSpeed / n;
       }
       var reportDom = document.createElement('div');
-      reportDom.classList.add('report');
+      reportDom.classList.add('option');
       var h5Dom = document.createElement('h5');
       h5Dom.appendChild(document.createTextNode(ui.ai.currentName + " #" + ui.report.statNo++));
       reportDom.appendChild(h5Dom);
@@ -928,7 +902,6 @@
       while (reportsDom.hasChildNodes()) {
         reportsDom.removeChild(reportsDom.lastChild);
       }
-      reportsDom.appendChild(ui.dom.clearfix());
     }
     var statisticCleanBtn = document.getElementById('statistic-clean');
     statisticCleanBtn.addEventListener("click", ui.report.statClean, false);