--- 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);