66 lines
2.2 KiB
HTML
66 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Monster Slayer</title>
|
|
<script src="https://npmcdn.com/vue/dist/vue.js"></script>
|
|
<link rel="stylesheet" href="css/foundation.min.css">
|
|
<link rel="stylesheet" href="css/app.css">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<section class="row">
|
|
<div class="small-6 columns">
|
|
<h1 class="text-center">YOU</h1>
|
|
<div class="healthbar">
|
|
<div class="healthbar text-center" style="background-color: green; margin: 0; color: white;" :style="pHPStyle">
|
|
{{pHP}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="small-6 columns">
|
|
<h1 class="text-center">MONSTER</h1>
|
|
<div class="healthbar">
|
|
<div class="healthbar text-center" style="background-color: green; margin: 0; color: white;" :style="mHPStyle">
|
|
{{mHP}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<section class="row controls" v-if="!gameOn">
|
|
<div class="small-12 columns">
|
|
<button id="start-game" @click="start">START NEW GAME</button>
|
|
</div>
|
|
</section>
|
|
<section class="row controls" v-else>
|
|
<div class="small-12 columns">
|
|
<button id="attack" @click="playerAttack">ATTACK</button>
|
|
<button id="special-attack" @click="specialAttack">SPECIAL ATTACK</button>
|
|
<button id="heal" @click="heal">HEAL</button>
|
|
<button id="give-up" @click="giveUp">GIVE UP</button>
|
|
</div>
|
|
</section>
|
|
<section class="row log">
|
|
<div class="small-12 columns">
|
|
<ul>
|
|
<template v-for="log in logs">
|
|
<template v-if="log.attacker == 'player'">
|
|
<li class="player-turn">
|
|
player hits monster for {{log.dmg}} damage.
|
|
</li>
|
|
</template>
|
|
<template v-else>
|
|
<li class="monster-turn">
|
|
monster hits player for {{log.dmg}} damage.
|
|
</li>
|
|
</template>
|
|
</template>
|
|
|
|
</ul>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script src="app.js" charset="utf-8"></script>
|
|
|
|
</body>
|
|
</html>
|