MainMenu.razor

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.

NetworkingFile Access
@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>