diff options
Diffstat (limited to 'server/web/game/index.html')
| -rw-r--r-- | server/web/game/index.html | 69 |
1 files changed, 49 insertions, 20 deletions
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> |