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 +37 -9
1 changed files with 37 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit 007f1feba1 - Show all commits

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) {