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

Add problem cards
continuous-integration/drone/pr Build is passing Details
continuous-integration/drone/push Build is passing Details

This commit is contained in:
Hamcha 2019-09-25 21:20:08 +02:00
parent 46aa311c51
commit 007f1feba1
Signed by: hamcha
GPG Key ID: 41467804B19A3315
1 changed files with 37 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/views/Game.vue
View File

@ -10,7 +10,12 @@
:cards="zones['own-problem-opp-zone']"
id="pown-opp-zone"
/>
<section class="problem-card"></section>
<section class="problem-card opp-zone">
<CardImage
v-if="problems['own-problem']"
:id="problems['own-problem'].ID"
/>
</section>
<Zone
class="own-zone"
:cards="zones['own-problem-own-zone']"
@ -23,7 +28,12 @@
:cards="zones['opp-problem-opp-zone']"
id="popp-opp-zone"
/>
<section class="problem-card"></section>
<section class="problem-card">
<CardImage
v-if="problems['opp-problem']"
:id="problems['opp-problem'].ID"
/>
</section>
<Zone
class="own-zone"
:cards="zones['opp-problem-own-zone']"
@ -93,20 +103,30 @@ $hand-max-height: 150px;
.problem {
display: grid;
grid: 1.5fr 0.5fr 1fr 0.5fr 1.5fr / 1fr 1.5fr 1fr;
grid: 1.5fr 0.2fr 1fr 0.2fr 1.5fr / 1fr 1.5fr 1fr;
flex: 1;
.own-zone {
grid-row: 4/6;
grid-column: 1/4;
z-index: 2;
}
.opp-zone {
grid-row: 1/3;
grid-column: 1/4;
z-index: 2;
}
.problem-card {
grid-row: 2/5;
grid-column: 2;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
img {
height: auto;
max-height: 100%;
}
}
}
}
@ -168,6 +188,7 @@ import CardImage from "@/components/Cards/CardImage.vue";
export default class GameView extends Vue {
private hand!: Card[];
private zones!: Record<string, Card[]>;
private problems!: Record<string, Card | null>;
private data() {
return {
@ -179,17 +200,24 @@ export default class GameView extends Vue {
"own-problem-opp-zone": [],
"opp-problem-own-zone": [],
"opp-problem-opp-zone": []
},
problems: {
"own-problem": null,
"opp-problem": null
}
};
}
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);
const cards = await getCards({ Sets: ["FF"] });
this.hand = cards.slice(0, 9);
this.zones["own-home"] = cards.slice(0, 3);
this.zones["own-problem-opp-zone"] = cards.slice(10, 11);
this.zones["opp-home"] = cards.slice(20, 23);
console.log(cards);
const problem = cards.find(c => c.ID == "ff130");
this.problems["own-problem"] = problem!;
this.problems["opp-problem"] = problem!;
}
private imageURL(id: string) {