Report mockup.
--- 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";