425 lines
13 KiB
JavaScript
425 lines
13 KiB
JavaScript
import dnaModule from './modules/dna.js';
|
|
import pedModule from './modules/ped.js';
|
|
import clothesModule from './modules/clothes.js';
|
|
import bodyModule from './modules/body.js';
|
|
import bincoModule from './modules/binco.js';
|
|
import ponsonbysModule from './modules/ponsonbys.js';
|
|
import suburbanModule from './modules/suburban.js';
|
|
import tottoModule from './modules/totto.js';
|
|
import barberModule from './modules/barber.js';
|
|
import wardrobeModule from './modules/wardrobe.js';
|
|
import jobModule from './modules/job.js';
|
|
|
|
|
|
|
|
|
|
const Modules = {
|
|
dnapage: dnaModule,
|
|
pedpage: pedModule,
|
|
clothespage: clothesModule,
|
|
bodypage: bodyModule,
|
|
bincopage: bincoModule,
|
|
ponsonbyspage: ponsonbysModule,
|
|
suburbanpage: suburbanModule,
|
|
tottopage: tottoModule,
|
|
barberpage: barberModule,
|
|
wardrobepage: wardrobeModule,
|
|
jobpage: jobModule,
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
import dnapage from '../pages/dna/index.js';
|
|
import pedpage from '../pages/ped/index.js';
|
|
import clothespage from '../pages/clothes/index.js';
|
|
import bodypage from '../pages/body/index.js';
|
|
import bincopage from '../pages/binco/index.js';
|
|
import ponsonbyspage from '../pages/ponsonbys/index.js';
|
|
import tottopage from '../pages/totto/index.js';
|
|
import barberpage from '../pages/barber/index.js';
|
|
import wardrobepage from '../pages/wardrobe/index.js';
|
|
import jobpage from '../pages/job/index.js';
|
|
import suburbanpage from '../pages/suburban/index.js';
|
|
|
|
|
|
const store = Vuex.createStore({
|
|
components: {
|
|
'dnapage': dnapage,
|
|
'pedpage': pedpage,
|
|
'clothespage': clothespage,
|
|
'bodypage': bodypage,
|
|
'bincopage': bincopage,
|
|
'ponsonbyspage': ponsonbyspage,
|
|
'tottopage': tottopage,
|
|
'barberpage': barberpage,
|
|
'wardrobepage': wardrobepage,
|
|
'jobpage': jobpage,
|
|
'suburbanpage': suburbanpage,
|
|
},
|
|
state: {
|
|
fullyLoaded : false,
|
|
activePage: '',
|
|
skin: [],
|
|
pp: '',
|
|
playerName: '',
|
|
serverId: 0,
|
|
outfitPrice: 0,
|
|
isSurgery: false,
|
|
surgeryPrice: 0,
|
|
selectedMoneyType : 'bank',
|
|
playerJob: {
|
|
job_label: '',
|
|
job_grade_label: '',
|
|
},
|
|
playerMoney: {
|
|
cash: 0,
|
|
bank: 0,
|
|
},
|
|
locales: '',
|
|
defaultPP: '',
|
|
notifications: [],
|
|
timeout: false,
|
|
|
|
},
|
|
getters: {
|
|
getSkinByName(state) {
|
|
return (payload) => {
|
|
const data = state.skin.find((data) => data.name == payload)
|
|
let value = false
|
|
if (data) {
|
|
value = data.value
|
|
}
|
|
|
|
return value
|
|
}
|
|
},
|
|
},
|
|
mutations: {
|
|
setServerId(state, payload) {
|
|
state.serverId = payload
|
|
},
|
|
setOutfitPrice(state, payload) {
|
|
state.outfitPrice = payload
|
|
},
|
|
setPlayerMoney(state, payload) {
|
|
state.playerMoney[payload.type] = payload.amount
|
|
},
|
|
setPlayerJob(state, payload) {
|
|
state.playerJob = payload
|
|
},
|
|
setPlayerName(state, payload) {
|
|
state.playerName = payload
|
|
},
|
|
setActivePage(state, page) {
|
|
state.activePage = page
|
|
},
|
|
setSkin(state, payload) {
|
|
state.skin = payload
|
|
},
|
|
setCharAcceptModal(state, payload) {
|
|
state.charAcceptModal = payload
|
|
}
|
|
},
|
|
actions: {
|
|
notification({ state }, text) {
|
|
const timeout = 3000;
|
|
let id = Date.now();
|
|
// if (state.notifications.length > 0) {
|
|
// if (state.timeout) {
|
|
// clearTimeout(state.timeout)
|
|
// state.timeout = false
|
|
// }
|
|
// state.notifications = []
|
|
// }
|
|
state.notifications.push({
|
|
id: id,
|
|
text: text,
|
|
timeout: timeout,
|
|
});
|
|
state.timeout = setTimeout(() => {
|
|
state.notifications = state.notifications.filter(notification => notification.id != id);
|
|
}, timeout);
|
|
}
|
|
},
|
|
|
|
modules: Modules
|
|
});
|
|
|
|
const app = Vue.createApp({
|
|
components: {
|
|
'dnapage': dnapage,
|
|
'pedpage': pedpage,
|
|
'clothespage': clothespage,
|
|
'bodypage': bodypage,
|
|
'bincopage': bincopage,
|
|
'ponsonbyspage': ponsonbyspage,
|
|
'tottopage': tottopage,
|
|
'barberpage': barberpage,
|
|
'wardrobepage': wardrobepage,
|
|
'jobpage': jobpage,
|
|
'suburbanpage': suburbanpage,
|
|
},
|
|
data: () => ({
|
|
pageToOpen: false,
|
|
currentApparenceCategory: false,
|
|
selectedCamera: false,
|
|
|
|
|
|
|
|
}),
|
|
computed: {
|
|
|
|
...Vuex.mapState({
|
|
activePage: state => state.activePage,
|
|
skin: state => state.skin,
|
|
notifications: state => state.notifications,
|
|
})
|
|
},
|
|
|
|
watch: {
|
|
|
|
},
|
|
|
|
beforeDestroy() {
|
|
window.removeEventListener('keyup', this.updateNavbarActive);
|
|
|
|
},
|
|
mounted() {
|
|
document.querySelector('#app').style.display = 'block'
|
|
this.setupHeading()
|
|
this.currentApparenceCategory = false
|
|
window.addEventListener('keyup', this.keyHandler);
|
|
window.addEventListener('message', (event) => {
|
|
switch (event.data.action) {
|
|
case "OPEN_MENU":
|
|
this.selectedCamera = false
|
|
if (event.data.payload == 'charcreator') {
|
|
this.pageToOpen = 'createCharacter'
|
|
this.$store.state.activePage = 'dnapage'
|
|
this.currentApparenceCategory = 'dnapage'
|
|
this.$store.state.isSurgery = false
|
|
} if (event.data.payload == 'surgery') {
|
|
this.pageToOpen = 'surgery'
|
|
this.$store.state.activePage = 'dnapage'
|
|
this.currentApparenceCategory = 'dnapage'
|
|
this.$store.state.isSurgery = true
|
|
} else if (event.data.payload == 'barber') {
|
|
this.pageToOpen = 'barber'
|
|
} else if (event.data.payload == 'tattoo') {
|
|
this.pageToOpen = 'totto'
|
|
} else if (event.data.payload == 'binco') {
|
|
this.pageToOpen = 'bincoClothing'
|
|
} else if (event.data.payload == 'ponsonbys') {
|
|
this.pageToOpen = 'ponsonbysClothing'
|
|
} else if (event.data.payload == 'suburban') {
|
|
this.pageToOpen = 'suburbanClothing'
|
|
} else if (event.data.payload == 'job') {
|
|
this.pageToOpen = 'job'
|
|
} else if (event.data.payload == 'wardrobe') {
|
|
this.pageToOpen = "wardrobe"
|
|
}
|
|
|
|
break;
|
|
case "SET_SKIN":
|
|
this.setSkin(event.data.payload)
|
|
break
|
|
case "CHECK_NUI":
|
|
postNUI('loaded')
|
|
break;
|
|
case "CLOSE_PAGE":
|
|
this.pageToOpen = false
|
|
this.$store.state.activePage = false
|
|
this.currentApparenceCategory = false
|
|
postNUI('close')
|
|
this.selectedCamera = false
|
|
break;
|
|
case "SET_DEFAULT_IMAGE":
|
|
this.$store.state.defaultPP = event.data.payload
|
|
break
|
|
case "SET_PLAYER_NAME":
|
|
this.setPlayerName(event.data.payload)
|
|
break
|
|
case "SET_PLAYER_PP":
|
|
if (event.data.payload) {
|
|
this.$store.state.pp = event.data.payload
|
|
}else {
|
|
this.$store.state.pp = this.$store.state.defaultPP
|
|
}
|
|
break
|
|
case "SET_SERVER_ID":
|
|
this.setServerId(event.data.paylaod)
|
|
break
|
|
case "LOAD_PLAYER_JOB":
|
|
this.setPlayerJob(event.data.payload)
|
|
break
|
|
case "LOAD_PLAYER_MONEY":
|
|
this.setPlayerMoney(event.data.payload)
|
|
break
|
|
case "SELECTED_MONEY_TYPE":
|
|
this.$store.state.selectedMoneyType = event.data.payload
|
|
break
|
|
case "SET_OUTFIT_PRICE":
|
|
this.setOutfitPrice(event.data.payload)
|
|
break
|
|
case "SET_SURGERY_PRICE":
|
|
|
|
this.$store.state.surgeryPrice = event.data.payload
|
|
|
|
break
|
|
case "SET_LOCALES":
|
|
this.$store.state.locales = event.data.payload;
|
|
if (event.data.payload) {
|
|
postNUI('complateLocales')
|
|
}
|
|
break
|
|
case "SET_NOTIFICATION":
|
|
this.$store.dispatch('notification', event.data.payload);
|
|
break
|
|
|
|
case "SET_PED_PAGE":
|
|
this.$store.state.pedpage.pedPageBlock = event.data.payload
|
|
|
|
|
|
break
|
|
default:
|
|
break;
|
|
}
|
|
|
|
});
|
|
// setTimeout(() => {
|
|
// this.$store.dispatch('notification', 'test mesaj');
|
|
// }, 2000);
|
|
|
|
|
|
// this.pageToOpen = 'bincoClothing'
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
...Vuex.mapMutations({
|
|
setSkin: 'setSkin',
|
|
setPlayerName: 'setPlayerName',
|
|
setServerId: 'setServerId',
|
|
setPlayerJob: 'setPlayerJob',
|
|
setPlayerMoney: 'setPlayerMoney',
|
|
setOutfitPrice: 'setOutfitPrice',
|
|
}),
|
|
randomize() {
|
|
postNUI("randomize")
|
|
},
|
|
async ChangeCamera(val) {
|
|
const old = this.selectedCamera
|
|
|
|
if(this.selectedCamera == val){
|
|
this.selectedCamera = false
|
|
}else{
|
|
this.selectedCamera = val
|
|
}
|
|
|
|
const data = await postNUI("changeCamera", {
|
|
value : this.selectedCamera,
|
|
})
|
|
|
|
if(!data){
|
|
this.selectedCamera = old
|
|
}
|
|
},
|
|
setupHeading() {
|
|
let holding = false;
|
|
let oldx = 0;
|
|
let ticking = false;
|
|
|
|
document.addEventListener('mousedown', function (e) {
|
|
holding = true;
|
|
});
|
|
|
|
document.addEventListener('mouseup', function (e) {
|
|
holding = false;
|
|
});
|
|
|
|
const mousemovemethod = (e) => {
|
|
if (!ticking && holding) {
|
|
window.requestAnimationFrame(() => {
|
|
const direction = e.pageX < oldx ? "left" : "right";
|
|
oldx = e.pageX;
|
|
|
|
if (e.target.classList.contains("mouse-move")) {
|
|
if (direction == "left") {
|
|
postNUI("rotateleft");
|
|
} else if (direction == "right") {
|
|
postNUI("rotateright");
|
|
}
|
|
}
|
|
|
|
ticking = false;
|
|
});
|
|
|
|
ticking = true;
|
|
}
|
|
};
|
|
|
|
document.addEventListener('mousemove', mousemovemethod);
|
|
},
|
|
|
|
keyHandler(e) {
|
|
if (e.which == 27) {
|
|
if (this.pageToOpen == 'createCharacter') return false;
|
|
postNUI('close')
|
|
this.pageToOpen = ''
|
|
}
|
|
},
|
|
changeAppearancePage(val) {
|
|
if (val) {
|
|
this.currentApparenceCategory = val
|
|
|
|
// -- change active page
|
|
this.$store.state.activePage = val
|
|
this.$store.state.charAcceptModal = false
|
|
}
|
|
},
|
|
closeCharModal() {
|
|
this.$store.state.charAcceptModal = false
|
|
},
|
|
createCharacterModal() {
|
|
postNUI("saveSkin")
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
});
|
|
|
|
app.use(store).mount('#app');
|
|
var resourceName = 'codem-appearance'
|
|
|
|
if (window.GetParentResourceName) {
|
|
resourceName = window.GetParentResourceName()
|
|
}
|
|
|
|
window.postNUI = async (name, data) => {
|
|
try {
|
|
const response = await fetch(`https://${resourceName}/${name}`, {
|
|
method: 'POST',
|
|
mode: 'cors',
|
|
cache: 'no-cache',
|
|
credentials: 'same-origin',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
redirect: 'follow',
|
|
referrerPolicy: 'no-referrer',
|
|
body: JSON.stringify(data)
|
|
});
|
|
return !response.ok ? null : response.json();
|
|
} catch (error) {
|
|
// console.log(error)
|
|
}
|
|
}
|
|
|