Restore toggle indicators and add BetterIV-style status display

- Restore ON/OFF toggle indicator boxes inside menu
- Add BetterIV-style status at bottom center of screen
- Shows "God Mode: On" (with On in cyan) or "God Mode: Off" (with Off in red)
- Status displays for 3 seconds after toggling
- Keep color-coded labels in menu items

resources/modmenu/client.js

@@ -945,6 +945,10 @@ function selectItem() {
             item.state = toggleStates[item.target];
             // Update label with color-coded state
             item.label = getToggleLabel(item.target);
+            // Set status indicator variables for bottom display
+            lastToggledItem = item.target;
+            lastToggleTime = Date.now();
+            lastToggleState = toggleStates[item.target];
             triggerNetworkEvent("ModMenu:Toggle", item.target, toggleStates[item.target]);
             break;
 
@@ -2149,6 +2153,36 @@ addEventHandler("OnDrawnHUD", function(event) {
             drawText(item.label, textX, itemY + 12, textColor, 14);
         }
 
+        // ===== TOGGLE INDICATORS =====
+        if (item.action === "toggle") {
+            let isOn = toggleStates[item.target];
+            let stateText = isOn ? "ON" : "OFF";
+            let stateX = baseX + menu.width - 60;
+
+            if (isOn) {
+                // GREEN ON - Smooth Pulsing
+                let greenPulse = Math.sin(animTime * 3) * 40 + 215;
+                let onBgColor = toColour(30, Math.floor(greenPulse * 0.4), 30, animAlpha);
+                let onTextColor = toColour(80, Math.floor(greenPulse), 80, animAlpha);
+                drawRect(stateX - 8, itemY + 8, 52, 24, onBgColor);
+                // Green border
+                let onBorderColor = toColour(50, Math.floor(greenPulse), 50, animAlpha);
+                drawRect(stateX - 8, itemY + 8, 52, 2, onBorderColor);
+                drawRect(stateX - 8, itemY + 30, 52, 2, onBorderColor);
+                drawText(stateText, stateX + 5, itemY + 12, onTextColor, 13);
+            } else {
+                // RED OFF
+                let offBgColor = toColour(80, 25, 30, animAlpha);
+                let offTextColor = toColour(255, 90, 90, animAlpha);
+                drawRect(stateX - 8, itemY + 8, 52, 24, offBgColor);
+                // Red border
+                let offBorderColor = toColour(150, 40, 50, animAlpha);
+                drawRect(stateX - 8, itemY + 8, 52, 2, offBorderColor);
+                drawRect(stateX - 8, itemY + 30, 52, 2, offBorderColor);
+                drawText(stateText, stateX + 2, itemY + 12, offTextColor, 13);
+            }
+        }
+
         // Submenu arrow - smoother (themed)
         if (item.action === "submenu") {
             let arrowX = baseX + menu.width - 32 + (isSelected ? Math.sin(animTime * 5) * 3 : 0);
@@ -2309,13 +2343,15 @@ function showNotification(text) {
 }
 
 // ============================================================================
-// STATUS INDICATOR - Shows active toggles at bottom of screen
+// STATUS INDICATOR - Shows active toggles at bottom of screen (BetterIV style)
 // ============================================================================
 
-addEventHandler("OnDrawnHUD", function(event) {
+// Track last toggled item for display
-    // Get active toggles
+let lastToggledItem = null;
-    let activeToggles = [];
+let lastToggleTime = 0;
+let lastToggleState = false;
 
+addEventHandler("OnDrawnHUD", function(event) {
     // Define display names for toggles
     let toggleDisplayNames = {
         godMode: "God Mode",
@@ -2339,42 +2375,36 @@ addEventHandler("OnDrawnHUD", function(event) {
         nightVision: "Night Vision"
     };
 
-    // Collect active toggles
+    // Show last toggled item for 3 seconds after toggle
-    for (let key in toggleStates) {
+    let now = Date.now();
-        if (toggleStates[key] === true && toggleDisplayNames[key]) {
+    if (lastToggledItem && (now - lastToggleTime) < 3000) {
-            activeToggles.push(toggleDisplayNames[key]);
+        let displayName = toggleDisplayNames[lastToggledItem] || lastToggledItem;
+        let stateText = lastToggleState ? "On" : "Off";
+
+        // Screen dimensions
+        let screenWidth = 1920;
+        let screenHeight = 1080;
+
+        // Calculate text width and position at bottom center
+        let fullText = displayName + ": " + stateText;
+        let textWidth = fullText.length * 9;
+        let boxX = (screenWidth - textWidth) / 2 - 10;
+        let boxY = screenHeight - 50;
+
+        // Draw name part in white
+        let nameColor = toColour(255, 255, 255, 255);
+        drawText(displayName + ": ", boxX, boxY, nameColor, 16);
+
+        // Draw state in green (On) or red (Off)
+        let stateX = boxX + (displayName.length + 2) * 9;
+        if (lastToggleState) {
+            let onColor = toColour(0, 255, 200, 255); // Cyan-green like BetterIV
+            drawText(stateText, stateX, boxY, onColor, 16);
+        } else {
+            let offColor = toColour(255, 80, 80, 255); // Red
+            drawText(stateText, stateX, boxY, offColor, 16);
         }
     }
-
-    // Only draw if there are active toggles
-    if (activeToggles.length === 0) return;
-
-    // Screen dimensions (approximate - GTAConnected usually uses 1920x1080 ref)
-    let screenWidth = 1920;
-    let screenHeight = 1080;
-
-    // Position at bottom center
-    let statusText = activeToggles.join(" | ");
-    let textWidth = statusText.length * 7; // Approximate character width
-    let boxWidth = textWidth + 40;
-    let boxHeight = 28;
-    let boxX = (screenWidth - boxWidth) / 2;
-    let boxY = screenHeight - 45;
-
-    // Background - dark semi-transparent
-    let bgColor = toColour(15, 15, 20, 180);
-    drawRect(boxX, boxY, boxWidth, boxHeight, bgColor);
-
-    // Border - green to indicate active
-    let borderColor = toColour(50, 200, 80, 220);
-    drawRect(boxX, boxY, boxWidth, 2, borderColor); // Top
-    drawRect(boxX, boxY + boxHeight - 2, boxWidth, 2, borderColor); // Bottom
-    drawRect(boxX, boxY, 2, boxHeight, borderColor); // Left
-    drawRect(boxX + boxWidth - 2, boxY, 2, boxHeight, borderColor); // Right
-
-    // Text - bright green for ON status
-    let textColor = toColour(80, 255, 120, 255);
-    drawText(statusText, boxX + 20, boxY + 6, textColor, 12);
 });
 
 // ============================================================================