mlpcardgame/src/views/Draft.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>