add colorblind-aware UI settings

locales/en.json

@@ -9,6 +9,26 @@
     "settings": {
       "locale": "Change locale",
       "locale_description": "Current language: ${language} (%s)",
+      "colorblind": "Colorblind mode",
+      "colorblind_current": "Current selection",
+      "colorblind_saved": "Saved colorblind preset: %s",
+      "ui_test_action": "UI test action",
+      "ui_test_action_none": "Do not run a test",
+      "ui_test_action_circle": "Run circle progress test",
+      "ui_tests_open": "Open UI tests after saving",
+      "ui_tests": "UI Tests",
+      "ui_tests_progressbar": "Test progress bar",
+      "ui_tests_circleprogress": "Test circle progress",
+      "ui_tests_skillcheck": "Test skill check",
+      "ui_tests_notification": "Test notification",
+      "ui_tests_notification_description": "If you can read this clearly, the UI test menu worked.",
+      "colorblind_modes": {
+        "off": "Off",
+        "protanopia": "Protanopia",
+        "deuteranopia": "Deuteranopia",
+        "tritanopia": "Tritanopia",
+        "achromatopsia": "Achromatopsia"
+      },
       "notification_audio": "Notification audio",
       "notification_position": "Notification position"
     },

resource/client.lua

@@ -6,6 +6,8 @@
     Copyright © 2025 Linden <https://github.com/thelindat>
 ]]
 
+local settings = require 'resource.settings'
+
 local _registerCommand = RegisterCommand
 
 ---@param commandName string
@@ -22,7 +24,8 @@ end
 RegisterNUICallback('getConfig', function(_, cb)
     cb({
         primaryColor = GetConvar('ox:primaryColor', 'blue'),
-        primaryShade = GetConvarInt('ox:primaryShade', 8)
+        primaryShade = GetConvarInt('ox:primaryShade', 8),
+        colorblindMode = settings.colorblind_mode or 'off'
     })
 end)
 

resource/init.lua

@@ -42,6 +42,14 @@ cache = {
     game = GetGameName(),
 }
 
+if not GetCurrentResourceName() == "ox_lib" then
+    local err =
+    '^1Resource name mismatch. Please ensure the resource is named "ox_lib".\n	^3https://github.com/overextended/ox_lib/releases/latest/download/ox_lib.zip^0'
+    function lib.hasLoaded() return err end
+
+    error(err)
+end
+
 if not LoadResourceFile(lib.name, 'web/build/index.html') then
     local err =
     '^1Unable to load UI. Build ox_lib or download the latest release.\n	^3https://github.com/overextended/ox_lib/releases/latest/download/ox_lib.zip^0'

resource/settings.lua

@@ -30,6 +30,65 @@ local userLocales = GetConvarInt('ox:userLocales', 1) == 1
 
 settings.locale = userLocales and safeGetKvp(GetResourceKvpString, 'locale') or settings.default_locale
 
+local colorblindModes = {
+    off = {
+        label = 'ui.settings.colorblind_modes.off',
+        primaryColor = GetConvar('ox:primaryColor', 'blue'),
+        primaryShade = GetConvarInt('ox:primaryShade', 8),
+        indicatorColor = 'red',
+        indicatorShade = 6,
+    },
+    protanopia = {
+        label = 'ui.settings.colorblind_modes.protanopia',
+        primaryColor = 'cyan',
+        primaryShade = 6,
+        indicatorColor = 'orange',
+        indicatorShade = 6,
+    },
+    deuteranopia = {
+        label = 'ui.settings.colorblind_modes.deuteranopia',
+        primaryColor = 'blue',
+        primaryShade = 6,
+        indicatorColor = 'orange',
+        indicatorShade = 6,
+    },
+    tritanopia = {
+        label = 'ui.settings.colorblind_modes.tritanopia',
+        primaryColor = 'pink',
+        primaryShade = 6,
+        indicatorColor = 'green',
+        indicatorShade = 6,
+    },
+    achromatopsia = {
+        label = 'ui.settings.colorblind_modes.achromatopsia',
+        primaryColor = 'gray',
+        primaryShade = 7,
+        indicatorColor = 'yellow',
+        indicatorShade = 4,
+    },
+}
+
+local function getColorblindData(mode)
+    return colorblindModes[mode] or colorblindModes.off
+end
+
+settings.colorblind_mode = safeGetKvp(GetResourceKvpString, 'colorblind_mode', 'off')
+
+if not colorblindModes[settings.colorblind_mode] then
+    settings.colorblind_mode = 'off'
+    DeleteResourceKvp('colorblind_mode')
+end
+
+function settings.getColorblindConfig()
+    local colorblindData = getColorblindData(settings.colorblind_mode)
+
+    return {
+        colorblindMode = settings.colorblind_mode,
+        primaryColor = colorblindData.primaryColor,
+        primaryShade = colorblindData.primaryShade,
+    }
+end
+
 local function set(key, value)
     if settings[key] == value then return false end
 
