forked from Simnation/Main
614 lines
24 KiB
JavaScript
614 lines
24 KiB
JavaScript
|
const { createApp } = Vue;
|
|||
|
|
|
|||
|
|
const app = createApp({
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
Show: {
|
|||
|
|
Camera: false,
|
|||
|
|
Store: false,
|
|||
|
|
Craft: false,
|
|||
|
|
Data: false,
|
|||
|
|
Plugins: false,
|
|||
|
|
EnterTimer: false,
|
|||
|
|
Timer: false,
|
|||
|
|
CarInformation: false,
|
|||
|
|
CameraNotification: false,
|
|||
|
|
Cross: false,
|
|||
|
|
},
|
|||
|
|
ActiveFilter: 'NRM',
|
|||
|
|
CurrencyType: '$',
|
|||
|
|
dateString: '2024-01-01',
|
|||
|
|
hoursString: '00:00:00',
|
|||
|
|
Players: {
|
|||
|
|
fullName: 'John Doe',
|
|||
|
|
grade: 'Unemployed',
|
|||
|
|
job: 'Unemployed',
|
|||
|
|
},
|
|||
|
|
ShowData: {
|
|||
|
|
type: 'vehicle',
|
|||
|
|
ped: 'a_m_y_skater_01',
|
|||
|
|
name: 'asea',
|
|||
|
|
image: 'assets/image/default.png',
|
|||
|
|
birthDate: '01/01/2000',
|
|||
|
|
plate: '0RESMON',
|
|||
|
|
},
|
|||
|
|
ActiveCategory: {
|
|||
|
|
id: 'all',
|
|||
|
|
name: 'All',
|
|||
|
|
},
|
|||
|
|
ActiveCar: {
|
|||
|
|
item: {
|
|||
|
|
name: 'select_a_car',
|
|||
|
|
label: 'Select a Car',
|
|||
|
|
description: 'Lorem Ipsum',
|
|||
|
|
price: 0,
|
|||
|
|
},
|
|||
|
|
vehicle: {
|
|||
|
|
istatistics: {
|
|||
|
|
speed: 0,
|
|||
|
|
control: 0,
|
|||
|
|
brake: 0,
|
|||
|
|
},
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
ActiveCraft: {
|
|||
|
|
item: {
|
|||
|
|
name: 'select_a_craft',
|
|||
|
|
label: 'Select a Craft',
|
|||
|
|
},
|
|||
|
|
resources: {
|
|||
|
|
screw: 1,
|
|||
|
|
silver: 1,
|
|||
|
|
silver: 1,
|
|||
|
|
iron: 1,
|
|||
|
|
copper: 1,
|
|||
|
|
emerald: 1,
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
ActiveCrafting: null,
|
|||
|
|
Locales: {},
|
|||
|
|
SignalLost: false,
|
|||
|
|
SignalLostType: false,
|
|||
|
|
Notifications: [],
|
|||
|
|
Categorys: [],
|
|||
|
|
Cars: [],
|
|||
|
|
Crafts: [],
|
|||
|
|
StreetName: 'Unknown',
|
|||
|
|
totalTime: 60,
|
|||
|
|
remainingTime: 60,
|
|||
|
|
intervalId: null,
|
|||
|
|
paths: [],
|
|||
|
|
getResourceCount: [],
|
|||
|
|
ActivePlugins: {
|
|||
|
|
Bomb: {
|
|||
|
|
status: false,
|
|||
|
|
name: 'Bomb',
|
|||
|
|
},
|
|||
|
|
ScanIdentifier: {
|
|||
|
|
status: false,
|
|||
|
|
name: 'Scan Identifier',
|
|||
|
|
},
|
|||
|
|
Teaser: {
|
|||
|
|
status: false,
|
|||
|
|
name: 'Teaser',
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
ActivePlugin: null,
|
|||
|
|
BatteryLevel: 100,
|
|||
|
|
DamageLevel: 100,
|
|||
|
|
DistanceLevel: 0,
|
|||
|
|
CarName: 'Unknown',
|
|||
|
|
isDragging: false,
|
|||
|
|
startX: 0,
|
|||
|
|
scrollLeft: 0,
|
|||
|
|
seconds: 0,
|
|||
|
|
timer: null,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
messageHandler(event) {
|
|||
|
|
switch (event.data.action) {
|
|||
|
|
case 'OpenWeb':
|
|||
|
|
document.getElementById('app').style.display = 'flex';
|
|||
|
|
break;
|
|||
|
|
case 'OpenStore':
|
|||
|
|
this.Cars = event.data.payload.cars;
|
|||
|
|
this.Categorys = event.data.payload.categorys;
|
|||
|
|
this.Crafts = event.data.payload.crafts;
|
|||
|
|
this.Show.Store = true;
|
|||
|
|
|
|||
|
|
this.ActiveCar = this.Cars[0];
|
|||
|
|
document.getElementById('app').style.display = 'flex';
|
|||
|
|
break;
|
|||
|
|
case 'SetCamera':
|
|||
|
|
this.Show.Camera = event.data.payload.active;
|
|||
|
|
this.CarName = event.data.payload.carName;
|
|||
|
|
this.hoursUpdate();
|
|||
|
|
setInterval(this.hoursUpdate, 1000);
|
|||
|
|
|
|||
|
|
const date = new Date();
|
|||
|
|
|
|||
|
|
const year = date.getFullYear();
|
|||
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|||
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|||
|
|
|
|||
|
|
this.dateString = `${year}-${month}-${day}`;
|
|||
|
|
|
|||
|
|
if (event.data.payload.first) {
|
|||
|
|
this.Players = event.data.payload.playerData;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.Show.Camera) {
|
|||
|
|
document.getElementById('app').style.display = 'flex';
|
|||
|
|
} else {
|
|||
|
|
this.ShowData = {
|
|||
|
|
type: 'vehicle',
|
|||
|
|
ped: 'a_m_y_skater_01',
|
|||
|
|
name: 'asea',
|
|||
|
|
image: 'assets/image/default.png',
|
|||
|
|
birthDate: '01/01/2000',
|
|||
|
|
plate: '0RESMON',
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
this.Show = {
|
|||
|
|
Camera: false,
|
|||
|
|
Store: false,
|
|||
|
|
Craft: false,
|
|||
|
|
Data: false,
|
|||
|
|
Plugins: false,
|
|||
|
|
EnterTimer: false,
|
|||
|
|
Timer: false,
|
|||
|
|
CarInformation: false,
|
|||
|
|
CameraNotification: false,
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
this.ActivePlugin = null;
|
|||
|
|
document.getElementById('app').style.display = 'none';
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'ShowData':
|
|||
|
|
this.Show.Data = true;
|
|||
|
|
this.ShowData = event.data.payload;
|
|||
|
|
break;
|
|||
|
|
case 'HideData':
|
|||
|
|
this.Show.Data = false;
|
|||
|
|
this.ShowData = {
|
|||
|
|
type: 'vehicle',
|
|||
|
|
ped: 'a_m_y_skater_01',
|
|||
|
|
name: 'asea',
|
|||
|
|
image: 'assets/image/default.png',
|
|||
|
|
birthDate: '01/01/2000',
|
|||
|
|
plate: '0RESMON',
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
case 'NoSignal':
|
|||
|
|
this.SignalLostType = event.data.payload.type;
|
|||
|
|
|
|||
|
|
if (this.SignalLostType === 3) {
|
|||
|
|
this.SignalLost = true;
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'Notification':
|
|||
|
|
this.Notifications.push({
|
|||
|
|
id: this.Notifications.length + 1,
|
|||
|
|
header: event.data.payload.header,
|
|||
|
|
message: event.data.payload.message
|
|||
|
|
});
|
|||
|
|
this.Show.CameraNotification = true;
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.Notifications.shift();
|
|||
|
|
if (this.Notifications.length === 0) {
|
|||
|
|
this.Show.CameraNotification = false;
|
|||
|
|
}
|
|||
|
|
}, 5000);
|
|||
|
|
break;
|
|||
|
|
case 'CheckNui':
|
|||
|
|
postNUI('CheckNui');
|
|||
|
|
break;
|
|||
|
|
case 'Close':
|
|||
|
|
this.Close();
|
|||
|
|
break;
|
|||
|
|
case 'ChangeCameraType':
|
|||
|
|
this.ActiveFilter = event.data.payload;
|
|||
|
|
break;
|
|||
|
|
case 'UpdateStreet':
|
|||
|
|
this.StreetName = event.data.payload;
|
|||
|
|
break;
|
|||
|
|
case 'SetLocale':
|
|||
|
|
this.Locales = event.data.payload;
|
|||
|
|
break;
|
|||
|
|
case 'StartPlugins':
|
|||
|
|
if (event.data.payload.type == 'ScanIdentifier') {
|
|||
|
|
this.ActivePlugins[event.data.payload.type] = {
|
|||
|
|
status: event.data.payload.status,
|
|||
|
|
name: 'Scan Identifier',
|
|||
|
|
};
|
|||
|
|
} else {
|
|||
|
|
this.ActivePlugins[event.data.payload.type] = {
|
|||
|
|
status: event.data.payload.status,
|
|||
|
|
name: event.data.payload.type,
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'UpdateBattery':
|
|||
|
|
this.BatteryLevel = event.data.payload;
|
|||
|
|
break;
|
|||
|
|
case 'UpdateDistance':
|
|||
|
|
this.DistanceLevel = event.data.payload;
|
|||
|
|
break;
|
|||
|
|
case 'UpdateDamage':
|
|||
|
|
this.DamageLevel = event.data.payload;
|
|||
|
|
break;
|
|||
|
|
case 'OpenPluginsMenu':
|
|||
|
|
this.Show.Plugins = true;
|
|||
|
|
break;
|
|||
|
|
case 'ResetExtensions':
|
|||
|
|
this.ActivePlugins = {
|
|||
|
|
Bomb: {
|
|||
|
|
status: false,
|
|||
|
|
name: 'Bomb',
|
|||
|
|
},
|
|||
|
|
ScanIdentifier: {
|
|||
|
|
status: false,
|
|||
|
|
name: 'Scan Identifier',
|
|||
|
|
},
|
|||
|
|
Teaser: {
|
|||
|
|
status: false,
|
|||
|
|
name: 'Teaser',
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
break;
|
|||
|
|
default:
|
|||
|
|
break;
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
capitalize(text) {
|
|||
|
|
if (!text) return '';
|
|||
|
|
return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
|
|||
|
|
},
|
|||
|
|
formatPrice(value) {
|
|||
|
|
if (!value) return '$0.00';
|
|||
|
|
return new Intl.NumberFormat('en-US', {
|
|||
|
|
style: 'currency',
|
|||
|
|
currency: 'USD',
|
|||
|
|
minimumFractionDigits: 2,
|
|||
|
|
}).format(value);
|
|||
|
|
},
|
|||
|
|
pxToVw(px) {
|
|||
|
|
const vw = (px / 1920) * 100;
|
|||
|
|
return `${vw}vw`;
|
|||
|
|
},
|
|||
|
|
keyHandler(e) {
|
|||
|
|
if (!this.Show.Camera && e.which == 27) {
|
|||
|
|
this.Close();
|
|||
|
|
return;
|
|||
|
|
} else if (this.Show.EnterTimer && e.which == 27) {
|
|||
|
|
this.Show.EnterTimer = false;
|
|||
|
|
postNUI('CloseMenu');
|
|||
|
|
return;
|
|||
|
|
} else if (this.Show.Plugins && e.which == 27) {
|
|||
|
|
this.Show.Plugins = false;
|
|||
|
|
postNUI('CloseMenu');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
Close() {
|
|||
|
|
document.getElementById('app').style.display = 'none';
|
|||
|
|
this.seconds = 0;
|
|||
|
|
this.timer = null;
|
|||
|
|
if (this.timer) {
|
|||
|
|
clearInterval(this.timer);
|
|||
|
|
}
|
|||
|
|
this.Show = {
|
|||
|
|
Camera: false,
|
|||
|
|
Store: false,
|
|||
|
|
Plugins: false,
|
|||
|
|
Craft: false,
|
|||
|
|
Data: false,
|
|||
|
|
CarInformation: false,
|
|||
|
|
CameraNotification: false,
|
|||
|
|
Cross: false,
|
|||
|
|
}
|
|||
|
|
this.Show.CameraNotification = false;
|
|||
|
|
this.Notifications = [];
|
|||
|
|
postNUI('CloseMenu');
|
|||
|
|
},
|
|||
|
|
ConvertValue(value, oldMin, oldMax, newMin, newMax) {
|
|||
|
|
const oldRange = oldMax - oldMin
|
|||
|
|
const newRange = newMax - newMin
|
|||
|
|
const newValue = ((value - oldMin) * newRange) / oldRange + newMin
|
|||
|
|
return newValue
|
|||
|
|
},
|
|||
|
|
ChangeCategory(category) {
|
|||
|
|
if (category.id === this.ActiveCategory.id) return;
|
|||
|
|
this.ActiveCategory = category;
|
|||
|
|
},
|
|||
|
|
OpenCarInformation() {
|
|||
|
|
if (this.ActiveCar && !this.Show.CarInformation) {
|
|||
|
|
this.Show.CarInformation = true;
|
|||
|
|
} else {
|
|||
|
|
this.Show.CarInformation = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
hoursUpdate() {
|
|||
|
|
const date = new Date();
|
|||
|
|
|
|||
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|||
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|||
|
|
const seconds = String(date.getSeconds()).padStart(2, '0');
|
|||
|
|
|
|||
|
|
this.hoursString = `${hours}:${minutes}:${seconds}`;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
BuyCar() {
|
|||
|
|
postNUI('BuyCar', this.ActiveCar);
|
|||
|
|
},
|
|||
|
|
async NewCraftItem(data) {
|
|||
|
|
if (data.item.name === this.ActiveCraft.item.name) return;
|
|||
|
|
|
|||
|
|
this.ActiveCraft = data;
|
|||
|
|
|
|||
|
|
const response = await postNUI('GetCraftResources', this.ActiveCraft.resources);
|
|||
|
|
|
|||
|
|
if (response) {
|
|||
|
|
this.getResourceCount = response;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
getResourceCountValue(resourceName) {
|
|||
|
|
if (!this.getResourceCount) return 0;
|
|||
|
|
const resource = this.getResourceCount.find(item => item.name === resourceName);
|
|||
|
|
return resource ? resource.count : 0;
|
|||
|
|
},
|
|||
|
|
initializePaths() {
|
|||
|
|
this.paths = [
|
|||
|
|
{ d: "M104 11.5645L106.891 11.8247L107.932 0.260205L105.041 0L104 11.5645Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M116.371 13.2392L113.515 12.7209L115.588 1.29629L118.444 1.81461L116.371 13.2392Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M122.871 14.7234L125.669 15.4957L128.758 4.30292L125.96 3.53067L122.871 14.7234Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M134.729 18.5771L132.011 17.5571L136.091 6.68629L138.809 7.70627L134.729 18.5771Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M140.867 21.2012L143.483 22.4607L148.521 11.9994L145.905 10.7399L140.867 21.2012Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M151.851 27.1126L149.359 25.6237L155.314 15.6561L157.806 17.1449L151.851 27.1126Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M157.428 30.7867L159.777 32.4929L166.602 23.0993L164.253 21.3931L157.428 30.7867Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M167.181 38.5622L164.995 36.6523L172.635 27.9082L174.821 29.8181L167.181 38.5622Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M171.99 43.1739L173.996 45.2721L182.389 37.248L180.383 35.1499L171.99 43.1739Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M180.21 52.5659L178.4 50.2964L187.478 43.057L189.288 45.3265L180.21 52.5659Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M184.121 57.9644L185.721 60.387L195.411 53.9905L193.812 51.5679L184.121 57.9644Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M190.517 68.6702L189.142 66.114L199.366 60.6119L200.742 63.168L190.517 68.6702Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M193.413 74.6839L194.554 77.3531L205.231 72.7896L204.09 70.1204L193.413 74.6839Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M197.797 86.3592L196.9 83.5984L207.943 80.0104L208.84 82.7711L197.797 86.3592Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M199.577 92.7932L200.223 95.6232L211.543 93.0395L210.897 90.2094L199.577 92.7932Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M201.799 105.063L201.41 102.186L212.916 100.628L213.306 103.504L201.799 105.063Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M202.395 111.711L202.525 114.61L214.125 114.09L213.994 111.19L202.395 111.711Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M202.4 124.178L202.531 121.278L214.13 121.799L214 124.699L202.4 124.178Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M201.792 130.826L201.403 133.703L212.909 135.261L213.298 132.385L201.792 130.826Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M199.577 143.097L200.223 140.267L211.543 142.851L210.897 145.681L199.577 143.097Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M197.798 149.529L196.901 152.29L207.944 155.878L208.841 153.117L197.798 149.529Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M193.409 161.206L194.549 158.536L205.226 163.1L204.085 165.769L193.409 161.206Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M190.521 167.216L189.145 169.772L199.37 175.274L200.745 172.718L190.521 167.216Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M184.122 177.922L185.721 175.5L195.411 181.896L193.812 184.319L184.122 177.922Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M180.205 183.321L178.396 185.59L187.474 192.83L189.283 190.56L180.205 183.321Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M171.989 192.714L173.995 190.616L182.388 198.64L180.382 200.738L171.989 192.714Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M167.179 197.327L164.993 199.237L172.632 207.981L174.818 206.071L167.179 197.327Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M157.43 205.102L159.778 203.396L166.603 212.789L164.255 214.496L157.43 205.102Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M151.86 208.775L149.368 210.264L155.323 220.232L157.815 218.743L151.86 208.775Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M140.863 214.689L143.479 213.43L148.517 223.891L145.901 225.15L140.863 214.689Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M134.737 217.312L132.019 218.332L136.099 229.203L138.816 228.183L134.737 217.312Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M122.868 221.164L125.666 220.391L128.755 231.584L125.957 232.356L122.868 221.164Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M116.37 222.65L113.513 223.168L115.587 234.592L118.443 234.074L116.37 222.65Z", color: "white", opacity: 0.2 },
|
|||
|
|
{ d: "M106.891 224.064L104 224.324L105.041 235.889L107.932 235.629L106.891 224.064Z", color: "white", opacity: 0.2 },
|
|||
|
|
];
|
|||
|
|
},
|
|||
|
|
async Crafting() {
|
|||
|
|
if (this.ActiveCraft && this.ActiveCraft.item && this.ActiveCraft.item.name !== 'select_a_craft' && !this.ActiveCrafting) {
|
|||
|
|
const response = await postNUI('Crafting', this.ActiveCraft);
|
|||
|
|
|
|||
|
|
if (response) {
|
|||
|
|
this.ActiveCrafting = { ...this.ActiveCraft };
|
|||
|
|
|
|||
|
|
this.remainingTime = this.ActiveCrafting.item.time * 60;
|
|||
|
|
this.totalTime = this.remainingTime;
|
|||
|
|
|
|||
|
|
this.startCountdown();
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
startCountdown() {
|
|||
|
|
if (this.intervalId) {
|
|||
|
|
clearInterval(this.intervalId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.intervalId = setInterval(() => {
|
|||
|
|
if (this.remainingTime > 0) {
|
|||
|
|
this.remainingTime--;
|
|||
|
|
this.updatePaths();
|
|||
|
|
} else {
|
|||
|
|
postNUI('CraftingFinish', this.ActiveCrafting);
|
|||
|
|
this.setAllPathsToFinalColor();
|
|||
|
|
this.ActiveCrafting = {};
|
|||
|
|
clearInterval(this.intervalId);
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
updatePaths() {
|
|||
|
|
const totalPaths = this.paths.length;
|
|||
|
|
const timePerPath = this.totalTime / totalPaths;
|
|||
|
|
|
|||
|
|
this.paths = this.paths.map((path, index) => {
|
|||
|
|
const activationTime = this.totalTime - (index + 1) * timePerPath;
|
|||
|
|
|
|||
|
|
if (this.remainingTime <= activationTime) {
|
|||
|
|
return { ...path, color: "#35BF93", opacity: 1 };
|
|||
|
|
}
|
|||
|
|
return { ...path, color: "white", opacity: 0.2 };
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
setAllPathsToFinalColor() {
|
|||
|
|
this.paths = this.paths.map((path) => ({ ...path, color: "#35BF93" }));
|
|||
|
|
},
|
|||
|
|
StartPlugin(name) {
|
|||
|
|
if (this.ActivePlugin !== name) {
|
|||
|
|
this.Show.Cross = true;
|
|||
|
|
this.ActivePlugin = name;
|
|||
|
|
if (name !== 'Bomb') {
|
|||
|
|
const plugin = this.ActivePlugin.replace(' ', '');
|
|||
|
|
postNUI('ActivePlugin', plugin);
|
|||
|
|
} else {
|
|||
|
|
const plugin = this.ActivePlugin.replace(' ', '');
|
|||
|
|
this.Show.EnterTimer = true;
|
|||
|
|
this.Show.Plugins = false;
|
|||
|
|
postNUI('ActivePlugin', plugin);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
StartTimer() {
|
|||
|
|
const minutes = parseInt(document.getElementById('time-minutes').value);
|
|||
|
|
const seconds = parseInt(document.getElementById('time-seconds').value);
|
|||
|
|
|
|||
|
|
if (isNaN(minutes) || isNaN(seconds) || minutes < 0 || seconds < 0 || minutes > 10 || seconds > 59) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
postNUI('CloseMenu');
|
|||
|
|
|
|||
|
|
this.totalTime = minutes * 60 + seconds;
|
|||
|
|
this.Show.EnterTimer = false;
|
|||
|
|
this.Show.Timer = true;
|
|||
|
|
|
|||
|
|
if (this.intervalId) {
|
|||
|
|
clearInterval(this.intervalId);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.intervalId = setInterval(() => {
|
|||
|
|
if (this.totalTime == 2) {
|
|||
|
|
postNUI('LastTimerSecond');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.totalTime <= 0) {
|
|||
|
|
clearInterval(this.intervalId);
|
|||
|
|
postNUI('TimerFinish');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.totalTime--;
|
|||
|
|
this.displayTime();
|
|||
|
|
}, 1000);
|
|||
|
|
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.displayTime();
|
|||
|
|
}, 0);
|
|||
|
|
},
|
|||
|
|
displayTime() {
|
|||
|
|
const minutes = Math.floor(this.totalTime / 60);
|
|||
|
|
const seconds = this.totalTime % 60;
|
|||
|
|
document.getElementById('remaining-minutes').innerText = String(minutes).padStart(2, '0');
|
|||
|
|
document.getElementById('remaining-seconds').innerText = String(seconds).padStart(2, '0');
|
|||
|
|
},
|
|||
|
|
startDragging(e) {
|
|||
|
|
this.isDragging = true;
|
|||
|
|
this.startX = e.pageX - this.$refs.scrollableDiv.offsetLeft;
|
|||
|
|
this.scrollLeft = this.$refs.scrollableDiv.scrollLeft;
|
|||
|
|
this.$refs.scrollableDiv.style.cursor = "grabbing";
|
|||
|
|
},
|
|||
|
|
onDragging(e) {
|
|||
|
|
if (!this.isDragging) return;
|
|||
|
|
const x = e.pageX - this.$refs.scrollableDiv.offsetLeft;
|
|||
|
|
const walk = (x - this.startX) * 1; // Kaydırma hızı
|
|||
|
|
this.$refs.scrollableDiv.scrollLeft = this.scrollLeft - walk;
|
|||
|
|
},
|
|||
|
|
stopDragging() {
|
|||
|
|
this.isDragging = false;
|
|||
|
|
this.$refs.scrollableDiv.style.cursor = "grab";
|
|||
|
|
},
|
|||
|
|
OpenStoreToCraft() {
|
|||
|
|
this.Show.Store = false;
|
|||
|
|
this.Show.Craft = true;
|
|||
|
|
|
|||
|
|
this.ActiveCraft = this.Crafts[0];
|
|||
|
|
},
|
|||
|
|
OpenCraftToStore() {
|
|||
|
|
this.Show.Craft = false;
|
|||
|
|
this.Show.Store = true;
|
|||
|
|
|
|||
|
|
this.ActiveCar = this.Cars[0];
|
|||
|
|
},
|
|||
|
|
startTimer() {
|
|||
|
|
this.seconds = 0;
|
|||
|
|
this.timer = setInterval(() => {
|
|||
|
|
this.seconds++;
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
filteredProducts() {
|
|||
|
|
if (this.ActiveCategory.id === 'all') {
|
|||
|
|
return this.Cars;
|
|||
|
|
} else {
|
|||
|
|
if (this.Cars) {
|
|||
|
|
return this.Cars.filter(product => product.item.category === this.ActiveCategory.id);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
formattedTime() {
|
|||
|
|
const minutes = Math.floor(this.remainingTime / 60);
|
|||
|
|
const seconds = this.remainingTime % 60;
|
|||
|
|
return `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
|
|||
|
|
},
|
|||
|
|
getMinTime() {
|
|||
|
|
const minutes = Math.floor(this.remainingTime / 60);
|
|||
|
|
return minutes;
|
|||
|
|
},
|
|||
|
|
timers() {
|
|||
|
|
const hours = String(Math.floor(this.seconds / 3600)).padStart(2, '0');
|
|||
|
|
const minutes = String(Math.floor((this.seconds % 3600) / 60)).padStart(2, '0');
|
|||
|
|
const secs = String(this.seconds % 60).padStart(2, '0');
|
|||
|
|
return `${hours}:${minutes}:${secs}`;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
window.addEventListener("message", this.messageHandler);
|
|||
|
|
window.addEventListener("keyup", this.keyHandler);
|
|||
|
|
window.addEventListener("click", this.handleClickOutside);
|
|||
|
|
this.initializePaths();
|
|||
|
|
this.startTimer();
|
|||
|
|
},
|
|||
|
|
beforeDestroy() {
|
|||
|
|
window.removeEventListener("message", this.messageHandler);
|
|||
|
|
window.removeEventListener("click", this.handleClickOutside);
|
|||
|
|
window.removeEventListener("keyup", this.keyHandler);
|
|||
|
|
},
|
|||
|
|
beforeUnmount() {
|
|||
|
|
if (this.intervalId) {
|
|||
|
|
clearInterval(this.intervalId);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
app.mount("#app");
|
|||
|
|
|
|||
|
|
var resourceName = "0r-rccar";
|
|||
|
|
|
|||
|
|
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 await response.json()
|
|||
|
|
} catch (error) {
|
|||
|
|
return null;
|
|||
|
|
}
|
|||
|
|
};
|