Merge pull request #61 from esx-framework/add-seatbelt-feature

📦 Add seatbelt feature to esx_hud
esx-framework · Jul 23, 2023 · 2af42d6 · 2af42d6
2 parents d10ddc0 + a0fbd18
commit 2af42d6
Show file tree

Hide file tree

Showing 13 changed files with 96 additions and 13 deletions.
diff --git a/client/vehicle/main.lua b/client/vehicle/main.lua
@@ -1,5 +1,6 @@
 local cruiseControlStatus = false
 local isPassenger = false
+local isSeatbeltOn = false
 
 local function SetCruiseControlState(state)
     cruiseControlStatus = state
@@ -9,6 +10,16 @@ exports("CruiseControlState", function(...)
     SetCruiseControlState(...)
 end)
 
+local function SetSeatbeltState(state)
+    isSeatbeltOn = state
+end
+
+exports("SeatbeltState",function(...)
+    SetSeatbeltState(...)
+end)
+
+
+
 if not Config.Disable.Vehicle then
     local inVehicle, vehicleType, playerPos = false, nil, nil
     local currentMileage = 0
@@ -100,6 +111,7 @@ if not Config.Disable.Vehicle then
                 values.damage = engineHealth
                 values.vehType = vehicleType
                 values.driver = HUD.Data.Driver
+                values.defaultIndicators.seatbelt = isSeatbeltOn
                 values.defaultIndicators.tempomat = cruiseControlStatus
                 values.defaultIndicators.door = doorLockStatus
                 values.defaultIndicators.light = lightState

