diff options
| author | Daniel Weipert <code@drogueronin.de> | 2023-08-17 22:46:12 +0200 |
|---|---|---|
| committer | Daniel Weipert <code@drogueronin.de> | 2023-08-17 22:46:12 +0200 |
| commit | aa44f67ab57673528e96a4a075fbd8cd0354bd68 (patch) | |
| tree | c232349cbe9583378ad510774be27b4371d50cd4 /index.html | |
| parent | cc685bfe02b42b592987117fa008a4461785f53c (diff) | |
ui
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 145 |
1 files changed, 100 insertions, 45 deletions
@@ -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> |