Add ineligible role display to auction overlay

slmnio · Jul 9, 2023 · 1f8ddb4 · 1f8ddb4
1 parent c5ec423
commit 1f8ddb4
Showing 1 changed file with 48 additions and 1 deletion.
diff --git a/website/src/components/broadcast/auction/AuctionOverlay.vue b/website/src/components/broadcast/auction/AuctionOverlay.vue
@@ -32,7 +32,11 @@
                         <div class="player-info" v-if="player">
                             <div class="player-name">{{ player.name }}</div>
                             <div class="player-extras">
-                                <div class="player-role" v-if="player.role" v-html="getRoleSVG(player.role)"></div>
+                                <div class="player-role" v-if="player.role && !player.eligible_roles" v-html="getRoleSVG(player.role)"></div>
+                                <div class="player-eligible-roles d-flex">
+                                    <div class="role" v-for="role in playerRoles(player?.eligible_roles)" :class="{'ineligible': !role.eligible, 'eligible': role.eligible, 'primary': role.role === player.role}"
+                                         :key="role?.role" v-html="getRoleSVG(role?.role)"></div>
+                                </div>
                                 <div class="accolades" v-if="accolades.length">
                                     <ContentThing :thing="accolade" type="event" :link-to="accolade.event"
                                                   :theme="accolade.event && accolade.event.theme"
@@ -459,6 +463,20 @@ export default {
                 auctionID: this.eventID,
                 ...data
             });
+        },
+        playerRoles(roles) {
+            const allRoles = ["DPS", "Tank", "Support"];
+            const output = [];
+            if (!roles?.length) return output;
+            roles = roles.map(r => r === "Damage" ? "DPS" : r);
+            allRoles.forEach(role => {
+                if (roles.includes(role)) {
+                    output.push({ role, eligible: true });
+                } else {
+                    output.push({ role, eligible: false });
+                }
+            });
+            return output;
         }
     },
     mounted() {
@@ -861,4 +879,33 @@ export default {
     .player-info-holder {
         padding-top: 48px;
     }
+
+    .role.ineligible {
+        opacity: 0.5;
+        transform: scale(0.6)
+    }
+    .role.eligible:not(.primary) {
+        transform: scale(0.8)
+    }
+    .player-eligible-roles {
+        justify-content: center;
+        margin-bottom: 20px;
+    }
+    .player-eligible-roles .role {
+        width: 4em;
+        position: relative;
+    }
+    .role.ineligible:after {
+        content: "❌";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 2em;
+        opacity: 0.8;
+    }
 </style>