<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue Basics</title>
    <link href="https://fonts.googleapis.com/css2?family=Jost:wght@400;700&display=swap" rel="stylesheet" />
    <link rel="stylesheet" href="styles.css" />
    <script src="https://unpkg.com/vue@next" defer></script>
    <script src="app.js" defer></script>
</head>

<body>
    <header>
        <h1>Monster Slayer</h1>
    </header>
    <div id="game">
        <section id="monster" class="container">
            <h2>Monster Health</h2>
            <div class="healthbar">
                <div class="healthbar__value" :style="monsterBarStyles"></div>
            </div>
        </section>
        <section id="player" class="container">
            <h2>Your Health</h2>
            <div class="healthbar">
                <div class="healthbar__value" :style="playerBarStyles"></div>
            </div>
        </section>
        <section v-if="winner" class="container">
            <h2>Game Over!</h2>
            <h3 v-if="monsterWon">You lost!</h3>
            <h3 v-if="playerWon">You won!</h3>
            <h3 v-if="draw">It's a draw'!</h3>
            <button @click="restartGame">Start a new game</button>
        </section>
        <section id="controls" v-else>
            <button @click="attackMonster">ATTACK</button>
            <button :disabled="specialAttackAllowed" @click="specialAttackMonster">SPECIAL ATTACK</button>
            <button @click="healPlayer">HEAL</button>
            <button @click="surrender">SURRENDER</button>
        </section>
        <section id="log" class="container">
            <h2>Battle Log</h2>
            <ul>
                <li v-for="message in battleLog" :key="message">
                    <span :class="{'log--player': message.actionBy === 'player', 'log--monster': message.actionBy === 'monster'}">{{ message.actionBy === "player" ? "Player" : "Monster"}}</span>
                    <span v-if="message.actionType === 'heal'"> heals himself for <span class="log--heal">{{message.actionValue }}</span></span>
                    <span v-else> does {{ message.value }} <span class="log--damage">{{ message.actionValue}}</span></span>
                </li>
            </ul>
        </section>
    </div>
</body>

</html>