diff --git a/shared/config.lua b/shared/config.lua
@@ -37,6 +37,7 @@ Config = {
             ["speedo-outer-circle-color"] = "#242222",
             ["speedo-nooble-color"] = "#48a3cb",
             ["speedo-nooble-container"] = "#1f2937",
+            ["speedo-seatbelt-icon-color"] = "#D22B2B"
         },
     },
     Disable = {
@@ -48,6 +49,7 @@ Config = {
         Money = false,
         Info = false,
         IndicatorSound = false, --vehicle index sound
+        IndicatorSeatbeltSound = false, --seatbelt sound
         VehicleHandlers = false, -- Engine toggle, Indicator lights
         MinimapOnFoot = false,
         Needle = true,

diff --git a/web/DefaultDatas.js b/web/DefaultDatas.js
@@ -14,6 +14,7 @@ let disableDefaultConfig = {
     Money: false,
     Info: false,
     IndicatorSound: false,
+    IndicatorSeatbeltSound: false,
     VehicleHandlers: false,
     MinimapOnFoot: false,
     Needle: false,
@@ -223,6 +224,10 @@ const speedoDefaultColors = [
         name: "speedo-nooble-container",
         color: "#1f2937",
     },
+    {
+        name: "speedo-seatbelt-icon-color",
+        color: "#D22B2B"
+    }
 ];
 
 const allColors = {

diff --git a/web/src/assets/Components/SettingsPanel/SettingsPanel.jsx b/web/src/assets/Components/SettingsPanel/SettingsPanel.jsx
@@ -147,7 +147,7 @@ export const SettingsPanel = () =>{
 
     return(
         <>
-            <div class={`relative bg-[#17191A] w-[600px] rounded-[25px] pb-4 ease-in duration-500 z-30 ${showPanel() ? 'slideDown' : 'slideUp'}`}>
+            <div class={`relative bg-[#17191A] w-[650px] rounded-[25px] pb-4 ease-in duration-500 z-30 ${showPanel() ? 'slideDown' : 'slideUp'}`}>
                 <MainPage currentPath={currentPath} onMenuClick={handleMenuClick}/>
                 <SaveResetButtons toggleShowPanel={toggleShowPanel} showEdit={showEdit()} currentSelectedMenu={selectedMenuName()} selectedName={currentSelectedElementName()} onSaveAndResetButtonClick={handleClickSaveAndReset}/>
                 <Routes>

diff --git a/web/src/assets/Components/SettingsPanel/pages/SpeedoTemplate.jsx b/web/src/assets/Components/SettingsPanel/pages/SpeedoTemplate.jsx
@@ -16,7 +16,7 @@ export const SpeedoTemplate = (props) => {
 
     return (
         <div class="flex flex-col gap-5">
-            <div class="flex px-5">
+            <div class="flex px-5 gap-[3rem]">
                 <div class="relative z-10 p-2 flex flex-col gap-6 overflow-auto max-h-72">
                     <For each={speedoColors}>{(progress, i) =>
                         <div class="flex justify-between items-center gap-2">
@@ -34,4 +34,4 @@ export const SpeedoTemplate = (props) => {
             </div>
         </div>
     );
-};
+};
diff --git a/web/src/assets/Components/Speedo.css b/web/src/assets/Components/Speedo.css
@@ -24,6 +24,7 @@
     --speedo-nooble-color: #48a3cb;
     --speedo-nooble-container: #1f2937;
     --speedo-scale-size: 0.9;
+    --speedo-seatbelt-icon-color: #D22B2B;
 }
 
 /* SVG DONT'T TOUCH PLEASE THANK YOU */
@@ -162,6 +163,10 @@
     fill: var(--fuel-icon-color);
 }
 
+.seatbeltIconColor{
+    fill: var(--speedo-seatbelt-icon-color);
+}
+
 .indexColor {
     fill: var(--left-right-index-color);
 }

diff --git a/web/src/assets/Components/Speedo.jsx b/web/src/assets/Components/Speedo.jsx
@@ -2,6 +2,9 @@ import './Speedo.css'
 import {createEffect, createSignal, onCleanup, Show} from "solid-js";
 
 import Sound from '../IndicatorSound.mp3'
+import SeatbeltAlert from '../SeatbeltAlertSound.mp3';
+import SeatbeltOff from '../SeatbeltOffSound.mp3';
+import SeatbeltOn from '../SeatbeltOnSound.mp3';
 import {useHudStorageState} from "../Contexts/HudStorage";
 import {useSettingsStorageState} from "../Contexts/SettingsStorage";
 
@@ -129,6 +132,9 @@ const LightIcon = (props) => <svg class={`absolute ${props?.vehType ? 'right-[11
 const EngineIcon = (props) =><svg class="absolute left-[67px] bottom-[34px]"  width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path class="engineIcon" d="M7.08691 4.862V6.862H10.0869V8.862H7.08691L5.08691 10.862V13.862H3.08691V10.862H1.08691V18.862H3.08691V15.862H5.08691V18.862H8.08691L10.0869 20.862H18.0869V16.862H20.0869V19.862H23.0869V9.862H20.0869V12.862H18.0869V8.862H12.0869V6.862H15.0869V4.862H7.08691Z" fill-opacity={props?.state ? '1' : '0.5'}/>
 </svg>
+const SeatbeltIcon = (props) => <svg width="45" height="45" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path class={` ${props?.state() ?  "blinkerOn" : "" } blink seatbeltIconColor`} d="M6.4623 0C6.86228 0 7.24587 0.158891 7.5287 0.441718C7.81153 0.724546 7.97042 1.10814 7.97042 1.50812C7.97042 2.34513 7.2993 3.01624 6.4623 3.01624C6.06232 3.01624 5.67872 2.85735 5.39589 2.57452C5.11307 2.2917 4.95418 1.9081 4.95418 1.50812C4.95418 1.10814 5.11307 0.724546 5.39589 0.441718C5.67872 0.158891 6.06232 0 6.4623 0ZM6.75638 9.64443C7.82752 9.64026 8.89787 9.70322 9.96114 9.83295C10.0064 7.7819 9.82541 5.97216 9.47854 5.27842C9.38051 5.07483 9.24478 4.90139 9.10151 4.75058L3.01624 9.96868C4.04176 9.80278 5.33121 9.64443 6.75638 9.64443ZM3.03886 11.3109C3.13689 12.623 3.33295 13.9501 3.64965 15.0812H5.21056C4.99188 14.4176 4.83353 13.641 4.71288 12.819C4.71288 12.819 6.4623 12.4872 8.21172 12.819C8.09107 13.641 7.93271 14.4176 7.71404 15.0812H9.27494C9.60673 13.9124 9.80278 12.5249 9.90081 11.1526C8.85742 11.0264 7.80737 10.9635 6.75638 10.964C5.30104 10.964 4.03422 11.1224 3.03886 11.3109ZM6.4623 3.7703C6.4623 3.7703 4.20012 3.7703 3.44606 5.27842C3.18967 5.79118 3.02378 6.89965 2.971 8.2645L7.91009 4.02668C7.16357 3.7703 6.4623 3.7703 6.4623 3.7703ZM11.4165 2.7674L10.5568 1.7645L7.91009 4.03422C8.32483 4.17749 8.76218 4.40371 9.10151 4.75058L11.4165 2.7674ZM13 10.4287C12.9321 10.406 11.8463 10.0516 9.96114 9.83295C9.9536 10.2628 9.93097 10.7077 9.90081 11.1526C11.5974 11.3637 12.5702 11.6879 12.5853 11.6879L13 10.4287ZM2.971 8.2645L0 10.8132L0.671114 11.9292C0.686195 11.9217 1.5609 11.5824 3.03886 11.3109C2.95592 10.2477 2.93329 9.19954 2.971 8.2645Z" fill-opacity="0.3"/>
+    </svg>
 
 
 export const Speedo = (props) =>{
@@ -137,8 +143,9 @@ export const Speedo = (props) =>{
     const settingsStorageState = useSettingsStorageState();
     const settings = () => settingsStorageState.settings
     const defaultConfigs = () => settingsStorageState.defaultConfigs
+    const [checkSound, setCheckSound] = createSignal(false)
     const [onIndex,setOnIndex] = createSignal(false)
-
+    const [seatbeltState, setSeatbeltState] = createSignal(false)
     const speedo = () => hudStorageState.speedo
     const indicators = () => speedo().defaultIndicators
     const damage = () => speedo().damageLevel
@@ -262,6 +269,12 @@ export const Speedo = (props) =>{
     }
 
     const IndicatorSound = new Audio(Sound);
+    const SeatbeltAlertSound = new Audio(SeatbeltAlert)
+    const SeatbeltOnSound = new Audio(SeatbeltOn)
+    const SeatbeltOffSound = new Audio(SeatbeltOff)
+    SeatbeltOnSound.volume = 0.5
+    SeatbeltOffSound.volume = 0.5
+    SeatbeltAlertSound.volume = 0.2
     IndicatorSound.volume = 0.2
     const indexTimer = setInterval(()=>{
         if((indicators().leftIndex || indicators().rightIndex)){
@@ -272,6 +285,14 @@ export const Speedo = (props) =>{
             }
             setOnIndex(onIndex => !onIndex)
         }
+        if(!indicators().seatbelt){
+            if(!settings().IndicatorSeatbeltSound && show()){
+                if(!props?.template && !checkSound()){
+                    SeatbeltAlertSound.play();
+                }
+            }
+            setSeatbeltState(seatbeltState => !seatbeltState)
+        }
     },500)
     onCleanup(() => clearInterval(indexTimer));
 
@@ -281,6 +302,20 @@ export const Speedo = (props) =>{
         const elementsTemplate = document.querySelectorAll('#templateSpeedoContainer .nob');
         const currentSpeed = VehType.AIR !== vehType() ? speed() : rpm()
 
+        if(!settings().IndicatorSeatbeltSound){
+            if(indicators().seatbelt && !checkSound()){
+                if(!checkSound()){
+                    SeatbeltOnSound.play();
+                    setCheckSound(true)
+                }
+            }
+
+            if(checkSound() && !indicators().seatbelt){
+                SeatbeltOffSound.play();
+                setCheckSound(false)
+            }
+        }
+
         if(!settings().Needle){
             const speedNoble = document.querySelectorAll('#speedoContainer .speedNobe')
             if(speedNoble.length > 0){
@@ -312,7 +347,6 @@ export const Speedo = (props) =>{
         }
     })
 
-
     /* HUD COMPONENTS */
     const VehicleHud = () =>{
         return(
@@ -374,6 +408,13 @@ export const Speedo = (props) =>{
 
     return(
         <div class={`${props?.template ? 'template-main-container' : 'speedo main-container'} ${!show() && !props?.template ? 'slideOut' : ''}`}>
+
+            <Show when={!indicators().seatbelt} keyed>
+                <div class="w-10 h-10 absolute top-[26%] -left-[25%]">
+                    <SeatbeltIcon state={seatbeltState}/>
+                </div>
+            </Show>
+
             <div class="main-container2"></div>
 
             <Show when={vehType() === VehType.AIR} keyed>

diff --git a/web/src/assets/Contexts/HudStorage.jsx b/web/src/assets/Contexts/HudStorage.jsx
@@ -55,6 +55,7 @@ const initialState = {
         vehType: "LAND",
         driver: false,
         defaultIndicators: {
+            seatbelt: false,
             tempomat: true,
             door: false,
             light: false,

diff --git a/web/src/assets/Contexts/SettingsStorage.jsx b/web/src/assets/Contexts/SettingsStorage.jsx
@@ -141,6 +141,10 @@ const initialState = {
             name: "speedo-nooble-container",
             color: "#1f2937"
         },
+        {
+            name: "speedo-seatbelt-icon-color",
+            color: "#D22B2B"
+        }
     ],
     settings:{
         Status: false,
@@ -151,6 +155,7 @@ const initialState = {
         Money: false,
         Info: false,
         IndicatorSound: false,
+        IndicatorSeatbeltSound: false,
         VehicleHandlers:false,
         MinimapOnFoot:false,
         Needle: false,
@@ -167,6 +172,7 @@ const initialState = {
         Money: false,
         Info: false,
         IndicatorSound: false,
+        IndicatorSeatbeltSound: false,
         VehicleHandlers:false,
         MinimapOnFoot:false,
         Needle:false,
@@ -263,7 +269,6 @@ export default function SettingsStorage(props){
         const currentSelectedMenu = store.selectedMenuName ? store.selectedMenuName.toLowerCase() : 'status'
         const currentPickedColor = store.pickedColor
         const currentSelectedCircleName = store.selectedElementName
-
         setStore(
             `${currentSelectedMenu}Colors`,
             currentStatus => currentStatus.name === currentSelectedCircleName,
@@ -299,7 +304,7 @@ export default function SettingsStorage(props){
 
         Object.keys(colors).forEach((color)=>{
             r.style.setProperty(`--${color}`,colors[color])
-        }) 
+        })
 
     }
 

diff --git a/web/src/assets/SeatbeltAlertSound.mp3 b/web/src/assets/SeatbeltAlertSound.mp3
diff --git a/web/src/assets/SeatbeltOffSound.mp3 b/web/src/assets/SeatbeltOffSound.mp3
diff --git a/web/src/assets/SeatbeltOnSound.mp3 b/web/src/assets/SeatbeltOnSound.mp3
diff --git a/web/src/assets/translate.json b/web/src/assets/translate.json
@@ -42,7 +42,8 @@
       "speedo-outer-circle-color": "speedo outer circle color",
       "speedo-nooble-color": "speedo nooble color",
       "speedo-nooble-container": "speedo nooble container",
-      "resize-speedo": "resize speedo"
+      "resize-speedo": "resize speedo",
+      "speedo-seatbelt-icon-color": "speedo seatbelt icon color"
     },
     "Settings": {
       "status": "Status HUD ON/OFF",
@@ -53,6 +54,7 @@
       "money": "Money HUD ON/OFF",
       "info": "Info HUD ON/OFF",
       "indicatorsound": "Indicator sound ON/OFF",
+      "indicatorseatbeltsound":"Seatbelt sound ON/OFF",
       "minimaponfoot": "Minimap on foot ON/OFF",
       "vehiclehandlers":"Vehicle handlers(Engine toggle, Indicator lights) ON/OFF",
       "needle": "Needle ON/OFF",
@@ -107,7 +109,8 @@
       "speedo-outer-circle-color": "Tacho Farbe",
       "speedo-nooble-color": "Tacho Nooble Farbe",
       "speedo-nooble-container": "Tacho Noble container",
-      "resize-speedo": "resize speedo"
+      "resize-speedo": "resize speedo",
+      "speedo-seatbelt-icon-color": "speedo seatbelt icon color"
     },
     "Settings": {
       "status": "Status HUD AN/AUS",
@@ -118,6 +121,7 @@
       "money": "Geld HUD AN/AUS",
       "info": "Info HUD AN/AUS",
       "indicatorsound": "Blinker Ton AN/AUS",
+      "indicatorseatbeltsound":"Seatbelt sound ON/OFF",
       "minimaponfoot": "Minimap zu Fuß AN/AUS",
       "vehiclehandlers":"Fahrzeug Infos(Motor An/Ausschalten, Blinker) AN/AUS",
       "needle": "Nadel AN/AUS",
@@ -172,7 +176,8 @@
       "speedo-outer-circle-color": "Mérőegység keret színe",
       "speedo-nooble-color": "Sebességmérő tű szín",
       "speedo-nooble-container": "Sebességmérő tű körlap színe",
-      "resize-speedo": "Sebességmérő átméretezése"
+      "resize-speedo": "Sebességmérő átméretezése",
+      "speedo-seatbelt-icon-color": "Biztonsági öv ikon színe"
     },
     "Settings": {
       "status": "Státusz HUD BE/KI",
@@ -183,6 +188,7 @@
       "money": "Pénz HUD BE/KI",
       "info": "Infó HUD BE/KI",
       "indicatorsound": "Indikátor hang BE/KI",
+      "indicatorseatbeltsound":"Biztonsági öv hang BE/KI",
       "minimaponfoot": "Minimap járműn kívül BE/KI",
       "vehiclehandlers": "Jármű opciók(Motor indítás, Indexek) BE/KI",
       "needle": "Sebességmérő tű BE/KI",
@@ -237,7 +243,8 @@
       "speedo-outer-circle-color": "boja kruga brzinometra",
       "speedo-nooble-color": "nooble boja brzinometra",
       "speedo-nooble-container": "brzinometar nooble container",
-      "resize-speedo": "Speedo resize"
+      "resize-speedo": "Speedo resize",
+      "speedo-seatbelt-icon-color": "speedo seatbelt icon color"
     },
     "Settings": {
       "status": "Status HUD ON/OFF",
@@ -248,6 +255,7 @@
       "money": "Novac HUD ON/OFF",
       "info": "Info HUD ON/OFF",
       "indicatorsound": "Zvukovi Indikatora ON/OFF",
+      "indicatorseatbeltsound":"Seatbelt sound ON/OFF",
       "minimaponfoot": "Minimapa van vozila ON/OFF",
       "vehiclehandlers":"Delovi Vozila (Motor, Svetla) ON/OFF",
       "needle": "Igla ON/OFF",
@@ -301,7 +309,8 @@
       "speedo-background-color": "snelheidsmeter achtergrond kleur",
       "speedo-outer-circle-color": "kleur snelheidsmeter buitenste cirkel",
       "speedo-nooble-color": "kleur snelheidsmeter nooble",
-      "speedo-nooble-container": "snelheidsmeter nooble container"
+      "speedo-nooble-container": "snelheidsmeter nooble container",
+      "speedo-seatbelt-icon-color": "speedo seatbelt icon color"
     },
     "Settings": {
       "status": "Status HUD AAN/UIT",
@@ -312,6 +321,7 @@
       "money": "Geld HUD AAN/UIT",
       "info": "Info HUD AAN/UIT",
       "indicatorsound": "Indicator geluid AAN/UIT",
+      "indicatorseatbeltsound":"Seatbelt sound ON/OFF",
       "minimaponfoot": "Minimap te voet AAN/UIT",
       "vehiclehandlers":"Voertuig handlers(Motor toggle, Indicator lichten) AAN/UIT",
       "needle": "Naald AAN/UIT",
@@ -365,7 +375,8 @@
       "speedo-background-color": "Couleur arrière plan",
       "speedo-outer-circle-color": "couleur du cercle extérieur",
       "speedo-nooble-color": "couleur de l'aguiller",
-      "speedo-nooble-container": "couleur fixation aiguille"
+      "speedo-nooble-container": "couleur fixation aiguille",
+      "speedo-seatbelt-icon-color": "speedo seatbelt icon color"
     },
     "Settings": {
       "status": "HUD Status ON/OFF",
@@ -376,6 +387,7 @@
       "money": "HUD Argent ON/OFF",
       "info": "Info HUD ON/OFF",
       "indicatorsound": "Sons Clignotant ON/OFF",
+      "indicatorseatbeltsound":"Seatbelt sound ON/OFF",
       "minimaponfoot": "Minimap à piedt ON/OFF",
       "vehiclehandlers":"Véhicule (Moteur, clignotants) ON/OFF",
       "needle": "Aiguille compteur ON/OFF",