614 lines
		
	
	
		
			No EOL
		
	
	
		
			24 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			614 lines
		
	
	
		
			No EOL
		
	
	
		
			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;
 | ||
|     }
 | ||
| }; | 
