mcg/mlpcardgame
2
0
Fork 0
Code Issues 23 Pull requests 1 Releases Wiki Activity

Add game zones

Browse source
This commit is contained in:
Hamcha 2019-09-15 18:48:31 +02:00
parent 449465c852
commit cc781709df
Signed by: hamcha
GPG key ID: 41467804B19A3315
1 changed files with 79 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

84
src/views/Game.vue
View file

@ -1,7 +1,22 @@
<template> <template>
<section class="game"> <section class="game">
<section class="topbar"></section> <section class="topbar"></section>
<section class="board"></section> <section class="board">
<section class="zone own-home"></section>
<section class="problems">
<section class="problem own-problem">
<section class="zone own-zone"></section>
<section class="problem-card"></section>
<section class="zone opp-zone"></section>
</section>
<section class="problem opp-problem">
<section class="zone own-zone"></section>
<section class="problem-card"></section>
<section class="zone opp-zone"></section>
</section>
</section>
<section class="zone opp-home"></section>
</section>
<section class="hand"> <section class="hand">
<article v-for="(card, i) in hand" :key="i + card.ID"> <article v-for="(card, i) in hand" :key="i + card.ID">
<img :src="imageURL(card.ID)" /> <img :src="imageURL(card.ID)" />
@ -13,6 +28,10 @@
<style lang="scss" scoped> <style lang="scss" scoped>
$zone-gap: 5px; $zone-gap: 5px;
$card-gap: 5px; $card-gap: 5px;
$side-min-size: 250px;
$top-bar-height: 50px;
$hand-min-height: 100px;
$hand-max-height: 150px;
.game { .game {
background: url("../assets/images/backgrounds/boardbg.webp") center; background: url("../assets/images/backgrounds/boardbg.webp") center;
@ -21,7 +40,12 @@ $card-gap: 5px;
height: 100vh; height: 100vh;
display: grid; display: grid;
gap: $zone-gap; gap: $zone-gap;
grid: 50px 2fr minmax(100px, 150px) / 1fr 3fr 1fr; grid:
$top-bar-height 2fr minmax($hand-min-height, $hand-max-height) / minmax(
$side-min-size,
1fr
)
5fr minmax($side-min-size, 1fr);
} }
.topbar { .topbar {
@ -35,8 +59,46 @@ $card-gap: 5px;
} }
.board { .board {
grid-column: 1/4; grid-column: 2/3;
grid-row: 2; grid-row: 2;
display: grid;
grid: 1fr 2.5fr 1fr / 1fr;
.problems {
display: flex;
flex: 1;
flex-flow: row-reverse;
.problem {
display: grid;
grid: 1.5fr 0.5fr 1fr 0.5fr 1.5fr / 1fr 1.5fr 1fr;
flex: 1;
.own-zone {
grid-row: 4/6;
grid-column: 1/4;
}
.opp-zone {
grid-row: 1/3;
grid-column: 1/4;
}
.problem-card {
border: 2px solid rgba(255, 255, 255, 0.2);
grid-row: 2/5;
grid-column: 2;
}
}
}
}
.zone {
border: 2px solid rgba(255, 255, 255, 0.2);
margin: 2px;
padding: 2px;
border-radius: 5px;
display: flex;
flex-flow: column;
flex: 1;
} }
.hand { .hand {
@ -47,19 +109,31 @@ $card-gap: 5px;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
padding: 0; padding: 0;
padding-right: 100px;
article { article {
margin: $card-gap; margin: $card-gap;
margin-bottom: 0; margin-bottom: 0;
min-width: 150px;
overflow-y: hidden; overflow-y: hidden;
cursor: grab; cursor: grab;
transition: all 100ms; transition: all 100ms;
min-width: 150px;
max-width: 200px;
&:hover { &:hover {
margin-top: $card-gap - 30px; margin-top: $card-gap - 30px;
} }
} }
overflow: visible; overflow: visible;
} }
@media (max-width: 1200px) {
.game {
grid-template-columns: $side-min-size 5fr;
}
.hand {
grid-column: 1/3;
padding: 0 10px;
}
}
</style> </style>
<script lang="ts"> <script lang="ts">
@ -79,7 +153,7 @@ export default class GameView extends Vue {
} }
private async mounted() { private async mounted() {
this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 6); this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 9);
} }
private imageURL(id: string) { private imageURL(id: string) {