From 8c672a568ad096f28d4c3a2ba95b01ecc30cc3ce Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Thu, 26 Dec 2024 23:51:23 +0100
Subject: [PATCH] draw bar healt after attack
---
04 - monster slayer game/prj-monster-01-starting-setup/index.html | 12 +++++++++---
04 - monster slayer game/prj-monster-01-starting-setup/app.js | 9 ++++++++-
2 files changed, 17 insertions(+), 4 deletions(-)
diff --git a/04 - monster slayer game/prj-monster-01-starting-setup/app.js b/04 - monster slayer game/prj-monster-01-starting-setup/app.js
index a617f63..75dc449 100644
--- a/04 - monster slayer game/prj-monster-01-starting-setup/app.js
+++ b/04 - monster slayer game/prj-monster-01-starting-setup/app.js
@@ -10,7 +10,14 @@
monsterHealth: 100,
};
},
- computed: {},
+ computed: {
+ monsterBarStyle(){
+ return {width: this.monsterHealth + '%'}
+ },
+ playerBarStyle(){
+ return {width: this.playerHealth + '%'}
+ },
+ },
watch: {},
methods: {
attackMonster() {
diff --git a/04 - monster slayer game/prj-monster-01-starting-setup/index.html b/04 - monster slayer game/prj-monster-01-starting-setup/index.html
index 9b5ca01..5532162 100644
--- a/04 - monster slayer game/prj-monster-01-starting-setup/index.html
+++ b/04 - monster slayer game/prj-monster-01-starting-setup/index.html
@@ -20,17 +20,23 @@
<section id="monster" class="container">
<h2>Monster Health</h2>
<div class="healthbar">
- <div class="healthbar__value"></div>
+ <div
+ class="healthbar__value"
+ :style="monsterBarStyle"
+ ></div>
</div>
</section>
<section id="player" class="container">
<h2>Your Health</h2>
<div class="healthbar">
- <div class="healthbar__value"></div>
+ <div
+ class="healthbar__value"
+ :style="playerBarStyle"
+ ></div>
</div>
</section>
<section id="controls">
- <button>ATTACK</button>
+ <button @click="attackMonster">ATTACK</button>
<button>SPECIAL ATTACK</button>
<button>HEAL</button>
<button>SURRENDER</button>
--
Gitblit v1.8.0