1 files changed, 44 insertions, 38 deletions
diff --git a/server/web/game/index.html b/server/web/game/index.html
index f4f6593..04e85d2 100644
--- a/server/web/game/index.html
+++ b/server/web/game/index.html
@@ -1,45 +1,51 @@
 <!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta
+<head>
+    <meta charset="UTF-8"/>
+    <meta
             name="viewport"
             content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
-        />
-        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-        <title>sakura | game</title>
-        <link rel="stylesheet" type="text/css" href="/style.css" />
-        <link rel="stylesheet" type="text/css" href="/game/style.css" />
-    </head>
-    <body>
-        <header>
-            <details>
-                <summary>Game state</summary>
-                <code id="game-json"></code>
-            </details>
-        </header>
-        <main id="game"></main>
+    />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>sakura | game</title>
+    <link rel="stylesheet" type="text/css" href="/style.css"/>
+    <link rel="stylesheet" type="text/css" href="/game/style.css"/>
+</head>
+<body>
+<header>
+    <details>
+        <summary>Game state</summary>
+        <code id="game-json"></code>
+    </details>
+</header>
+<main id="game"></main>
 
-        <template id="tmpl">
-            <div class="distance">
-                <input type="checkbox" class="sakura" />
-                <input type="checkbox" class="sakura" />
-                <input type="checkbox" class="sakura" />
-                <input type="checkbox" class="sakura" />
-                <input type="checkbox" class="sakura" />
-                <input type="checkbox" class="sakura" />
-                <input type="checkbox" class="sakura" />
-                <input type="checkbox" class="sakura" />
-                <input type="checkbox" class="sakura" />
-                <input type="checkbox" class="sakura" />
-            </div>
-            <ul class="actions">
-                <li class="action" data-index="">
-                    <button type="button" class="description" onclick="window.socket.send(closest('.action').getAttribute('data-index'))">Do</button>
-                </li>
-            </s>
-        </template>
+<template id="tmpl">
+    <div id="distance">
+        <div class="content">
+            <input type="checkbox" class="sakura" style="animation-delay: 0.7s"/>
+            <input type="checkbox" class="sakura" style="animation-delay: 1.4s"/>
+            <input type="checkbox" class="sakura" style="animation-delay: 2.1s"/>
+            <input type="checkbox" class="sakura" style="animation-delay: 2.8s"/>
+            <input type="checkbox" class="sakura" style="animation-delay: 3.5s"/>
+            <input type="checkbox" class="sakura" style="animation-delay: 4.2s"/>
+            <input type="checkbox" class="sakura" style="animation-delay: 4.9s"/>
+            <input type="checkbox" class="sakura" style="animation-delay: 5.6s"/>
+            <input type="checkbox" class="sakura" style="animation-delay: 6.3s"/>
+            <input type="checkbox" class="sakura" style="animation-delay: 7s"/>
+        </div>
+        <label class="label pool-name">Distance</label>
+        <label class="label pool-value">10</label>
+    </div>
+    <ul class="actions">
+        <li class="action" data-index="">
+            <button type="button" class="description"
+                    onclick="window.socket.send(closest('.action').getAttribute('data-index'))">Do
+            </button>
+        </li>
+    </ul>
+</template>
 
-        <script src="/game/game.js"></script>
-    </body>
+<script src="/game/game.js"></script>
+</body>
 </html>