Explorer
project
Character.js
data.js
index.css
index.html
index.js
utils.js
Dependencies
Bootcamp
Study group
Collaborate with peers in your dedicated #study-group channel.
Code reviews
Submit projects for review using the /review
command in your #code-reviews channel
// 1. Make the current dice roll be all zeros when we first load each character.
// 2. Add a ternary to the dice element so it has a class of no-score when the score is zero.
import { getDiceRollArray, sumArray, getPercentage } from "./utils";
function Character(data) {
Object.assign(this, data);
this.currentDiceRole = [];
this.maxHealth = data.health;
this.rollDice = function() {
this.currentDiceRole = getDiceRollArray(this.diceCount);
return sumArray(this.currentDiceRole);
};
this.takeDamage = function(damage) {
this.health -= damage;
if(this.health <= 0) {
this.dead = true;
this.health = 0;
}
};
this.getHealthBarElement = function() {
const percent = getPercentage(this.health, this.maxHealth);
return `<div class="health-bar-outer">
<div
class="health-bar-inner ${percent < 26 ? "danger" : ""}"
style="width:${percent}%;">
</div>
</div>`;
};
this.getDiceElementArray = function() {
return this.currentDiceRole.map((num) => `<div class="dice">${num}</div>`);
};
this.getTemplate = function() {
const { name, emoji, health } = this;
const diceElementArray = this.getDiceElementArray();
const healthBarArray = this.getHealthBarElement();
return `<div class="character">
<div class="name">${name}</div>
<div class="emoji">️${emoji}</div>
<div class="health">health: <b>${health}</b></div>
${healthBarArray}
<div class="dice-container">
${diceElementArray.join("")}
</div>
</div>`;
}
};
export default Character;