Fix card positioning and rotation
All checks were successful
continuous-integration/drone/push Build is passing
continuous-integration/drone/pr Build is passing

This commit is contained in:
Hamcha 2019-09-21 17:44:49 +02:00
parent d2b4774ba9
commit 46aa311c51
Signed by: hamcha
GPG key ID: 41467804B19A3315
2 changed files with 76 additions and 16 deletions

View file

@ -3,18 +3,36 @@
:class="zoneClass"
@dragenter.prevent="dragenter"
@dragleave.prevent="dragleave"
></section>
>
<CardImage
class="ccgcard"
v-for="(card, i) in cards"
:key="i + card.ID"
:id="card.ID"
/>
</section>
</template>
<style lang="scss" scoped>
.zone {
border: 2px solid rgba(255, 255, 255, 0.2);
margin: 2px;
padding: 2px;
padding: 4px;
border-radius: 5px;
display: flex;
flex-flow: column;
flex: 1;
justify-content: center;
}
.ccgcard {
cursor: grab;
transition: all 100ms;
max-width: none;
width: auto;
max-height: 100%;
margin: 0 10px;
&:active {
cursor: grabbing;
}
}
.dragging {
@ -23,13 +41,21 @@
</style>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { cardImageURL } from "@/mlpccg";
import { Component, Vue, Prop } from "vue-property-decorator";
import { cardImageURL, Card } from "@/mlpccg";
import CardImage from "@/components/Cards/CardImage.vue";
@Component({
components: {}
components: {
CardImage
}
})
export default class Zone extends Vue {
@Prop({
default: []
})
private cards!: Card[];
private dragging!: boolean;
private data() {

View file

@ -2,20 +2,36 @@
<section class="game">
<section class="topbar"></section>
<section class="board">
<Zone class="own-zone" id="own-home" />
<Zone class="opp-zone" :cards="zones['opp-home']" id="opp-home" />
<section class="problems">
<section class="problem own-problem">
<Zone class="own-zone" id="pown-own-zone" />
<Zone
class="opp-zone"
:cards="zones['own-problem-opp-zone']"
id="pown-opp-zone"
/>
<section class="problem-card"></section>
<Zone class="opp-zone" id="pown-opp-zone" />
<Zone
class="own-zone"
:cards="zones['own-problem-own-zone']"
id="pown-own-zone"
/>
</section>
<section class="problem opp-problem">
<Zone class="own-zone" id="popp-own-zone" />
<Zone
class="opp-zone"
:cards="zones['opp-problem-opp-zone']"
id="popp-opp-zone"
/>
<section class="problem-card"></section>
<Zone class="opp-zone" id="popp-opp-zone" />
<Zone
class="own-zone"
:cards="zones['opp-problem-own-zone']"
id="popp-own-zone"
/>
</section>
</section>
<Zone class="opp-zone" id="opp-home" />
<Zone class="own-zone" :cards="zones['own-home']" id="own-home" />
</section>
<section class="hand">
<article
@ -68,11 +84,12 @@ $hand-max-height: 150px;
grid-row: 2;
display: grid;
grid: 1fr 2.5fr 1fr / 1fr;
max-height: 100vh;
.problems {
display: flex;
flex: 1;
flex-flow: row-reverse;
flex-flow: row;
.problem {
display: grid;
@ -100,7 +117,6 @@ $hand-max-height: 150px;
grid-row: 3;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10px, max-content));
justify-content: center;
margin: 0;
padding: 0;
padding-right: 100px;
@ -122,6 +138,10 @@ $hand-max-height: 150px;
overflow: visible;
}
.opp-zone {
transform: rotate(180deg);
}
@media (max-width: 1200px) {
.game {
grid-template-columns: $side-min-size 5fr;
@ -147,15 +167,29 @@ import CardImage from "@/components/Cards/CardImage.vue";
})
export default class GameView extends Vue {
private hand!: Card[];
private zones!: Record<string, Card[]>;
private data() {
return {
hand: []
hand: [],
zones: {
"own-home": [],
"opp-home": [],
"own-problem-own-zone": [],
"own-problem-opp-zone": [],
"opp-problem-own-zone": [],
"opp-problem-opp-zone": []
}
};
}
private async mounted() {
this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 9);
this.zones["own-home"] = (await getCards({ Sets: ["FF"] })).slice(0, 3);
this.zones["own-problem-opp-zone"] = (await getCards({
Sets: ["FF"]
})).slice(10, 11);
this.zones["opp-home"] = (await getCards({ Sets: ["FF"] })).slice(20, 23);
}
private imageURL(id: string) {