diff options
| author | Daniel Weipert <code@drogueronin.de> | 2023-08-17 02:53:14 +0200 |
|---|---|---|
| committer | Daniel Weipert <code@drogueronin.de> | 2023-08-17 17:42:15 +0200 |
| commit | cc685bfe02b42b592987117fa008a4461785f53c (patch) | |
| tree | 625c1c9573b178e574bb70cac042c35da4036cf1 /index.html | |
| parent | 717fde1c48c7221da986ac02d2b806b2fee6f2d5 (diff) | |
refactorrefactor
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 122 |
1 files changed, 88 insertions, 34 deletions
@@ -3,8 +3,12 @@ <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> - <link rel="stylesheet" href="style.css" /> + <link rel="stylesheet" href="/resources/css/variables.css" /> + <link rel="stylesheet" href="/resources/css/page.css" /> + <link rel="stylesheet" href="/resources/css/battle.css" /> + <link rel="stylesheet" href="/resources/css/menu.css" /> </head> + <body> <div class="wrap"> <div id="battle"> @@ -16,13 +20,20 @@ </div> <div id="techniques"></div> + <template id="tpl___techniques"> + <div></div> + </template> <template id="tpl___technique"> <div class="techniques__technique"> - <div class="techniques__technique__name"></div> - <div class="techniques__technique__types"></div> - <div class="techniques__technique__power"></div> - <div class="techniques__technique__accuracy"></div> - <div class="techniques__technique__range"></div> + <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> @@ -42,13 +53,31 @@ <div id="menu__catch"> <img src="/modules/tuxemon/mods/tuxemon/gfx/items/tuxeball.png" title="Catch" width="64" height="64" /> </div> + + <div id="menu__journal"> + <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/journal.png" title="Journal" width="64" height="64" /> + </div> </div> </div> + + <!-- 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 class="monster__img" src="" /> + <img data-template-slot="sprite" class="monster__img" src="" /> <div class="monster__exp"> <div class="monster__exp-bar"></div> </div> @@ -66,43 +95,50 @@ <div class="battle__monster-info"> <div class="battle__monster-info-box"> <div> - <span class="battle__monster-info__name">{NAME}</span> - <span class="battle__monster-info__gender">{GENDER}</span> - Lv. <span class="battle__monster-info__level">{LEVEL}</span> + <span data-template-slot="name" class="battle__monster-info__name"></span> + <span data-template-slot="gender" class="battle__monster-info__gender"></span> + Lv. <span data-template-slot="level" class="battle__monster-info__level"></span> </div> <div class="battle__monster-info-box__status"> - <div class="battle__monster-info__status"></div> - <div class="hp"> - <div class="hp-bar-wrap"> - <div class="hp-bar"></div> - </div> - <div class="hp-text"></div> - </div> + <div data-template-slot="statusEffect" class="battle__monster-info__status"></div> + <div data-template-slot="hpBar"></div> </div> </div> <div class="battle__monster-info-exp"> <div class="exp-label">XP</div> - <div class="exp"> - <div class="exp-bar-wrap"> - <div class="exp-bar"></div> - </div> - <div class="exp-text"></div> - </div> + <div data-template-slot="expBar"></div> </div> </div> <div class="battle__monster-visual"> <div class="battle__monster-sprite"> - <img class="battle__monster-img" src="" draggable="false" /> - </div> - <div class="battle__monster-technique"> - <div class="battle__monster-technique__name"></div> - <div class="battle__monster-technique__types"></div> - <div class="battle__monster-technique__power"></div> + <img data-template-slot="sprite" class="battle__monster-img" src="" draggable="false" /> </div> </div> </div> </template> + <template id="tpl___battle__hp-bar"> + <div class="hp-bar"> + <div class="hp-bar__bar-wrap"> + <div data-template-slot="bar" class="hp-bar__bar"></div> + </div> + <div data-template-slot="text" class="hp-bar__text"></div> + </div> + </template> + + <template id="tpl___battle__exp-bar"> + <div class="exp-bar"> + <div class="exp-bar__bar-wrap"> + <div data-template-slot="bar" class="exp-bar__bar"></div> + </div> + <div data-template-slot="text" class="exp-bar__text"></div> + </div> + </template> + + <template id="tpl___battle__damage"> + <div data-template-slot="text" class="damage"></div> + </template> + <template id="tpl___popup"> <div class="popup__overlay"> <div class="popup"></div> @@ -114,13 +150,31 @@ </template> <template id="tpl___moveset__item"> <div class="moveset__item"> - <span class="moveset__item__name"></span> - <span class="moveset__item__type"></span> - <span class="moveset__item__power"></span> - <span class="moveset__item__level"></span> + <span data-template-slot="name" class="moveset__item__name"></span> + <span data-template-slot="types" class="moveset__item__type"></span> + <span data-template-slot="power" class="moveset__item__power"></span> + <span data-template-slot="level" class="moveset__item__level"></span> </div> </template> - <script type="text/javascript" src="script.js"></script> + <template id="tpl___menu__journal"> + <div> + <button data-template-slot="save">Save</button> + <button data-template-slot="load">Load</button> + </div> + </template> + + + <script type="text/javascript" src="/resources/js/definitions.js"></script> + <script type="text/javascript" src="/resources/js/helpers.js"></script> + <script type="text/javascript" src="/resources/js/classes/Monster.js"></script> + <script type="text/javascript" src="/resources/js/classes/Technique.js"></script> + <script type="text/javascript" src="/resources/js/classes/StatusEffect.js"></script> + <script type="text/javascript" src="/resources/js/classes/Item.js"></script> + <script type="text/javascript" src="/resources/js/classes/State.js"></script> + <script type="text/javascript" src="/resources/js/db.js"></script> + <script type="text/javascript" src="/resources/js/formula.js"></script> + <script type="text/javascript" src="/resources/js/ui.js"></script> + <script type="text/javascript" src="/resources/js/game.js"></script> </body> </html> |