add a win dialog
This commit is contained in:
parent
12a907e630
commit
0d84a18f2e
|
@ -11,6 +11,7 @@ const app = Vue.createApp({
|
||||||
monsterHealth: 100,
|
monsterHealth: 100,
|
||||||
battleLog: [],
|
battleLog: [],
|
||||||
currentRound: 0,
|
currentRound: 0,
|
||||||
|
winner: null,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -23,6 +24,43 @@ const app = Vue.createApp({
|
||||||
specialAttackAllowed() {
|
specialAttackAllowed() {
|
||||||
return this.currentRound % 3 !== 0;
|
return this.currentRound % 3 !== 0;
|
||||||
},
|
},
|
||||||
|
playerWon() {
|
||||||
|
if (this.winner === "player") {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
monsterWon() {
|
||||||
|
if (this.winner === "monster") {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
draw() {
|
||||||
|
if (this.winner === "draw") {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
playerHealth(value) {
|
||||||
|
if (value <= 0 && this.monsterHealth <= 0) {
|
||||||
|
this.winner = "draw";
|
||||||
|
} else if (value <= 0) {
|
||||||
|
this.winner = "monster";
|
||||||
|
}
|
||||||
|
},
|
||||||
|
monsterHealth(value) {
|
||||||
|
if (value <= 0 && this.playerHealth <= 0) {
|
||||||
|
this.winner = "draw";
|
||||||
|
} else if (value <= 0) {
|
||||||
|
this.winner = "player";
|
||||||
|
}
|
||||||
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
attackMonster() {
|
attackMonster() {
|
||||||
|
|
|
@ -22,6 +22,12 @@
|
||||||
<div class="healthbar__value" :style="monsterBarStyles"></div>
|
<div class="healthbar__value" :style="monsterBarStyles"></div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
||||||
|
</section>
|
||||||
<section id="player" class="container">
|
<section id="player" class="container">
|
||||||
<h2>Your Health</h2>
|
<h2>Your Health</h2>
|
||||||
<div class="healthbar">
|
<div class="healthbar">
|
||||||
|
|
Reference in New Issue