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