| | |
| | | <section id="monster" class="container"> |
| | | <h2>Monster Health</h2> |
| | | <div class="healthbar"> |
| | | <div |
| | | class="healthbar__value" |
| | | :style="monsterBarStyle" |
| | | ></div> |
| | | <div class="healthbar__value" :style="monsterBarStyle"></div> |
| | | </div> |
| | | </section> |
| | | <section id="player" class="container"> |
| | | <h2>Your Health</h2> |
| | | <div class="healthbar"> |
| | | <div |
| | | class="healthbar__value" |
| | | :style="playerBarStyle" |
| | | ></div> |
| | | <div class="healthbar__value" :style="playerBarStyle"></div> |
| | | </div> |
| | | </section> |
| | | <section id="controls"> |
| | | <button @click="attackMonster">ATTACK</button> |
| | | <button>SPECIAL ATTACK</button> |
| | | <button @click="specialAttackMonster" :disabled="mayUseSpecialAttack"> |
| | | SPECIAL ATTACK |
| | | </button> |
| | | <button>HEAL</button> |
| | | <button>SURRENDER</button> |
| | | </section> |