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 @@
+
+
+
+
+
+
+ {{ 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
+ };
+ }
}