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']" :cards="zones['own-problem-opp-zone']"
id="pown-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 <Zone
class="own-zone" class="own-zone"
:cards="zones['own-problem-own-zone']" :cards="zones['own-problem-own-zone']"
@ -23,7 +28,12 @@
:cards="zones['opp-problem-opp-zone']" :cards="zones['opp-problem-opp-zone']"
id="popp-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 <Zone
class="own-zone" class="own-zone"
:cards="zones['opp-problem-own-zone']" :cards="zones['opp-problem-own-zone']"
@ -93,20 +103,30 @@ $hand-max-height: 150px;
.problem { .problem {
display: grid; 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; flex: 1;
.own-zone { .own-zone {
grid-row: 4/6; grid-row: 4/6;
grid-column: 1/4; grid-column: 1/4;
z-index: 2;
} }
.opp-zone { .opp-zone {
grid-row: 1/3; grid-row: 1/3;
grid-column: 1/4; grid-column: 1/4;
z-index: 2;
} }
.problem-card { .problem-card {
grid-row: 2/5; grid-row: 2/5;
grid-column: 2; 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 { export default class GameView extends Vue {
private hand!: Card[]; private hand!: Card[];
private zones!: Record<string, Card[]>; private zones!: Record<string, Card[]>;
private problems!: Record<string, Card | null>;
private data() { private data() {
return { return {
@ -179,17 +200,24 @@ export default class GameView extends Vue {
"own-problem-opp-zone": [], "own-problem-opp-zone": [],
"opp-problem-own-zone": [], "opp-problem-own-zone": [],
"opp-problem-opp-zone": [] "opp-problem-opp-zone": []
},
problems: {
"own-problem": null,
"opp-problem": null
} }
}; };
} }
private async mounted() { private async mounted() {
this.hand = (await getCards({ Sets: ["FF"] })).slice(0, 9); const cards = await getCards({ Sets: ["FF"] });
this.zones["own-home"] = (await getCards({ Sets: ["FF"] })).slice(0, 3); this.hand = cards.slice(0, 9);
this.zones["own-problem-opp-zone"] = (await getCards({ this.zones["own-home"] = cards.slice(0, 3);
Sets: ["FF"] this.zones["own-problem-opp-zone"] = cards.slice(10, 11);
})).slice(10, 11); this.zones["opp-home"] = cards.slice(20, 23);
this.zones["opp-home"] = (await getCards({ Sets: ["FF"] })).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) { private imageURL(id: string) {