26 height: 40px; |
26 height: 40px; |
27 border: 1px solid red; |
27 border: 1px solid red; |
28 margin: 0; |
28 margin: 0; |
29 text-align: center; |
29 text-align: center; |
30 } |
30 } |
31 div.ai-control, div.move-control, div.score-conrol { |
31 div.control { |
|
32 text-align: left; |
32 border: 1px red solid; |
33 border: 1px red solid; |
33 display: inline-block; |
34 display: inline-block; |
34 margin: 10px 0 2px 0; |
35 margin: 3px 2px; |
35 background-color: cornsilk; |
36 background-color: cornsilk; |
36 } |
37 padding: 2px; |
37 div.move-control, div.score-conrol { |
38 } |
38 padding: 3px; |
39 div.move.control button.suggestion { |
39 } |
|
40 div.move-control button.suggestion { |
|
41 background-color: cyan; |
40 background-color: cyan; |
42 } |
41 } |
43 div.ai-control { |
42 div.wide.control { |
44 padding: 2px 2px 2px 1em; |
43 display: block; |
45 } |
44 } |
46 div.ai-control:before { |
45 div.ai.control { |
47 content: "AI: "; |
|
48 margin-left: -.5em; |
|
49 padding: 0; |
|
50 } |
|
51 div.ai, div.settings, div#reports { |
|
52 border: 1px red solid; |
|
53 margin-top: 20px; |
|
54 padding: 2px; |
|
55 position: relative; |
46 position: relative; |
56 background-color: cornsilk; |
47 margin-bottom: 1em; |
57 } |
48 } |
58 div.ai.enabled { |
49 div.ai.control.enabled { |
59 background-color: wheat; |
50 background-color: wheat; |
60 } |
51 } |
61 div.ai > h5 { |
52 div.control h5 { |
62 margin: 2px 0 2px 6em; |
53 text-align: center; |
|
54 margin: 2px 0; |
|
55 } |
|
56 div.ai.control h5 { |
|
57 margin-left: 6em; |
63 } |
58 } |
64 button.ai { |
59 button.ai { |
65 position: absolute; |
60 position: absolute; |
66 left: 1em; |
61 left: 1em; |
67 top: -1em; |
62 top: -1em; |
68 } |
63 } |
69 button#statistic, button#statistic-clean { |
64 button#statistic, button#statistic-clean { |
70 display: inline-block; |
65 display: inline-block; |
71 float: left; |
|
72 margin: 3px 4px; |
66 margin: 3px 4px; |
73 } |
67 } |
74 div.ai > div.option, div.setting, div.report { |
68 div.control > div.option { |
75 display: inline-block; |
69 display: inline-block; |
76 margin: 1px 4px; |
70 margin: 1px 4px; |
77 padding: 2px; |
71 padding: 2px; |
78 border: 1px solid tan; |
72 border: 1px solid tan; |
79 border-radius: 4px; |
73 border-radius: 4px; |
80 } |
74 } |
81 div.ai > div.option, div.setting { |
75 div.control input { |
82 float: left; |
|
83 } |
|
84 div.ai > div.option > input.positive, div.settings > div.setting > input, div.ai-control input.positive { |
|
85 text-align: right; |
76 text-align: right; |
86 max-width: 4em; |
77 max-width: 4em; |
87 margin-right: 2px; |
78 margin-right: 2px; |
88 } |
79 } |
89 .clearfix { |
|
90 clear: both; |
|
91 } |
|
92 #test { |
80 #test { |
93 display: none; |
81 display: none; |
94 } |
|
95 div.report > h5 { |
|
96 margin: 2px 0; |
|
97 } |
82 } |
98 table.report-by-maxval { |
83 table.report-by-maxval { |
99 border-collapse: collapse; |
84 border-collapse: collapse; |
100 margin: 2px; |
85 margin: 2px; |
101 font-size: 10pt; |
86 font-size: 10pt; |
118 <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> |
103 <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> |
119 |
104 |
120 <h1>2048</h1> |
105 <h1>2048</h1> |
121 |
106 |
122 <div id="score-area" class="area"> |
107 <div id="score-area" class="area"> |
123 <div class="score-conrol"> |
108 <div class="control"> |
124 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 |
109 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 |
125 </div> |
110 </div> |
126 </div> |
111 </div> |
127 |
112 |
128 <div id="message-area" class="area"></div> |
113 <div id="message-area" class="area"></div> |
153 <td></td> |
138 <td></td> |
154 </tr> |
139 </tr> |
155 </table> |
140 </table> |
156 |
141 |
157 <div id="control-area" class="area"> |
142 <div id="control-area" class="area"> |
158 <div> |
143 <div class="control"> |
159 <button id="start">Start</button> |
144 <button id="start">Start</button> |
160 <span><input type="checkbox" id="2048" checked> 2048</span> |
145 <div class="option"><input type="checkbox" id="2048" checked> 2048</div> |
161 </div> |
146 </div> |
162 <div class="ai-control"> |
147 <br> |
|
148 <div class="control"> |
163 <button id="suggest">Suggest</button> |
149 <button id="suggest">Suggest</button> |
164 <button id="step">Step</button> |
150 <button id="step">Step</button> |
165 <button id="finish">Finish</button> |
151 <button id="finish">Finish</button> |
166 </div> |
152 </div> |
167 <div class="ai-control"> |
153 <br> |
|
154 <div class="control"> |
168 <button id="until">Continue</button> |
155 <button id="until">Continue</button> |
169 until <input type="text" class="positive" id="until-score" value="10000"> score |
156 <div class="option">until <input type="text" class="positive" id="until-score" value="10000"> score</div> |
170 and <input type="text" class="positive" id="until-max-value" value="9"> max value |
157 and <div class="option"><input type="text" class="positive" id="until-max-value" value="9"> max value</div> |
171 </div> |
158 </div> |
172 <div class="clearfix"></div> |
159 <br> |
173 <div class="move-control"> |
160 <div class="move control"> |
174 <table> |
161 <table> |
175 <tr> |
162 <tr> |
176 <td></td><td><button id="up">↑</button></td><td></td> |
163 <td></td><td><button id="up">↑</button></td><td></td> |
177 </tr> |
164 </tr> |
178 <tr> |
165 <tr> |
180 </tr> |
167 </tr> |
181 </table> |
168 </table> |
182 <button id="test">test</button> |
169 <button id="test">test</button> |
183 </div> |
170 </div> |
184 <h1>AIs</h1> |
171 <h1>AIs</h1> |
185 <div> |
172 <div class="ai-list"> |
186 <div class="ai" id="ai-blind-random"> |
173 <div class="ai wide control" id="ai-blind-random"> |
187 <button class="ai">enable</button> |
174 <button class="ai">enable</button> |
188 <h5>bling random</h5> |
175 <h5>bling random</h5> |
189 </div> |
176 </div> |
190 <div class="ai" id="ai-blind-weight-random"> |
177 <div class="ai wide control" id="ai-blind-weight-random"> |
191 <button class="ai">enable</button> |
178 <button class="ai">enable</button> |
192 <h5>bling weight random</h5> |
179 <h5>bling weight random</h5> |
193 <div class="option"> |
180 <div class="option"> |
194 <input type="text" name="left" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> left weight |
181 <input type="text" name="left" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> left weight |
195 </div> |
182 </div> |
200 <input type="text" name="up" class="positive" pattern="[0-9]*[.]?[0-9]*" value="4"/> up weight |
187 <input type="text" name="up" class="positive" pattern="[0-9]*[.]?[0-9]*" value="4"/> up weight |
201 </div> |
188 </div> |
202 <div class="option"> |
189 <div class="option"> |
203 <input type="text" name="down" class="positive" pattern="[0-9]*[.]?[0-9]*" value="8"/> down weight |
190 <input type="text" name="down" class="positive" pattern="[0-9]*[.]?[0-9]*" value="8"/> down weight |
204 </div> |
191 </div> |
205 <div class="clearfix"></div> |
|
206 </div> |
192 </div> |
207 <div class="ai" id="ai-blind-cycle"> |
193 <div class="ai wide control" id="ai-blind-cycle"> |
208 <button class="ai">enable</button> |
194 <button class="ai">enable</button> |
209 <h5>blind cycle</h5> |
195 <h5>blind cycle</h5> |
210 <div class="option"> |
196 <div class="option"> |
211 <input type="checkbox" name="clockwise"/> clockwise |
197 <input type="checkbox" name="clockwise"/> clockwise |
212 </div> |
198 </div> |
213 <div class="option"> |
199 <div class="option"> |
214 <input type="checkbox" name="whilePossible"/> max move in one direction |
200 <input type="checkbox" name="whilePossible"/> max move in one direction |
215 </div> |
201 </div> |
216 <div class="clearfix"></div> |
|
217 </div> |
202 </div> |
218 <div class="ai" id="ai-one-step-ahead"> |
203 <div class="ai wide control" id="ai-one-step-ahead"> |
219 <button class="ai">enable</button> |
204 <button class="ai">enable</button> |
220 <h5>one step ahead</h5> |
205 <h5>one step ahead</h5> |
221 <div class="option"> |
206 <div class="option"> |
222 <input type="text" name="scoreCoef" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> score weight |
207 <input type="text" name="scoreCoef" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> score weight |
223 </div> |
208 </div> |
231 <input type="text" name="edgeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="0"/> max value at edge bonus |
216 <input type="text" name="edgeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="0"/> max value at edge bonus |
232 </div> |
217 </div> |
233 <div class="option"> |
218 <div class="option"> |
234 <input type="text" name="freeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> free cell coefficient |
219 <input type="text" name="freeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> free cell coefficient |
235 </div> |
220 </div> |
236 <div class="clearfix"></div> |
|
237 </div> |
221 </div> |
238 <div class="ai" id="ai-static-deep-merges"> |
222 <div class="ai wide control" id="ai-static-deep-merges"> |
239 <button class="ai">enable</button> |
223 <button class="ai">enable</button> |
240 <h5>deep merges without random simulation</h5> |
224 <h5>deep merges without random simulation</h5> |
241 <div class="option"> |
225 <div class="option"> |
242 <input type="text" name="scoreCoef" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> score weight |
226 <input type="text" name="scoreCoef" class="positive" pattern="[0-9]*[.]?[0-9]*" value="1"/> score weight |
243 </div> |
227 </div> |
254 <input type="text" name="freeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> free cell coefficient |
238 <input type="text" name="freeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> free cell coefficient |
255 </div> |
239 </div> |
256 <div class="option"> |
240 <div class="option"> |
257 <input type="text" name="weightThreshold" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> score threshold |
241 <input type="text" name="weightThreshold" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> score threshold |
258 </div> |
242 </div> |
259 <div class="clearfix"></div> |
|
260 </div> |
243 </div> |
261 <div class="ai" id="ai-expectimax"> |
244 <div class="ai wide control" id="ai-expectimax"> |
262 <button class="ai">enable</button> |
245 <button class="ai">enable</button> |
263 <h5>expectimax</h5> |
246 <h5>expectimax</h5> |
264 <div class="option"> |
247 <div class="option"> |
265 <input type="text" name="depth" class="positive" pattern="[0-9]*" value="3"/> recursion depth |
248 <input type="text" name="depth" class="positive" pattern="[0-9]*" value="3"/> recursion depth |
266 </div> |
249 </div> |
280 <input type="text" name="edgeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="0"/> max value at edge bonus |
263 <input type="text" name="edgeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="0"/> max value at edge bonus |
281 </div> |
264 </div> |
282 <div class="option"> |
265 <div class="option"> |
283 <input type="text" name="freeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> free cell coefficient |
266 <input type="text" name="freeBonus" class="positive" pattern="[0-9]*[.]?[0-9]*" value="10"/> free cell coefficient |
284 </div> |
267 </div> |
285 <div class="clearfix"></div> |
|
286 </div> |
268 </div> |
287 </div> |
269 </div> |
288 </div> |
270 </div> |
289 |
271 |
290 <div id="report-area"> |
272 <div id="report-area" class="area"> |
291 <h1>Reports</h1> |
273 <h1>Reports</h1> |
292 <div class="settings"> |
274 <div class="control"> |
293 <div class="setting"><input type="text" id="stat-count-limit" value="100"> times</div> |
275 <div class="option"><input type="text" id="stat-count-limit" value="100"> times</div> |
294 <div class="setting">limit to <input type="text" id="stat-time-limit" value="10"> sec</div> |
276 <div class="option">limit to <input type="text" id="stat-time-limit" value="10"> sec</div> |
295 <button id="statistic">Start</button> |
277 <button id="statistic">Start</button> |
296 <button id="statistic-clean">Clean</button> |
278 <button id="statistic-clean">Clean</button> |
297 <div class="setting"><input type="checkbox" id="report-score"/> score</div> |
279 <div class="option"><input type="checkbox" id="report-score"/> score</div> |
298 <div class="setting"><input type="checkbox" id="report-turn"/> turn</div> |
280 <div class="option"><input type="checkbox" id="report-turn"/> turn</div> |
299 <div class="setting"><input type="checkbox" id="report-speed"/> speed</div> |
281 <div class="option"><input type="checkbox" id="report-speed"/> speed</div> |
300 <div class="clearfix"></div> |
|
301 </div> |
282 </div> |
302 <div id="reports"> |
283 <div id="reports" class="wide control"></div> |
303 <div class="clearfix"></div> |
|
304 </div> |
|
305 </div> |
284 </div> |
306 |
285 |
307 <script> |
286 <script> |
308 "use strict"; |
287 "use strict"; |
309 |
288 |
311 |
290 |
312 //////////////////////////////////////////////////////////////// |
291 //////////////////////////////////////////////////////////////// |
313 // UI widgets. |
292 // UI widgets. |
314 |
293 |
315 ui.dom = {}; |
294 ui.dom = {}; |
316 ui.dom.clearfix = function() { |
|
317 var divDom = document.createElement('div'); |
|
318 divDom.classList.add("clearfix"); |
|
319 return divDom; |
|
320 } |
|
321 ui.dom.table = function(tbl, cols, cfg) { |
295 ui.dom.table = function(tbl, cols, cfg) { |
322 var tableDom = document.createElement('table'); |
296 var tableDom = document.createElement('table'); |
323 if (typeof cfg.tblClass === 'string') |
297 if (typeof cfg.tblClass === 'string') |
324 tableDom.classList.add(cfg.tblClass); |
298 tableDom.classList.add(cfg.tblClass); |
325 if (typeof cfg.tblTitle === 'string') |
299 if (typeof cfg.tblTitle === 'string') |
459 |
433 |
460 //////////////////////////////////////////////////////////////// |
434 //////////////////////////////////////////////////////////////// |
461 // Suggestion UI. |
435 // Suggestion UI. |
462 |
436 |
463 ui.suggestion = {}; |
437 ui.suggestion = {}; |
464 ui.suggestion.btns = document.querySelectorAll('div.move-control button'); |
438 ui.suggestion.btns = document.querySelectorAll('div.move.control button'); |
465 ui.suggestion.clear = function() { |
439 ui.suggestion.clear = function() { |
466 for (var i = 0; i < ui.suggestion.btns.length; i++) |
440 for (var i = 0; i < ui.suggestion.btns.length; i++) |
467 ui.suggestion.btns[i].classList.remove('suggestion'); |
441 ui.suggestion.btns[i].classList.remove('suggestion'); |
468 } |
442 } |
469 ui.suggestion.set = function(dir) { |
443 ui.suggestion.set = function(dir) { |
757 }, |
731 }, |
758 // "": function() { |
732 // "": function() { |
759 // return new ai.(ui.brdEngine); |
733 // return new ai.(ui.brdEngine); |
760 // }, |
734 // }, |
761 }; |
735 }; |
762 ui.ai.domList = document.querySelectorAll('div.ai'); |
736 ui.ai.domList = document.querySelectorAll('div.ai-list > div.ai'); |
763 for (var i = 0; i < ui.ai.domList.length; i++) { |
737 for (var i = 0; i < ui.ai.domList.length; i++) { |
764 ui.ai.domList[i].querySelectorAll('button.ai')[0].addEventListener("click", function (event) { |
738 ui.ai.domList[i].querySelectorAll('button.ai')[0].addEventListener("click", function (event) { |
765 ui.ai.enable(event.target.parentNode); |
739 ui.ai.enable(event.target.parentNode); |
766 }, false); |
740 }, false); |
767 } |
741 } |
869 row.meanTurn = row.meanTurn / n; |
843 row.meanTurn = row.meanTurn / n; |
870 if (speedChecked) |
844 if (speedChecked) |
871 row.meanSpeed = row.meanSpeed / n; |
845 row.meanSpeed = row.meanSpeed / n; |
872 } |
846 } |
873 var reportDom = document.createElement('div'); |
847 var reportDom = document.createElement('div'); |
874 reportDom.classList.add('report'); |
848 reportDom.classList.add('option'); |
875 var h5Dom = document.createElement('h5'); |
849 var h5Dom = document.createElement('h5'); |
876 h5Dom.appendChild(document.createTextNode(ui.ai.currentName + " #" + ui.report.statNo++)); |
850 h5Dom.appendChild(document.createTextNode(ui.ai.currentName + " #" + ui.report.statNo++)); |
877 reportDom.appendChild(h5Dom); |
851 reportDom.appendChild(h5Dom); |
878 var maxVals = Object.keys(histo).sort(function(a,b){return a - b}); |
852 var maxVals = Object.keys(histo).sort(function(a,b){return a - b}); |
879 var tbl = []; |
853 var tbl = []; |
926 |
900 |
927 ui.report.statClean = function() { |
901 ui.report.statClean = function() { |
928 while (reportsDom.hasChildNodes()) { |
902 while (reportsDom.hasChildNodes()) { |
929 reportsDom.removeChild(reportsDom.lastChild); |
903 reportsDom.removeChild(reportsDom.lastChild); |
930 } |
904 } |
931 reportsDom.appendChild(ui.dom.clearfix()); |
|
932 } |
905 } |
933 var statisticCleanBtn = document.getElementById('statistic-clean'); |
906 var statisticCleanBtn = document.getElementById('statistic-clean'); |
934 statisticCleanBtn.addEventListener("click", ui.report.statClean, false); |
907 statisticCleanBtn.addEventListener("click", ui.report.statClean, false); |
935 |
908 |
936 //////////////////////////////////////////////////////////////// |
909 //////////////////////////////////////////////////////////////// |