structura foldere

mutat kq- folders in un singur folder [kq]

resources/[framework]/[addons]/[kq]/kq_animsuggest/_INSTALLATION.md

@@ -0,0 +1,19 @@
+# KQ_ANIMSUGGEST INSTALLATION GUIDE
+
+This guide will provide step-by-step instructions on how to install and set up the KQ_ANIMSUGGEST script for FiveM. 
+
+## Step 1:
+After downloading the script, unzip the folder and place it in the `resources` directory on your FiveM server.
+
+## Step 2:
+Add the script to your `server.cfg` file.
+
+## Step 3:
+Configure the script to your likings. Add your own animations, or customize the keybind tooltip look
+
+## Done
+Enjoy the script
+
+
+https://kuzquality.com/
+https://discord.gg/fZsyam7Rvz

resources/[framework]/[addons]/[kq]/kq_animsuggest/client/editable/client.lua

@@ -0,0 +1,85 @@
+local BLOCKED = false
+
+RegisterNetEvent('kq_animsuggest:client:toggleSuggestions')
+AddEventHandler('kq_animsuggest:client:toggleSuggestions', function(allow)
+    BLOCKED = not allow
+end)
+
+function CanUseSuggestions()
+    return (not BLOCKED and not IsPlayerUnreachable())
+end
+
+--- Keybind Hint
+function ShowKeybindHint(keybind, label)
+    SendNUIMessage({
+        event = 'show',
+        keybind = keybind,
+        prefix = L('Press'),
+        suffix = L('to {action}'):gsub('{action}', label)
+    })
+end
+
+function HideKeybindHint()
+    SendNUIMessage({
+        event = 'hide',
+    })
+end
+
+--- Main animation triggering functions
+function PlayAnim(ped, dict, anim, flag, duration)
+    Citizen.CreateThread(function()
+        RequestAnimDict(dict)
+        local timeout = 0
+        while not HasAnimDictLoaded(dict) do
+            Citizen.Wait(50)
+            timeout = timeout + 1
+            if timeout > 100 then
+                return
+            end
+        end
+        
+        TaskPlayAnim(ped or PlayerPedId(), dict, anim, 1.5, 1.0, duration or -1, flag or 1, 0, false, false, false)
+        RemoveAnimDict(dict)
+    end)
+end
+
+function PlayAnimAdvanced(ped, dict, anim, flag, coords, rotation)
+    Citizen.CreateThread(function()
+        RequestAnimDict(dict)
+        local timeout = 0
+        while not HasAnimDictLoaded(dict) do
+            Citizen.Wait(50)
+            timeout = timeout + 1
+            if timeout > 100 then
+                return
+            end
+        end
+        
+        TaskPlayAnimAdvanced(ped or PlayerPedId(), dict, anim,
+                coords.x, coords.y, coords.z,
+                rotation.x, rotation.y, rotation.z,
+                1.5, 1.0, -1, flag or 1, 0.0, false, false)
+        
+        RemoveAnimDict(dict)
+    end)
+end
+---
+
+function IsPlayerUnreachable()
+    local playerPed = PlayerPedId()
+    return IsPedInAnyVehicle(playerPed) or IsPedRagdoll(playerPed) or IsEntityDead(playerPed)
+end
+
+
+function CreateProp(toolData)
+    local playerPed = PlayerPedId()
+    local toolModel = toolData.model
+    local coords = GetEntityCoords(playerPed)
+    local boneIndex = GetPedBoneIndex(playerPed, toolData.bone or 28422)
+
+    DoRequestModel(toolModel)
+    local object = CreateObject(toolModel, coords, true, true, true)
+    AttachEntityToEntity(object, playerPed, boneIndex, toolData.pos.x, toolData.pos.y, toolData.pos.z, toolData.rot.x, toolData.rot.y, toolData.rot.z, true, true, false, true, 1, true)
+
+    return object
+end

resources/[framework]/[addons]/[kq]/kq_animsuggest/config.lua

