Visualise buttons.
--- a/2048.html Tue Sep 09 20:13:00 2014 +0300
+++ b/2048.html Tue Sep 09 20:22:05 2014 +0300
@@ -28,12 +28,17 @@
margin: 0;
text-align: center;
}
- div.ai-control {
+ div.ai-control, div.move-control {
border: 1px red solid;
display: inline-block;
margin: 10px 0 2px 0;
+ background-color: cornsilk;
+ }
+ div.move-control {
+ padding: 2px;
+ }
+ div.ai-control {
padding: 2px 2px 2px 1em;
- background-color: cornsilk;
}
div.ai-control:before {
content: "AI: ";
@@ -69,6 +74,9 @@
.clearfix {
clear: both;
}
+ #test {
+ display: none;
+ }
</style>
</head>
<body>
@@ -115,11 +123,16 @@
<button id="step">Step</button>
<button id="finish">Finish</button>
</div>
- <div>
- <button id="left">left</button>
- <button id="up">up</button>
- <button id="down">down</button>
- <button id="right">right</button>
+ <div class="clearfix"></div>
+ <div class="move-control">
+ <table>
+ <tr>
+ <td></td><td><button id="up">up</button></td><td></td>
+ </tr>
+ <tr>
+ <td><button id="left">left</button></td><td><button id="down">down</button></td><td><button id="right">right</button></td>
+ </tr>
+ </table>
<button id="test">test</button>
</div>
<h1>AIs</h1>