summaryrefslogtreecommitdiff
path: root/index.html
diff options
context:
space:
mode:
authorDaniel Weipert <code@drogueronin.de>2023-08-15 19:24:47 +0200
committerDaniel Weipert <code@drogueronin.de>2023-08-15 19:24:47 +0200
commitd2b78b32ad41dd7d2e7f86cda8bada33238fd286 (patch)
tree5c2fbc5c99049c9408b9d15e56754e372312d9bc /index.html
parent946d5592d24050337193ba7202dd5b2e5b40c1d3 (diff)
ui reorder and menu
Diffstat (limited to 'index.html')
-rw-r--r--index.html60
1 files changed, 46 insertions, 14 deletions
diff --git a/index.html b/index.html
index fa5498b..94f298c 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,12 @@
<html>
<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width,initial-scale=1">
+
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrap">
- <div>Money: <div id="money"></div></div>
- <div id="party"></div>
-
<div id="battle">
<div id="battle__enemy">
<img class="battle__monster-sprite__animation" src="" draggable="false" />
@@ -15,18 +15,38 @@
<div id="battle__player"></div>
</div>
- <div id="catch">CATCH</div>
+ <div id="status">
+ <div>Money: <span id="money"></span></div>
+ </div>
+
+ <div id="menu">
+ <div id="menu__party">
+ <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/menu/tuxemon.png" title="Tuxemon" width="64" height="64" />
+ </div>
+
+ <div id="menu__inventory">
+ <img src="/modules/tuxemon/mods/tuxemon/gfx/ui/item/backpack.png" title="Inventory" width="64" height="64" />
+ </div>
+
+ <div id="menu__catch">
+ <img src="/modules/tuxemon/mods/tuxemon/gfx/items/tuxeball.png" title="Catch" width="64" height="64" />
+ </div>
+ </div>
</div>
<template id="tpl___party__monster">
<div class="party__monster">
<div><div class="monster__level"></div></div>
- <img src="" />
+ <img 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>
+ <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>
</div>
</template>
@@ -35,14 +55,19 @@
<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 class="battle__monster-info__name">{NAME}</span>
+ <span class="battle__monster-info__gender">{GENDER}</span>
+ Lv. <span class="battle__monster-info__level">{LEVEL}</span>
</div>
- <div class="hp">
- <div class="hp-bar-wrap">
- <div class="hp-bar"></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>
- <div class="hp-text"></div>
- </div>
</div>
<div class="battle__monster-info-exp">
<div class="exp-label">XP</div>
@@ -58,7 +83,11 @@
<div class="battle__monster-sprite">
<img class="battle__monster-img" src="" draggable="false" />
</div>
- <div class="battle__monster-technique"></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>
+ </div>
</div>
</div>
</template>
@@ -74,7 +103,10 @@
</template>
<template id="tpl___moveset__item">
<div class="moveset__item">
- name, lvlrequired, types, power
+ <span class="moveset__item__name"></span>
+ <span class="moveset__item__type"></span>
+ <span class="moveset__item__power"></span>
+ <span class="moveset__item__level"></span>
</div>
</template>