2048.html
changeset 4 732aef931a9e
parent 3 96a50cb300cc
child 7 d8106c8c0481
--- a/2048.html	Tue Sep 02 18:47:33 2014 +0300
+++ b/2048.html	Tue Sep 02 19:03:38 2014 +0300
@@ -9,8 +9,9 @@
     body {
       width: 100%;
     }
-    h1, .score-area, .control-area, #message-area {
+    h1, div.area {
       text-align: center;
+      margin: 10px auto;
     }
     #board {
       margin: 10px auto;
@@ -22,15 +23,18 @@
       margin: 0;
       text-align: center;
     }
+    .report > .name {
+      font-weight: bold;
+    }
   </style>
 </head>
 <body>
 
   <h1>2048</h1>
 
-  <div class="score-area">Score: <span id="score">0</span>, Max: <span id="max">0</span>, Speed: <span id="speed">0</span> t/s, Turn: <span id="turn">0</span></div>
+  <div id="score-area" class="area">Score: <span id="score">0</span>, Max: <span id="max">0</span>, Speed: <span id="speed">0</span> t/s, Turn: <span id="turn">0</span></div>
 
-  <div id="message-area"></div>
+  <div id="message-area" class="area"></div>
 
   <table id="board">
     <tr>
@@ -59,7 +63,7 @@
     </tr>
   </table>
 
-  <div class="control-area">
+  <div id="control-area" class="area">
     <div>
       <button id="start">Start</button>
       <button id="step">Step</button>
@@ -80,6 +84,29 @@
     </div>
   </div>
 
+  <div id="report-area" class="area">
+    <h1>Reports</h1>
+    <div class="report" class="area">
+      <div class="name">next max score</div>
+      <table>
+        <tr>
+          <th>Max</th>
+          <th>Count</th>
+          <th>%</th>
+        </tr>
+        <tr>
+          <td>128</td><td>8</td><td><div style="background: red; width: 100px">x</div></td>
+        </tr>
+        <tr>
+          <td>256</td><td>4</td><td><div style="background: red; width: 50px">x</div></td>
+        </tr>
+        <tr>
+          <td>512</td><td>12</td><td><div style="background: red; width: 150px">x</div></td>
+        </tr>
+      </table>
+    </div>
+  </div>
+
   <script>
     "use strict";