495 lines
19 KiB
JavaScript
495 lines
19 KiB
JavaScript
|
|
import inlinesvg from './util/inlinesvg.js';
|
|
import localeEn from "./en.js";
|
|
const store = Vuex.createStore({
|
|
components: {
|
|
inlinesvg: inlinesvg,
|
|
|
|
},
|
|
state: {},
|
|
getters: {},
|
|
mutations: {},
|
|
actions: {}
|
|
});
|
|
|
|
const app = Vue.createApp({
|
|
components: {
|
|
inlinesvg: inlinesvg,
|
|
},
|
|
data: () => ({
|
|
selectpage: 'selectplayer',
|
|
newCharacter: false,
|
|
createModal: false,
|
|
buyCharacter: false,
|
|
tbxID: "Your tbx-id...",
|
|
selectedCharacter: false,
|
|
characterData: [],
|
|
serverlogo: "https://r2.fivemanage.com/8Hb4twhFSbaNdR27bPGV4/m_logo.png",
|
|
maxSlots: [],
|
|
selectedGender: 'male',
|
|
characterInfo: {
|
|
firstname: '',
|
|
lastname: '',
|
|
birthdate: false,
|
|
height: 150,
|
|
nationality: 'USA'
|
|
},
|
|
playerActiveSlots: false,
|
|
characterIndex: 0,
|
|
myCharacter: [],
|
|
lastLocation: null,
|
|
deleteCharacterButton: false,
|
|
currentThema: 'white',
|
|
isChanging: false,
|
|
locales: [],
|
|
moneyType: '$',
|
|
closeServerModal: false,
|
|
deleteCharacterModal: false,
|
|
clickedCountine : false,
|
|
}),
|
|
methods: {
|
|
continuePlayer() {
|
|
const character = this.characterData[this.characterIndex];
|
|
if (character && !this.clickedCountine) {
|
|
this.clickedCountine = true;
|
|
postNUI('continuePlayer', character);
|
|
}
|
|
this.characterIndex = 0;
|
|
},
|
|
|
|
async ChangeCharacter(direction) {
|
|
if (this.isChanging) return;
|
|
this.isChanging = true;
|
|
if (this.characterIndex === this.maxSlots.length - 1 && direction === 'next') {
|
|
this.isChanging = false;
|
|
return;
|
|
}
|
|
if (direction === 'next' && this.characterIndex < this.maxSlots.length - 1) {
|
|
this.characterIndex++;
|
|
const character = this.characterData[this.characterIndex];
|
|
if (character) {
|
|
this.SelectCharacter(character)
|
|
return this.myCharacter = { ...character, label: `${character.charinfo.firstname} ${character.charinfo.lastname}`, isNew: false, isBuy: false };
|
|
} else if (this.maxSlots[this.characterIndex]?.tebex) {
|
|
this.buyCharacter = true
|
|
postNUI('newCharacter')
|
|
this.selectedCharacter = false
|
|
this.newCharacter = false
|
|
setTimeout(() => {
|
|
this.isChanging = false;
|
|
}, 400);
|
|
return this.myCharacter = { label: this.locales["BUYSLOTJS"], isNew: false, isBuy: true };
|
|
|
|
}
|
|
postNUI('newCharacter')
|
|
this.selectedCharacter = false
|
|
this.buyCharacter = false
|
|
this.newCharacter = true
|
|
setTimeout(() => {
|
|
let nowData = new Date();
|
|
this.$nextTick(() => {
|
|
let vm = this;
|
|
let dp = new AirDatepicker("#pickerinput", {
|
|
locale: localeEn,
|
|
maxDate: nowData,
|
|
onSelect({ date, formattedDate }) {
|
|
vm.characterInfo.birthdate = formattedDate
|
|
},
|
|
});
|
|
});
|
|
|
|
}, 600);
|
|
|
|
setTimeout(() => {
|
|
this.isChanging = false;
|
|
}, 400);
|
|
return this.myCharacter = { label: this.locales["NEW_CHARACTER_JS"] , isNew: true, isBuy: false };
|
|
} else if (direction === 'previus' && this.characterIndex > 0) {
|
|
|
|
this.characterIndex--;
|
|
const character = this.characterData[this.characterIndex];
|
|
if (character) {
|
|
this.SelectCharacter(character)
|
|
return this.myCharacter = { ...character, label: `${character.charinfo.firstname} ${character.charinfo.lastname}`, isNew: false, isBuy: false };
|
|
} else if (this.maxSlots[this.characterIndex]?.tebex) {
|
|
postNUI('newCharacter')
|
|
this.buyCharacter = true
|
|
this.selectedCharacter = false
|
|
this.newCharacter = false
|
|
setTimeout(() => {
|
|
this.isChanging = false;
|
|
}, 400);
|
|
return this.myCharacter = { label: this.locales["BUYSLOTJS"], isNew: false, isBuy: true };
|
|
}
|
|
postNUI('newCharacter')
|
|
this.selectedCharacter = false
|
|
this.buyCharacter = false
|
|
this.newCharacter = true
|
|
setTimeout(() => {
|
|
let nowData = new Date();
|
|
this.$nextTick(() => {
|
|
let vm = this;
|
|
let dp = new AirDatepicker("#pickerinput", {
|
|
locale: localeEn,
|
|
maxDate: nowData,
|
|
onSelect({ date, formattedDate }) {
|
|
vm.characterInfo.birthdate = formattedDate
|
|
},
|
|
});
|
|
});
|
|
}, 600);
|
|
setTimeout(() => {
|
|
this.isChanging = false;
|
|
}, 400);
|
|
return this.myCharacter = { label: this.locales["NEW_CHARACTER_JS"], isNew: true, isBuy: false };
|
|
}
|
|
|
|
this.clickedCountine = false;
|
|
},
|
|
validateBirthdateInput(event) {
|
|
const char = String.fromCharCode(event.keyCode);
|
|
const regex = /[0-9]|\/|/;
|
|
if (!regex.test(char)) {
|
|
event.preventDefault();
|
|
}
|
|
const value = event.target.value;
|
|
this.characterInfo.birthdate = value
|
|
if (value.length === 2 || value.length === 5) {
|
|
if (event.keyCode !== 47) {
|
|
event.target.value = value + '/';
|
|
|
|
}
|
|
}
|
|
},
|
|
checkInputMin() {
|
|
if (this.characterInfo.firstname.length > 0) {
|
|
this.characterInfo.firstname = this.characterInfo.firstname.replace(/[^a-zA-Z]/g, "");
|
|
}
|
|
if (this.characterInfo.lastname.length > 0) {
|
|
this.characterInfo.lastname = this.characterInfo.lastname.replace(/[^a-zA-Z]/g, "");
|
|
}
|
|
// if (this.characterInfo.height.length > 0) {
|
|
// this.characterInfo.height = this.characterInfo.height.replace(/[^0-9]/g, "");
|
|
// }
|
|
},
|
|
changeGender(val) {
|
|
this.selectedGender = val
|
|
},
|
|
async deleteCharacter() {
|
|
if (this.selectedCharacter) {
|
|
let result = await postNUI('DeleteCharacter', this.selectedCharacter)
|
|
if (result) {
|
|
this.selectedCharacter = false
|
|
this.characterData = result
|
|
const character = this.characterData[this.characterIndex];
|
|
if (character) {
|
|
this.SelectCharacter(character)
|
|
return this.myCharacter = { ...character, label: `${character.charinfo.firstname} ${character.charinfo.lastname}`, isNew: false, isBuy: false };
|
|
} else if (this.maxSlots[this.characterIndex]?.tebex) {
|
|
postNUI('newCharacter')
|
|
this.selectedCharacter = false
|
|
this.newCharacter = false
|
|
this.buyCharacter = true
|
|
setTimeout(() => {
|
|
this.isChanging = false;
|
|
}, 400);
|
|
return this.myCharacter = { label: this.locales["BUYSLOTJS"], isNew: false, isBuy: true };
|
|
}
|
|
postNUI('newCharacter')
|
|
this.selectedCharacter = false
|
|
this.buyCharacter = false
|
|
this.newCharacter = true
|
|
setTimeout(() => {
|
|
let nowData = new Date();
|
|
this.$nextTick(() => {
|
|
let vm = this;
|
|
let dp = new AirDatepicker("#pickerinput", {
|
|
locale: localeEn,
|
|
maxDate: nowData,
|
|
onSelect({ date, formattedDate }) {
|
|
vm.characterInfo.birthdate = formattedDate
|
|
},
|
|
});
|
|
});
|
|
}, 600);
|
|
setTimeout(() => {
|
|
this.isChanging = false;
|
|
}, 400);
|
|
this.myCharacter = { label: this.locales["NEW_CHARACTER_JS"], isNew: true, isBuy: false };
|
|
} else {
|
|
console.log('error')
|
|
}
|
|
}
|
|
},
|
|
async SelectCharacter(val) {
|
|
this.newCharacter = false
|
|
this.selectedCharacter = false
|
|
this.buyCharacter = false
|
|
this.isChanging = true;
|
|
let result = await postNUI('SelectCharacter', val)
|
|
if (result) {
|
|
setTimeout(() => {
|
|
this.selectedCharacter = val
|
|
}, 400);
|
|
|
|
} else {
|
|
console.log('error')
|
|
}
|
|
setTimeout(() => {
|
|
this.isChanging = false;
|
|
}, 400);
|
|
},
|
|
CreateNewCharacter() {
|
|
this.selectedCharacter = false
|
|
this.buyCharacter = false
|
|
postNUI('newCharacter')
|
|
|
|
setTimeout(() => {
|
|
this.newCharacter = true
|
|
}, 400);
|
|
|
|
},
|
|
openCreateModal() {
|
|
this.createModal = true
|
|
},
|
|
checkTebex(){
|
|
postNUI("checkTebex", {
|
|
tbxid: this.tbxID,
|
|
});
|
|
this.createModal = false
|
|
},
|
|
CreateCharacter() {
|
|
if (this.buyCharacter) {
|
|
this.createModal = true
|
|
return
|
|
}
|
|
if (this.characterInfo.firstname.length < 3 || this.characterInfo.lastname.length < 3 || this.characterInfo.birthdate == false || this.characterInfo.height < 121 || this.characterInfo.height > 199) return
|
|
postNUI("createChar", {
|
|
firstname: this.characterInfo.firstname,
|
|
lastname: this.characterInfo.lastname,
|
|
nationality: this.characterInfo.nationality,
|
|
birthdate: this.characterInfo.birthdate,
|
|
height: this.characterInfo.height,
|
|
gender: this.selectedGender,
|
|
cid: this.characterIndex,
|
|
});
|
|
|
|
this.characterIndex = 0;
|
|
this.characterInfo = {
|
|
firstname: '',
|
|
lastname: '',
|
|
birthdate: false,
|
|
height: 150,
|
|
}
|
|
},
|
|
checkPage(val) {
|
|
if (this.createModal) {
|
|
return false;
|
|
}
|
|
if (val === 'mychar') {
|
|
return !this.newCharacter && this.selectedCharacter;
|
|
}
|
|
if (val === 'createchar') {
|
|
if (this.newCharacter || this.buyCharacter) {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
checkModal(val) {
|
|
if (val === 'tebex') {
|
|
return this.createModal;
|
|
} else if (val === 'quitServerModal') {
|
|
return this.closeServerModal;
|
|
|
|
} else if (val === 'deleteCharacterModal') {
|
|
return this.deleteCharacterModal;
|
|
} else if (val === 'none') {
|
|
if (this.createModal || this.closeServerModal || this.deleteCharacterModal) {
|
|
return false;
|
|
} else {
|
|
return true;
|
|
}
|
|
}
|
|
},
|
|
|
|
clickModal(val, val2) {
|
|
if (val === 'closeServer') {
|
|
this.closeServerModal = !this.closeServerModal;
|
|
if (val2) {
|
|
postNUI('closeAndDropPlayer')
|
|
}
|
|
} else if (val === 'deleteCharacter') {
|
|
this.deleteCharacterModal = !this.deleteCharacterModal;
|
|
if (val2) {
|
|
this.deleteCharacter()
|
|
}
|
|
} else if (val === 'openDelete') {
|
|
this.deleteCharacterModal = true;
|
|
}
|
|
},
|
|
updateMaxSlots(playerActiveSlots) {
|
|
if (playerActiveSlots === 0) {
|
|
return;
|
|
}
|
|
let tebexCount = 0;
|
|
for (const slot of this.maxSlots) {
|
|
if (slot.tebex) {
|
|
slot.tebex = false;
|
|
tebexCount++;
|
|
if (tebexCount === playerActiveSlots) {
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
eventHandler(event) {
|
|
switch (event.data.action) {
|
|
case "CHECK_NUI":
|
|
postNUI('LoadedNUI')
|
|
break;
|
|
case "ShowUI":
|
|
this.characterIndex = 0;
|
|
this.clickedCountine = false;
|
|
document.querySelector('#app').style.display = 'block'
|
|
break;
|
|
case "LOADED_ADD_SLOTS":
|
|
this.maxSlots = event.data.payload.maxSlots;
|
|
this.playerActiveSlots = event.data.payload.activeSlots;
|
|
this.updateMaxSlots(this.playerActiveSlots);
|
|
break;
|
|
case "LOADED_PLAYER_DATA":
|
|
this.characterData = event.data.payload;
|
|
const character = this.characterData[this.characterIndex];
|
|
if (character) {
|
|
this.SelectCharacter(character)
|
|
return this.myCharacter = { ...character, label: `${character.charinfo.firstname} ${character.charinfo.lastname}`, isNew: false, isBuy: false };
|
|
} else if (this.maxSlots[this.characterIndex]?.tebex) {
|
|
postNUI('newCharacter')
|
|
this.selectedCharacter = false
|
|
this.newCharacter = false
|
|
this.buyCharacter = true
|
|
setTimeout(() => {
|
|
this.isChanging = false;
|
|
}, 400);
|
|
return this.myCharacter = { label: this.locales["BUYSLOTJS"] , isNew: false, isBuy: true };
|
|
}
|
|
postNUI('newCharacter')
|
|
this.selectedCharacter = false
|
|
this.buyCharacter = false
|
|
this.newCharacter = true
|
|
setTimeout(() => {
|
|
let nowData = new Date();
|
|
this.$nextTick(() => {
|
|
let vm = this;
|
|
let dp = new AirDatepicker("#pickerinput", {
|
|
locale: localeEn,
|
|
maxDate: nowData,
|
|
onSelect({ date, formattedDate }) {
|
|
vm.characterInfo.birthdate = formattedDate
|
|
},
|
|
});
|
|
});
|
|
}, 600);
|
|
setTimeout(() => {
|
|
this.isChanging = false;
|
|
}, 400);
|
|
this.myCharacter = { label: this.locales["NEW_CHARACTER_JS"], isNew: true, isBuy: false };
|
|
break;
|
|
case "LOAD_CONFIG_DATA":
|
|
// this.maxSlots = event.data.payload.slot
|
|
this.deleteCharacterButton = event.data.payload.deletecharacter
|
|
this.currentThema = event.data.payload.thema
|
|
this.serverlogo = event.data.payload.serverLogo
|
|
this.locales = event.data.payload.locales
|
|
this.moneyType = event.data.payload.moneyType
|
|
break;
|
|
case "UPDATE_LAST_LOCATION":
|
|
this.lastLocation = event.data.payload;
|
|
break;
|
|
case "closeNUI":
|
|
document.querySelector('#app').style.display = 'none'
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
},
|
|
updateHeight(value) {
|
|
const parsedValue = parseInt(value);
|
|
if (!isNaN(parsedValue)) {
|
|
if (value.length > 3) {
|
|
this.characterInfo.height = value.slice(0, 3);
|
|
return;
|
|
} else {
|
|
this.characterInfo.height = parsedValue;
|
|
}
|
|
} else {
|
|
this.characterInfo.height = '';
|
|
}
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
},
|
|
mounted() {
|
|
window.addEventListener('message', this.eventHandler);
|
|
window.addEventListener('keyup', (event) => {
|
|
if (event.key === "Escape") {
|
|
if (this.createModal) {
|
|
this.createModal = false;
|
|
} else {
|
|
this.closeServerModal = !this.closeServerModal;
|
|
// postNUI('closeAndDropPlayer')
|
|
}
|
|
}
|
|
});
|
|
setInterval(() => {
|
|
if (this.isChanging ) {
|
|
this.isChanging = false;
|
|
}
|
|
}, 10000);
|
|
},
|
|
watch: {
|
|
'characterInfo.height'(newVal) {
|
|
this.updateHeight(newVal);
|
|
},
|
|
},
|
|
});
|
|
|
|
app.use(store).mount("#app");
|
|
|
|
|
|
var resourceName = "codem-multicharacter";
|
|
|
|
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) {
|
|
}
|
|
};
|
|
|
|
function clicksound(val) {
|
|
if (!soundFx) return;
|
|
let audioPath = `./sound/${val}`;
|
|
audioPlayer = new Howl({
|
|
src: [audioPath]
|
|
});
|
|
audioPlayer.volume(0.8);
|
|
audioPlayer.play();
|
|
}
|