From aa44f67ab57673528e96a4a075fbd8cd0354bd68 Mon Sep 17 00:00:00 2001
From: Daniel Weipert <code@drogueronin.de>
Date: Thu, 17 Aug 2023 22:46:12 +0200
Subject: ui

---
 index.html | 145 ++++++++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 100 insertions(+), 45 deletions(-)

(limited to 'index.html')
diff --git a/index.html b/index.html
index 9a27020..b4d1eb5 100644
--- a/index.html
+++ b/index.html
@@ -1,3 +1,4 @@
+<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
@@ -20,22 +21,6 @@
       </div>
 
       <div id="techniques"></div>
-      <template id="tpl___techniques">
-        <div></div>
-      </template>
-      <template id="tpl___technique">
-        <div class="techniques__technique">
-          <div>
-            <div data-template-slot="name"></div>
-            <div data-template-slot="types"></div>
-          </div>
-          <div>
-            <div data-template-slot="power"></div>
-            <div data-template-slot="accuracy"></div>
-            <div data-template-slot="range"></div>
-          </div>
-        </div>
-      </template>
 
       <div id="status">
         <div>Money: <span id="money"></span></div>
@@ -63,30 +48,9 @@
 
     <!-- Templates -->
 
-    <template id="tpl___party">
-      <div class="party">
-        <div data-template-slot="monsters" class="party__monsters"></div>
-        <div data-template-slot="modes" class="party__selection-modes">
-          <button data-template-slot="modeSelect" data-party-selection-mode="select">Select</button>
-          <button data-template-slot="modeStats" data-party-selection-mode="stats">Stats</button>
-          <button data-template-slot="modeTechniques" data-party-selection-mode="techniques">Techniques</button>
-        </div>
-      </div>
-    </template>
-
-    <template id="tpl___party__monster">
-      <div class="party__monster">
-        <div><div class="monster__level"></div></div>
-        <img data-template-slot="sprite" class="monster__img" src="" />
-        <div class="monster__exp">
-          <div class="monster__exp-bar"></div>
-        </div>
-        <div class="monster__exp-text"></div>
-        <div class="monster__active-technique">
-          <div class="monster__active-technique__name"></div>
-          <div class="monster__active-technique__types"></div>
-          <div class="monster__active-technique__power"></div>
-        </div>
+    <template id="tpl___popup">
+      <div class="popup__overlay">
+        <div class="popup"></div>
       </div>
     </template>
 
@@ -139,9 +103,86 @@
       <div data-template-slot="text" class="damage"></div>
     </template>
 
-    <template id="tpl___popup">
-      <div class="popup__overlay">
-        <div class="popup"></div>
+    <template id="tpl___techniques">
+      <div></div>
+    </template>
+    <template id="tpl___technique">
+      <div class="techniques__technique">
+        <div>
+          <div data-template-slot="name"></div>
+        </div>
+        <div>
+          <div data-template-slot="types"></div>
+          <div data-template-slot="range" title="range"></div>
+          <div data-template-slot="recharge" title="recharge"></div>
+        </div>
+        <div>
+          <div data-template-slot="power" title="power"></div>
+          <div data-template-slot="accuracy" title="accuracy"></div>
+        </div>
+      </div>
+    </template>
+
+    <template id="tpl___party">
+      <div class="party">
+        <div data-template-slot="monsters" class="party__monsters"></div>
+        <div data-template-slot="modes" class="party__selection-modes">
+          <button data-template-slot="modeSelect" data-party-selection-mode="select" class="menu-button">Select</button>
+          <button data-template-slot="modeStats" data-party-selection-mode="stats" class="menu-button">Stats</button>
+          <button data-template-slot="modeTechniques" data-party-selection-mode="techniques" class="menu-button">Techniques</button>
+        </div>
+      </div>
+    </template>
+
+    <template id="tpl___party__monster">
+      <div class="party__monster">
+        <img data-template-slot="sprite" class="monster__img" src="" />
+        <div class="party__monster__stats">
+          <span data-template-slot="name"></span>
+          <span data-template-slot="gender"></span>
+          Lv. <span data-template-slot="level"></span>
+        </div>
+        <div>
+          HP <span data-template-slot="hpText"></span>
+        </div>
+      </div>
+    </template>
+
+    <template id="tpl___monster-stats">
+      <div class="monster-stats">
+        <div class="monster-stats__identity">
+          <span data-template-slot="name"></span>
+          <span data-template-slot="gender"></span>
+          Lv. <span data-template-slot="level"></span>
+          <span data-template-slot="types"></span>
+        </div>
+
+        <div>
+          <table>
+            <tr>
+              <th>Melee</th>
+              <td data-template-slot="stats.melee"></td>
+            </tr>
+            <tr>
+              <th>Armour</th>
+              <td data-template-slot="stats.armour"></td>
+            </tr>
+            <tr>
+              <th>Ranged</th>
+              <td data-template-slot="stats.ranged"></td>
+            </tr>
+            <tr>
+              <th>Dodge</th>
+              <td data-template-slot="stats.dodge"></td>
+            </tr>
+            <tr>
+              <th>Speed</th>
+              <td data-template-slot="stats.speed"></td>
+            </tr>
+          </table>
+        </div>
+
+        <button data-template-slot="techniques">Techniques</button>
       </div>
     </template>
 
@@ -158,8 +199,22 @@
     </template>
 
     <template id="tpl___menu__journal">
-      <div>
-        <button data-template-slot="save">Save</button>
+      <div class="menu__journal">
+        <button data-template-slot="save" class="menu-button">Save</button>
+        <button data-template-slot="load" class="menu-button">Load</button>
+      </div>
+    </template>
+
+    <template id="tpl___dialog__save">
+      <div class="dialog__save">
+        <textarea data-template-slot="saveData"></textarea>
+        <button data-template-slot="saveClipboard" class="menu-button">Save to Clipboard</button>
+      </div>
+    </template>
+
+    <template id="tpl___dialog__load">
+      <div class="dialog__load">
+        <textarea data-template-slot="saveData"></textarea>
         <button data-template-slot="load">Load</button>
       </div>
     </template>
-- 
cgit v1.2.3

