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

WIP: Basic 2D game board #23

Draft
hamcha wants to merge 6 commits from feature/board into master
pull from: feature/board
merge into: mcg:master
Conversation 0 Commits 6 Files changed 3 +79 -5
1 changed files with 79 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit cc781709df - Show all commits

84
src/views/Game.vue
View file

@ -1,7 +1,22 @@
<template>
<section class="game">
<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">
<article v-for="(card, i) in hand" :key="i + card.ID">
<img :src="imageURL(card.ID)" />
@ -13,6 +28,10 @@
<style lang="scss" scoped>
$zone-gap: 5px;
$card-gap: 5px;
$side-min-size: 250px;
$top-bar-height: 50px;
$hand-min-height: 100px;
$hand-max-height: 150px;
.game {
background: url("../assets/images/backgrounds/boardbg.webp") center;
@ -21,7 +40,12 @@ $card-gap: 5px;
height: 100vh;
display: grid;
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 {
@ -35,8 +59,46 @@ $card-gap: 5px;
}
.board {
grid-column: 1/4;
grid-column: 2/3;
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 {
@ -47,19 +109,31 @@ $card-gap: 5px;
justify-content: center;
margin: 0;
padding: 0;
padding-right: 100px;
article {
margin: $card-gap;
margin-bottom: 0;
min-width: 150px;
overflow-y: hidden;
cursor: grab;
transition: all 100ms;
min-width: 150px;
max-width: 200px;
&:hover {
margin-top: $card-gap - 30px;
}
}
overflow: visible;
}
@media (max-width: 1200px) {
.game {
grid-template-columns: $side-min-size 5fr;
}
.hand {
grid-column: 1/3;
padding: 0 10px;
}
}
</style>
<script lang="ts">
@ -79,7 +153,7 @@ export default class GameView extends Vue {
}
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) {