const { ref, onBeforeUnmount } = Vue

const app = Vue.createApp({
  data: function() {
		return {
			isOutMapChecked: this.initIsOutMapChecked(),
      isOutCompassChecked: this.initIsOutCompassChecked(),
      isCompassFollowChecked: this.initIsCompassFollowChecked(),
      isMapNotifChecked: this.initIsMapNotifChecked(),
      isLowFuelChecked: this.initIsLowFuelChecked(),
      isCinematicNotifChecked: this.initIsCinematicNotifChecked(),
      isDynamicHealthChecked: this.initIsDynamicHealthChecked(),
      isDynamicArmorChecked: this.initIsDynamicArmorChecked(),
      isDynamicHungerChecked: this.initIsDynamicHungerChecked(),
      isDynamicThirstChecked: this.initIsDynamicThirstChecked(),
      isDynamicStressChecked: this.initIsDynamicStressChecked(),
      isDynamicOxygenChecked: this.initIsDynamicOxygenChecked(),
      isChangeFPSChecked: this.initIsChangeFPSChecked(),
      isToggleMapShapeChecked: this.initIsToggleMapShapeChecked(),
      isHideMapChecked: this.initIsHideMapChecked(),
      isToggleMapBordersChecked: this.initIsToggleMapBordersChecked(),
      isDynamicEngineChecked: this.initIsDynamicEngineChecked(),
      isDynamicNitroChecked: this.initIsDynamicNitroChecked(),
      isChangeCompassFPSChecked: this.initIsChangeCompassFPSChecked(),
      isShowCompassChecked: this.initIsShowCompassChecked(),
      isShowStreetsChecked: this.initIsShowStreetsChecked(),
      isPointerShowChecked: this.initIsPointerShowChecked(),
      isDegreesShowChecked: this.initIsDegreesShowChecked(),
      isCineamticModeChecked: this.initIsCineamticModeChecked(),
		};
	},
  setup () {
    const progress = ref([
      { loading: false, percentage: 0 },
      { loading: false, percentage: 0 },
      { loading: false, percentage: 0 }
    ])
    
    const intervals = [ null, null, null ]

    function startComputing (id) {
      progress.value[ id ].loading = true
      progress.value[ id ].percentage = 0

      intervals[ id ] = setInterval(() => {
        progress.value[ id ].percentage += Math.floor(Math.random() * 8 + 10)
        if (progress.value[ id ].percentage >= 100) {
          clearInterval(intervals[ id ])
          progress.value[ id ].loading = false
        }
      }, 700)
    }

    onBeforeUnmount(() => {
      intervals.forEach(val => {
        clearInterval(val)
      })
    }) 
    return {
      framework: {
        plugins: [
          'LocalStorage',
          'SessionStorage'
        ]
      },
      tab: ref('hud'),
      splitterModel: ref(20),
      selection: ref([]),
      progress,
      startComputing,
    }
  },
  watch: {
    isOutMapChecked: function() {
			localStorage.setItem("isOutMapChecked", this.isOutMapChecked);
		},
    isOutCompassChecked: function() {
			localStorage.setItem("isOutCompassChecked", this.isOutCompassChecked);
		},
    isCompassFollowChecked: function() {
			localStorage.setItem("isCompassFollowChecked", this.isCompassFollowChecked);
		},
    isMapNotifChecked: function() {
			localStorage.setItem("isMapNotifChecked", this.isMapNotifChecked);
		},
    isLowFuelChecked: function() {
			localStorage.setItem("isLowFuelChecked", this.isLowFuelChecked);
		},
    isCinematicNotifChecked: function() {
			localStorage.setItem("isCinematicNotifChecked", this.isCinematicNotifChecked);
		},
    isDynamicHealthChecked: function() {
			localStorage.setItem("isDynamicHealthChecked", this.isDynamicHealthChecked);
		},
    isDynamicArmorChecked: function() {
			localStorage.setItem("isDynamicArmorChecked", this.isDynamicArmorChecked);
		},
    isDynamicHungerChecked: function() {
			localStorage.setItem("isDynamicHungerChecked", this.isDynamicHungerChecked);
		},
    isDynamicThirstChecked: function() {
			localStorage.setItem("isDynamicThirstChecked", this.isDynamicThirstChecked);
		},
    isDynamicStressChecked: function() {
			localStorage.setItem("isDynamicStressChecked", this.isDynamicStressChecked);
		},
    isDynamicOxygenChecked: function() {
			localStorage.setItem("isDynamicOxygenChecked", this.isDynamicOxygenChecked);
		},
    isChangeFPSChecked: function() {
			localStorage.setItem("isChangeFPSChecked", this.isChangeFPSChecked);
		},
    isToggleMapShapeChecked: function() {
			localStorage.setItem("isToggleMapShapeChecked", this.isToggleMapShapeChecked);
		},
    isHideMapChecked: function() {
			localStorage.setItem("isHideMapChecked", this.isHideMapChecked);
		},
    isToggleMapBordersChecked: function() {
			localStorage.setItem("isToggleMapBordersChecked", this.isToggleMapBordersChecked);
		},
    isDynamicEngineChecked: function() {
			localStorage.setItem("isDynamicEngineChecked", this.isDynamicEngineChecked);
		},
    isDynamicNitroChecked: function() {
			localStorage.setItem("isDynamicNitroChecked", this.isDynamicNitroChecked);
		},
    isChangeCompassFPSChecked: function() {
			localStorage.setItem("isChangeCompassFPSChecked", this.isChangeCompassFPSChecked);
		},
    isShowCompassChecked: function() {
			localStorage.setItem("isShowCompassChecked", this.isShowCompassChecked);
		},
    isShowStreetsChecked: function() {
			localStorage.setItem("isShowStreetsChecked", this.isShowStreetsChecked);
		},
    isPointerShowChecked: function() {
			localStorage.setItem("isPointerShowChecked", this.isPointerShowChecked);
		},
    isDegreesShowChecked: function() {
			localStorage.setItem("isDegreesShowChecked", this.isDegreesShowChecked);
		},
    isCineamticModeChecked: function() {
			localStorage.setItem("isCineamticModeChecked", this.isCineamticModeChecked);
		},
	},
  methods: {
    initIsOutMapChecked: function() {
			const stored = localStorage.getItem("isOutMapChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsOutCompassChecked: function() {
			const stored = localStorage.getItem("isOutCompassChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsCompassFollowChecked: function() {
			const stored = localStorage.getItem("isCompassFollowChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsMapNotifChecked: function() {
			const stored = localStorage.getItem("isMapNotifChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsLowFuelChecked: function() {
			const stored = localStorage.getItem("isLowFuelChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsCinematicNotifChecked: function() {
			const stored = localStorage.getItem("isCinematicNotifChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsDynamicHealthChecked: function() {
			const stored = localStorage.getItem("isDynamicHealthChecked");
			if (stored === null) {
				return false;
			} else {
				return stored == 'true';
			}
		},
    initIsDynamicArmorChecked: function() {
			const stored = localStorage.getItem("isDynamicArmorChecked");
			if (stored === null) {
				return false;
			} else {
				return stored == 'true';
			}
		},
    initIsDynamicHungerChecked: function() {
			const stored = localStorage.getItem("isDynamicHungerChecked");
			if (stored === null) {
				return false;
			} else {
				return stored == 'true';
			}
		},
    initIsDynamicThirstChecked: function() {
			const stored = localStorage.getItem("isDynamicThirstChecked");
			if (stored === null) {
				return false;
			} else {
				return stored == 'true';
			}
		},
    initIsDynamicStressChecked: function() {
			const stored = localStorage.getItem("isDynamicStressChecked");
			if (stored === null) {
				return false;
			} else {
				return stored == 'true';
			}
		},
    initIsDynamicOxygenChecked: function() {
			const stored = localStorage.getItem("isDynamicOxygenChecked");
			if (stored === null) {
				return false;
			} else {
				return stored == 'true';
			}
		},
    initIsChangeFPSChecked: function() {
			const stored = localStorage.getItem("isChangeFPSChecked");
			if (stored === null) {
				return 'Optimized';
			} else {
				return stored;
			}
		}, 
    initIsToggleMapShapeChecked: function() {
			const stored = localStorage.getItem("isToggleMapShapeChecked");
			if (stored === null) {
				return 'Circle';
			} else {
				return stored;
			}
		},
    initIsHideMapChecked: function() {
			const stored = localStorage.getItem("isHideMapChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsToggleMapBordersChecked: function() {
			const stored = localStorage.getItem("isToggleMapBordersChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsDynamicEngineChecked: function() {
			const stored = localStorage.getItem("isDynamicEngineChecked");
			if (stored === null) {
				return false;
			} else {
				return stored == 'true';
			}
		},
    initIsDynamicNitroChecked: function() {
			const stored = localStorage.getItem("isDynamicNitroChecked");
			if (stored === null) {
				return false;
			} else {
				return stored == 'true';
			}
		},
    initIsChangeCompassFPSChecked: function() {
			const stored = localStorage.getItem("isChangeCompassFPSChecked");
			if (stored === null) {
				return 'Optimized';
			} else {
				return stored;
			}
		}, 
    initIsShowCompassChecked: function() {
			const stored = localStorage.getItem("isShowCompassChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsShowStreetsChecked: function() {
			const stored = localStorage.getItem("isShowStreetsChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsPointerShowChecked: function() {
			const stored = localStorage.getItem("isPointerShowChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsDegreesShowChecked: function() {
			const stored = localStorage.getItem("isDegreesShowChecked");
			if (stored === null) {
				return true;
			} else {
				return stored == 'true';
			}
		},
    initIsCineamticModeChecked: function() {
			const stored = localStorage.getItem("isCineamticModeChecked");
			if (stored === null) {
				return false;
			} else {
				return stored == 'true';
			}
		},
    resetStorage: function(event) {
      targetId = event.currentTarget.id;
      localStorage.clear();
      resetStorage()
    },
    restartHud: function(event) {
      targetId = event.currentTarget.id;
      restartHud()
    },
    showOutMap: function(event) {
      targetId = event.currentTarget.id;
      showOutMap()
    },
    showOutCompass: function(event) {
      targetId = event.currentTarget.id;
      showOutCompass()
    },
    showFollowCompass: function(event) {
      targetId = event.currentTarget.id;
      showFollowCompass()
    },
    showMapNotif: function(event) {
      targetId = event.currentTarget.id;
      showMapNotif()
    },
    showFuelAlert: function(event) {
      targetId = event.currentTarget.id;
      showFuelAlert()
    },
    showCinematicNotif: function(event) {
      targetId = event.currentTarget.id;
      showCinematicNotif()
    },
    dynamicHealth: function(event) {
      targetId = event.currentTarget.id;
      dynamicHealth()
    },
    dynamicArmor: function(event) {
      targetId = event.currentTarget.id;
      dynamicArmor()
    },
    dynamicHunger: function(event) {
      targetId = event.currentTarget.id;
      dynamicHunger()
    },
    dynamicThirst: function(event) {
      targetId = event.currentTarget.id;
      dynamicThirst()
    },
    dynamicStress: function(event) {
      targetId = event.currentTarget.id;
      dynamicStress()
    },
    dynamicOxygen: function(event) {
      targetId = event.currentTarget.id;
      dynamicOxygen()
    },
    changeFPS: function(event) {
      targetId = event.currentTarget.id;
      changeFPS()
    },
    ToggleMapShape: function(event) {
      targetId = event.currentTarget.id;
      ToggleMapShape()
    },
    HideMap: function(event) {
      targetId = event.currentTarget.id;
      HideMap()
    },
    ToggleMapBorders: function(event) {
      targetId = event.currentTarget.id;
      ToggleMapBorders()
    },
    dynamicEngine: function(event) {
      targetId = event.currentTarget.id;
      dynamicEngine()
    },
    dynamicNitro: function(event) {
      targetId = event.currentTarget.id;
      dynamicNitro()
    },
    changeCompassFPS: function(event) {
      targetId = event.currentTarget.id;
      changeCompassFPS()
    },
    showCompassBase: function(event) {
      targetId = event.currentTarget.id;
      showCompassBase()
    },
    showStreetsNames: function(event) {
      targetId = event.currentTarget.id;
      showStreetsNames()
    },
    showPointerIndex: function(event) {
      targetId = event.currentTarget.id;
      showPointerIndex()
    },
    showDegreesNum: function(event) {
      targetId = event.currentTarget.id;
      showDegreesNum()
    },
    cinematicMode: function(event) {
      targetId = event.currentTarget.id;
      cinematicMode()
    },
  },
  mounted() {
    this.listener = window.addEventListener("message", (event) => {
        if (event.data.event === 'isToggleMapShapeChecked' || event.data.event === 'isChangeFPSChecked') {
          eval(`this.${event.data.event} = "${event.data.toggle}"`)
        }
    });
  },
})

app.use(Quasar, { config: {} })
app.mount('#menu')

document.onkeyup = function (data) {
  if (data.key == 'Escape') {
    closeMenu()
  }
};

function closeMenu() {
  $("#openmenu").fadeOut(550);
  $.post(`https://${GetParentResourceName()}/closeMenu`);
}
function restartHud() {
  closeMenu()
  $.post(`https://${GetParentResourceName()}/restartHud`);
}
function resetStorage() {
  closeMenu()
  $.post(`https://${GetParentResourceName()}/resetStorage`);
}
function showOutMap() {
  $.post(`https://${GetParentResourceName()}/showOutMap`);
}
function showOutCompass() {
  $.post(`https://${GetParentResourceName()}/showOutCompass`);
}
function showFollowCompass() {
  $.post(`https://${GetParentResourceName()}/showFollowCompass`);
}
function showMapNotif() {
  $.post(`https://${GetParentResourceName()}/showMapNotif`);
}
function showFuelAlert() {
  $.post(`https://${GetParentResourceName()}/showFuelAlert`);
}
function showCinematicNotif() {
  $.post(`https://${GetParentResourceName()}/showCinematicNotif`);
}
function dynamicHealth() {
  $.post(`https://${GetParentResourceName()}/dynamicHealth`);
}
function dynamicArmor() {
  $.post(`https://${GetParentResourceName()}/dynamicArmor`);
}
function dynamicHunger() {
  $.post(`https://${GetParentResourceName()}/dynamicHunger`);
}
function dynamicThirst() {
  $.post(`https://${GetParentResourceName()}/dynamicThirst`);
}
function dynamicStress() {
  $.post(`https://${GetParentResourceName()}/dynamicStress`);
}
function dynamicOxygen() {
  $.post(`https://${GetParentResourceName()}/dynamicOxygen`);
}
function dynamicEngine() {
  $.post(`https://${GetParentResourceName()}/dynamicEngine`);
}
function dynamicNitro() {
  $.post(`https://${GetParentResourceName()}/dynamicNitro`);
}
function ToggleMapShape() {
  $.post(`https://${GetParentResourceName()}/ToggleMapShape`);
}
function changeFPS() {
  $.post(`https://${GetParentResourceName()}/changeFPS`);
}
function ToggleMapBorders() {
  $.post(`https://${GetParentResourceName()}/ToggleMapBorders`);
}
function HideMap() {
  $.post(`https://${GetParentResourceName()}/HideMap`);
}
function changeCompassFPS() {
  $.post(`https://${GetParentResourceName()}/changeCompassFPS`);
}
function showCompassBase() {
  $.post(`https://${GetParentResourceName()}/showCompassBase`);
}
function showStreetsNames() {
  $.post(`https://${GetParentResourceName()}/showStreetsNames`);
}
function showPointerIndex() {
  $.post(`https://${GetParentResourceName()}/showPointerIndex`);
}
function showDegreesNum() {
  $.post(`https://${GetParentResourceName()}/showDegreesNum`);
}
function cinematicMode() {
  $.post(`https://${GetParentResourceName()}/cinematicMode`);
}

$(document).ready(function () {
  window.addEventListener("message", function (event) {
    switch (event.data.action) {
    case "open":
      Open(event.data);
      break;
    }
  });
});

Open = function (data) {
  $("#openmenu").fadeIn(150);
}
$('.closeMenu').click(() => {
  closeMenu()
});

// MONEY HUD

const moneyHud = Vue.createApp({
  data() {
    return {
      cash: 0,
      bank: 0,
      amount: 0,
      plus: false,
      minus: false,
      showCash: false,
      showBank: false,
      showUpdate: false,
    };
  },
  destroyed() {
    window.removeEventListener("message", this.listener);
  },
  mounted() {
    this.listener = window.addEventListener("message", (event) => {
      switch (event.data.action) {
        case "showconstant":
          this.showConstant(event.data);
          break;
        case "updatemoney":
          this.update(event.data);
          break;
        case "show":
          this.showAccounts(event.data);
          break;
      }
    });
  },
  methods: {
    // CONFIGURE YOUR CURRENCY HERE
    // https://www.w3schools.com/tags/ref_language_codes.asp LANGUAGE CODES
    // https://www.w3schools.com/tags/ref_country_codes.asp COUNTRY CODES
    formatMoney(value) {
      const formatter = new Intl.NumberFormat("en-US", {
        style: "currency",
        currency: "USD",
        minimumFractionDigits: 0,
      });
      return formatter.format(value);
    },
    showConstant(data) {
      this.showCash = true;
      this.showBank = true;
      this.cash = data.cash;
      this.bank = data.bank;
    },
    update(data) {
      this.showUpdate = true;
      this.amount = data.amount;
      this.bank = data.bank;
      this.cash = data.cash;
      this.minus = data.minus;
      this.plus = data.plus;
      if (data.type === "cash") {
        if (data.minus) {
          this.showCash = true;
          this.minus = true;
          setTimeout(() => (this.showUpdate = false), 1000);
          setTimeout(() => (this.showCash = false), 2000);
        } else {
          this.showCash = true;
          this.plus = true;
          setTimeout(() => (this.showUpdate = false), 1000);
          setTimeout(() => (this.showCash = false), 2000);
        }
      }
      if (data.type === "bank") {
        if (data.minus) {
          this.showBank = true;
          this.minus = true;
          setTimeout(() => (this.showUpdate = false), 1000);
          setTimeout(() => (this.showBank = false), 2000);
        } else {
          this.showBank = true;
          this.plus = true;
          setTimeout(() => (this.showUpdate = false), 1000);
          setTimeout(() => (this.showBank = false), 2000);
        }
      }
    },
    showAccounts(data) {
      if (data.type === "cash" && !this.showCash) {
        this.showCash = true;
        this.cash = data.cash;
        setTimeout(() => (this.showCash = false), 3500);
      } else if (data.type === "bank" && !this.showBank) {
        this.showBank = true;
        this.bank = data.bank;
        setTimeout(() => (this.showBank = false), 3500);
      }
    },
  },
}).mount("#money-container");

// PLAYER HUD

const playerHud = {
  data() {
    return {
      dynamicHealth: 0,
      dynamicHunger: 0,
      dynamicThirst: 0,
      dynamicStress: 0,
      dynamicOxygen: 0,
      dynamicEngine: 0,
      dynamicNitro: 0,
      nos: 0,
      static: 100,
      health: 0,
      playerDead: 0,
      armor: 0,
      hunger: 0,
      thirst: 0,
      stress: 0,
      voice: 0,
      radio: 0,
      harness: 0,
      nitroActive: 0,
      cruise: 0,
      parachute: 0,
      oxygen: 0,
      hp: 0,
      armed: 0,
      speed: 0,
      engine: 0,
      cinematic: 0,
      dev: 0,
      show: false,
      talking: false,
      showVoice: true,
      showHealth: false,
      showArmor: true,
      showHunger: true,
      showThirst: true,
      showNos: true,
      showStress: true,
      showOxygen: false,
      showArmed: true,
      showEngine: false,
      showCruise: false,
      showHarness: false,
      showParachute: false,
      showDev: false,
      voiceIcon: "fas fa-microphone",
      talkingColor: "#FFFFFF",
      nosColor: "",
      engineColor: "",
      armorColor: "",
      hungerColor: "",
      healthColor: "",
      thirstColor: "",
    };
  },
  
  destroyed() {
    window.removeEventListener("message", this.listener);
  },
  mounted() {
    this.listener = window.addEventListener("message", (event) => {
      if (event.data.action === "hudtick") {
        this.hudTick(event.data);
      } 
      // else if(event.data.update) {
      //   eval(event.data.action + "(" + event.data.show + ')')
      // }
    });
    Config = {};
  },
  methods: {
    hudTick(data) {
      this.show = data.show;
      this.health = data.health;
      this.armor = data.armor;
      this.hunger = data.hunger;
      this.thirst = data.thirst;
      this.stress = data.stress;
      this.voice = data.voice;
      this.talking = data.talking;
      this.radio = data.radio;
      this.nos = data.nos;
      this.oxygen = data.oxygen;
      this.cruise = data.cruise;
      this.nitroActive = data.nitroActive;
      this.harness = data.harness;
      this.speed = data.speed;
      this.armed = data.armed;
      this.parachute = data.parachute;
      this.hp = data.hp*5;
      this.engine = data.engine;
      this.cinematic = data.cinematic;
      this.dev = data.dev;
      this.playerDead = data.playerDead;
      this.dynamicHealth = data.dynamicHealth;
      this.dynamicArmor = data.dynamicArmor;
      this.dynamicHunger = data.dynamicHunger;
      this.dynamicThirst = data.dynamicThirst;
      this.dynamicStress = data.dynamicStress;
      this.dynamicOxygen = data.dynamicOxygen;
      this.dynamicEngine = data.dynamicEngine;
      this.dynamicNitro = data.dynamicNitro;

      if (data.dynamicHealth == true) {
        if (data.health >= 100) {
          this.showHealth = false; }
          else{
            this.showHealth = true;
          }
      } else if (data.dynamicHealth == false){
        this.showHealth = true;
      } 
      if (data.playerDead === false) {
        this.healthColor = "#3FA554";
      } else {
        this.healthColor = "#ff0000";
        this.health = 100;
      }

      if (data.dynamicArmor == true) {
        if (data.armor == 0) {
          this.showArmor = false; 
        }  else {
            this.showArmor = true;
          }
      } else if (data.dynamicArmor == false){
        this.showArmor = true;
      } 

      if (data.armor <= 0) {
        this.armorColor = "#FF0000";
      } else {
        this.armorColor = "#326dbf";
      }

      if (data.dynamicHunger == true) {
        if (data.hunger >= 100) {
          this.showHunger = false; }
          else{
            this.showHunger = true;
          }
      } else if (data.dynamicHunger == false){
        this.showHunger = true;
      } 
      if (data.hunger >= 100) {
        this.hungerColor = "#dd6e14";
      } else if(data.hunger <= 30){
        this.hungerColor = "#ff0000";
      } else{
        this.hungerColor = "#dd6e14";
      }

      if (data.dynamicThirst == true) {
        if (data.thirst >= 100) {
          this.showThirst = false; }
          else{
            this.showThirst = true;
          }
      } else if (data.dynamicThirst == false){
        this.showThirst = true;
      } 
      if (data.thirst >= 100) {
        this.thirstColor = "#1a7cad";
      } else if(data.thirst <= 30){
        this.thirstColor = "#ff0000";
      } else{
        this.thirstColor = "#1a7cad";
      }

      if (data.dynamicStress == true) {
        if (data.stress == 0) {
          this.showStress = false; 
        }  else {
            this.showStress = true;
          }
      } else if (data.dynamicStress == false){
        this.showStress = true;
      } 

      if (data.dynamicOxygen == true) {
        if (data.oxygen >= 100) {
          this.showOxygen = false; }
          else{
            this.showOxygen = true;
          }
      } else if (data.dynamicOxygen == false){
        this.showOxygen = true;
      } 

      if (data.dynamicEngine == true) {
        if (data.engine >= 95) {
          this.showEngine = false; 
        } else if  (data.engine < 0){
          this.showEngine = false;} else {this.showEngine = true;}
      } else if (data.dynamicEngine == false){
        if  (data.engine < 0) {
          this.showEngine = false;} else {this.showEngine = true;}
      } 
      if (data.engine <= 45) {
        this.engineColor = "#ff0000";
      } else if (data.engine <= 75 && data.engine >= 46 ) {
        this.engineColor = "#dd6e14";
      } else if(data.engine<=100) {
        this.engineColor = "#3FA554";
      } 

      if (data.dynamicNitro == true) {
      if (data.nos === 0 || data.nos === undefined) {
        this.showNos = false;
      } else if  (data.nos < 0){
        this.showNos = false;} else {this.showNos = true;}  
      } else if  (data.dynamicNitro == false)  {
        if  (data.nos < 0){
          this.showNos = false;
      } else {this.showNos = true;}
      }
      if (data.nitroActive) {
        this.nosColor = "#D64763";
      } else {
        this.nosColor = "#FFFFFF";
      }

      if (data.talking && data.radio) {
        this.talkingColor = "#D64763";
      } else if (data.talking) {
        this.talkingColor = '#FFFF3E';
      } else {
        this.talkingColor = "#FFFFFF";
      }
      if (data.radio != 0 && data.radio != undefined) {
        this.voiceIcon = 'fas fa-headset';
      } else if (data.radio == 0 || data.radio == undefined) {
        this.voiceIcon = 'fas fa-microphone';
      }
      if (data.cruise === true) {
        this.cruise = 1;
        this.showCruise = true;
      } else {
        this.cruise = 0;
        this.showCruise = false;
      }

      if (data.harness === true) {
        this.showHarness = true;
      } else {
        this.showHarness = false;
      }
      if (data.armed === true) {
        this.showArmed = true;
      } else {
        this.showArmed = false;
      }

      if (data.parachute >= 0 ) {
        this.showParachute = true;
      } else {
        this.showParachute = false;
      }

      if (data.dev === true ) {
        this.showDev = true;
      } else {
        this.showDev = false;
      }

      if (data.isPaused === 1) {
        this.show = false;
      }
    },
  },
};
const app2 = Vue.createApp(playerHud);
app2.use(Quasar);
app2.mount("#ui-container");

// VEHICLE HUD

const vehHud = {
  data() {
    return {
      speedometer: 66,
      fuelgauge: 69,
      altitudegauge: 75,
      fuel: 0,
      speed: 0,
      seatbelt: 0,
      showSquareB: 0,
      show: false,
      showAltitude: true,
      showSeatbelt: true,
      showSquare: false,
      showCircle: false,
      seatbeltColor: "",
    };
  },
  
  destroyed() {
    window.removeEventListener("message", this.listener);
  },
  mounted() {
    this.listener = window.addEventListener("message", (event) => {
      if (event.data.action === "car") {
        this.vehicleHud(event.data);
      }
    });
  },
  methods: {
    vehicleHud(data) {
      this.show = data.show;
      this.speed = data.speed;
      this.altitude = data.altitude;
      this.fuel = (data.fuel * 0.71);
      this.showSeatbelt = data.showSeatbelt;
      this.showAltitude = data.showAltitude;
      this.showSquareB = data.showSquareB;
      this.showCircleB = data.showCircleB;
      if (data.seatbelt === true) {
        this.seatbelt = 1;
        this.seatbeltColor = "transparent";
      } else {
        this.seatbelt = 0;
        this.seatbeltColor = "#FF5100";
      }
      if (data.showSeatbelt === true) {
        this.showSeatbelt = true;
      } else {
        this.showSeatbelt = false;
      }
      if (data.showAltitude === true) {
        this.showAltitude = true;
      } else {
        this.showAltitude = false;
      }
      if (data.fuel <= 20) {
        this.fuelColor = "#ff0000";
      } else if (data.fuel <= 30) {
        this.fuelColor = "#dd6e14";
      } else {
        this.fuelColor = "#FFFFFF";
      }
      if (data.showSquareB === true) {
        this.showSquare = true;
      } else {
        this.showSquare = false;
      }
      if (data.showCircleB === true) {
        this.showCircle = true;
      } else {
        this.showCircle = false;
      }
      if (data.isPaused === 1) {
        this.show = false;
      }
    },
  },
};
const app3 = Vue.createApp(vehHud);
app3.use(Quasar);
app3.mount("#veh-container");

// COMPASS HUD

const baseplateHud = {
  data() {
    return {
      show: false,
      street1: "",
      street2: "",
      showCompass: true,
      showStreets: true,
      showPointer: true,
      showDegrees: true,
    };
  },
  destroyed() {
    window.removeEventListener("message", this.listener);
  },
  mounted() {
    this.listener = window.addEventListener("message", (event) => {
      if (event.data.action == "update") {
        type = event.data.type
        value = event.data.value
          if (value  !== undefined) {
            $('.degrees').html(value);
            bar = document.getElementsByTagName("svg")[0];
            bar.setAttribute("viewBox", ''+ (value - 90) + ' 0 180 5');
            heading = document.getElementsByTagName("svg")[1];
            heading.setAttribute("viewBox", ''+ (value - 90) + ' 0 180 1.5');
          }
        }
      if (event.data.action === "baseplate") {
        this.baseplateHud(event.data);
      }
    });
  },
  methods: {
    baseplateHud(data) {
      this.show = data.show;
      this.street1 = data.street1;
      this.street2 = data.street2;
      this.showCompass = data.showCompass;
      this.showStreets = data.showStreets;
      this.showPointer = data.showPointer;
      this.showDegrees = data.showDegrees;
      if (data.showCompass == true) {
        this.showCompass = true;
      } else {
        this.showCompass = false;
      }
      if (data.showStreets == true) {
        this.showStreets = true;
      } else {
        this.showStreets = false;
      }
      if (data.showPointer == true) {
        this.showPointer = true;
      } else {
        this.showPointer = false;
      }
      if (data.showDegrees == true) {
        this.showDegrees = true;
      } else {
        this.showDegrees = false;
      }
    },
  },
};
const app4 = Vue.createApp(baseplateHud);
app4.use(Quasar);
app4.mount("#baseplate-container");