web-development/onmyoji-deck-builder
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

adding initial data

Browse Source
This commit is contained in:
Daniel Tomlinson
2021-03-16 18:00:32 +00:00
parent 64e4fb45cf
commit 7f024c4ecd
26 changed files with 11074 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
src/views/DeckBuilder.vue Normal file
View File

@@ -0,0 +1,303 @@
<template>
<v-container>
<v-row>
<v-col cols="12">
<div class="text-center">
<h1>Deck Builder</h1>
<br />
<!-- {{ temp }} -->
</div>
</v-col>
</v-row>
<v-row>
<v-col cols="12">
<v-select
v-model="selected_shikigami_names"
v-on:input="limit_shikigami"
:items="shikigami"
label="Select Shikigami"
chips
multiple
hint="Choose 4 Shikgigami for your deck."
persistent-hint
item-text="name"
item-value="name"
>
<template v-slot:selection="data">
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
close
x-large
@click="data.select"
@click:close="remove_shikigami(data.item)"
color="#070042"
>
<v-avatar size="90" left>
<v-img :src="data.item.avatar"></v-img>
</v-avatar>
{{ data.item.name }}
</v-chip>
</template>
<template v-slot:item="data">
<template>
<v-list-item-avatar>
<img :src="data.item.avatar" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-html="data.item.name"></v-list-item-title>
<v-list-item-subtitle
v-html="data.item.group"
></v-list-item-subtitle>
</v-list-item-content>
</template>
</template>
</v-select>
</v-col>
selected_shikigami_names: {{ selected_shikigami_names }} <br />
selected_shikigami_data: {{ selected_shikigami_data }} <br />
selected_shikigami_decks: {{ selected_shikigami_decks }}
</v-row>
<v-row v-for="(_, index) in selected_shikigami_names" :key="index">
<v-card elevation="2" width="100%" class="py-4" flat tile color="#070042">
<v-row>
<v-col cols="2">
<div cols="12">
<div cols="12" class="text-h5 text-center">
{{ `${selected_shikigami_data[index].name}` }}
</div>
<div cols="12">
<v-img
:src="`${selected_shikigami_data[index].avatar}`"
aspect-ratio="1"
width="100%"
></v-img>
</div>
<div cols="12">
{{ index }}
<v-select
v-model="selected_shikigami_decks[index][index]"
v-on:input="limit_decks"
:items="double_cards(index)"
item-text="card.name"
item-value="id"
chips
multiple
hint="Choose 8 cards for your deck."
persistent-hint
return-object
>
<template v-slot:selection="data">
<v-chip
v-bind="data.attrs"
:input-value="data.selected"
close
label
x-small
@click="data.select"
@click:close="remove_decks(index, data.index)"
color="#04002E"
>{{ data.item.card.name }}</v-chip
></template
>
</v-select>
</div>
</div>
</v-col>
<v-col cols="10">{{ selected_shikigami_decks[index][index] }}</v-col>
</v-row>
</v-card>
</v-row>
<v-container grid-list-xl>
<v-select
v-model="color"
:items="colors"
item-text="title"
item-value="id"
multiple
return-object
>
</v-select>
colors: {{ color }}<br />
computed: {{ getColors }}
</v-container>
</v-container>
</template>
<script>
export default {
data: () => ({
selected_shikigami_names: [],
selected_shikigami_data: [],
selected_shikigami_decks: [{ 0: [] }, { 1: [] }, { 2: [] }, { 3: [] }],
shikigami: [
{
header: "Group 1",
},
{
name: "Shiki_0",
cards: [
{ name: "shiki_0_card_0", url: "https://shiki_0_card_0.png" },
{ name: "shiki_0_card_1", url: "https://shiki_0_card_1.png" },
{ name: "shiki_0_card_2", url: "https://shiki_0_card_2.png" },
{ name: "shiki_0_card_3", url: "https://shiki_0_card_3.png" },
{ name: "shiki_0_card_4", url: "https://shiki_0_card_4.png" },
{ name: "shiki_0_card_5", url: "https://shiki_0_card_5.png" },
{ name: "shiki_0_card_6", url: "https://shiki_0_card_6.png" },
{ name: "shiki_0_card_7", url: "https://shiki_0_card_7.png" },
],
avatar: "https://cdn.vuetifyjs.com/images/lists/1.jpg",
},
{
name: "Shiki_1",
cards: [
{ name: "shiki_1_card_0", url: "https://shiki_1_card_0.png" },
{ name: "shiki_1_card_1", url: "https://shiki_1_card_1.png" },
{ name: "shiki_1_card_2", url: "https://shiki_1_card_2.png" },
{ name: "shiki_1_card_3", url: "https://shiki_1_card_3.png" },
{ name: "shiki_1_card_4", url: "https://shiki_1_card_4.png" },
{ name: "shiki_1_card_5", url: "https://shiki_1_card_5.png" },
{ name: "shiki_1_card_6", url: "https://shiki_1_card_6.png" },
{ name: "shiki_1_card_7", url: "https://shiki_1_card_7.png" },
],
avatar: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
},
{
name: "Shiki_2",
cards: [
{ name: "shiki_2_card_0", url: "https://shiki_2_card_0.png" },
{ name: "shiki_2_card_1", url: "https://shiki_2_card_1.png" },
{ name: "shiki_2_card_2", url: "https://shiki_2_card_2.png" },
{ name: "shiki_2_card_3", url: "https://shiki_2_card_3.png" },
{ name: "shiki_2_card_4", url: "https://shiki_2_card_4.png" },
{ name: "shiki_2_card_5", url: "https://shiki_2_card_5.png" },
{ name: "shiki_2_card_6", url: "https://shiki_2_card_6.png" },
{ name: "shiki_2_card_7", url: "https://shiki_2_card_7.png" },
],
avatar: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
},
{
header: "Group 2",
},
{
divider: true,
},
{
name: "Shiki_3",
cards: [
{ name: "shiki_3_card_0", url: "https://shiki_3_card_0.png" },
{ name: "shiki_3_card_1", url: "https://shiki_3_card_1.png" },
{ name: "shiki_3_card_2", url: "https://shiki_3_card_2.png" },
{ name: "shiki_3_card_3", url: "https://shiki_3_card_3.png" },
{ name: "shiki_3_card_4", url: "https://shiki_3_card_4.png" },
{ name: "shiki_3_card_5", url: "https://shiki_3_card_5.png" },
{ name: "shiki_3_card_6", url: "https://shiki_3_card_6.png" },
{ name: "shiki_3_card_7", url: "https://shiki_3_card_7.png" },
],
avatar: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
},
{
name: "Shiki_4",
cards: [
{ name: "shiki_4_card_0", url: "https://shiki_4_card_0.png" },
{ name: "shiki_4_card_1", url: "https://shiki_4_card_1.png" },
{ name: "shiki_4_card_2", url: "https://shiki_4_card_2.png" },
{ name: "shiki_4_card_3", url: "https://shiki_4_card_3.png" },
{ name: "shiki_4_card_4", url: "https://shiki_4_card_4.png" },
{ name: "shiki_4_card_5", url: "https://shiki_4_card_5.png" },
{ name: "shiki_4_card_6", url: "https://shiki_4_card_6.png" },
{ name: "shiki_4_card_7", url: "https://shiki_4_card_7.png" },
],
avatar: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
},
],
colors: [
{ id: 1, title: "red" },
{ id: 2, title: "blue" },
{ id: 3, title: "red" },
],
color: [],
}),
methods: {
get_chosen_shikigami_data: function (shikigami_name) {
for (let i = 0; i < this.shikigami.length; i++) {
try {
if (this.shikigami[i].name == shikigami_name) {
return this.shikigami[i];
}
} catch (err) {
console.error(err);
}
}
},
limit_shikigami: function (e) {
if (e.length == 5) {
e.pop();
}
},
limit_decks: function (e) {
if (e.length == 9) {
e.pop();
}
},
remove_shikigami(item) {
const index = this.selected_shikigami_names.indexOf(item.name);
if (index >= 0) this.selected_shikigami_names.splice(index, 1);
},
remove_decks(shiki_index, card_index) {
``;
this.selected_shikigami_decks[shiki_index][shiki_index].splice(
card_index,
1
);
console.log(this.selected_shikigami_decks[shiki_index].shiki_index);
console.log(shiki_index, card_index);
},
double_cards(index) {
const doubled_cards = [];
this.selected_shikigami_data[index].cards.forEach(function (el) {
let id_0 = Math.random().toString(36).slice(6);
let id_1 = Math.random().toString(36).slice(6);
doubled_cards.push({ id: id_0, card: el }, { id: id_1, card: el });
});
console.log(doubled_cards);
return doubled_cards;
// return this.selected_shikigami_data[index].cards.concat.apply(
// [],
// this.selected_shikigami_data[index].cards.map(function (el) {
// return [el, el];
// })
// );
},
},
computed: {
getColors() {
return this.color.map((c) => c.title);
},
},
watch: {
selected_shikigami_names: function () {
this.selected_shikigami_data = [];
for (let i = 0; i < this.selected_shikigami_names.length; i++) {
for (let j = 0; j < this.shikigami.length; j++) {
try {
if (this.shikigami[j].name == this.selected_shikigami_names[i]) {
this.selected_shikigami_data.push(this.shikigami[j]);
}
} catch (err) {
/* nothing */
}
}
}
},
},
};
</script>
<style lang="scss" scoped>
.v-chip .v-avatar {
height: 60px !important;
width: 60px !important;
}
</style>