@@ -0,0 +1,579 @@
+Config = {}
+
+--- Debug mode
+---
+--- This feature will enable additional debug views as well as some debug prints
+--- Should only be used in a development-environment
+Config.debug = false
+
+
+--- Default keybinds & tooltip look
+Config.keybinds = {
+    play = {
+        key = 'minus', -- Default keybind - After loading the script once. This keybind will be assigned to your game settings
+    },
+    style = {
+        -- Whether to show the suggested animation tooltip
+        show = true,
+
+        -- Positioning of the keybind tooltip (offsets)
+        top = 'auto',
+        left = 'auto',
+        bottom = '16px',
+        right = '16px',
+
+        -- Size of the tooltip text
+        fontSize = 1.4,
+
+        -- RGBA value of the tooltip background
+        bgColor = { 194, 207, 204, 0.6 },
+
+        -- RGBA value of the tooltip text
+        textColor = { 20, 20, 20, 1 },
+
+        -- RGBA value of the keybind background
+        keybindBgColor = { 40, 40, 40, 0.6 },
+
+        -- RGBA value of the keybind text
+        keybindTextColor = { 255, 255, 255, 1 },
+
+        -- Strength of corner rounding
+        borderRadius = 0.1,
+    }
+}
+
+
+--- Animation play cooldown in ms
+Config.cooldown = 1000
+
+
+--- Controls which will cancel the animation when pressed
+-- https://docs.fivem.net/docs/game-references/controls/
+Config.cancelControls = {
+    22, 23, 25, 263, 264,
+}
+
+
+--- Animation lists
+---
+--- Here you can create your own lists of animations which you may want to reuse
+---
+--- Mind that not all pre-configured events use lists. You can also simply input the animations directly into the
+--- specific events.
+---
+--- Animations can also contain tools, noted under a "tool" attribute.
+--- these should be a table containing the following values:
+--- pos = vector3 of the tool offset position
+--- rot = vector3 of the tool offset rotation
+--- model = the model name of the tool
+--- bone = the numerical bone of attachment
+---
+--- e.g.
+-- tool = {
+--     pos = vector3(0.08, -0.1, -0.03),
+--     rot = vector3(-75.0, 0.0, 10.0),
+--     model = 'prop_tool_pickaxe',
+--     bone = 28422,
+-- },
+---
+--- The animations are able to trigger events as well. Noted under an "event" attribute
+--- these should contain the following values:
+--- event = name of the event
+--- type = "client" or "server"
+---
+---e.g.
+-- event = {
+--    event = "kq_yourscript:random-event",
+--    type = "client"
+-- }
+---
+--- You can see the barbeque prop for an example of the "tool" and "event" usage
+Config.animLists = {
+    ['sitting'] = {
+        {
+            dict = 'timetable@ron@ig_5_p3',
+            anim = 'ig_5_p3_base',
+            flag = 33,
+            offset = vector3(0.0, 0.55, 0.52),
+        },
+        {
+            dict = 'timetable@reunited@ig_10',
+            anim = 'base_amanda',
+            flag = 33,
+            offset = vector3(0.0, 0.55, 0.52),
+        },
+        {
+            dict = 'timetable@ron@ig_3_couch',
+            anim = 'base',
+            flag = 33,
+            offset = vector3(0.0, 0.65, 0.52),
+        },
+        {
+            dict = 'timetable@maid@couch@',
+            anim = 'base',
+            flag = 33,
+            offset = vector3(0.0, 0.45, 0.65),
+        },
+    },
+    ['dance'] = {
+        {
+            dict = 'anim@amb@nightclub@dancers@solomun_entourage@',
+            anim = 'mi_dance_facedj_17_v1_female^1',
+            flag = 33,
+            offset = vector3(0.0, 0.0, 0.0),
+        },
+        {
+            dict = 'anim@amb@nightclub@mini@dance@dance_solo@female@var_a@',
+            anim = 'high_center',
+            flag = 33,
+            offset = vector3(0.0, 0.0, 0.0),
+        },
+        {
+            dict = 'anim@amb@nightclub@mini@dance@dance_solo@female@var_b@',
+            anim = 'high_center',
+            flag = 33,
+            offset = vector3(0.0, 0.0, 0.0),
+        },
+        {
+            dict = 'anim@amb@nightclub@mini@dance@dance_solo@male@var_b@',
+            anim = 'high_center_down',
+            flag = 33,
+            offset = vector3(0.0, 0.0, 0.0),
+        },
+        {
+            dict = 'anim@amb@nightclub@dancers@podium_dancers@',
+            anim = 'hi_dance_facedj_17_v2_male^5',
+            flag = 33,
+            offset = vector3(0.0, 0.0, 0.0),
+        },
+        {
+            dict = 'anim@amb@nightclub@dancers@crowddance_facedj@hi_intensity',
+            anim = 'hi_dance_facedj_09_v2_female^1',
+            flag = 33,
+            offset = vector3(0.0, 0.0, 0.0),
+        },
+        {
+            dict = 'anim@amb@nightclub@mini@dance@dance_solo@female@var_a@',
+            anim = 'high_center_up',
+            flag = 33,
+            offset = vector3(0.0, 0.0, 0.0),
+        },
+    }
+}
+
+
+--- Animation suggestions for specific props
+---
+--- Define specific props along with their co-responding animations
+--- Feel free to add or remove these
+---
+--- label: text displayed in the keybind tooltip
+--- align: whether or not to align the player with the prop (make sure to specify the offset when true)
+--- offset: offset of the animation from the prop
+--- models: models of the props on which this action will be possible
+--- animations: an inline table of animations or an `Config.animList` table of animations
+Config.propSpecific = {
+    {
+        label = 'aseaza-te',
+        align = true,
+        offset = vector3(0.0, -1.3, 0.45),
+        models = {
+            'prop_bench_01a',
+            'prop_bench_01c',
+            'prop_bench_02',
+            'prop_bench_03',
+            'prop_bench_04',
+            'prop_bench_05',
+            'prop_bench_06',
+            'prop_bench_07',
+            'prop_bench_08',
+            'prop_bench_09',
+            'prop_bench_10',
+            'prop_bench_11',
+        },
+        animations = Config.animLists['sitting'],
+    },
+    {
+        label = 'cauta in cos',
+        align = false,
+        models = {
+            'prop_bin_01a',
+            'prop_bin_03a',
+            'prop_bin_05a',
+        },
+        animations = {
+            {
+                dict = 'mini@repair',
+                anim = 'fixing_a_ped',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+        },
+    },
+    { -- Complete example with all the options
+        label = 'gratar',
+        align = false,
+        models = {
+            'prop_bbq_5',
+        },
+        animations = {
+            {
+                dict = 'amb@prop_human_bbq@male@idle_a',
+                anim = 'idle_b',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+                event = {
+                    event = 'your-event:name',
+                    type = 'client', -- client or server
+                    params = 'bbq-start', -- this could be a table as well. It will be sent as the first attribute of the event
+                },
+                tool = {
+                    pos = vector3(0.0, 0.0, 0.0),
+                    rot = vector3(0.0, 0.0, 0.0),
+                    model = 'prop_fish_slice_01',
+                    bone = 28422,
+                },
+            },
+        },
+    },
+}
+
+--- Animation suggestions for specific areas
+---
+--- Define specific areas along with their co-responding animations
+--- Feel free to add or remove these
+---
+--- label: text displayed in the keybind tooltip
+--- coords: coordinates of the area
+--- radius: radius of the animation area
+--- animations: an inline table of animations or an `Config.animList` table of animations
+Config.areaSpecific = {
+    { -- vanilla unicorn
+        label = 'danseaza',
+        coords = vector3(115.6, -1289.0, 28.2),
+        radius = 13.0,
+        animations = Config.animLists['dance'],
+    },
+    { -- tequilalala
+        label = 'danseaza',
+        coords = vector3(-557.65, 285.32, 82.2),
+        radius = 10.0,
+        animations = Config.animLists['dance'],
+    },
+    { -- bahamas mammas
+        label = 'danseaza',
+        coords = vector3(-1386.73, -619.17, 30.8),
+        radius = 10.0,
+        animations = Config.animLists['dance'],
+    },
+}
+
+
+--- Main animation suggestion configuration
+---
+--- Available events:
+--- - lean - Leaning when something is directly behind the player
+--- - leanBar - Leaning forward when something is directly in front the player but not higher up than their chest (bar etc.)
+--- - sit - Sitting down when something is located behind the player below their waist (walls, stairs, chairs etc.)
+--- - idle - May be used anywhere. Active after the player has been stationary for 4 or more seconds
+--- - intimidate - General intimidation gestures. Active for few seconds after player has been in melee combat
+--- - showPain - Shows that the player is hurt. Active when player has below 60% of their health
+--- - inspectCar - Inspects cars engine/trunk. Active when player is looking at an engine bay or trunk which is open
+--- - cheerBurnout - Cheering/clapping. Active when player is looking at a car performing a burnout or drifting
+--- - greet - Waving hello. Active when a player is looking at another player whom he hasn't greeted before in the last 15 minutes
+--- - conversation - Hand motion imitating player talking with others. Active when player is looking at a nearby player
+---
+--- enabled: whether the specific action type should be enabled
+--- label: text displayed in the keybind tooltip
+--- animations: an inline table of animations or an `Config.animList` table of animations
+Config.animations = {
+    lean = {
+        enabled = true,
+        label = 'sprijina-te',
+        animations = {
+            {
+                dict = 'anim@scripted@freemode_npc@fix_agy_ig4_lamar@',
+                anim = 'lean_wall_idle_01_lamar',
+                flag = 33,
+                offset = vector3(0.0, 0.35, 0.0),
+            },
+            {
+                dict = 'amb@world_human_leaning@male@wall@back@foot_up@idle_a',
+                anim = 'idle_a',
+                flag = 33,
+                offset = vector3(0.0, 0.35, 0.0),
+            },
+            {
+                dict = 'anim@scripted@freemode_npc@fix_agy_ig4_lamar@',
+                anim = 'lean_wall_idle_01_lamar',
+                flag = 33,
+                offset = vector3(0.0, 0.35, 0.0),
+            },
+            {
+                dict = 'amb@world_human_leaning@female@wall@back@holding_elbow@idle_a',
+                anim = 'idle_a',
+                flag = 33,
+                offset = vector3(0.0, 0.35, 0.0),
+            }
+        },
+    },
+    leanBar = {
+        enabled = true,
+        label = 'apleca-te',
+        animations = {
+            {
+                dict = 'anim@amb@nightclub@lazlow@ig1_vip@',
+                anim = 'clubvip_base_laz',
+                flag = 33,
+                offset = vector3(0.0, -0.55, 0.02),
+            },
+            {
+                dict = 'amb@prop_human_bum_shopping_cart@male@idle_a',
+                anim = 'idle_c',
+                flag = 33,
+                offset = vector3(0.0, -0.55, 0.02),
+            },
+            {
+                dict = 'anim@amb@nightclub@lazlow@ig1_vip@',
+                anim = 'clubvip_dlg_jimmyboston_laz',
+                flag = 33,
+                offset = vector3(0.0, -0.45, 0.085),
+            },
+        },
+    },
+    sit = {
+        enabled = true,
+        label = 'aseaza-te',
+        animations = Config.animLists['sitting'],
+    },
+    idle = {
+        enabled = true,
+        label = 'relaxeaza-te',
+        minimumTime = 4, -- Minimum time in seconds it'll take before the suggestion appears
+        animations = {
+            {
+                dict = 'rcmjosh1',
+                anim = 'idle',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'rcmnigel1a',
+                anim = 'base',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'missbigscore2aig_3',
+                anim = 'wait_for_van_c',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'amb@world_human_hang_out_street@female_arms_crossed@idle_a',
+                anim = 'idle_a',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@heists@heist_corona@single_team',
+                anim = 'single_team_loop_boss',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+        }
+    },
+    intimidate = {
+        enabled = true,
+        label = 'intimideaza',
+        animations = {
+            {
+                dict = 'anim@mp_player_intselfiethe_bird',
+                anim = 'idle_a',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@mp_player_intupperfinger',
+                anim = 'idle_a_fp',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'mini@triathlon',
+                anim = 'want_some_of_this',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@mp_player_intcelebrationfemale@knuckle_crunch',
+                anim = 'knuckle_crunch',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'mp_player_int_uppergrab_crotch',
+                anim = 'mp_player_int_grab_crotch',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'misscommon@response',
+                anim = 'bring_it_on',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'misscommon@response',
+                anim = 'screw_you',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+        }
+    },
+    showPain = {
+        enabled = true,
+        label = 'arata durere',
+        animations = {
+            {
+                dict = 'anim@amb@casino@valet_scenario@pose_d@',
+                anim = 'scratch_face_a_m_y_vinewood_01',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@amb@machinery@lathe@',
+                anim = 'scratch_amy_skater_01',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'timetable@gardener@smoking_joint',
+                anim = 'idle_cough',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+        }
+    },
+    inspectCar = {
+        enabled = true,
+        label = 'inspectare vehicul',
+        animations = {
+            {
+                dict = 'anim@amb@carmeet@checkout_engine@male_a@base',
+                anim = 'base',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@amb@carmeet@checkout_engine@male_b@base',
+                anim = 'base',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@amb@carmeet@checkout_engine@male_c@base',
+                anim = 'base',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@amb@carmeet@checkout_engine@male_d@base',
+                anim = 'base',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@amb@carmeet@checkout_engine@male_f@base',
+                anim = 'base',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@amb@carmeet@checkout_engine@male_g@base',
+                anim = 'base',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@amb@carmeet@checkout_engine@male_h@base',
+                anim = 'base',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+        },
+    },
+    cheerBurnout = {
+        enabled = true,
+        label = 'aplauze',
+        animations = {
+            {
+                dict = 'amb@world_human_cheering@male_a',
+                anim = 'base',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'anim@amb@nightclub@peds@',
+                anim = 'amb_world_human_cheering_female_c',
+                flag = 33,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+        },
+    },
+    greet = {
+        enabled = true,
+        label = 'saluta',
+        animations = {
+            {
+                dict = 'friends@frj@ig_1',
+                anim = 'wave_e',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'gestures@m@standing@casual',
+                anim = 'gesture_hello',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+        },
+    },
+    conversation = {
+        enabled = true,
+        label = 'vorbeste',
+        animations = {
+            {
+                dict = 'misscarsteal4@vendor',
+                anim = 'idle_a_customer1',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'missfbi3_party_d',
+                anim = 'stand_talk_loop_a_male1',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'missfbi3_party_d',
+                anim = 'stand_talk_loop_a_male2',
+                flag = 48,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'missfbi3_party_d',
+                anim = 'stand_talk_loop_b_male2',
+                flag = 49,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+            {
+                dict = 'missfbi3_party_d',
+                anim = 'stand_talk_loop_b_male3',
+                flag = 49,
+                offset = vector3(0.0, 0.0, 0.0),
+            },
+        },
+    },
+
+}

resources/[framework]/[addons]/[kq]/kq_animsuggest/fxmanifest.lua

@@ -0,0 +1,45 @@
+fx_version 'cerulean'
+games { 'gta5' }
+lua54 'yes'
+
+author 'KuzQuality | Kuzkay'
+description 'Animation suggestions by KuzQuality'
+version '1.2.2'
+
+
+ui_page 'nui/index.html'
+
+files {
+    'nui/*.html',
+    'nui/js/*.js',
+}
+
+--
+-- Server
+--
+
+server_scripts {
+}
+
+--
+-- Client
+--
+
+client_scripts {
+    'config.lua',
+    'locale.lua',
+    'client/constants.lua',
+    'client/settings.lua',
+    'client/functions.lua',
+    'client/cache.lua',
+    'client/client.lua',
+    'client/editable/client.lua',
+}
+
+escrow_ignore {
+    'config.lua',
+    'locale.lua',
+    'client/editable/*.lua',
+}
+
+dependency '/assetpacks'

resources/[framework]/[addons]/[kq]/kq_animsuggest/locale.lua

@@ -0,0 +1,7 @@
+--- Only modify the value on the right side. Do not change the original text located between the square brackets!
+
+Locale = {
+    ['Press'] = 'Apasa',
+    ['to {action}'] = 'pentru a {action}',
+    ['Play suggested animation'] = 'Reda animatia sugerata',
+}

resources/[framework]/[addons]/[kq]/kq_animsuggest/nui/index.html

@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <script src="js/jquery.js"></script>
+</head>
+<body>
+<div class="keybind-hint">
+    <label id="text-prefix">Press</label>
+    <div class="keybind-block">
+        <label id="text-keybind">-</label>
+    </div>
+    <label id="text-suffix">to idle</label>
+</div>
+</body>
+</html>
+
+<script>
+    $(document).ready(function () {
+        $keybindHint = $('.keybind-hint');
+        $keybindHint.hide();
+
+        window.addEventListener('message', ({data}) => {
+            if (data.event === 'setStyle') {
+                $keybindHint.css('top', data.top);
+                $keybindHint.css('bottom', data.bottom);
+                $keybindHint.css('left', data.left);
+                $keybindHint.css('right', data.right);
+                $keybindHint.show();
+
+                const $body = $('body').get(0).style;
+
+                $body.setProperty('--fontSize', data.fontSize + 'vh');
+                $body.setProperty('--bgColor', data.bgColor);
+                $body.setProperty('--textColor', data.textColor);
+                $body.setProperty('--keybindBgColor', data.keybindBgColor);
+                $body.setProperty('--keybindTextColor', data.keybindTextColor);
+                $body.setProperty('--borderRadius', data.borderRadius + 'vh');
+            }
+            if (data.event === 'hide') {
+                $('body').fadeOut(300);
+            }
+            if (data.event === 'show') {
+                $('body').fadeIn(300);
+
+                $('#text-prefix').html(data.prefix);
+                $('#text-keybind').html(data.keybind);
+                $('#text-suffix').html(data.suffix);
+            }
+        });
+
+        fetch(`https://${GetParentResourceName()}/UILoaded`, {
+            method: 'POST',
+        });
+    });
+</script>
+
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400&display=swap');
+
+    body {
+        display: none;
+
+        --fontSize: 0.9vh;
+
+        --bgColor: rgba(194, 207, 204, 0.6);
+        --textColor: rgba(20, 20, 20, 1);
+
+        --keybindBgColor: rgba(40, 40, 40, 0.6);
+        --keybindTextColor: rgba(255, 255, 255, 1);
+
+        --borderRadius: 0px;
+    }
+
+    .keybind-hint {
+        position: fixed;
+
+        top: auto;
+        left: auto;
+        right: 16px;
+        bottom: 16px;
+
+        background-color: var(--bgColor);
+        border-radius: var(--borderRadius);
+        height: auto;
+        width: auto;
+        padding: 2px 5px;
+
+
+        text-transform: uppercase;
+
+        color: var(--textColor);
+        font-size: var(--fontSize);
+        font-weight: lighter;
+        font-family: 'Roboto Condensed', sans-serif;
+    }
+
+    .keybind-block {
+        padding: 2px;
+        height: var(--fontSize);
+        width: var(--fontSize);
+        background-color: var(--keybindBgColor);
+        color: var(--keybindTextColor);
+        border-radius: var(--borderRadius);
+
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    #text-keybind {
+        width: var(--fontSize);
+        text-align: center;
+    }
+</style>