mirror of
https://github.com/iDisaster/GTAConnected.git
synced 2026-03-08 09:25:23 +00:00
Add theme system and status indicator for mod menu
- Add 8 theme options (Black, Red, Blue, Green, Purple, Pink, Gold, Gray) - All menu elements now respect the selected theme color - Add status indicator at bottom of screen showing active toggles in green - Active toggles display as "God Mode | Super Run | etc." at screen bottom - Replace hardcoded red colors with dynamic theme-based colors - Add "Mod Menu Theme" submenu under Settings in main menu
This commit is contained in:
Claude
@@ -25,6 +25,26 @@ let screenShake = 0;
|
||||
let flashAlpha = 0;
|
||||
let currentDescription = "";
|
||||
|
||||
// ============================================================================
|
||||
// THEME SYSTEM
|
||||
// ============================================================================
|
||||
let currentTheme = "red"; // Default theme
|
||||
|
||||
const themes = {
|
||||
black: { primary: { r: 80, g: 80, b: 80 }, accent: { r: 150, g: 150, b: 150 }, name: "Black" },
|
||||
red: { primary: { r: 200, g: 30, b: 30 }, accent: { r: 255, g: 80, b: 80 }, name: "Red" },
|
||||
blue: { primary: { r: 30, g: 80, b: 200 }, accent: { r: 80, g: 150, b: 255 }, name: "Blue" },
|
||||
green: { primary: { r: 30, g: 160, b: 60 }, accent: { r: 80, g: 220, b: 100 }, name: "Green" },
|
||||
purple: { primary: { r: 120, g: 40, b: 180 }, accent: { r: 180, g: 100, b: 255 }, name: "Purple" },
|
||||
pink: { primary: { r: 200, g: 60, b: 120 }, accent: { r: 255, g: 120, b: 180 }, name: "Pink" },
|
||||
gold: { primary: { r: 180, g: 140, b: 30 }, accent: { r: 255, g: 200, b: 80 }, name: "Gold" },
|
||||
gray: { primary: { r: 100, g: 100, b: 110 }, accent: { r: 160, g: 160, b: 170 }, name: "Gray" }
|
||||
};
|
||||
|
||||
function getTheme() {
|
||||
return themes[currentTheme] || themes.red;
|
||||
}
|
||||
|
||||
// Info bar configuration
|
||||
let infoBar = {
|
||||
height: 50
|
||||
@@ -166,7 +186,23 @@ const menuData = {
|
||||
{ label: "Teleport Locations", action: "submenu", target: "teleport" },
|
||||
{ label: "World Options", action: "submenu", target: "world" },
|
||||
{ label: "Weapons", action: "submenu", target: "weapons" },
|
||||
{ label: "Fun Options", action: "submenu", target: "fun" }
|
||||
{ label: "Fun Options", action: "submenu", target: "fun" },
|
||||
{ label: "--- Settings ---", action: "none" },
|
||||
{ label: "Mod Menu Theme", action: "submenu", target: "themes" }
|
||||
]
|
||||
},
|
||||
|
||||
themes: {
|
||||
title: "MOD MENU THEME",
|
||||
items: [
|
||||
{ label: "Black", action: "theme", value: "black" },
|
||||
{ label: "Red", action: "theme", value: "red" },
|
||||
{ label: "Blue", action: "theme", value: "blue" },
|
||||
{ label: "Green", action: "theme", value: "green" },
|
||||
{ label: "Purple", action: "theme", value: "purple" },
|
||||
{ label: "Pink", action: "theme", value: "pink" },
|
||||
{ label: "Gold", action: "theme", value: "gold" },
|
||||
{ label: "Gray", action: "theme", value: "gray" }
|
||||
]
|
||||
},
|
||||
|
||||
@@ -1253,6 +1289,11 @@ function selectItem() {
|
||||
flashAlpha = 1.0;
|
||||
showNotification("FLASH!");
|
||||
break;
|
||||
|
||||
case "theme":
|
||||
currentTheme = item.value;
|
||||
showNotification("Theme: " + themes[item.value].name);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1859,15 +1900,21 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
let baseX = menu.x + slideOffset;
|
||||
let baseY = menu.y;
|
||||
|
||||
// ===== SMOOTH PULSING RED OUTER GLOW =====
|
||||
// ===== SMOOTH PULSING OUTER GLOW (THEMED) =====
|
||||
let theme = getTheme();
|
||||
let glowPulse = Math.sin(animTime * 2) * 0.3 + 0.7;
|
||||
let glowSize = 10 + Math.sin(animTime * 1.5) * 4;
|
||||
|
||||
// Red glow with smooth pulse
|
||||
let redIntensity = Math.floor(200 + Math.sin(animTime * 2) * 45);
|
||||
// Theme-colored glow with smooth pulse
|
||||
let glowIntensityMult = 0.8 + Math.sin(animTime * 2) * 0.2;
|
||||
for (let g = 4; g >= 1; g--) {
|
||||
let gAlpha = Math.floor((40 / g) * glowPulse * menuOpenAnim);
|
||||
let gCol = toColour(redIntensity, 0, 0, gAlpha);
|
||||
let gCol = toColour(
|
||||
Math.floor(theme.primary.r * glowIntensityMult),
|
||||
Math.floor(theme.primary.g * glowIntensityMult),
|
||||
Math.floor(theme.primary.b * glowIntensityMult),
|
||||
gAlpha
|
||||
);
|
||||
drawRect(baseX - glowSize * g, baseY - glowSize * g,
|
||||
menu.width + glowSize * g * 2, totalHeight + glowSize * g * 2 + 10, gCol);
|
||||
}
|
||||
@@ -1876,9 +1923,14 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
let bgColor = toColour(8, 8, 12, Math.floor(245 * menuOpenAnim));
|
||||
drawRect(baseX, baseY, menu.width, totalHeight + 10, bgColor);
|
||||
|
||||
// ===== SMOOTH ANIMATED RED BORDER =====
|
||||
let borderPulse = Math.sin(animTime * 3) * 40 + 200;
|
||||
let borderColor = toColour(Math.floor(borderPulse), 20, 30, Math.floor(220 * menuOpenAnim));
|
||||
// ===== SMOOTH ANIMATED BORDER (THEMED) =====
|
||||
let borderPulse = Math.sin(animTime * 3) * 0.2 + 0.8;
|
||||
let borderColor = toColour(
|
||||
Math.floor(theme.primary.r * borderPulse),
|
||||
Math.floor(theme.primary.g * borderPulse),
|
||||
Math.floor(theme.primary.b * borderPulse),
|
||||
Math.floor(220 * menuOpenAnim)
|
||||
);
|
||||
|
||||
// Smooth border thickness
|
||||
let borderW = 3 + Math.sin(animTime * 3) * 0.8;
|
||||
@@ -1887,9 +1939,9 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
drawRect(baseX, baseY, borderW, totalHeight + 10, borderColor); // Left
|
||||
drawRect(baseX + menu.width - borderW, baseY, borderW, totalHeight + 10, borderColor); // Right
|
||||
|
||||
// Corner accents - smooth brighter red
|
||||
// Corner accents - smooth brighter theme color
|
||||
let cornerSize = 15 + Math.sin(animTime * 2) * 4;
|
||||
let cornerColor = toColour(255, 50, 50, Math.floor(200 * menuOpenAnim));
|
||||
let cornerColor = toColour(theme.accent.r, theme.accent.g, theme.accent.b, Math.floor(200 * menuOpenAnim));
|
||||
drawRect(baseX, baseY, cornerSize, 3, cornerColor);
|
||||
drawRect(baseX, baseY, 3, cornerSize, cornerColor);
|
||||
drawRect(baseX + menu.width - cornerSize, baseY, cornerSize, 3, cornerColor);
|
||||
@@ -1899,23 +1951,33 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
drawRect(baseX + menu.width - cornerSize, baseY + totalHeight + 7, cornerSize, 3, cornerColor);
|
||||
drawRect(baseX + menu.width - 3, baseY + totalHeight + 10 - cornerSize, 3, cornerSize, cornerColor);
|
||||
|
||||
// ===== HEADER - Smooth Black to Red Gradient =====
|
||||
let headerRed = Math.floor(180 + Math.sin(animTime * 2) * 30);
|
||||
let headerLeft = toColour(headerRed, 15, 25, animAlpha);
|
||||
let headerRight = toColour(60, 5, 10, animAlpha);
|
||||
// ===== HEADER - Smooth Black to Theme Gradient =====
|
||||
let headerMult = 0.7 + Math.sin(animTime * 2) * 0.15;
|
||||
let headerLeft = toColour(
|
||||
Math.floor(theme.primary.r * headerMult),
|
||||
Math.floor(theme.primary.g * headerMult * 0.3),
|
||||
Math.floor(theme.primary.b * headerMult * 0.3),
|
||||
animAlpha
|
||||
);
|
||||
let headerRight = toColour(
|
||||
Math.floor(theme.primary.r * 0.3),
|
||||
Math.floor(theme.primary.g * 0.1),
|
||||
Math.floor(theme.primary.b * 0.1),
|
||||
animAlpha
|
||||
);
|
||||
drawGradientRect(baseX + 4, baseY + 4, menu.width - 8, menu.headerHeight - 4, headerLeft, headerRight);
|
||||
|
||||
// Header smooth glow line
|
||||
let lineGlow = Math.sin(animTime * 4) * 0.3 + 0.7;
|
||||
let headerLineColor = toColour(255, 80, 80, Math.floor(150 * lineGlow * menuOpenAnim));
|
||||
let headerLineColor = toColour(theme.accent.r, theme.accent.g, theme.accent.b, Math.floor(150 * lineGlow * menuOpenAnim));
|
||||
drawRect(baseX + 4, baseY + menu.headerHeight - 2, menu.width - 8, 2, headerLineColor);
|
||||
|
||||
// ===== ANIMATED TITLE =====
|
||||
let titleY = baseY + 10;
|
||||
|
||||
// Title glow effect
|
||||
// Title glow effect (themed)
|
||||
let titleGlowPulse = Math.sin(titlePulse) * 0.5 + 0.5;
|
||||
let titleGlowColor = toColour(255, 50, 50, Math.floor(100 * titleGlowPulse * menuOpenAnim));
|
||||
let titleGlowColor = toColour(theme.accent.r, theme.accent.g, theme.accent.b, Math.floor(100 * titleGlowPulse * menuOpenAnim));
|
||||
drawText("REVOLUTION", baseX + 14, titleY + 2, titleGlowColor, 24);
|
||||
drawText("REVOLUTION", baseX + 8, titleY + 2, titleGlowColor, 24);
|
||||
|
||||
@@ -1923,10 +1985,14 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
let shadowColor = toColour(0, 0, 0, Math.floor(200 * menuOpenAnim));
|
||||
drawText("REVOLUTION", baseX + 12, titleY + 3, shadowColor, 24);
|
||||
|
||||
// Main title - pulsing red to white
|
||||
let titleRed = Math.floor(255);
|
||||
let titleOther = Math.floor(180 + Math.sin(titlePulse * 2) * 75);
|
||||
let titleColor = toColour(titleRed, titleOther, titleOther, animAlpha);
|
||||
// Main title - pulsing theme to white
|
||||
let titlePulseVal = Math.sin(titlePulse * 2) * 0.3 + 0.7;
|
||||
let titleColor = toColour(
|
||||
Math.floor(255 * titlePulseVal + theme.accent.r * (1 - titlePulseVal)),
|
||||
Math.floor(255 * titlePulseVal + theme.accent.g * (1 - titlePulseVal)),
|
||||
Math.floor(255 * titlePulseVal + theme.accent.b * (1 - titlePulseVal)),
|
||||
animAlpha
|
||||
);
|
||||
drawText("REVOLUTION", baseX + 10, titleY, titleColor, 24);
|
||||
|
||||
// Subtitle with flicker
|
||||
@@ -1934,10 +2000,15 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
let betaColor = toColour(180, 180, 180, Math.floor(180 * betaFlicker * menuOpenAnim));
|
||||
drawText("ModMenu (Beta)", baseX + 12, titleY + 30, betaColor, 11);
|
||||
|
||||
// Smooth animated line under title
|
||||
// Smooth animated line under title (themed)
|
||||
let lineWidth = 100 + Math.sin(animTime * 3) * 30;
|
||||
let linePulse = Math.sin(animTime * 4) * 40 + 200;
|
||||
let underlineColor = toColour(Math.floor(linePulse), 30, 40, Math.floor(220 * menuOpenAnim));
|
||||
let linePulseMult = Math.sin(animTime * 4) * 0.2 + 0.8;
|
||||
let underlineColor = toColour(
|
||||
Math.floor(theme.primary.r * linePulseMult),
|
||||
Math.floor(theme.primary.g * linePulseMult),
|
||||
Math.floor(theme.primary.b * linePulseMult),
|
||||
Math.floor(220 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX + (menu.width - lineWidth) / 2, baseY + menu.headerHeight - 6, lineWidth, 2, underlineColor);
|
||||
|
||||
// ===== MENU ITEMS =====
|
||||
@@ -1958,41 +2029,71 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
}
|
||||
|
||||
if (isSelected) {
|
||||
// ===== SELECTED ITEM - Pulsing Red =====
|
||||
let selRed = Math.floor(150 + selectGlow * 80);
|
||||
let selColor = toColour(selRed, 20, 30, Math.floor(230 * menuOpenAnim));
|
||||
// ===== SELECTED ITEM - Pulsing Theme Color =====
|
||||
let selMult = 0.6 + selectGlow * 0.35;
|
||||
let selColor = toColour(
|
||||
Math.floor(theme.primary.r * selMult),
|
||||
Math.floor(theme.primary.g * selMult * 0.3),
|
||||
Math.floor(theme.primary.b * selMult * 0.3),
|
||||
Math.floor(230 * menuOpenAnim)
|
||||
);
|
||||
|
||||
// Outer glow
|
||||
let selGlowColor = toColour(255, 40, 50, Math.floor(50 * menuOpenAnim));
|
||||
let selGlowColor = toColour(theme.accent.r, theme.accent.g, theme.accent.b, Math.floor(50 * menuOpenAnim));
|
||||
drawRect(baseX + 2, itemY - 3, menu.width - 4, menu.itemHeight + 6, selGlowColor);
|
||||
|
||||
// Main selection background
|
||||
drawRect(baseX + 6 + selectOffset, itemY, menu.width - 12, menu.itemHeight - 2, selColor);
|
||||
|
||||
// Left indicator bar - smooth bright red pulsing
|
||||
let barPulse = Math.sin(selectedPulse * 1.5) * 40 + 200;
|
||||
let barColor = toColour(255, Math.floor(barPulse - 150), Math.floor(barPulse - 150), animAlpha);
|
||||
// Left indicator bar - smooth bright theme pulsing
|
||||
let barPulse = Math.sin(selectedPulse * 1.5) * 0.2 + 0.8;
|
||||
let barColor = toColour(
|
||||
Math.floor(theme.accent.r * barPulse),
|
||||
Math.floor(theme.accent.g * barPulse),
|
||||
Math.floor(theme.accent.b * barPulse),
|
||||
animAlpha
|
||||
);
|
||||
drawRect(baseX + 6, itemY, 5, menu.itemHeight - 2, barColor);
|
||||
|
||||
// Right edge highlight
|
||||
let rightColor = toColour(255, 80, 80, Math.floor(100 * menuOpenAnim));
|
||||
let rightColor = toColour(theme.accent.r, theme.accent.g, theme.accent.b, Math.floor(100 * menuOpenAnim));
|
||||
drawRect(baseX + menu.width - 8, itemY, 2, menu.itemHeight - 2, rightColor);
|
||||
|
||||
} else if (item.action === "none") {
|
||||
// Separator
|
||||
let sepColor = toColour(40, 15, 20, Math.floor(180 * menuOpenAnim));
|
||||
// Separator (themed)
|
||||
let sepColor = toColour(
|
||||
Math.floor(theme.primary.r * 0.2),
|
||||
Math.floor(theme.primary.g * 0.1),
|
||||
Math.floor(theme.primary.b * 0.1),
|
||||
Math.floor(180 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX + 6, itemY, menu.width - 12, menu.itemHeight - 2, sepColor);
|
||||
// Separator line
|
||||
let sepLineColor = toColour(100, 30, 40, Math.floor(150 * menuOpenAnim));
|
||||
let sepLineColor = toColour(
|
||||
Math.floor(theme.primary.r * 0.5),
|
||||
Math.floor(theme.primary.g * 0.2),
|
||||
Math.floor(theme.primary.b * 0.2),
|
||||
Math.floor(150 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX + 20, itemY + menu.itemHeight/2 - 1, menu.width - 40, 1, sepLineColor);
|
||||
} else {
|
||||
// Normal item - dark with subtle red tint
|
||||
let normRed = 25 + (i % 2) * 5;
|
||||
let normColor = toColour(normRed, 12, 15, Math.floor(200 * menuOpenAnim));
|
||||
// Normal item - dark with subtle theme tint
|
||||
let normTint = 0.1 + (i % 2) * 0.02;
|
||||
let normColor = toColour(
|
||||
Math.floor(theme.primary.r * normTint + 15),
|
||||
Math.floor(theme.primary.g * normTint * 0.5 + 10),
|
||||
Math.floor(theme.primary.b * normTint * 0.5 + 12),
|
||||
Math.floor(200 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX + 6, itemY, menu.width - 12, menu.itemHeight - 2, normColor);
|
||||
|
||||
// Subtle left border on hover area
|
||||
let leftBorderColor = toColour(80, 20, 25, Math.floor(100 * menuOpenAnim));
|
||||
// Subtle left border on hover area (themed)
|
||||
let leftBorderColor = toColour(
|
||||
Math.floor(theme.primary.r * 0.4),
|
||||
Math.floor(theme.primary.g * 0.1),
|
||||
Math.floor(theme.primary.b * 0.1),
|
||||
Math.floor(100 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX + 6, itemY, 2, menu.itemHeight - 2, leftBorderColor);
|
||||
}
|
||||
|
||||
@@ -2002,7 +2103,12 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
let textColor = toColour(textBright, textBright, textBright, animAlpha);
|
||||
|
||||
if (item.action === "none") {
|
||||
let sepTextColor = toColour(150, 100, 110, Math.floor(200 * menuOpenAnim));
|
||||
let sepTextColor = toColour(
|
||||
Math.floor(theme.accent.r * 0.6),
|
||||
Math.floor(theme.accent.g * 0.5),
|
||||
Math.floor(theme.accent.b * 0.5),
|
||||
Math.floor(200 * menuOpenAnim)
|
||||
);
|
||||
drawText(item.label, baseX + 20, itemY + 12, sepTextColor, 11);
|
||||
} else {
|
||||
drawText(item.label, textX, itemY + 12, textColor, 14);
|
||||
@@ -2038,31 +2144,51 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
}
|
||||
}
|
||||
|
||||
// Submenu arrow - smoother
|
||||
// Submenu arrow - smoother (themed)
|
||||
if (item.action === "submenu") {
|
||||
let arrowX = baseX + menu.width - 32 + (isSelected ? Math.sin(animTime * 5) * 3 : 0);
|
||||
let arrowBright = isSelected ? 255 : 150;
|
||||
let arrowColor = toColour(arrowBright, arrowBright * 0.6, arrowBright * 0.6, animAlpha);
|
||||
let arrowBright = isSelected ? 1.0 : 0.6;
|
||||
let arrowColor = toColour(
|
||||
Math.floor(theme.accent.r * arrowBright),
|
||||
Math.floor(theme.accent.g * arrowBright),
|
||||
Math.floor(theme.accent.b * arrowBright),
|
||||
animAlpha
|
||||
);
|
||||
drawText(">>", arrowX, itemY + 12, arrowColor, 14);
|
||||
}
|
||||
}
|
||||
|
||||
// ===== FOOTER =====
|
||||
// ===== FOOTER (THEMED) =====
|
||||
let footerY = yPos + visibleCount * menu.itemHeight;
|
||||
let footerColor = toColour(20, 8, 12, Math.floor(230 * menuOpenAnim));
|
||||
let footerColor = toColour(
|
||||
Math.floor(theme.primary.r * 0.1),
|
||||
Math.floor(theme.primary.g * 0.05),
|
||||
Math.floor(theme.primary.b * 0.05 + 8),
|
||||
Math.floor(230 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX + 4, footerY, menu.width - 8, menu.footerHeight, footerColor);
|
||||
|
||||
// Footer top line
|
||||
let footerLineColor = toColour(120, 40, 50, Math.floor(180 * menuOpenAnim));
|
||||
// Footer top line (themed)
|
||||
let footerLineColor = toColour(
|
||||
Math.floor(theme.primary.r * 0.6),
|
||||
Math.floor(theme.primary.g * 0.2),
|
||||
Math.floor(theme.primary.b * 0.25),
|
||||
Math.floor(180 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX + 4, footerY, menu.width - 8, 2, footerLineColor);
|
||||
|
||||
// Footer text
|
||||
let footerTextColor = toColour(180, 150, 150, Math.floor(200 * menuOpenAnim));
|
||||
let footerTextColor = toColour(180, 170, 170, Math.floor(200 * menuOpenAnim));
|
||||
drawText("UP/DOWN | ENTER | BACK", baseX + 25, footerY + 10, footerTextColor, 11);
|
||||
|
||||
// ===== SCROLL BAR =====
|
||||
// ===== SCROLL BAR (THEMED) =====
|
||||
if (items.length > menu.maxVisibleItems) {
|
||||
let scrollTrackColor = toColour(40, 15, 20, Math.floor(150 * menuOpenAnim));
|
||||
let scrollTrackColor = toColour(
|
||||
Math.floor(theme.primary.r * 0.2),
|
||||
Math.floor(theme.primary.g * 0.08),
|
||||
Math.floor(theme.primary.b * 0.1),
|
||||
Math.floor(150 * menuOpenAnim)
|
||||
);
|
||||
let scrollTrackY = baseY + menu.headerHeight + 5;
|
||||
let scrollTrackH = visibleCount * menu.itemHeight - 10;
|
||||
drawRect(baseX + menu.width - 12, scrollTrackY, 6, scrollTrackH, scrollTrackColor);
|
||||
@@ -2071,51 +2197,73 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
let scrollBarH = Math.max(30, scrollTrackH * (visibleCount / items.length));
|
||||
let scrollBarY = scrollTrackY + scrollPct * (scrollTrackH - scrollBarH);
|
||||
|
||||
let scrollPulse = Math.sin(animTime * 2) * 30 + 180;
|
||||
let scrollBarColor = toColour(Math.floor(scrollPulse), 50, 60, Math.floor(220 * menuOpenAnim));
|
||||
let scrollPulse = Math.sin(animTime * 2) * 0.15 + 0.85;
|
||||
let scrollBarColor = toColour(
|
||||
Math.floor(theme.primary.r * scrollPulse),
|
||||
Math.floor(theme.primary.g * scrollPulse * 0.3),
|
||||
Math.floor(theme.primary.b * scrollPulse * 0.35),
|
||||
Math.floor(220 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX + menu.width - 12, scrollBarY, 6, scrollBarH, scrollBarColor);
|
||||
}
|
||||
|
||||
// ===== INFO BAR =====
|
||||
// ===== INFO BAR (THEMED) =====
|
||||
if (currentDescription && currentDescription.length > 0) {
|
||||
let infoY = baseY + totalHeight + 15;
|
||||
let infoBarHeight = infoBar.height;
|
||||
|
||||
|
||||
// Background with glow effect
|
||||
let infoGlowPulse = Math.sin(animTime * 2) * 0.3 + 0.7;
|
||||
let infoBgColor = toColour(20, 10, 15, Math.floor(220 * menuOpenAnim));
|
||||
let infoBgColor = toColour(
|
||||
Math.floor(theme.primary.r * 0.1),
|
||||
Math.floor(theme.primary.g * 0.05),
|
||||
Math.floor(theme.primary.b * 0.07 + 10),
|
||||
Math.floor(220 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX, infoY, menu.width, infoBarHeight, infoBgColor);
|
||||
|
||||
// Animated red border (matching menu style)
|
||||
let infoBorderPulse = Math.sin(animTime * 3) * 40 + 200;
|
||||
let infoBorderColor = toColour(Math.floor(infoBorderPulse), 30, 40, Math.floor(200 * menuOpenAnim));
|
||||
|
||||
// Animated themed border (matching menu style)
|
||||
let infoBorderPulse = Math.sin(animTime * 3) * 0.2 + 0.8;
|
||||
let infoBorderColor = toColour(
|
||||
Math.floor(theme.primary.r * infoBorderPulse),
|
||||
Math.floor(theme.primary.g * infoBorderPulse * 0.2),
|
||||
Math.floor(theme.primary.b * infoBorderPulse * 0.25),
|
||||
Math.floor(200 * menuOpenAnim)
|
||||
);
|
||||
drawRect(baseX, infoY, menu.width, 3, infoBorderColor); // Top
|
||||
drawRect(baseX, infoY + infoBarHeight - 3, menu.width, 3, infoBorderColor); // Bottom
|
||||
drawRect(baseX, infoY, 3, infoBarHeight, infoBorderColor); // Left
|
||||
drawRect(baseX + menu.width - 3, infoY, 3, infoBarHeight, infoBorderColor); // Right
|
||||
|
||||
// Corner accents (matching menu style)
|
||||
let cornerSize = 12 + Math.sin(animTime * 2) * 3;
|
||||
let cornerColor = toColour(255, 60, 60, Math.floor(180 * menuOpenAnim));
|
||||
drawRect(baseX, infoY, cornerSize, 3, cornerColor);
|
||||
drawRect(baseX, infoY, 3, cornerSize, cornerColor);
|
||||
drawRect(baseX + menu.width - cornerSize, infoY, cornerSize, 3, cornerColor);
|
||||
drawRect(baseX + menu.width - cornerSize, infoY, 3, cornerSize, cornerColor);
|
||||
drawRect(baseX, infoY + infoBarHeight - cornerSize, infoY, 3, cornerSize, cornerColor);
|
||||
drawRect(baseX + menu.width - cornerSize, infoY + infoBarHeight - cornerSize, infoY, 3, cornerSize, cornerColor);
|
||||
|
||||
|
||||
// Corner accents (themed)
|
||||
let infoCornerSize = 12 + Math.sin(animTime * 2) * 3;
|
||||
let infoCornerColor = toColour(theme.accent.r, theme.accent.g, theme.accent.b, Math.floor(180 * menuOpenAnim));
|
||||
drawRect(baseX, infoY, infoCornerSize, 3, infoCornerColor);
|
||||
drawRect(baseX, infoY, 3, infoCornerSize, infoCornerColor);
|
||||
drawRect(baseX + menu.width - infoCornerSize, infoY, infoCornerSize, 3, infoCornerColor);
|
||||
drawRect(baseX + menu.width - 3, infoY, 3, infoCornerSize, infoCornerColor);
|
||||
drawRect(baseX, infoY + infoBarHeight - 3, infoCornerSize, 3, infoCornerColor);
|
||||
drawRect(baseX, infoY + infoBarHeight - infoCornerSize, 3, infoCornerSize, infoCornerColor);
|
||||
drawRect(baseX + menu.width - infoCornerSize, infoY + infoBarHeight - 3, infoCornerSize, 3, infoCornerColor);
|
||||
drawRect(baseX + menu.width - 3, infoY + infoBarHeight - infoCornerSize, 3, infoCornerSize, infoCornerColor);
|
||||
|
||||
// Description text with glow effect
|
||||
let textGlow = Math.sin(animTime * 4) * 0.4 + 0.6;
|
||||
let glowColor = toColour(255, 80, 80, Math.floor(30 * textGlow * menuOpenAnim));
|
||||
let glowColor = toColour(theme.accent.r, theme.accent.g, theme.accent.b, Math.floor(30 * textGlow * menuOpenAnim));
|
||||
drawText(currentDescription, baseX + 14, infoY + 18, glowColor, 14);
|
||||
|
||||
|
||||
// Main description text
|
||||
let textColor = toColour(255, 255, 255, Math.floor(255 * menuOpenAnim));
|
||||
drawText(currentDescription, baseX + 12, infoY + 18, textColor, 12);
|
||||
|
||||
// "INFO" label
|
||||
let labelColor = toColour(200, 100, 100, Math.floor(200 * menuOpenAnim));
|
||||
drawText("ℹ INFO", baseX + 12, infoY + 2, labelColor, 10);
|
||||
|
||||
// "INFO" label (themed)
|
||||
let labelColor = toColour(
|
||||
Math.floor(theme.accent.r * 0.8),
|
||||
Math.floor(theme.accent.g * 0.5),
|
||||
Math.floor(theme.accent.b * 0.5),
|
||||
Math.floor(200 * menuOpenAnim)
|
||||
);
|
||||
drawText("INFO", baseX + 12, infoY + 2, labelColor, 10);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -2205,6 +2353,75 @@ addEventHandler("OnDrawnHUD", function(event) {
|
||||
});
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// STATUS INDICATOR - Shows active toggles at bottom of screen
|
||||
// ============================================================================
|
||||
|
||||
addEventHandler("OnDrawnHUD", function(event) {
|
||||
// Get active toggles
|
||||
let activeToggles = [];
|
||||
|
||||
// Define display names for toggles
|
||||
let toggleDisplayNames = {
|
||||
godMode: "God Mode",
|
||||
invincible: "Invincible",
|
||||
superRun: "Super Run",
|
||||
noRagdoll: "No Ragdoll",
|
||||
neverWanted: "Never Wanted",
|
||||
vehGodMode: "Vehicle God Mode",
|
||||
driveOnWater: "Drive On Water",
|
||||
rainbowCar: "Rainbow Car",
|
||||
driftMode: "Drift Mode",
|
||||
neonLights: "Neon Lights",
|
||||
flyMode: "Fly Mode",
|
||||
vehShootRPG: "Vehicle RPG",
|
||||
rainbowSky: "Rainbow Sky",
|
||||
explosiveAmmo: "Explosive Ammo",
|
||||
moonGravity: "Moon Gravity",
|
||||
drunkMode: "Drunk Mode",
|
||||
matrixMode: "Matrix Mode",
|
||||
thermalVision: "Thermal Vision",
|
||||
nightVision: "Night Vision"
|
||||
};
|
||||
|
||||
// Collect active toggles
|
||||
for (let key in toggleStates) {
|
||||
if (toggleStates[key] === true && toggleDisplayNames[key]) {
|
||||
activeToggles.push(toggleDisplayNames[key]);
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
});
|
||||
|
||||
// ============================================================================
|
||||
// TOGGLE EFFECTS
|
||||
// ============================================================================
|
||||
|
||||
Reference in New Issue
Block a user