Merge pull request #800 from baaron4/skill_decoration_category

Skill decoration category
baaron4 · Aug 16, 2023 · d3acb2f · d3acb2f
2 parents 0d0b622 + 1a62443
commit d3acb2f
Show file tree

Hide file tree

Showing 23 changed files with 177 additions and 91 deletions.
diff --git a/GW2EIBuilders/Resources/JS/CR-JS/animator.js b/GW2EIBuilders/Resources/JS/CR-JS/animator.js
@@ -73,6 +73,7 @@ class Animator {
             displaySelectedMinions: true,
             displayMechanics: true,
             displaySkillMechanics: true,
+            skillMechanicsMask: DefaultSkillDecorations,
             displayTrashMobs: true,
             useActorHitboxWidth: false,
         };     
@@ -238,7 +239,7 @@ class Animator {
                 }
                 if (decoration) {
                     if (actor.owner) {
-                        decoration.usingSkillMode(actor.owner, actor.drawOnSelect);
+                        decoration.usingSkillMode(actor.owner, actor.category);
                         this.skillMechanicActorData.push(decoration);
                     } else {
                         this.mechanicActorData.push(decoration);
@@ -370,6 +371,15 @@ class Animator {
         animateCanvas(noUpdateTime);
     }
 
+    toggleSkillCategoryMask(mask) {
+        if ( (this.displaySettings.skillMechanicsMask & mask) > 0) {           
+            this.displaySettings.skillMechanicsMask &= ~mask;
+        } else {
+            this.displaySettings.skillMechanicsMask |= mask;
+        }
+        animateCanvas(noUpdateTime);
+    }
+
     toggleConeDisplay() {
         this.coneControl.enabled = !this.coneControl.enabled;
         animateCanvas(noUpdateTime);
@@ -704,8 +714,10 @@ class Animator {
             this.selectedActor.draw();     
             this._drawActorOrientation(this.reactiveDataStatus.selectedActorID);
         }
-        for (let i = 0; i < this.overheadActorData.length; i++) {
-            this.overheadActorData[i].draw();
+        if (this.displaySettings.displayMechanics) {
+            for (let i = 0; i < this.overheadActorData.length; i++) {
+                this.overheadActorData[i].draw();
+            }
         }
     }
 

diff --git a/GW2EIBuilders/Resources/JS/CR-JS/decorations.js b/GW2EIBuilders/Resources/JS/CR-JS/decorations.js
@@ -12,12 +12,12 @@ class MechanicDrawable {
         this.master = null;
         this.ownerID = null;
         this.owner = null;
-        this.drawOnSelect = false;
+        this.category = 0;
     }
 
-    usingSkillMode(ownerID, drawOnSelect) {
+    usingSkillMode(ownerID, category) {
         this.ownerID = ownerID;
-        this.drawOnSelect = drawOnSelect;
+        this.category = category;
         return this;
     }
 
@@ -99,9 +99,15 @@ class MechanicDrawable {
             if (!this.owner) {
                 return false;
             }
-            if (this.drawOnSelect && !this.owner.isSelected()) {
-                return false;
+            let renderMask = animator.displaySettings.skillMechanicsMask;
+            let drawOnSelect = (renderMask & SkillDecorationCategory["Show On Select"]) > 0;
+            renderMask &= ~SkillDecorationCategory["Show On Select"];
+            if ((this.category & renderMask) > 0) {
+                return true;
+            } else if (drawOnSelect && this.owner.isSelected()) {
+                return true;
             }
+            return false;
         }
         return true;
     }

diff --git a/GW2EIBuilders/Resources/JS/global.js b/GW2EIBuilders/Resources/JS/global.js
@@ -177,6 +177,22 @@ const specToBase = {
     Catalyst: "Elementalist"
 };
 
+const SkillDecorationCategory = {
+    "Show On Select" : 1 << 0,
+    "Important Buffs": 1 << 1,
+    "Projectile Management": 1 << 2,
+    "Heal": 1 << 3,
+    "Cleanse": 1 << 4,
+    "Strip": 1 << 5,
+    "Portal": 1 << 6,
+};
+
+let AllSkillDecorations = 0;
+for (let key in SkillDecorationCategory) {
+    AllSkillDecorations |= SkillDecorationCategory[key];
+}
+let DefaultSkillDecorations = AllSkillDecorations;
+
 const RotationStatus = {
     UNKNOWN: 0,
     REDUCED: 1,

diff --git a/GW2EIBuilders/Resources/combatReplayTemplates/tmplCombatReplayExtraDecorations.html b/GW2EIBuilders/Resources/combatReplayTemplates/tmplCombatReplayExtraDecorations.html
@@ -1,42 +1,59 @@
 <template>
-    <div class="d-flex flex-column justify-content-center align-items-center">     
-        <div class="d-flex flex-row justify-content-center">
+    <div class="d-flex flex-column justify-content-center align-items-center" style="max-width: 500px;">           
+        <h4>General Settings</h4>
+        <div class="d-flex flex-row justify-content-center flex-wrap">
             <div class="form-check mb-2 mr-2">
-                <input type="checkbox" class="form-check-input" id="subgroupCheck" checked v-on:change="getAnimator().toggleHighlightSelectedGroup()">
+                <input type="checkbox" class="form-check-input" id="subgroupCheck" 
+                    :checked="getAnimator().displaySettings.highlightSelectedGroup" v-on:change="getAnimator().toggleHighlightSelectedGroup()">
                 <label class="form-check-label" for="subgroupCheck">Highlight Selected Group</label>
             </div>
-            <div class="form-check mb-2 mr-2">
-                <input type="checkbox" class="form-check-input" id="trashCheck" checked v-on:change="getAnimator().toggleTrashMobs()">
+            <div v-if="showSecondaryNPCs" class="form-check mb-2 mr-2">
+                <input type="checkbox" class="form-check-input" id="trashCheck" 
+                    :checked="getAnimator().displaySettings.displayTrashMobs" v-on:change="getAnimator().toggleTrashMobs()">
                 <label class="form-check-label" for="trashCheck">Secondary NPCs</label>
             </div> 
-            <div class="form-check mb-2 mr-2">
-                <input type="checkbox" class="form-check-input" id="mechanicsCheck" checked v-on:change="getAnimator().toggleMechanics()">
+            <div v-if="showMechanics" class="form-check mb-2 mr-2">
+                <input type="checkbox" class="form-check-input" id="mechanicsCheck" 
+                    :checked="getAnimator().displaySettings.displayMechanics" v-on:change="getAnimator().toggleMechanics()">
                 <label class="form-check-label" for="mechanicsCheck">Mechanics</label>
             </div>
-            <div class="form-check mb-2">
-                <input type="checkbox" class="form-check-input" id="skillsCheck" checked v-on:change="getAnimator().toggleSkills()">
+            <div v-if="showSkills" class="form-check mb-2">
+                <input type="checkbox" class="form-check-input" id="skillsCheck" 
+                    :checked="getAnimator().displaySettings.displaySkillMechanics" v-on:change="getAnimator().toggleSkills()">
                 <label class="form-check-label" for="skillsCheck">Skills</label>
             </div>
-        </div>
-        <div class="d-flex flex-row justify-content-center">
             <div class="form-check mb-2 mr-3">
-                <input type="checkbox" class="form-check-input" id="actorHitboxCheck" v-on:change="getAnimator().toggleUseActorHitboxWidth()">
+                <input type="checkbox" class="form-check-input" id="actorHitboxCheck" 
+                    :checked="getAnimator().displaySettings.useActorHitboxWidth" v-on:change="getAnimator().toggleUseActorHitboxWidth()">
                 <label class="form-check-label" for="actorHitboxCheck">Use Hitbox Size</label>
             </div> 
             <div class="form-check mb-2 mr-3">
-                <input type="checkbox" class="form-check-input" id="allMinionsCheck" v-on:change="getAnimator().toggleDisplayAllMinions()">
+                <input type="checkbox" class="form-check-input" id="allMinionsCheck" 
+                    :checked="getAnimator().displaySettings.displayAllMinions" v-on:change="getAnimator().toggleDisplayAllMinions()">
                 <label class="form-check-label" for="allMinionsCheck">All Minions</label>
             </div>     
             <div class="form-check mb-2 mr-3">
-                <input type="checkbox" class="form-check-input" id="selectedMinionsCheck" checked v-on:change="getAnimator().toggleDisplaySelectedMinions()">
+                <input type="checkbox" class="form-check-input" id="selectedMinionsCheck" 
+                    :checked="getAnimator().displaySettings.displaySelectedMinions" v-on:change="getAnimator().toggleDisplaySelectedMinions()">
                 <label class="form-check-label" for="selectedMinionsCheck">Selected's Minions</label>
             </div>
         </div>
+        <div v-if="showSkills" class="d-flex flex-column justify-content-center align-items-center" style="max-width: 500px;">
+            <h4>Global Skill Settings</h4>
+            <div class="d-flex flex-row justify-content-center flex-wrap">
+                <div class="form-check mb-2 mr-3" v-for="skillCategory in skillCategories">
+                    <input type="checkbox" class="form-check-input" :id="skillCategory.key" 
+                        :checked="(getAnimator().displaySettings.skillMechanicsMask & skillCategory.mask) > 0" v-on:change="getAnimator().toggleSkillCategoryMask(skillCategory.mask)">
+                    <label class="form-check-label" :for="skillCategory.key">{{skillCategory.key}}</label>
+                </div>
+            </div>
+        </div>
         <div class="d-flex flex-row justify-content-center">
             <div class="mr-3">
-                <h3>Range Selectors</h3>
+                <h4>Range Selectors</h4>
                 <div class="form-check mt-1 mb-2">
-                    <input type="checkbox" class="form-check-input" id="circle1Check" v-on:change="getAnimator().toggleRange(0)">
+                    <input type="checkbox" class="form-check-input" id="circle1Check" 
+                        :checked=" getAnimator().rangeControl[0].enabled" v-on:change="getAnimator().toggleRange(0)">
                     <label class="form-check-label" for="circle1Check">Circle 1</label>
                 </div>
                 <div class="d-flex flex-row justify-content-between align-items-center">
@@ -45,7 +62,8 @@ <h3>Range Selectors</h3>
                                                         :placeholderValue="getAnimator().rangeControl[0].radius"></custom-numberform-component>
                 </div>
                 <div class="form-check mt-1 mb-2">
-                    <input type="checkbox" class="form-check-input" id="circle2Check" v-on:change="getAnimator().toggleRange(1)">
+                    <input type="checkbox" class="form-check-input" id="circle2Check" 
+                        :checked=" getAnimator().rangeControl[1].enabled" v-on:change="getAnimator().toggleRange(1)">
                     <label class="form-check-label" for="circle2Check">Circle 2</label>
                 </div>
                 <div class="d-flex flex-row justify-content-between align-items-center">
@@ -54,7 +72,8 @@ <h3>Range Selectors</h3>
                                                         :placeholderValue="getAnimator().rangeControl[1].radius"></custom-numberform-component>
                 </div>
                 <div class="form-check mt-1 mb-2">
-                    <input type="checkbox" class="form-check-input" id="circle3Check" v-on:change="getAnimator().toggleRange(2)">
+                    <input type="checkbox" class="form-check-input" id="circle3Check" 
+                        :checked=" getAnimator().rangeControl[2].enabled" v-on:change="getAnimator().toggleRange(2)">
                     <label class="form-check-label" for="circle3Check">Circle 3</label>
                 </div>
                 <div class="d-flex flex-row justify-content-between align-items-center">
@@ -64,9 +83,10 @@ <h3>Range Selectors</h3>
                 </div>
             </div>
             <div class="ml-3">
-                <h3 data-original-title="Has an effect only when facing arrow are present">Cone Indicator</h3>
+                <h4 data-original-title="Has an effect only when facing arrow are present">Cone Indicator</h4>
                 <div class="form-check mt-1 mb-2">
-                    <input type="checkbox" class="form-check-input" id="coneCheck" v-on:change="getAnimator().toggleConeDisplay()">
+                    <input type="checkbox" class="form-check-input" id="coneCheck" 
+                        :checked=" getAnimator().coneControl.enabled" v-on:change="getAnimator().toggleConeDisplay()">
                     <label class="form-check-label" for="coneCheck">Display Cone</label>
                 </div>
                 <div class="d-flex flex-row justify-content-between align-items-center mb-1">
@@ -89,11 +109,27 @@ <h3 data-original-title="Has an effect only when facing arrow are present">Cone
     Vue.component("combat-replay-extra-decorations-component", {
         props: ["light"],
         template: `${template}`,
+        data: function() {
+            return {
+                showSkills: animator.skillMechanicActorData.length > 0,
+                showMechanics: animator.overheadActorData.length + animator.mechanicActorData.length > 0,
+                showSecondaryNPCs: animator.trashMobData.size > 0,
+            };
+        },
         methods: {
             getAnimator: function () {
                 return animator;
             }
         },
+        computed: {
+            skillCategories: function() {
+                var res = [];
+                for (var key in SkillDecorationCategory) {
+                    res.push({key: key, mask: SkillDecorationCategory[key]});
+                }
+                return res;
+            }
+        },
         mounted() {
             $('#circle1Text').on("input ", function () {
                 animator.setRangeRadius(0, $(this).val());

diff --git a/GW2EIBuilders/Resources/combatReplayTemplates/tmplCombatReplayPlayerSelect.html b/GW2EIBuilders/Resources/combatReplayTemplates/tmplCombatReplayPlayerSelect.html
@@ -2,7 +2,7 @@
     <div class="d-flex flex-row flex-wrap justify-content-center align-items-start mb-2">
         <div class="d-flex flex-column scrollable-y" style="max-height: 250px;">
             <div v-for="group in groups" class="d-flex flex-row align-items-center ml-2 mt-1" style="width:450px;">
-                <h5 v-show="!singleGroup" class="mt-2" style="min-width:80px;max-width:80px; text-align: center;">Group {{group.id}}</h5>
+                <h5 v-if="!singleGroup" class="mt-2" style="min-width:80px;max-width:80px; text-align: center;">Group {{group.id}}</h5>
                 <div class="d-flex flex-row flex-wrap align-items-center ml-1" style="max-width:370px;">
                     <span v-for="player in group.players"
                            @click="selectActor(player.uniqueID);"

diff --git a/GW2EIBuilders/Resources/combatReplayTemplates/tmplCombatReplayPlayersStats.html b/GW2EIBuilders/Resources/combatReplayTemplates/tmplCombatReplayPlayersStats.html
@@ -18,7 +18,7 @@
         </ul>
         <div class="d-flex flex-column combat-actor-status-container scrollable-y" style="transform: translate(-42px,0);">
             <div v-for="(group,id) in groups" v-if="group" class="d-flex flex-row align-items-center ml-2 mt-1">
-                <h5 v-show="!singleGroup" style="width:70px" class="text-center mt-2">Group {{id}}</h5>
+                <h5 v-if="!singleGroup" style="width:70px" class="text-center mt-2">Group {{id}}</h5>
                 <div class="d-flex flex-row flex-wrap align-items-center ml-1 mr-1" style="width:280px;border: 2px solid #888;">
                     <div v-for="player in group" class="player-data ml-1" :class="{active: selectedplayerid === player.uniqueID}">
                         <combat-replay-player-stats-component :time="time" :buffs="buffs" :rotation="rotation" :playerindex="player.id" :buffstoshow="buffsToShow"></combat-replay-player-stats-component>

diff --git a/GW2EIBuilders/Resources/htmlTemplates/tmplDamageTable.html b/GW2EIBuilders/Resources/htmlTemplates/tmplDamageTable.html
@@ -7,19 +7,19 @@
                     <th class="prof-cell" :class="getHeaderClass('Prof')" @click="sortBy('Prof')"></th>
                     <th class="text-left" :class="getHeaderClass('Name')" @click="sortBy('Name')">Name</th>
                     <th :class="getHeaderClass('Account')" @click="sortBy('Account')">Account</th>
-                    <th v-show="!targetless" :class="getHeaderClass('Data', 0)" @click="sortBy('Data', 0)" data-original-title="Power + Condition" class="damage-cell">
+                    <th v-if="!targetless" :class="getHeaderClass('Data', 0)" @click="sortBy('Data', 0)" data-original-title="Power + Condition" class="damage-cell">
                         Target <img src="https://wiki.guildwars2.com/images/thumb/6/6a/Damage.png/30px-Damage.png" alt="All"
                             class="icon">
                     </th>
-                    <th v-show="!targetless" :class="getHeaderClass('Data', 1)" @click="sortBy('Data', 1)" data-original-title="Power" class="damage-cell">
+                    <th v-if="!targetless" :class="getHeaderClass('Data', 1)" @click="sortBy('Data', 1)" data-original-title="Power" class="damage-cell">
                         Target <img src="https://wiki.guildwars2.com/images/2/23/Power.png" alt="Power"
                              class="icon">
                     </th>
-                    <th v-show="!targetless" :class="getHeaderClass('Data', 2)" @click="sortBy('Data', 2)" data-original-title="Condition" class="damage-cell">
+                    <th v-if="!targetless" :class="getHeaderClass('Data', 2)" @click="sortBy('Data', 2)" data-original-title="Condition" class="damage-cell">
                         Target <img src="https://wiki.guildwars2.com/images/5/54/Condition_Damage.png" alt="Condition"
                         class="icon">
                     </th>
-                    <th v-show="!targetless" :class="getHeaderClass('Data', 3)" @click="sortBy('Data', 3)" v-if="hasBreakbarDamage" data-original-title="Breakbar" class="damage-cell">
+                    <th :class="getHeaderClass('Data', 3)" @click="sortBy('Data', 3)" v-if="!targetless && hasBreakbarDamage" data-original-title="Breakbar" class="damage-cell">
                         Target <img src="https://wiki.guildwars2.com/images/a/ae/Unshakable.png" alt="Breakbar"
                         class="icon">
                     </th>
@@ -50,16 +50,16 @@
                     </td>
                     <td :class="getBodyClass('Name')" class="text-left">{{row.player.name}}</td>
                     <td :class="getBodyClass('Account')">{{row.player.acc}}</td>
-                    <td v-show="!targetless" :class="getBodyClass('Data', 0)"
+                    <td v-if="!targetless" :class="getBodyClass('Data', 0)"
                         :data-original-title="getPlayerTooltip(0, row, tableData.sums)">
                         {{getPlayerCell(0, row)}}</td>
-                    <td v-show="!targetless" :class="getBodyClass('Data', 1)"
+                    <td v-if="!targetless" :class="getBodyClass('Data', 1)"
                         :data-original-title="getPlayerTooltip(1, row, tableData.sums)">
                         {{getPlayerCell(1, row)}}</td>
-                    <td v-show="!targetless" :class="getBodyClass('Data', 2)"
+                    <td v-if="!targetless" :class="getBodyClass('Data', 2)"
                         :data-original-title="getPlayerTooltip(2, row, tableData.sums)">
                         {{getPlayerCell(2, row)}}</td>
-                    <td v-show="!targetless" v-if="hasBreakbarDamage" :class="getBodyClass('Data', 3)"
+                    <td v-if="!targetless && hasBreakbarDamage" :class="getBodyClass('Data', 3)"
                         :data-original-title="computeTotalContribution(3, row.dps,tableData.sums)+ '<br>'+ computeGroupContribution(row.player.group, 3, row.dps,tableData.sums)">
                         {{round1(row.dps[3])}}
                     </td>
@@ -85,13 +85,13 @@
                     <td></td>
                     <td class="text-left">{{sum.name}}</td>
                     <td></td>
-                    <td v-show="!targetless" :data-original-title="getSumTooltip(0, sum)">
+                    <td v-if="!targetless" :data-original-title="getSumTooltip(0, sum)">
                         {{getSumCell(0, sum)}}</td>
-                    <td v-show="!targetless" :data-original-title="getSumTooltip(1, sum)">
+                    <td v-if="!targetless" :data-original-title="getSumTooltip(1, sum)">
                         {{getSumCell(1, sum)}}</td>
-                    <td v-show="!targetless" :data-original-title="getSumTooltip(2, sum)">
+                    <td v-if="!targetless" :data-original-title="getSumTooltip(2, sum)">
                         {{getSumCell(2, sum)}}</td>
-                    <td v-show="!targetless" v-if="hasBreakbarDamage">
+                    <td v-if="!targetless && hasBreakbarDamage">
                         {{round1(sum.dps[3])}}
                     </td>
                     <td :data-original-title="getSumTooltip(4, sum)">