Update draft for dummy players

slmnio · Apr 8, 2022 · 8606f89 · 8606f89
1 parent c65fe02
commit 8606f89
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 8 deletions.
diff --git a/website/src/components/broadcast/DraftPlayer.vue b/website/src/components/broadcast/DraftPlayer.vue
@@ -1,8 +1,11 @@
 <template>
-    <div class="draft-player" :style="background">
+    <div class="draft-player" v-if="player && !player.dummy" :style="background">
         <div class="player-name">{{ player.name }}</div>
         <div class="player-role flex-center" v-if="showIcon" v-html="getSVG(player.role)"></div>
     </div>
+    <div class="draft-player dummy" v-else :style="background">
+        <div class="player-name">dummy</div>
+    </div>
 </template>
 
 <script>
@@ -45,6 +48,12 @@ export default {
         height: var(--size);
         width: var(--size);
     }
+    .draft-player.dummy {
+        opacity: 0.6;
+    }
+    .draft-player.dummy .player-name {
+        opacity: 0;
+    }
 </style>
 
 <style>

diff --git a/website/src/components/broadcast/roots/DraftOverlay.vue b/website/src/components/broadcast/roots/DraftOverlay.vue
@@ -22,7 +22,7 @@
                             </div>
                         </div>
                         <transition-group name="player" class="team-players">
-                            <DraftPlayer class="drafted-player" v-for="player in team.players" v-bind:key="player.id"
+                            <DraftPlayer class="drafted-player" v-for="player in insertDummies(team.players)" v-bind:key="player.id"
                                          :player="player" :theme="event.theme" :show-icon="icons" />
                         </transition-group>
                     </div>
@@ -44,11 +44,34 @@ import ThemeLogo from "@/components/website/ThemeLogo";
 export default {
     name: "DraftOverlay",
     components: { ThemeLogo, DraftTeam, DraftPlayer },
-    props: ["broadcast", "bracketKey", "columns", "icons", "showStaff", "teamRows"],
+    props: ["broadcast", "bracketKey", "columns", "icons", "showStaff", "teamRows", "eachTeam"],
     data: () => ({
         dummy: false
     }),
     methods: {
+        insertDummies(players) {
+            if (!this.eachTeam) return players;
+            const dummyRecord = { dummy: true };
+            const dummiedPlayers = [];
+
+            const nonSortedPlayers = players.filter(p => !p.draft_position);
+            const sortedPlayers = players.filter(p => p.draft_position);
+            for (let i = 1; i <= this.eachTeam; i++) {
+                const playerAtIndex = sortedPlayers.find(p => p.draft_position === i);
+                if (playerAtIndex) {
+                    dummiedPlayers.push({ ...playerAtIndex, forceIndex: true });
+                } else {
+                    if (nonSortedPlayers.length) {
+                        dummiedPlayers.push(nonSortedPlayers.shift());
+                    } else {
+                        dummiedPlayers.push({ ...dummyRecord, id: `dummy-${i}`, name: i });
+                    }
+                }
+            }
+            nonSortedPlayers.forEach(p => dummiedPlayers.push(p));
+            // return this.team.players;
+            return dummiedPlayers;
+        },
         logoBackground1,
         getTeamStaff(team) {
             const staff = [];
@@ -296,6 +319,7 @@ export default {
         flex-wrap: wrap;
         border-bottom-width: 4px;
         border-bottom-style: solid;
+        align-content: center;
     }
 
     .team-staff {
@@ -304,7 +328,7 @@ export default {
         line-height: 1;
     }
     .drafted-player {
-        margin: 4px 0;
+        margin-bottom: 4px;
         font-size: 24px;
         padding: 6px 8px;
         width: 100%;
@@ -325,7 +349,7 @@ export default {
 
     .draftable-enter {
         max-height: 0;
-        padding: 0 8px;
+        padding: 0 8px !important;
         opacity: 0;
     }
 
@@ -342,11 +366,14 @@ export default {
 
     .player-enter-active, .player-leave-active, .player-move {
         transition: all .5s ease;
+        /*transition: none !important;*/
     }
     .player-enter, .player-leave-to {
         max-height: 0;
-        padding: 0 8px;
+        padding: 0 8px !important;
         opacity: 0;
+        border-bottom-width: 0 !important;
+        margin-bottom: 0 !important;
     }
 
     .draft-team-top.team-bottom-border {

diff --git a/website/src/router/broadcast.js b/website/src/router/broadcast.js
@@ -97,10 +97,11 @@ export default [
         path: "draft",
         component: DraftOverlay,
         props: route => ({
-            columns: route.query.columns || 1,
+            columns: route.query.columns || route.query.cols || 1,
             icons: route.query.icons !== "false",
             showStaff: route.query.staff !== "false",
-            teamRows: route.query.rows || route.query.teamRows || 1
+            teamRows: route.query.rows || route.query.teamRows || 1,
+            eachTeam: route.query.eachTeam || route.query.players
         })
     },
     { path: "casters", redirect: "desk" },