-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
52 lines (49 loc) · 1.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Matador de Monstros</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600&display=swap" rel="stylesheet">
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div class="panel scores">
<div class="score">
<h1>Jogador</h1>
<div class="life-bar">
<div class="life" :class="{danger : playerLife < 20}" :style="{width: playerLife + '%'}"></div>
</div>
<div>{{ playerLife }} %</div>
</div>
<div class="score">
<h1>Monstro</h1>
<div class="life-bar">
<div class="life" :class="{danger : monsterLife < 20}" :style="{width: monsterLife + '%'}"></div>
</div>
<div>{{ monsterLife }} %</div>
</div>
</div>
<div v-if="hasResult" class="panel result">
<div v-if="monsterLife == 0" class="win">Você ganhou! =)</div>
<div v-else class="lose">Você perdeu! =(</div>
</div>
<div class="panel buttons">
<template v-if="running">
<button class="btn attack" @click="attack(false)">Ataque</button>
<button class="btn especial-attack" @click="attack(true)">Ataque especial</button>
<button class="btn heal" @click="healAndHurt">Curar</button>
<button class="btn give-up" @click="running = false">Desistir
</button>
</template>
<button v-else class="btn new-game" @click="startGame">Iniciar jogo</button>
</div>
<div class="panel logs" v-if="logs.length">
<ul>
<li v-for="log in logs" class="log" :class="log.cls"> {{log.text}}</li>
</ul>
</div>
</div>
<script src="app.js"></script>
</body>
</html>