2018-04-14 03:32:45 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Monster Slayer</title>
|
2018-04-14 04:48:04 +00:00
|
|
|
<script src="../vue.js"></script>
|
2018-04-14 03:32:45 +00:00
|
|
|
<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">
|
2018-04-14 04:57:31 +00:00
|
|
|
<div class="healthbar text-center"
|
|
|
|
|
style="background-color: green; margin: 0; color: white;"
|
|
|
|
|
:style="pHPStyle"
|
|
|
|
|
>
|
|
|
|
|
{{pHP}}
|
2018-04-14 03:32:45 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="small-6 columns">
|
|
|
|
|
<h1 class="text-center">MONSTER</h1>
|
|
|
|
|
<div class="healthbar">
|
2018-04-14 04:57:31 +00:00
|
|
|
<div class="healthbar text-center"
|
|
|
|
|
style="background-color: green; margin: 0; color: white;"
|
|
|
|
|
:style="mHPStyle"
|
|
|
|
|
>
|
|
|
|
|
{{mHP}}
|
2018-04-14 03:32:45 +00:00
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2018-04-14 04:08:16 +00:00
|
|
|
<section class="row controls" v-if="!gameOn">
|
2018-04-14 03:32:45 +00:00
|
|
|
<div class="small-12 columns">
|
2018-04-14 04:08:16 +00:00
|
|
|
<button id="start-game" @click="start">START NEW GAME</button>
|
2018-04-14 03:32:45 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
2018-04-14 04:08:16 +00:00
|
|
|
<section class="row controls" v-else>
|
2018-04-14 03:32:45 +00:00
|
|
|
<div class="small-12 columns">
|
2018-04-14 04:08:16 +00:00
|
|
|
<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>
|
2018-04-14 03:32:45 +00:00
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
<section class="row log">
|
|
|
|
|
<div class="small-12 columns">
|
|
|
|
|
<ul>
|
2018-04-14 04:57:31 +00:00
|
|
|
<li v-for="log in logs"
|
|
|
|
|
:class="[{'player-turn': log.isPlayer, 'monster-turn': !log.isPlayer}]"
|
|
|
|
|
>
|
|
|
|
|
{{log.text}}
|
2018-04-14 04:55:51 +00:00
|
|
|
</li>
|
2018-04-14 03:32:45 +00:00
|
|
|
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
2018-04-14 04:08:16 +00:00
|
|
|
<script src="app.js" charset="utf-8"></script>
|
|
|
|
|
|
2018-04-14 03:32:45 +00:00
|
|
|
</body>
|
2018-04-14 04:08:16 +00:00
|
|
|
</html>
|
