1
0
Fork 0
forked from Simnation/Main
Main/resources/[Developer]/[Nordi]/0r-rccar/ui/index.js
2025-06-07 08:51:21 +02:00

614 lines
No EOL
24 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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;
}
};