250 lines
7.1 KiB
JavaScript
250 lines
7.1 KiB
JavaScript
import importTemplate from '../../js/util/importTemplate.js';
|
|
|
|
|
|
export default {
|
|
template: await importTemplate('pages/totto/index.html'),
|
|
components: {
|
|
|
|
|
|
},
|
|
|
|
data: () => ({
|
|
currentCategory : 'body',
|
|
categorys :{
|
|
body : {
|
|
label : 'Torso',
|
|
zones : ["ZONE_TORSO"],
|
|
},
|
|
head : {
|
|
label : 'Head',
|
|
zones : ["ZONE_HEAD"],
|
|
|
|
},
|
|
arms : {
|
|
label : 'Arms',
|
|
zones : ["ZONE_RIGHT_ARM", "ZONE_LEFT_ARM"],
|
|
},
|
|
legs : {
|
|
label : 'Legs',
|
|
zones : ["ZONE_RIGHT_LEG", "ZONE_LEFT_LEG"],
|
|
|
|
},
|
|
},
|
|
currentTattoos:[],
|
|
tattooBasket : [],
|
|
tattoos : {
|
|
["torso"] : [],
|
|
["head"] : [],
|
|
["leftarm"] : [],
|
|
["rightarm"] : [],
|
|
["leftleg"] : [],
|
|
["rightleg"] : [],
|
|
},
|
|
values : {
|
|
["torso"] : 0,
|
|
["head"] : 0,
|
|
["leftarm"] : 0,
|
|
["rightarm"] : 0,
|
|
["leftleg"] : 0,
|
|
["rightleg"] : 0,
|
|
},
|
|
|
|
clothingCategory : {
|
|
body : [
|
|
{
|
|
name : 'torso',
|
|
text : 'Torso',
|
|
label: 'Tattoos',
|
|
value : 0,
|
|
},
|
|
|
|
],
|
|
head : [
|
|
{
|
|
name : 'head',
|
|
text : 'Head',
|
|
label: 'Tattoos',
|
|
value : 0,
|
|
},
|
|
|
|
],
|
|
arms : [
|
|
{
|
|
name : 'leftarm',
|
|
text : 'Left Arm',
|
|
label: 'Tattoos',
|
|
value : 0,
|
|
},
|
|
{
|
|
name : 'rightarm',
|
|
text : 'Right Arm',
|
|
label: 'Tattoos',
|
|
value : 0,
|
|
},
|
|
],
|
|
legs : [
|
|
{
|
|
name : 'leftleg',
|
|
text : 'Left Leg',
|
|
label: 'Tattoos',
|
|
value : 0,
|
|
},
|
|
{
|
|
name : 'rightleg',
|
|
text : 'Right Leg',
|
|
label: 'Tattoos',
|
|
value : 0,
|
|
},
|
|
],
|
|
},
|
|
summaryData : [
|
|
{name : 'torso', label : 'Torso', price : 0},
|
|
{name : 'head', label : 'Head', price : 0},
|
|
{name : 'leftarm', label : 'Left Arm', price : 0},
|
|
{name : 'rightarm', label : 'Right Arm', price : 0},
|
|
{name : 'leftleg', label : 'Left Leg', price : 0},
|
|
{name : 'rightleg', label : 'Right Leg', price : 0},
|
|
],
|
|
|
|
buyModal : false
|
|
}),
|
|
methods: {
|
|
changeCategory(category){
|
|
this.currentCategory = category
|
|
},
|
|
buynow(val){
|
|
this.buyModal = val
|
|
},
|
|
toggleTattoBasket(type, tattoName){
|
|
let tattoo = this.tattoos[type][this.values[type]]
|
|
|
|
if(!this.CheckAlreadyPurchased(tattoo.HashNameMale, tattoo.HashNameFemale)){
|
|
const data = this.tattooBasket.find(el => el.Name == tattoName)
|
|
if(data){
|
|
this.tattooBasket = this.tattooBasket.filter(el => el.Name != tattoName)
|
|
}else{
|
|
tattoo.type = type
|
|
this.tattooBasket.push(tattoo)
|
|
}
|
|
|
|
postNUI('getTattooBasketData', {
|
|
basket:this.tattooBasket
|
|
})
|
|
this.SetBasketPrices()
|
|
}else{
|
|
postNUI('removeTattoo', {
|
|
tattoo
|
|
})
|
|
}
|
|
|
|
},
|
|
RemoveTattoo(zones){
|
|
postNUI('RemoveTattooZone', {
|
|
zones
|
|
})
|
|
},
|
|
CheckBasket(name){
|
|
const data = this.tattooBasket.find(el => el.Name == name)
|
|
if(data){
|
|
return true
|
|
}
|
|
return false
|
|
},
|
|
CheckAlreadyPurchased(hash_1, hash_2){
|
|
const data = this.currentTattoos.find(el => el.hash ? el.hash == hash_1 || el.hash == hash_2 : false)
|
|
if(data){
|
|
return true
|
|
}
|
|
|
|
return false
|
|
},
|
|
async Buy(){
|
|
const data = await postNUI('buyTattoo', {
|
|
basket:this.tattooBasket
|
|
})
|
|
if(data){
|
|
this.tattooBasket = []
|
|
}
|
|
},
|
|
SetBasketPrices(){
|
|
for(let index in this.summaryData){
|
|
let data = this.summaryData[index]
|
|
const name = data.name
|
|
let basket = this.tattooBasket.filter((el) => el.type == name)
|
|
let total = 0
|
|
basket.forEach((el) =>{
|
|
total += el.Price
|
|
})
|
|
data.price = total
|
|
}
|
|
},
|
|
|
|
IncreaseValue(type){
|
|
if(this.values[type] < this.tattoos[type].length - 1){
|
|
this.values[type] += 1
|
|
}else{
|
|
this.values[type] = 0
|
|
}
|
|
postNUI('previewTatto', {
|
|
tattoo:this.tattoos[type][this.values[type]]
|
|
})
|
|
},
|
|
DecreaseValue(type){
|
|
if(this.values[type] > 0){
|
|
this.values[type] -= 1
|
|
}else{
|
|
this.values[type] = this.tattoos[type].length - 1
|
|
}
|
|
|
|
postNUI('previewTatto', {
|
|
tattoo:this.tattoos[type][this.values[type]]
|
|
})
|
|
},
|
|
eventHandler(event){
|
|
switch (event.data.action) {
|
|
case "SET_TATTOOS":
|
|
this.tattoos = event.data.payload
|
|
break
|
|
case "SET_CURRENT_TATTOOS":
|
|
this.currentTattoos = event.data.payload
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
GetTotalBasketPrice(){
|
|
let total = 0
|
|
this.tattooBasket.forEach((el) =>{
|
|
total += el.Price
|
|
})
|
|
return total
|
|
}
|
|
},
|
|
|
|
mounted() {
|
|
window.addEventListener('message', this.eventHandler)
|
|
|
|
postNUI('getTattooBasketData', {
|
|
basket:this.tattooBasket
|
|
})
|
|
|
|
|
|
this.summaryData[0].label = this.$store.state.locales['torsoTitle1']
|
|
this.summaryData[1].label = this.$store.state.locales['torsoTitle3']
|
|
this.summaryData[2].label = this.$store.state.locales['torsoTitle5']
|
|
this.summaryData[3].label = this.$store.state.locales['torsoTitle6']
|
|
this.summaryData[4].label = this.$store.state.locales['torsoTitle7']
|
|
this.summaryData[5].label = this.$store.state.locales['torsoTitle8']
|
|
},
|
|
beforeDestroy(){
|
|
window.removeEventListener('message', this.eventHandler)
|
|
}
|
|
}
|
|
|
|
|
|
|
|
|