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

updating theme for placeholder

Browse Source
This commit is contained in:
Daniel Tomlinson
2021-03-18 20:05:39 +00:00
parent 03f184b2d1
commit 2647b029ac
9 changed files with 164 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
src/views/DeckBuilder.vue
View File

@@ -10,6 +10,19 @@
</div>
</v-col>
</v-row>
<v-row>
<v-textarea
v-model="deck_title"
label="Deck Title"
class="user-deck-title"
rows="1"
row-height="80"
></v-textarea>
</v-row>
<v-row>
<v-textarea v-model="deck_description" label="Deck Description">
</v-textarea>
</v-row>
<v-row>
<v-col cols="12">
<v-select
@@ -32,7 +45,7 @@
x-large
@click="data.select"
@click:close="remove_shikigami(data.item)"
color="#070042"
color="#C0B094"
>
<v-avatar size="90" left>
<v-img
@@ -57,12 +70,13 @@
</template>
</v-select>
</v-col>
<!-- selected_shikigami_names: {{ selected_shikigami_names }} <br />
selected_shikigami_data: {{ selected_shikigami_data }} <br /> -->
<!-- selected_shikigami_names: {{ selected_shikigami_names }} <br /> -->
<!-- selected_shikigami_data: {{ selected_shikigami_data }} <br /> -->
<!-- selected_shikigami_decks: {{ selected_shikigami_decks }} -->
<!-- deck_title: {{ deck_title }} -->
</v-row>
<v-row v-for="(_, index) in selected_shikigami_names" :key="index">
<v-card elevation="2" width="100%" class="pa-3" flat tile color="#070042">
<v-card elevation="2" width="100%" class="pa-3" flat tile color="#171D29">
<v-row>
<v-col cols="2">
<div cols="12">
@@ -104,7 +118,7 @@
label
@click="data.select"
@click:close="remove_decks(index, data.index)"
color="#04002E"
color="#C0B094"
>{{ data.item.name }}</v-chip
></template
>
@@ -118,7 +132,7 @@
v-for="i in selected_shikigami_decks[index][index]"
:key="i.id"
width="12.3%"
color="#070042"
color="#171D29"
>
<!-- <div class="text-center">
{{ i.name }}
@@ -133,6 +147,9 @@
</v-row>
</v-card>
</v-row>
<v-row>
<!-- <v-textarea :value="construct_url()" color="teal"> </v-textarea> -->
</v-row>
</v-container>
</template>
@@ -144,6 +161,8 @@ export default {
selected_shikigami_data: [],
selected_shikigami_decks: [{ 0: [] }, { 1: [] }, { 2: [] }, { 3: [] }],
shikigami: shikigami,
deck_title: "",
deck_description: "",
}),
methods: {
get_chosen_shikigami_data: function (shikigami_name) {
@@ -201,8 +220,97 @@ export default {
console.log(this.selected_shikigami_decks[shiki_index].shiki_index);
console.log(shiki_index, card_index);
},
construct_url: function () {
const saved_selected_shikigami_names = btoa(
JSON.stringify(this.selected_shikigami_names)
);
const saved_selected_shikigami_decks = btoa(
JSON.stringify(this.selected_shikigami_decks)
);
const saved_deck_title = btoa(JSON.stringify(this.deck_title));
const saved_deck_description = btoa(
JSON.stringify(this.deck_description)
);
const url = `?deck_title=${saved_deck_title}&deck_description=${saved_deck_description}&selected_shikigami_names=${saved_selected_shikigami_names}&selected_shikigami_decks=${saved_selected_shikigami_decks}`;
return url;
},
},
computed: {},
mounted() {
if (this.$route.query.selected_shikigami_names) {
const saved_selected_shikigami_names = JSON.parse(
atob(this.$route.query.selected_shikigami_names)
);
if (typeof saved_selected_shikigami_names != "object") {
this.selected_shikigami_names = [];
} else {
this.selected_shikigami_names = [];
for (let i = 0; i < saved_selected_shikigami_names.length; i++) {
this.selected_shikigami_names.push(saved_selected_shikigami_names[i]);
}
}
} else {
this.selected_shikigami_names = [];
}
if (this.$route.query.selected_shikigami_decks) {
const saved_selected_shikigami_decks = JSON.parse(
atob(this.$route.query.selected_shikigami_decks)
);
if (typeof saved_selected_shikigami_decks != "object") {
this.selected_shikigami_decks = [
{ 0: [] },
{ 1: [] },
{ 2: [] },
{ 3: [] },
];
} else {
this.selected_shikigami_decks = [];
for (let i = 0; i < saved_selected_shikigami_decks.length; i++) {
this.selected_shikigami_decks.push(saved_selected_shikigami_decks[i]);
}
}
} else {
this.selected_shikigami_decks = [
{ 0: [] },
{ 1: [] },
{ 2: [] },
{ 3: [] },
];
}
if (this.$route.query.deck_title) {
const saved_deck_title = JSON.parse(atob(this.$route.query.deck_title));
if (typeof saved_deck_title != "string") {
this.deck_title = "";
} else {
this.deck_title = "";
for (let i = 0; i < saved_deck_title.length; i++) {
this.deck_title = saved_deck_title;
}
}
} else {
this.deck_title = "";
}
if (this.$route.query.deck_description) {
const saved_deck_description = JSON.parse(atob(this.$route.query.deck_description));
if (typeof saved_deck_description != "string") {
this.deck_description = "";
} else {
this.deck_description = "";
for (let i = 0; i < saved_deck_description.length; i++) {
this.deck_description = saved_deck_description;
}
}
} else {
this.deck_description = "";
}
},
watch: {
selected_shikigami_names: function () {
this.selected_shikigami_data = [];
@@ -230,13 +338,31 @@ export default {
.deck-card:hover {
position: relative;
animation: scaleMe 500ms ease-in-out 0s forwards;
animation: card-zoom 500ms ease-in-out 0s forwards;
z-index: 100;
}
@keyframes scaleMe {
@keyframes card-zoom {
100% {
transform: scale(1.25);
}
}
.v-textarea textarea {
padding: 50px 0px 0px 0px !important;
}
.user-deck-title {
font-size: 50px !important;
// margin-top: 50px !important;
// margin-bottom: -50px !important;
}
</style>
<style lang="scss">
.user-deck-title textarea {
padding-top: 10px !important;
padding-bottom: 15px !important;
text-align: center;
}
</style>