diff --git a/src/views/Draft.vue b/src/views/Draft.vue index 9f38860..211e49f 100644 --- a/src/views/Draft.vue +++ b/src/views/Draft.vue @@ -4,6 +4,19 @@

Players

+
+
+
+ + +
+
{{ player.name }}
+
+
@@ -42,12 +55,34 @@ header > h2 { font-family: $fantasy; font-weight: 600; - text-align: center; font-size: 2.5vh; padding: 1vh; } } +.playerlist { + .players { + display: flex; + flex-flow: column wrap; + max-height: 100%; + } + .player { + display: flex; + color: $red; + align-items: center; + &.picked, + &.bot { + color: $green; + } + &.me::after { + content: " (me)"; + font-size: 10pt; + margin-left: 5px; + color: $purple; + } + } +} + .pool { display: flex; flex-direction: column; @@ -93,6 +128,13 @@ import { Component, Vue } from "vue-property-decorator"; import { getCards, CardSlot } from "@/mlpccg"; import CardPicker from "@/components/DeckBuilder/CardPicker.vue"; +interface PlayerStatus { + name: string; + isBot: boolean; + isMe: boolean; + picked: boolean; +} + @Component({ components: { CardPicker @@ -128,5 +170,32 @@ export default class DraftView extends Vue { } private cardPicked() {} + + private get playerStatus(): PlayerStatus[] { + return [ + "Player1", + "bot", + "bot", + "Player2", + "bot", + "bot", + "Hamcha", + "bot" + ].map(s => ({ + name: s, + isBot: s == "bot", + isMe: s == "Hamcha", + picked: s == "b" || s == "Player2" + })); + } + + private playerClass(player: PlayerStatus) { + return { + player: true, + me: player.isMe, + bot: player.isBot, + picked: player.picked + }; + } }