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
import { getDiceRollArray, sumArray, getPercentage } from "./utils";
function Character(data) {
Object.assign(this, {
...data,
currentDiceRole: new Array(data.diceCount).fill(0),
maxHealth: data.health,
rollDice: function() {
this.currentDiceRole = getDiceRollArray(this.diceCount);
return sumArray(this.currentDiceRole);
},
takeDamage: function(damage) {
this.health -= damage;
if(this.health <= 0) {
this.dead = true;
this.health = 0;
}
},
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>`;
},
getDiceElementArray: function() {
return this.currentDiceRole.map((num) =>
`<div class="dice ${num ? "":"no-score"}">${num}</div>`);
},
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;