Skip to content

Commit

Permalink
Refactoring HTML, CSS
Browse files Browse the repository at this point in the history
  • Loading branch information
@RaySSharma
RaySSharma committed Mar 11, 2020
1 parent e95a27d commit 72218b3
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 104 deletions.
58 changes: 19 additions & 39 deletions encounter-builder/css/encounter-builder.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,45 @@
width: 100%;
min-height: 200px;
}
#EBOutcome {
display: flex;
height: auto;
width: 100%;
}

#EBContainers .leftContainer {
#EBContainers .group-container {
width: 30%;
}
#EBContainers .leftField {
#EBContainers .group-legend {
width: auto;
margin-left: auto;
margin-right: auto;
}
#EBContainers .center-container {
width: 50%;
}
#EBContainers .group-field {
display: flex;
flex-wrap: wrap;
position: relative;
}
#EBContainers .pc-container {
#EBContainers .actor-container {
opacity: 1;
position: relative;
margin: 0 auto;
}
#EBContainers .pc-portraits {
#EBContainers .actor-portrait {
width: 50px;
height: 50px;
}
#EBContainers .subtract {
#EBContainers .actor-subtract {
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
#EBContainers .pc-container:hover .pc-portraits {
#EBContainers .actor-container:hover .actor-portrait {
opacity: 0.3;
}
#EBContainers .pc-container:hover .subtract {
#EBContainers .actor-container:hover .actor-subtract {
opacity: 0.8;
}

#EBContainers .centerContainer {
width: 50%;
}
#EBContainers .difficulty-rating {
width: 70%;
margin: 0 auto;
Expand All @@ -62,30 +60,12 @@
padding-top: 10%;
}

#EBContainers .rightContainer {
width: 30%;
}
#EBContainers .rightField {
#EBXP {
display: flex;
flex-wrap: wrap;
}
#EBContainers .npc-container {
opacity: 1;
position: relative;
margin: 0 auto;
}
#EBContainers .npc-portraits {
width: 50px;
height: 50px;
}
#EBContainers .npc-container:hover .npc-portraits {
opacity: 0.3;
}
#EBContainers .npc-container:hover .subtract {
opacity: 0.8;
height: auto;
width: 100%;
}

#EBOutcome .scores {
#EBXP .scores {
width: 50%;
margin: 0 auto;
text-align: center;
Expand Down
19 changes: 8 additions & 11 deletions encounter-builder/src/builder-form.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,8 @@ CONFIG.xpThresholds = {
};
CONFIG.encounterMultipliers = [0.5, 1.0, 1.5, 2.0, 2.0, 2.0, 2.0, 2.5, 2.5, 2.5, 2.5, 3.0, 3.0, 3.0, 3.0, 4.0, 5.0];
CONFIG.dailyXPBudget = [300, 600, 1200, 1700, 3500, 4000, 5000, 6000, 7500, 9000, 10500, 11500, 13500, 15000, 18000, 20000, 25000, 27000, 30000, 40000]
CONFIG.icon = "fas fa-minus"

Handlebars.registerHelper("capitalizeAll", function (str) {
return str.toUpperCase();
});
Expand Down Expand Up @@ -144,18 +146,14 @@ class EncounterBuilderApplication extends Application {
perpcxp: this.perPCXP,
totalxp: this.totalXP,
dailyxp: this.dailyXP,
difficulty: this.combatDifficulty
difficulty: this.combatDifficulty,
icon: CONFIG.icon
};
}

