<!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="{width: playerHealth + '%'}">
						{{ playerHealth }} HP
					</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="{width: enemyHealth + '%'}">
						{{ enemyHealth }} HP
					</div>
				</div>
			</div>
		</section>
		<section class="row controls" v-if="!gameIsRunning">
			<div class="small-12 columns">
				<button id="start-game" @click="startGame">START NEW GAME</button>
			</div>
		</section>
		<section class="row controls" v-else>
			<div class="small-12 columns">
				<button id="attack" @click="attack">ATTACK</button>
				<button id="special-attack" @click="specAttack">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" v-if="turns.length">
			<div class="small-12 columns">
				<ul>
					<li v-for="turn in turns" :class="{'player-turn': turn.isPlayer, 'monster-turn': !turn.isPlayer}">
						{{ turn.text }}
					</li>
				</ul>
			</div>
		</section>
	</div>
	<script src="../vue.js"></script>
	<script src="./app.js"></script>
</body>

</html>
{'avg_line_length': 30.275862068965516, 'max_line_length': 135, 'alphanum_fraction': 0.6133257403189066, 'licenses': ['MIT'], 'repository_name': 'Puritanic/Vue-II', 'path': 'Vue-game/index.html', 'size': 1756, 'lang': 'HTML'}