diff --git a/resources/modmenu/client.js b/resources/modmenu/client.js index 591a92d..2af7d34 100644 --- a/resources/modmenu/client.js +++ b/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) { - // Get active toggles - let activeToggles = []; +// Track last toggled item for display +let lastToggledItem = null; +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 - for (let key in toggleStates) { - if (toggleStates[key] === true && toggleDisplayNames[key]) { - activeToggles.push(toggleDisplayNames[key]); + // Show last toggled item for 3 seconds after toggle + let now = Date.now(); + if (lastToggledItem && (now - lastToggleTime) < 3000) { + 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); }); // ============================================================================