Razor UI component for the main menu of a Sandbox game. Renders background layers, header with stats and nav, game mode cards, footer, and a settings modal with volume, music toggle, language selection and controls reference, and wires up click/hover handlers and data bindings.
@namespace Sandbox
@using Sandbox;
@using Sandbox.UI;
@using System;
@inherits PanelComponent
<root class="mainmenu-root" onclick="@PlayClickSound">
<!-- BACKGROUND LAYERS -->
<div class="bg-layer">
<div class="bg-image"></div>
<div class="bg-gradient-vignette"></div>
<div class="bg-cyber-grid"></div>
<div class="ambient-glow glow-1"></div>
<div class="ambient-glow glow-2"></div>
</div>
<!-- HEADER BAR -->
<div class="header-bar">
<div class="brand-group">
<div class="logo-box">
<span class="logo-title">@GetText("game_title")</span>
<span class="logo-tag">@GetText("game_tagline")</span>
</div>
<div class="status-pill">
<span class="status-dot"></span>
<span class="status-text">ONLINE</span>
</div>
<div class="user-stats-pill">
<span class="stat-item"><span class="stat-icon">🏆</span> <span class="stat-label">@(IsRussian ? "РЕКОРД:" : "BEST:")</span> <span class="stat-val">@GetHighScore()</span></span>
<span class="stat-divider">|</span>
<span class="stat-item"><span class="stat-icon">💥</span> <span class="stat-label">@(IsRussian ? "ТОЛЧКИ:" : "PUSHES:")</span> <span class="stat-val">@GetTotalPushes()</span></span>
</div>
</div>
<div class="header-nav">
<button class="nav-btn" onclick="@OnSettingsClicked" onmouseover="@PlayHoverSound">
<span class="btn-icon">⚙️</span>
<span class="btn-label">@GetText("settings_btn")</span>
</button>
<button class="nav-btn lang-btn" onclick="@OnLangClicked" onmouseover="@PlayHoverSound">
<span class="btn-icon">🌐</span>
<span class="btn-label">@GetText("lang_btn")</span>
</button>
<button class="nav-btn exit-btn" onclick="@OnQuitClicked" onmouseover="@PlayHoverSound">
<span class="btn-icon">🚪</span>
<span class="btn-label">@GetText("exit_btn")</span>
</button>
</div>
</div>
<!-- GAME MODE SELECT -->
<div class="content-container">
<div class="modes-container">
<div class="section-header">
<div class="header-titles">
<span class="section-kicker">ONE MORE PUSH • SEASON 2</span>
<span class="section-title">@GetText("title")</span>
<span class="section-sub">@GetText("subtitle")</span>
</div>
<span class="mode-count">02 MODES</span>
</div>
<div class="cards-grid">
@foreach ( var mode in Modes )
{
<Sandbox.MainMenuModeCard ModeId="@mode.Id"
Tag="@GetText(mode.TagKey)"
Category="@mode.Category"
Icon="@mode.Icon"
Title="@GetText(mode.TitleKey)"
Description="@GetText(mode.DescKey)"
Highlights="@GetHighlights(mode)"
PlayLabel="@GetText("play_btn")"
OnPlay="@(() => StartLoadingMode(mode))"
OnHover="@PlayHoverSound" />
}
</div>
</div>
</div>
<div class="footer-bar">
<span class="footer-copy">SUMO PUSH <span>•</span> NEXTBOT RUN</span>
<span class="footer-version">S&BOX ARENA</span>
</div>
<!-- SETTINGS MODAL -->
@if ( IsSettingsOpen )
{
<div class="modal-backdrop">
<div class="modal-box">
<div class="modal-header">
<div class="modal-title-wrap">
<span class="modal-icon">⚙️</span>
<span class="modal-title">@GetText("settings_title")</span>
</div>
<button class="modal-close-icon" onclick="@OnCloseSettingsClicked" onmouseover="@PlayHoverSound">✕</button>
</div>
<div class="modal-content">
<!-- Volume Setting -->
<div class="modal-group">
<div class="group-header">
<span class="group-label">🔊 @GetText("volume_label")</span>
<span class="volume-readout">@((int)(Volume * 100))%</span>
</div>
<div class="volume-selector">
<button class="vol-preset @(Volume <= 0.05f ? "active" : "")" onclick="@(() => OnVolumeBtnClicked(0.0f))" onmouseover="@PlayHoverSound">0%</button>
<button class="vol-preset @(Volume > 0.05f && Volume <= 0.35f ? "active" : "")" onclick="@(() => OnVolumeBtnClicked(0.25f))" onmouseover="@PlayHoverSound">25%</button>
<button class="vol-preset @(Volume > 0.35f && Volume <= 0.65f ? "active" : "")" onclick="@(() => OnVolumeBtnClicked(0.50f))" onmouseover="@PlayHoverSound">50%</button>
<button class="vol-preset @(Volume > 0.65f && Volume <= 0.85f ? "active" : "")" onclick="@(() => OnVolumeBtnClicked(0.75f))" onmouseover="@PlayHoverSound">75%</button>
<button class="vol-preset @(Volume > 0.85f ? "active" : "")" onclick="@(() => OnVolumeBtnClicked(1.0f))" onmouseover="@PlayHoverSound">100%</button>
</div>
</div>
<!-- Music Toggle Setting -->
<div class="modal-group">
<div class="group-header">
<span class="group-label">🎵 @(IsRussian ? "Фоновая музыка" : "Background Music")</span>
<span class="volume-readout" style="color: @(PushHud.EnableMusic ? "#34d399" : "#94a3b8");">@(PushHud.EnableMusic ? (IsRussian ? "ВКЛ" : "ON") : (IsRussian ? "ВЫКЛ" : "OFF"))</span>
</div>
<div class="lang-selector">
<button class="lang-choice @(!PushHud.EnableMusic ? "active" : "")" onclick="@(() => OnMusicToggle(false))" onmouseover="@PlayHoverSound">
🔇 @(IsRussian ? "ВЫКЛ (по умолч.)" : "OFF (default)")
</button>
<button class="lang-choice @(PushHud.EnableMusic ? "active" : "")" onclick="@(() => OnMusicToggle(true))" onmouseover="@PlayHoverSound">
🔊 @(IsRussian ? "ВКЛЮЧИТЬ" : "ENABLE")
</button>
</div>
</div>
<!-- Language Setting -->
<div class="modal-group">
<div class="group-header">
<span class="group-label">🌐 Язык / Language</span>
</div>
<div class="lang-selector">
<button class="lang-choice @(IsRussian ? "active" : "")" onclick="@(() => SetLanguage(GameLanguage.Russian))" onmouseover="@PlayHoverSound">
🇷🇺 Русский
</button>
<button class="lang-choice @(!IsRussian ? "active" : "")" onclick="@(() => SetLanguage(GameLanguage.English))" onmouseover="@PlayHoverSound">
🇬🇧 English
</button>
</div>
</div>
<!-- Controls Reference -->
<div class="modal-group controls-box">
<span class="controls-header">🎮 @GetText("controls_title")</span>
<div class="controls-list">
<div class="ctrl-item">
<span class="ctrl-key">WASD</span>
<span class="ctrl-desc">@GetText("ctrl_move")</span>
</div>
<div class="ctrl-item">
<span class="ctrl-key">ЛКМ / E</span>
<span class="ctrl-desc">@GetText("ctrl_action")</span>
</div>
<div class="ctrl-item">
<span class="ctrl-key">ПКМ</span>
<span class="ctrl-desc">@GetText("ctrl_rmb")</span>
</div>
<div class="ctrl-item">
<span class="ctrl-key">ПРОБЕЛ</span>
<span class="ctrl-desc">@GetText("ctrl_space")</span>
</div>
<div class="ctrl-item">
<span class="ctrl-key">SHIFT</span>
<span class="ctrl-desc">@GetText("ctrl_shift")</span>
</div>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-primary-close" onclick="@OnCloseSettingsClicked" onmouseover="@PlayHoverSound">
@GetText("close_btn")
</button>
</div>
</div>
</div>
}
</root>