@@ -53,7 +112,172 @@ local function set(key, value)
     return true
 end
 
+local function syncColorblindMode(mode)
+    if not colorblindModes[mode] then return false end
+
+    if not set('colorblind_mode', mode) then return false end
+
+    SendNUIMessage({
+        action = 'setColorblindMode',
+        data = mode,
+    })
+
+    return true
+end
+
+local function openColorblindMenu()
+    if not lib.registerContext or not lib.showContext then
+        local input = lib.inputDialog(locale('ui.settings.colorblind'), {
+            {
+                type = 'select',
+                label = locale('ui.settings.colorblind'),
+                default = settings.colorblind_mode,
+                required = true,
+                options = {
+                    { label = locale('ui.settings.colorblind_modes.off'), value = 'off' },
+                    { label = locale('ui.settings.colorblind_modes.protanopia'), value = 'protanopia' },
+                    { label = locale('ui.settings.colorblind_modes.deuteranopia'), value = 'deuteranopia' },
+                    { label = locale('ui.settings.colorblind_modes.tritanopia'), value = 'tritanopia' },
+                    { label = locale('ui.settings.colorblind_modes.achromatopsia'), value = 'achromatopsia' },
+                }
+            }
+        }) --[[@as table?]]
+
+        if not input then return end
+
+        local mode = input[1]
+
+        if mode and syncColorblindMode(mode) then
+            lib.notify({
+                title = locale('settings'),
+                description = locale('ui.settings.colorblind_saved', locale(getColorblindData(mode).label)),
+                type = 'success'
+            })
+        end
+
+        return
+    end
+
+    local options = {
+        {
+            title = locale('ui.settings.colorblind_modes.off'),
+            description = settings.colorblind_mode == 'off' and locale('ui.settings.colorblind_current') or nil,
+            icon = settings.colorblind_mode == 'off' and 'check' or 'circle',
+            onSelect = function()
+                syncColorblindMode('off')
+                lib.notify({
+                    title = locale('settings'),
+                    description = locale('ui.settings.colorblind_saved', locale('ui.settings.colorblind_modes.off')),
+                    type = 'success'
+                })
+            end,
+        },
+        {
+            title = locale('ui.settings.colorblind_modes.protanopia'),
+            description = settings.colorblind_mode == 'protanopia' and locale('ui.settings.colorblind_current') or nil,
+            icon = settings.colorblind_mode == 'protanopia' and 'check' or 'circle',
+            onSelect = function()
+                syncColorblindMode('protanopia')
+                lib.notify({
+                    title = locale('settings'),
+                    description = locale('ui.settings.colorblind_saved', locale('ui.settings.colorblind_modes.protanopia')),
+                    type = 'success'
+                })
+            end,
+        },
+        {
+            title = locale('ui.settings.colorblind_modes.deuteranopia'),
+            description = settings.colorblind_mode == 'deuteranopia' and locale('ui.settings.colorblind_current') or nil,
+            icon = settings.colorblind_mode == 'deuteranopia' and 'check' or 'circle',
+            onSelect = function()
+                syncColorblindMode('deuteranopia')
+                lib.notify({
+                    title = locale('settings'),
+                    description = locale('ui.settings.colorblind_saved', locale('ui.settings.colorblind_modes.deuteranopia')),
+                    type = 'success'
+                })
+            end,
+        },
+        {
+            title = locale('ui.settings.colorblind_modes.tritanopia'),
+            description = settings.colorblind_mode == 'tritanopia' and locale('ui.settings.colorblind_current') or nil,
+            icon = settings.colorblind_mode == 'tritanopia' and 'check' or 'circle',
+            onSelect = function()
+                syncColorblindMode('tritanopia')
+                lib.notify({
+                    title = locale('settings'),
+                    description = locale('ui.settings.colorblind_saved', locale('ui.settings.colorblind_modes.tritanopia')),
+                    type = 'success'
+                })
+            end,
+        },
+        {
+            title = locale('ui.settings.colorblind_modes.achromatopsia'),
+            description = settings.colorblind_mode == 'achromatopsia' and locale('ui.settings.colorblind_current') or nil,
+            icon = settings.colorblind_mode == 'achromatopsia' and 'check' or 'circle',
+            onSelect = function()
+                syncColorblindMode('achromatopsia')
+                lib.notify({
+                    title = locale('settings'),
+                    description = locale('ui.settings.colorblind_saved', locale('ui.settings.colorblind_modes.achromatopsia')),
+                    type = 'success'
+                })
+            end,
+        },
+    }
+
+    lib.registerContext({
+        id = 'ox_lib_colorblind',
+        title = locale('ui.settings.colorblind'),
+        options = options,
+    })
+
+    local ok = pcall(lib.showContext, 'ox_lib_colorblind')
+
+    if ok then return end
+
+    local input = lib.inputDialog(locale('ui.settings.colorblind'), {
+        {
+            type = 'select',
+            label = locale('ui.settings.colorblind'),
+            default = settings.colorblind_mode,
+            required = true,
+            options = {
+                { label = locale('ui.settings.colorblind_modes.off'), value = 'off' },
+                { label = locale('ui.settings.colorblind_modes.protanopia'), value = 'protanopia' },
+                { label = locale('ui.settings.colorblind_modes.deuteranopia'), value = 'deuteranopia' },
+                { label = locale('ui.settings.colorblind_modes.tritanopia'), value = 'tritanopia' },
+                { label = locale('ui.settings.colorblind_modes.achromatopsia'), value = 'achromatopsia' },
+            }
+        }
+    }) --[[@as table?]]
+
+    if not input then return end
+
+    local mode = input[1]
+
+    if mode and syncColorblindMode(mode) then
+        lib.notify({
+            title = locale('settings'),
+            description = locale('ui.settings.colorblind_saved', locale(getColorblindData(mode).label)),
+            type = 'success'
+        })
+    end
+end
+
+RegisterNUICallback('syncColorblindMode', function(data, cb)
+    local mode = type(data) == 'table' and data.mode or nil
+
+    if mode and colorblindModes[mode] then
+        syncColorblindMode(mode)
+    end
+
+    cb(1)
+end)
+
 RegisterCommand('ox_lib', function()
+
+
     local inputSettings = {
         {
             type = 'checkbox',
@@ -77,6 +301,31 @@ RegisterCommand('ox_lib', function()
             required = true,
             icon = 'message',
         },
+        {
+            type = 'select',
+            label = locale('ui.settings.colorblind'),
+            options = {
+                { label = locale('ui.settings.colorblind_modes.off'), value = 'off' },
+                { label = locale('ui.settings.colorblind_modes.protanopia'), value = 'protanopia' },
+                { label = locale('ui.settings.colorblind_modes.deuteranopia'), value = 'deuteranopia' },
+                { label = locale('ui.settings.colorblind_modes.tritanopia'), value = 'tritanopia' },
+                { label = locale('ui.settings.colorblind_modes.achromatopsia'), value = 'achromatopsia' },
+            },
+            default = settings.colorblind_mode,
+            required = true,
+            icon = 'eye',
+        },
+        {
+            type = 'select',
+            label = locale('ui.settings.ui_test_action'),
+            options = {
+                { label = locale('ui.settings.ui_test_action_none'), value = 'none' },
+                { label = locale('ui.settings.ui_test_action_circle'), value = 'circle' },
+            },
+            default = 'none',
+            required = true,
+            icon = 'flask',
+        },
     }
 
     if userLocales then
@@ -97,13 +346,28 @@ RegisterCommand('ox_lib', function()
 
     if not input then return end
 
-    ---@type boolean, string, string
-    local notification_audio, notification_position, locale = table.unpack(input)
+    local notification_audio = input[1]
+    local notification_position = input[2]
+    local colorblind_mode = input[3]
+    local ui_test_action = input[4]
+    local localeInput = userLocales and input[5] or nil
 
-    if userLocales and set('locale', locale) then lib.setLocale(locale) end
+    if userLocales and set('locale', localeInput) then lib.setLocale(localeInput) end
 
     set('notification_position', notification_position)
     set('notification_audio', notification_audio)
-end)
+    syncColorblindMode(colorblind_mode)
+
+    if ui_test_action == 'circle' then
+        CreateThread(function()
+            lib.progressCircle({
+                duration = 5000,
+                label = locale('ui.settings.ui_test_action_circle'),
+                position = 'middle',
+                canCancel = true,
+            })
+        end)
+    end
+end, false)
 
 return settings

web/src/App.tsx

@@ -15,6 +15,7 @@ import SkillCheck from './features/skillcheck';
 import RadialMenu from './features/menu/radial';
 import { theme } from './theme';
 import { MantineProvider } from '@mantine/core';
+import { useEffect } from 'react';
 import { useConfig } from './providers/ConfigProvider';
 
 const App: React.FC = () => {
@@ -24,7 +25,9 @@ const App: React.FC = () => {
     setClipboard(data);
   });
 
-  fetchNui('init');
+  useEffect(() => {
+    fetchNui('init').catch(() => undefined);
+  }, []);
 
   return (
     <MantineProvider withNormalizeCSS withGlobalStyles theme={{ ...theme, ...config }}>