First commit
This commit is contained in:
340
Replicard.vue
Normal file
340
Replicard.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
<h1 class="self-center mb-8">Replicard Sandbox Maps</h1>
|
||||
|
||||
<div class="flex flex-row flex-wrap mb-4 items-center gap-4">
|
||||
<button class="btn" :class="show_help ? 'btn-blue' : 'btn-white'" @click="show_help = ! show_help">
|
||||
<fa-icon :icon="['fas', 'info-circle']" class="text-xl"></fa-icon> Usage
|
||||
</button>
|
||||
<checkbox v-model="show_loot">Show loot</checkbox>
|
||||
<checkbox v-model="show_progression">Show progression</checkbox>
|
||||
<button class="btn btn-blue" v-if="show_progression && isUserLogged" @click="save()">
|
||||
<fa-icon :icon="['fas', 'save']" class="text-xl"></fa-icon> Save progression
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Usage -->
|
||||
<div class="bg-secondary self-center rounded p-4 mb-2" v-if="show_help">
|
||||
<h2>Number of fights</h2>
|
||||
<p class="pb-4">
|
||||
The number above each circle represents the number of fights needed to guarantee the appearance of a Defender.
|
||||
</p>
|
||||
<h2>To fight the Boss</h2>
|
||||
<p class="pb-4">
|
||||
To fight the Boss of each zone, you need components dropped by Defenders.<br>
|
||||
Chain fights of a node until the Defender appears.<br>
|
||||
Each component is indicated in parentheses after the color of its Defender.
|
||||
</p>
|
||||
<h2>Track your progression</h2>
|
||||
<p class="pb-4">
|
||||
Click on the stars to track your progression.<br>
|
||||
Each node has 3 quests. Add a star when you complete the corresponding quest.<br>
|
||||
Mouseover the stars to see the name of the monster.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Tabs -->
|
||||
<span class="flex flex-col w-full">
|
||||
<div class="self-start flex flex-row flex-wrap border-primary border-b font-bold w-full">
|
||||
<a
|
||||
v-for="(zone, letter) in getZones"
|
||||
:key="letter"
|
||||
@click="show_tab = letter"
|
||||
class="px-4 py-2 text-primary cursor-pointer rounded-t"
|
||||
:class="show_tab === letter ? 'bg-secondary' : ''"
|
||||
>
|
||||
{{ zone.name }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div v-if="currentZone.boss4">
|
||||
<div><span class="text-pink-500">Pink:</span> {{ currentZone.boss1 }} (Gospel of Egeiro)</div>
|
||||
<div><span class="text-emerald-500">Green:</span> {{ currentZone.boss2 }} (Gospel of Genea)</div>
|
||||
<div><span class="text-amber-500">Yellow:</span> {{ currentZone.boss3 }} (Gospel of Thysia)</div>
|
||||
<div><span class="text-blue-500">Blue:</span> {{ currentZone.boss4 }} (Gospel of Analipsis)</div>
|
||||
</div>
|
||||
<div v-else-if="currentZone.boss3">
|
||||
<div><span class="text-pink-500">Pink:</span> {{ currentZone.boss1 }} (Organ)</div>
|
||||
<div><span class="text-emerald-500">Green:</span> {{ currentZone.boss2 }} (Rib)</div>
|
||||
<div><span class="text-amber-500">Yellow:</span> {{ currentZone.boss3 }} (Core)</div>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div><span class="text-pink-500">Pink:</span> {{ currentZone.boss1 }} (Invocation)</div>
|
||||
<div><span class="text-emerald-500">Green:</span> {{ currentZone.boss2 }} (Masquerade)</div>
|
||||
</div>
|
||||
|
||||
<div class="relative bg-primary overflow-x-auto">
|
||||
|
||||
<picture v-if="show_loot" class="block" :style="currentZoneWidth">
|
||||
<source type="image/webp" :srcset="'/img/arcarum/replicard_' + show_tab + '_loot.webp'">
|
||||
<img :src="'/img/arcarum/replicard_' + show_tab + '_loot.png'">
|
||||
</picture>
|
||||
<picture :class="show_loot ? 'absolute top-0 left-0' : ''" :style="currentZoneWidth">
|
||||
<source type="image/webp" :srcset="'/img/arcarum/replicard_' + show_tab + '.webp'">
|
||||
<img :src="'/img/arcarum/replicard_' + show_tab + '.png'">
|
||||
</picture>
|
||||
<span
|
||||
v-if="show_progression"
|
||||
class="absolute top-0 left-0"
|
||||
:style="currentZoneWidth"
|
||||
>
|
||||
<div class="relative">
|
||||
<stars-line
|
||||
v-for="(star, index) in currentZone.stars"
|
||||
:key="index"
|
||||
class="absolute bg-black"
|
||||
:style="'top: ' + star.top + 'px; left: ' + star.left + 'px;'"
|
||||
:base="2"
|
||||
:extra="3"
|
||||
:current.sync="progression[show_tab][index]"
|
||||
:max="3"
|
||||
:title="star.name"
|
||||
></stars-line>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Utils from '@/js/utils.js'
|
||||
|
||||
import Checkbox from '@/components/common/Checkbox.vue'
|
||||
import StarsLine from '@/components/StarsLine.vue'
|
||||
|
||||
import replicardMixin from '@/store/modules/replicard'
|
||||
|
||||
const lsMgt = new Utils.LocalStorageMgt('Replicard');
|
||||
|
||||
const ZONES = {
|
||||
'E': {
|
||||
name: 'Eletio',
|
||||
boss1: 'The Devil',
|
||||
boss2: 'The Sun',
|
||||
boss3: 'The Star',
|
||||
width: '1377',
|
||||
stars: [
|
||||
{top: 140, left: 45, name: 'Slithering Seductress'},
|
||||
{top: 135, left: 322, name: 'Living Lightning Rod'},
|
||||
{top: 265, left: 272, name: 'Eletion Drake'},
|
||||
{top: 142, left: 553, name: 'Paradoxical Gate'},
|
||||
{top: 128, left: 685, name: 'Blazing Everwing'},
|
||||
{top: 208, left: 812, name: 'Death Seer'},
|
||||
{top: 66, left: 965, name: 'Hundred-Armed Hulk'},
|
||||
{top: 193, left: 1135, name: 'Terror Trifecta'},
|
||||
{top: 265, left: 1125, name: 'Rageborn One'},
|
||||
{top: 135, left: 1280, name: 'Eletion Glider'}
|
||||
]
|
||||
},
|
||||
'F': {
|
||||
name: 'Faym',
|
||||
boss1: 'Justice',
|
||||
boss2: 'The Moon',
|
||||
boss3: 'Death',
|
||||
width: '1377',
|
||||
stars: [
|
||||
{top: 146, left: 30, name: 'Trident Grandmaster'},
|
||||
{top: 206, left: 167, name: 'Hoarfrost Icequeen'},
|
||||
{top: 263, left: 352, name: 'Oceanic Archon'},
|
||||
{top: 146, left: 508, name: 'Farsea Predator'},
|
||||
{top: 206, left: 646, name: 'Faymian Fortress'},
|
||||
{top: 146, left: 791, name: 'Draconic Simulacrum'},
|
||||
{top: 146, left: 993, name: 'Azureflame Dragon'},
|
||||
{top: 263, left: 1091, name: 'Eye of Sorrow'},
|
||||
{top: 149, left: 1275, name: 'Mad Shearwielder'},
|
||||
{top: 154, left: 1132, name: 'Faymian Gun'}
|
||||
]
|
||||
},
|
||||
'G': {
|
||||
name: 'Goliath',
|
||||
boss1: 'The Hanged Man',
|
||||
boss2: 'The Tower',
|
||||
boss3: 'Death',
|
||||
width: '1377',
|
||||
stars: [
|
||||
{top: 257, left: 164, name: 'Avatar of Avarice'},
|
||||
{top: 29, left: 237, name: 'Temptation\'s Guide'},
|
||||
{top: 143, left: 285, name: 'World\'s Veil'},
|
||||
{top: 138, left: 592, name: 'Bloodstained Barbarian'},
|
||||
{top: 257, left: 563, name: 'Goliath Keeper'},
|
||||
{top: 120, left: 810, name: 'Frenzied Howler'},
|
||||
{top: 141, left: 963, name: 'Vestige of Truth'},
|
||||
{top: 257, left: 857, name: 'Goliath Vanguard'},
|
||||
{top: 194, left: 1085, name: 'Writhing Despair'},
|
||||
{top: 198, left: 1282, name: 'Goliath Triune'}
|
||||
]
|
||||
},
|
||||
'H': {
|
||||
name: 'Harbinger',
|
||||
boss1: 'Temperance',
|
||||
boss2: 'Judgement',
|
||||
boss3: 'The Star',
|
||||
width: '1377',
|
||||
stars: [
|
||||
{top: 174, left: 29, name: 'Dirgesinger'},
|
||||
{top: 34, left: 208, name: 'Vengeful Demigod'},
|
||||
{top: 250, left: 159, name: 'Wildwind Conjurer / Fullthunder Conjurer'},
|
||||
{top: 146, left: 334, name: 'Harbinger Simurgh'},
|
||||
{top: 260, left: 486, name: 'Harbinger Hardwood'},
|
||||
{top: 188, left: 583, name: 'Demanding Stormgod'},
|
||||
{top: 143, left: 960, name: 'Harbinger Tyrant'},
|
||||
{top: 256, left: 1099, name: 'Phantasmagoric Aberration'},
|
||||
{top: 186, left: 1220, name: 'Dimentional Riftwalker'},
|
||||
{top: 48, left: 670, name: 'Harbinger Stormer'}
|
||||
]
|
||||
},
|
||||
'I': {
|
||||
name: 'Invidia',
|
||||
boss1: 'The Sun / The Devil',
|
||||
boss2: 'The Star',
|
||||
width: '884',
|
||||
stars: [
|
||||
]
|
||||
},
|
||||
'J': {
|
||||
name: 'Joculator',
|
||||
boss1: 'The Moon / Justice',
|
||||
boss2: 'Death',
|
||||
width: '884',
|
||||
stars: [
|
||||
]
|
||||
},
|
||||
'K': {
|
||||
name: 'Kalendae',
|
||||
boss1: 'Death',
|
||||
boss2: 'The Hanged Man / The Tower',
|
||||
width: '884',
|
||||
stars: [
|
||||
]
|
||||
},
|
||||
'L': {
|
||||
name: 'Liber',
|
||||
boss1: 'Temperance / Judgment',
|
||||
boss2: 'The Star',
|
||||
width: '884',
|
||||
stars: [
|
||||
]
|
||||
},
|
||||
'M': {
|
||||
name: 'Mundus',
|
||||
boss1: ' ',
|
||||
boss2: ' ',
|
||||
boss3: ' ',
|
||||
boss4: ' ',
|
||||
width: 960,
|
||||
stars: []
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Checkbox,
|
||||
StarsLine
|
||||
},
|
||||
mixins: [
|
||||
replicardMixin
|
||||
],
|
||||
head: {
|
||||
title: 'Granblue.Party - Replicard Sandbox Maps',
|
||||
desc: 'View Replicard Sandbox Maps with loots, colors, and progression for each node',
|
||||
image: 'https://www.granblue.party/img/card_replicard.jpg',
|
||||
keywords: 'Replicard, Sandbox, Maps, Arcarum, Evoker, Eletio, Faym, Goliath, Harbinger, Invidia, Joculator, Kalendae, Liber, Mundus'
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
show_help: false,
|
||||
show_loot: true,
|
||||
show_progression: true,
|
||||
scrollbar: true,
|
||||
show_tab: 'E',
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
save() {
|
||||
this.axios.post('/replicard/save', this.progression)
|
||||
.then(response => this.$store.dispatch('addMessage', {message: 'Data saved successfully'}))
|
||||
.catch(error => this.$store.dispatch('addAxiosErrorMessage', error));
|
||||
},
|
||||
loadServerData() {
|
||||
if (this.data_fetched === false) {
|
||||
return this.axios.get('/replicard/load')
|
||||
.then(response => {
|
||||
if (response.data !== null) {
|
||||
this.$set(this, 'progression', response.data);
|
||||
this.data_fetched = true;
|
||||
}
|
||||
})
|
||||
.catch(error => this.$store.dispatch('addAxiosErrorMessage', error));
|
||||
}
|
||||
},
|
||||
loadData() {
|
||||
if (this.isUserLogged) {
|
||||
this.loadServerData();
|
||||
}
|
||||
else {
|
||||
this.$store.commit('replicard/resetReplicard');
|
||||
|
||||
const progression = lsMgt.fetchValue('progression');
|
||||
if (progression !== undefined) {
|
||||
this.progression = progression;
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
isUserLogged() {
|
||||
return this.$store.getters.getUserId !== null;
|
||||
},
|
||||
getZones() {
|
||||
return ZONES;
|
||||
},
|
||||
currentZone() {
|
||||
return this.getZones[this.show_tab];
|
||||
},
|
||||
currentZoneWidth() {
|
||||
return "min-width: " + this.currentZone.width + "px;";
|
||||
},
|
||||
progression: {
|
||||
get() { return this.$store.state.replicard.progression },
|
||||
set(value) { this.$store.commit('replicard/setReplicardData', value) }
|
||||
},
|
||||
data_fetched: {
|
||||
get() { return this.$store.state.replicard.data_fetched },
|
||||
set(value) { this.$store.commit('replicard/setReplicardFetched', value) }
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
'$store.getters.getUserId'() {
|
||||
this.data_fetched = false;
|
||||
this.loadData();
|
||||
},
|
||||
show_loot() {
|
||||
lsMgt.setValue('show_loot', this);
|
||||
},
|
||||
show_tab() {
|
||||
lsMgt.setValue('show_tab', this);
|
||||
},
|
||||
progression: {
|
||||
handler() {
|
||||
if ( ! this.isUserLogged) {
|
||||
lsMgt.setValue('progression', this);
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
},
|
||||
serverPrefetch() {
|
||||
if (this.isUserLogged) {
|
||||
return this.loadServerData();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
lsMgt.getValue(this, 'show_loot');
|
||||
lsMgt.getValue(this, 'show_tab');
|
||||
|
||||
this.loadData();
|
||||
},
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user