244 lines
5.0 KiB
Vue
244 lines
5.0 KiB
Vue
<template>
|
|
<section class="draftview">
|
|
<section class="playerlist">
|
|
<header>
|
|
<h2>Players</h2>
|
|
</header>
|
|
<section class="players">
|
|
<article
|
|
v-for="(player, i) in playerStatus"
|
|
:key="player.name + i"
|
|
:class="playerClass(player)"
|
|
>
|
|
<div class="icon">
|
|
<b-icon v-if="player.isBot" icon="robot" size="is-small" />
|
|
<b-icon v-else icon="account-box" size="is-small" />
|
|
</div>
|
|
<div class="name">{{ player.name }}</div>
|
|
</article>
|
|
</section>
|
|
</section>
|
|
<section class="pool">
|
|
<header>
|
|
<h2>
|
|
Available picks (Pack
|
|
<span class="pack-number">{{ packNumber }}</span> of
|
|
<span class="pack-count">{{ packCount }}</span
|
|
>)
|
|
</h2>
|
|
</header>
|
|
<CardPicker
|
|
@picked="cardPicked"
|
|
:columns="columns"
|
|
:rows="rows"
|
|
:cards="currentPicks"
|
|
class="picker"
|
|
/>
|
|
</section>
|
|
<section class="cardlist">
|
|
<header>
|
|
<h2>Cards</h2>
|
|
</header>
|
|
<DeckList :cards="pickedCards" />
|
|
</section>
|
|
</section>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "@/assets/scss/_variables.scss";
|
|
|
|
$player-not-picked: $red;
|
|
$player-picked: $green;
|
|
$player-me: $purple;
|
|
$border-opacity: 0.6;
|
|
|
|
.draftview {
|
|
background: url("../assets/images/backgrounds/draftbg.webp") center;
|
|
display: grid;
|
|
height: 100vh;
|
|
gap: 10px;
|
|
grid-template-columns: minmax(200px, 1fr) 3fr minmax(250px, 1fr);
|
|
& > section {
|
|
padding: 10px 20px;
|
|
grid-row: 1;
|
|
}
|
|
|
|
header > h2 {
|
|
font-family: $fantasy;
|
|
font-weight: 600;
|
|
font-size: 2.5vh;
|
|
padding: 1vh;
|
|
}
|
|
}
|
|
|
|
.playerlist {
|
|
.players {
|
|
display: flex;
|
|
flex-flow: column wrap;
|
|
max-height: 100%;
|
|
}
|
|
.player {
|
|
border-radius: 3px;
|
|
margin: 2px;
|
|
padding: 2px;
|
|
border: 2px solid rgba($player-not-picked, $border-opacity);
|
|
display: flex;
|
|
color: $red;
|
|
align-items: center;
|
|
user-select: all;
|
|
&.picked,
|
|
&.bot {
|
|
color: $player-picked;
|
|
border-color: rgba($player-picked, $border-opacity);
|
|
}
|
|
&.me {
|
|
border-color: rgba($player-me, $border-opacity);
|
|
}
|
|
&.me::after {
|
|
content: " (me)";
|
|
font-size: 10pt;
|
|
margin-left: 5px;
|
|
color: $player-me;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pool {
|
|
display: flex;
|
|
flex-direction: column;
|
|
.picker {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
.pack-number {
|
|
color: $primary;
|
|
}
|
|
|
|
@media (max-width: 800px) {
|
|
.draftview {
|
|
grid-template-columns: 2fr 250px;
|
|
.playerlist {
|
|
grid-row: 1/2;
|
|
grid-column: 2;
|
|
}
|
|
.cardlist {
|
|
grid-row: 2/3;
|
|
grid-column: 2;
|
|
}
|
|
.pool {
|
|
grid-column: 1;
|
|
grid-row: 1/3;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 600px) {
|
|
.draftview {
|
|
grid-template-columns: auto;
|
|
grid-template-rows: 100px 3fr 1fr;
|
|
.playerlist,
|
|
.cardlist,
|
|
.pool {
|
|
grid-row: auto;
|
|
grid-column: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue } from "vue-property-decorator";
|
|
import { getCards, CardSlot, cardLimit, Card } from "@/mlpccg";
|
|
import CardPicker from "@/components/DeckBuilder/CardPicker.vue";
|
|
import DeckList from "@/components/DeckBuilder/DeckList.vue";
|
|
import { PlayerStatus } from "@/store/draft/types";
|
|
|
|
@Component({
|
|
components: {
|
|
CardPicker,
|
|
DeckList
|
|
}
|
|
})
|
|
export default class DraftView extends Vue {
|
|
// Card picker size
|
|
private rows!: number;
|
|
private columns!: number;
|
|
|
|
// Draft data
|
|
private packNumber!: number;
|
|
private packCount!: number;
|
|
private currentPicks!: CardSlot[];
|
|
private pickedCards!: CardSlot[];
|
|
|
|
private data() {
|
|
return {
|
|
packNumber: 1,
|
|
packCount: 4,
|
|
rows: 3,
|
|
columns: 4,
|
|
currentPicks: [],
|
|
pickedCards: []
|
|
};
|
|
}
|
|
|
|
private mounted() {
|
|
this.fillcards();
|
|
}
|
|
|
|
private async fillcards() {
|
|
const cards = await getCards({ Sets: ["FF"] });
|
|
this.currentPicks = cards.slice(0, 12).map(c => ({
|
|
data: c,
|
|
howmany: 1,
|
|
limit: 0
|
|
}));
|
|
}
|
|
|
|
private cardPicked(card: Card) {
|
|
// Check if card is already in
|
|
const idx = this.pickedCards.findIndex(c => c.data.ID == card.ID);
|
|
if (idx >= 0) {
|
|
const deckitem = this.pickedCards[idx];
|
|
deckitem.howmany += 1;
|
|
Vue.set(this.pickedCards, idx, deckitem);
|
|
} else {
|
|
this.pickedCards.push({
|
|
data: card,
|
|
limit: cardLimit(card.Type),
|
|
howmany: 1
|
|
});
|
|
}
|
|
const origIdx = this.currentPicks.findIndex(c => c.data.ID == card.ID);
|
|
this.currentPicks.splice(origIdx, 1);
|
|
}
|
|
|
|
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
|
|
};
|
|
}
|
|
}
|
|
</script>
|