From e57ab3ca3907ae186bae1af088ca880ae880c312 Mon Sep 17 00:00:00 2001
From: ewy <ewy0@protonmail.com>
Date: Tue, 22 Sep 2026 21:29:39 +0200
Subject: progress

---
 server/web/game/index.html | 69 ++++++++++++++++++++++++++++++++--------------
 1 file changed, 49 insertions(+), 20 deletions(-)

(limited to 'server/web/game/index.html')

diff --git a/server/web/game/index.html b/server/web/game/index.html
index 04e85d2..f022c64 100644
--- a/server/web/game/index.html
+++ b/server/web/game/index.html
@@ -18,32 +18,61 @@
         <code id="game-json"></code>
     </details>
 </header>
+<img class="background" src="/game/assets/sea-water-texture-seamless.jpg">
 <main id="game"></main>
 
 <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 id="arena">
+        <div id="shadow" class="pool">
+            <input type="checkbox" data-ordering="8" class="sakura" style="animation-delay: 0.7s"/>
+        </div>
+        <div id="distance" class="pool">
+            <div class="content">
+                <input type="checkbox" data-ordering="8" class="sakura" style="animation-delay: 0.7s"/>
+                <input type="checkbox" data-ordering="6" class="sakura" style="animation-delay: 1.4s"/>
+                <input type="checkbox" data-ordering="4" class="sakura" style="animation-delay: 2.1s"/>
+                <input type="checkbox" data-ordering="2" class="sakura" style="animation-delay: 2.8s"/>
+                <input type="checkbox" data-ordering="0" class="sakura" style="animation-delay: 3.5s"/>
+                <input type="checkbox" data-ordering="1" class="sakura" style="animation-delay: 4.2s"/>
+                <input type="checkbox" data-ordering="3" class="sakura" style="animation-delay: 4.9s"/>
+                <input type="checkbox" data-ordering="5" class="sakura" style="animation-delay: 5.6s"/>
+                <input type="checkbox" data-ordering="7" class="sakura" style="animation-delay: 6.3s"/>
+                <input type="checkbox" data-ordering="9" class="sakura" style="animation-delay: 7s"/>
+            </div>
         </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 id="actions">
+        <template>
+            <li class="action" data-index="">
+                <button type="button" class="description"
+                        onclick="window.socket.send(closest('.action').getAttribute('data-index'))">Do
+                </button>
+            </li>
+        </template>
     </ul>
+    <template id="player">
+        <div class="player">
+            <div class="pool aura" data-value="3">
+                <input type="checkbox" data-ordering="0" class="sakura"/>
+                <input type="checkbox" data-ordering="1" class="sakura"/>
+                <input type="checkbox" data-ordering="2" class="sakura"/>
+                <input type="checkbox" data-ordering="3" class="sakura"/>
+                <input type="checkbox" data-ordering="4" class="sakura"/>
+            </div>
+            <div class="pool life" data-value="3">
+                <input type="checkbox" data-ordering="0" class="sakura"/>
+                <input type="checkbox" data-ordering="1" class="sakura"/>
+                <input type="checkbox" data-ordering="2" class="sakura"/>
+                <input type="checkbox" data-ordering="3" class="sakura"/>
+                <input type="checkbox" data-ordering="4" class="sakura"/>
+                <input type="checkbox" data-ordering="5" class="sakura"/>
+                <input type="checkbox" data-ordering="6" class="sakura"/>
+                <input type="checkbox" data-ordering="7" class="sakura"/>
+                <input type="checkbox" data-ordering="8" class="sakura"/>
+                <input type="checkbox" data-ordering="9" class="sakura"/>
+            </div>
+        </div>
+    </template>
 </template>
 
 <script src="/game/game.js"></script>
-- 
cgit v1.3.1