activateListeners(html) {
super.activateListeners(html);
html.find('.pc-container').each((i, li) => {
li.setAttribute("draggable", true);
li.addEventListener('dragstart', this._onDragStart, false);
li.addEventListener('click', this._onClickPortrait.bind(this));
});
html.find('.npc-container').each((i, li) => {
html.find('.actor-container').each((i, li) => {
li.setAttribute("draggable", true);
li.addEventListener('dragstart', this._onDragStart, false);
li.addEventListener('click', this._onClickPortrait.bind(this));
Expand Down Expand Up @@ -239,10 +237,9 @@ class EncounterBuilderApplication extends Application {
*/
_onClickPortrait(event) {
event.stopPropagation();
const isPCPortrait = event.srcElement.classList.value === "pc-portraits"
const isNPCPortrait = event.srcElement.classList.value === "npc-portraits"
const isHoverImage = event.srcElement.classList.value === "fas fa-minus"
if ((isPCPortrait) || (isNPCPortrait) || (isHoverImage)) {
const isPortrait = event.srcElement.classList.value === "actor-portrait"
const isHoverImage = event.srcElement.classList.value === CONFIG.icon
if ((isPortrait) || (isHoverImage)) {

let name = event.srcElement.title

Expand Down
105 changes: 51 additions & 54 deletions encounter-builder/templates/builder-app.html
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,58 @@

<form id="EBForm" autocomplete="off" onsubmit="event.preventDefault();" >
<div id="EBContainers">

<fieldset class="leftContainer">
<legend>Players</legend>
<div class="leftField">
{{#each pcs}}
<div class='pc-container'>
<img class="pc-portraits" src="{{this.img}}" title="{{this.name}}" id="{{this.id}}"/>
<div class="subtract">
<i class="fas fa-minus" title="{{this.name}}" id="{{this.id}}"></i>
</div>
<div id="EBContainers">
<fieldset class="group-container">
<legend class='group-legend'>Players</legend>
<div class="group-field">
{{#each pcs}}
<div class='actor-container'>
<img class="actor-portrait" src="{{this.img}}" title="{{this.name}}" id="{{this.id}}"/>
<div class="actor-subtract">
<i class="fas fa-minus" title="{{this.name}}" id="{{this.id}}"></i>
</div>
{{/each}}
</div>
</fieldset>
</div>
{{/each}}
</div>
</fieldset>

<div class="centerContainer">
<div class="difficulty-rating">
<h1>{{capitalizeAll this.difficulty}}</h1>
</div>
<div class="difficulty-threshold">
{{#with pcrating}}
<label>Easy: {{easy}} XP</label>
<label>Medium: {{medium}} XP</label>
<label>Hard: {{hard}} XP</label>
<label>Deadly: {{deadly}} XP</label>
{{/with}}
</div>
<div class="daily-budget">
<label>Daily Budget: {{dailyxp}} XP</label>
</div>
<div class="center-container">
<div class="difficulty-rating">
<h1>{{capitalizeAll this.difficulty}}</h1>
</div>
<div class="difficulty-threshold">
{{#with pcrating}}
<label>Easy: {{easy}} XP</label>
<label>Medium: {{medium}} XP</label>
<label>Hard: {{hard}} XP</label>
<label>Deadly: {{deadly}} XP</label>
{{/with}}
</div>
<div class="daily-budget">
<label>Daily Budget: {{dailyxp}} XP</label>
</div>
</div>

<fieldset class="rightContainer">
<legend>Opponents</legend>
<div class="rightField">
{{#each npcs}}
<div class='npc-container'>
<img class='npc-portraits' src="{{this.img}}" title="{{this.name}}" id="{{this.id}}"/>
<div class="subtract">
<i class="fas fa-minus" title="{{this.name}}" id="{{this.id}}"></i>
</div>
<fieldset class="group-container">
<legend class='group-legend'>Opponents</legend>
<div class="group-field">
{{#each npcs}}
<div class='actor-container'>
<img class='actor-portrait' src="{{this.img}}" title="{{this.name}}" id="{{this.id}}"/>
<div class="actor-subtract">
<i class="{{this.icon}}" title="{{this.name}}" id="{{this.id}}"></i>
</div>
{{/each}}
</div>
</fieldset>

</div>
<div id="EBOutcome">
<div class='scores'>
<h2>
Total XP: {{this.totalxp}}
</h2>
<h3>
XP / player: {{this.perpcxp}}
</h3>
</div>
{{/each}}
</div>
</fieldset>
</div>

<div id="EBXP">
<div class='scores'>
<h2>
Total XP: {{this.totalxp}}
</h2>

<h3>
XP / player: {{this.perpcxp}}
</h3>
</div>
</form>
</div>

0 comments on commit 72218b3

Please sign in to comment.