From e0ce9ace1d8d3c25aedf7df9ae8a25ce1f508b8d Mon Sep 17 00:00:00 2001 From: Garry Newman Date: Mon, 22 Dec 2025 18:13:07 +0000 Subject: [PATCH] Update default pause screen (#3659) --- .../Systems/UI/Panel/Panel.Tooltip.cs | 3 + game/addons/menu/Code/ModalSystem.cs | 5 +- .../PauseMenuModal/PauseMenuModal.razor | 100 ------------ .../PauseMenuModal/PauseMenuModal.razor.scss | 97 ----------- .../Modals/PauseMenuModal/GameInfoBox.razor | 113 +++++++++++++ .../PauseMenuModal/GameInfoBox.razor.scss | 152 +++++++++++++++++ .../Modals/PauseMenuModal/PauseModal.razor | 111 +++++++++++++ .../PauseMenuModal/PauseModal.razor.scss | 154 ++++++++++++++++++ 8 files changed, 536 insertions(+), 199 deletions(-) delete mode 100644 game/addons/menu/Code/Modals/PauseMenuModal/PauseMenuModal.razor delete mode 100644 game/addons/menu/Code/Modals/PauseMenuModal/PauseMenuModal.razor.scss create mode 100644 game/addons/menu/code/Modals/PauseMenuModal/GameInfoBox.razor create mode 100644 game/addons/menu/code/Modals/PauseMenuModal/GameInfoBox.razor.scss create mode 100644 game/addons/menu/code/Modals/PauseMenuModal/PauseModal.razor create mode 100644 game/addons/menu/code/Modals/PauseMenuModal/PauseModal.razor.scss diff --git a/engine/Sandbox.Engine/Systems/UI/Panel/Panel.Tooltip.cs b/engine/Sandbox.Engine/Systems/UI/Panel/Panel.Tooltip.cs index 09851442..c6f511aa 100644 --- a/engine/Sandbox.Engine/Systems/UI/Panel/Panel.Tooltip.cs +++ b/engine/Sandbox.Engine/Systems/UI/Panel/Panel.Tooltip.cs @@ -1,4 +1,5 @@  +using Microsoft.AspNetCore.Components; using Sandbox.Engine; namespace Sandbox.UI; @@ -8,11 +9,13 @@ public partial class Panel /// /// A string to show when hovering over this panel. /// + [Parameter] public string Tooltip { get; set; } /// /// The created tooltip element will have this class, if set. /// + [Parameter] public string TooltipClass { get; set; } /// diff --git a/game/addons/menu/Code/ModalSystem.cs b/game/addons/menu/Code/ModalSystem.cs index 0f39caf7..c20466ec 100644 --- a/game/addons/menu/Code/ModalSystem.cs +++ b/game/addons/menu/Code/ModalSystem.cs @@ -1,4 +1,5 @@ using MenuProject.Modals; +using MenuProject.Modals.PauseMenuModal; using Sandbox; using Sandbox.Modals; using Sandbox.Services; @@ -166,7 +167,7 @@ public class ModalSystem : IModalSystem return; } - var modal = new PauseMenuModal(); + var modal = new PauseModal(); Push( modal ); } @@ -190,5 +191,5 @@ public class ModalSystem : IModalSystem } public bool IsModalOpen => OpenModals.Any(); - public bool IsPauseMenuOpen => OpenModals.OfType().Any(); + public bool IsPauseMenuOpen => OpenModals.OfType().Any(); } diff --git a/game/addons/menu/Code/Modals/PauseMenuModal/PauseMenuModal.razor b/game/addons/menu/Code/Modals/PauseMenuModal/PauseMenuModal.razor deleted file mode 100644 index fd977353..00000000 --- a/game/addons/menu/Code/Modals/PauseMenuModal/PauseMenuModal.razor +++ /dev/null @@ -1,100 +0,0 @@ -@using Sandbox.Modals -@using Sandbox -@using Sandbox.UI -@using Sandbox.Menu -@using MenuProject.MenuUI.Components - -@namespace MenuProject.Modals -@inherits MenuProject.Modals.BaseModal - - - -
- - @if(game is not null) - { - - -
@game.Title
-
@game.Summary
-
- - - - -
- - - } - -
- -
- - @if ( game is not null ) - { - - - @if ( Networking.IsActive && game.GetValue( "ShowPlayerList", true ) ) - { - - } - - @if ( CanChangeMap ) - { - - } - } - - - - -
- -
- -
- - - -@code -{ - - bool CanChangeMap - { - get - { - if ( Networking.IsActive && !Networking.IsHost ) return false; - - return game.GetValue( "ShowChangeMap", false ); - } - } - - Package game; - - - void OnCreateGame( CreateGameResults x ) - { - if ( Networking.IsActive && !Networking.IsHost ) - return; - - if ( !string.IsNullOrEmpty( x.MapIdent ) ) - { - LaunchArguments.Map = x.MapIdent; - } - - Game.Load( Game.Ident, true ); - - this.CloseModal( true ); - } - - void ChangeMap() - { - Game.Overlay.CreateGame( new CreateGameOptions( game, OnCreateGame ) ); - } - - public PauseMenuModal() : base() - { - game = MenuUtility.GamePackage; - } -} diff --git a/game/addons/menu/Code/Modals/PauseMenuModal/PauseMenuModal.razor.scss b/game/addons/menu/Code/Modals/PauseMenuModal/PauseMenuModal.razor.scss deleted file mode 100644 index b7aef1fc..00000000 --- a/game/addons/menu/Code/Modals/PauseMenuModal/PauseMenuModal.razor.scss +++ /dev/null @@ -1,97 +0,0 @@ -PauseMenuModal -{ - font-family: Poppins; - pointer-events: all; - font-size: 11px; - - > .inner - { - flex-direction: column; - background-color: transparent; - justify-content: center; - align-items: center; - } -} - - -.options -{ - flex-direction: column; - font-family: Poppins; - font-size: 24px; - font-weight: bold; -} - -button.button -{ - opacity: 0.5; - gap: 16px; - transition: all 0.1s ease; - width: 300px; -} - -button:hover -{ - opacity: 1; - gap: 24px; -} - -.options .iconpanel -{ - font-size: 32px; - color: #3272ea; -} - -.subtitle, .title -{ - flex-shrink: 0; - font-weight: bold; - font-size: 40px; -} - -.subtitle -{ - font-size: 18px; - font-weight: normal; - margin-bottom: 32px; - margin-top: -5px; - opacity: 0.3; -} - -MediaCardWide -{ - width: 800px; - margin-bottom: 100px; - pointer-events: none; -} - -MediaCardWide > .inner > .image > .inner -{ - width: 300px; - aspect-ratio: 16/9; - pointer-events: all; -} - -MediaCardWide .content .title -{ - font-size: 32px; - pointer-events: all; - cursor: pointer; -} - -Meta > .inner -{ - pointer-events: all; - color: #747e90; - - i - { - color: #636a77 - } -} - -.meta -{ - padding: 8px; - gap: 16px; -} \ No newline at end of file diff --git a/game/addons/menu/code/Modals/PauseMenuModal/GameInfoBox.razor b/game/addons/menu/code/Modals/PauseMenuModal/GameInfoBox.razor new file mode 100644 index 00000000..6ca04ef2 --- /dev/null +++ b/game/addons/menu/code/Modals/PauseMenuModal/GameInfoBox.razor @@ -0,0 +1,113 @@ +@using Sandbox.Modals +@using Sandbox +@using Sandbox.UI +@using Sandbox.Menu +@using MenuProject.MenuUI.Components +@inherits Panel + + + + @{ + + var icon = Package.ThumbWide ?? Package.Thumb; + + @if (icon != null ) + { +
Package.OpenModal())> +
+
+ } + } + +
+ +
+
@Package.Title
+
by @Package.Org?.Title
+
+ + @if ( !string.IsNullOrWhiteSpace( Package.Summary ) ) + { +
@Package.Summary
+ } + +
+ + + + + + + + + + +
+ + @if ( Package.Interaction.Used ) + { +
+
+
Play Time
+
@TimeSpan.FromSeconds( Package.Interaction.Seconds ).Humanize( 1 )
+
+
+
Sessions
+
@Package.Interaction.Sessions.ToMetric( 0 )
+
+
+
First Played
+
@Package.Interaction.FirstUsed?.Date.Humanize()
+
+ + @if ( ach != null ) + { + var achText = $"{ach.All.Where(x => x.IsUnlocked).Count().ToMetric()} of {ach.All.Count().ToMetric()}"; + +
+
Achievements
+
@achText
+
+ } + +
+ } + +
+ + + +@code +{ + [Parameter] + public Package Package { get; set; } + + AchievementCollection ach; + + protected override async Task OnParametersSetAsync() + { + ach = await Package.GetAchievements(); + } + + bool IsFavourite => Package.Interaction.Favourite; + + async void VoteUp() + { + await Package.SetVoteAsync(true); + StateHasChanged(); + } + + async void VoteDown() + { + await Package.SetVoteAsync(false); + StateHasChanged(); + } + + async void ToggleFavourite() + { + await Package.SetFavouriteAsync(!IsFavourite); + StateHasChanged(); + } +} diff --git a/game/addons/menu/code/Modals/PauseMenuModal/GameInfoBox.razor.scss b/game/addons/menu/code/Modals/PauseMenuModal/GameInfoBox.razor.scss new file mode 100644 index 00000000..dc51109b --- /dev/null +++ b/game/addons/menu/code/Modals/PauseMenuModal/GameInfoBox.razor.scss @@ -0,0 +1,152 @@ +GameInfoBox +{ + width: 100%; + flex-direction: column; + font-size: 1.2rem; + + + > .thumb + { + width: 100%; + aspect-ratio: 16/9; + background-color: red; + border-radius: 10px; + background-size: cover; + background-position: center; + position: relative; + + .light-border + { + position: absolute; + width: 100%; + height: 100%; + border: 1px solid #fff1; + border-radius: 10px; + } + + &:hover + { + .light-border + { + border: 1px solid #fff4; + } + } + } +} + +.contents +{ + flex-direction: column; + width: 100%; + + .summary + { + justify-content: center; + } +} + +.title-org +{ + font-weight: 700; + width: 100%; + padding: 1rem; + align-items: center; + justify-content: space-between; + + .title + { + font-size: 2rem; + } + + .org + { + font-size: 1rem; + } + + .title, .org + { + padding: 0.5rem 1rem; + border-radius: 5px; + + &:hover + { + background-color: #fff2; + } + } +} + +.statsbox +{ + flex-direction: column; + padding: 1rem 2rem; + background-color: #0004; + border-radius: 10px; + margin-top: 2rem; + + h1 + { + font-weight: 300; + font-size: 1.5rem; + margin-bottom: 10px; + text-transform: uppercase; + color: #08f; + } + + .row + { + .key + { + width: 50%; + opacity: 0.6; + } + + .value + { + font-weight: bold; + } + } +} + +.metrics +{ + margin-top: 2rem; + flex-wrap: wrap; + gap: 0.25rem; + + .button + { + background-color: #0004; + width: 40%; + flex-grow: 1; + border-radius: 8px; + opacity: 1; + + &:hover + { + background-color: #0006; + } + + &:active + { + background-color: #0002; + } + + &.active + { + color: #08f; + } + + &.disabled + { + pointer-events: none; + } + + &.favorite + { + &.active + { + color: #ff0058; + } + } + } +} \ No newline at end of file diff --git a/game/addons/menu/code/Modals/PauseMenuModal/PauseModal.razor b/game/addons/menu/code/Modals/PauseMenuModal/PauseModal.razor new file mode 100644 index 00000000..4acb699d --- /dev/null +++ b/game/addons/menu/code/Modals/PauseMenuModal/PauseModal.razor @@ -0,0 +1,111 @@ +@using Sandbox.Modals +@using Sandbox +@using Sandbox.UI +@using Sandbox.Menu +@using MenuProject.MenuUI.Components + +@inherits MenuProject.Modals.BaseModal + + + +
+ +
+ +
+ @if (game is not null) + { + + } +
+ +
+ +
+ +
+ +
+ +
+ +
+ +
+ + @if (CanChangeMap) + { + + } + + @if (Networking.IsActive && game.GetValue("ShowPlayerList", true)) + { + + } + + + + +
+ +
+ +
+ +
+ +
+ + + +@code +{ + + bool CanChangeMap + { + get + { + if ( Networking.IsActive && !Networking.IsHost ) return false; + + return game.GetValue( "ShowChangeMap", false ); + } + } + + Package game; + + + void OnCreateGame( CreateGameResults x ) + { + if ( Networking.IsActive && !Networking.IsHost ) + return; + + if ( !string.IsNullOrEmpty( x.MapIdent ) ) + { + LaunchArguments.Map = x.MapIdent; + } + + Game.Load( Game.Ident, true ); + + this.CloseModal( true ); + } + + void ChangeMap() + { + Game.Overlay.CreateGame( new CreateGameOptions( game, OnCreateGame ) ); + } + + public PauseModal() : base() + { + game = MenuUtility.GamePackage; + } + + protected override async Task OnParametersSetAsync() + { + if ( !game.IsRemote ) + { + var ident = game.FullIdent.Split('#')[0]; + game = await Package.FetchAsync(ident, false) ?? game; + StateHasChanged(); + } + } +} diff --git a/game/addons/menu/code/Modals/PauseMenuModal/PauseModal.razor.scss b/game/addons/menu/code/Modals/PauseMenuModal/PauseModal.razor.scss new file mode 100644 index 00000000..535c028b --- /dev/null +++ b/game/addons/menu/code/Modals/PauseMenuModal/PauseModal.razor.scss @@ -0,0 +1,154 @@ +PauseModal.modal +{ + font-family: Poppins; + pointer-events: all; + font-size: 11px; + position: absolute; + + > .inner + { + flex-direction: column; + background-color: transparent; + justify-content: center; + align-items: center; + width: 1920px; + height: 1280px; + position: relative; + padding: 4rem; + gap: 2rem; + } +} + + +PauseModal.modal > .inner > .bottom-bar +{ + max-width: 1800px; + width: 100%; + gap: 2rem; + background-color: #111a; + backdrop-filter: blur( 20px ); + padding: 2rem; + border-radius: 24px; + + .left + { + } + + .center + { + flex-grow: 1; + justify-content: center; + gap: 1rem; + } + + .right + { + gap: 1rem; + } + + button.button + { + width: auto; + font-size: 2rem; + font-weight: 700; + background-color: #fff3; + border-radius: 10px; + padding: 2rem 3rem; + opacity: 1; + + .icon + { + font-size: 3rem; + } + + &.circle + { + border-radius: 100px; + aspect-ratio: 1; + padding: 1rem; + align-items: center; + justify-content: center; + background-color: #575e6b; + color: #b5bdd6; + + &:hover + { + background-color: #9dcc00; + color: #fff; + } + + .icon + { + font-size: 3rem; + } + } + + &.exit + { + background-color: #99004a; + color: #fffc; + text-shadow: 0px 0px 2px #0005; + + &:hover + { + background-color: #cc0063; + color: #fff; + } + } + + &.resume + { + flex-direction: row-reverse; + background-color: #006ccc; + color: #fffc; + text-shadow: 0px 0px 2px #0005; + + &:hover + { + background-color: #08f; + color: #fff; + } + } + } +} + + + +.options +{ + flex-direction: column; + + font-size: 24px; + font-weight: bold; +} + +button.button +{ + opacity: 0.5; + gap: 16px; + width: 300px; +} + +button:hover +{ + opacity: 1; +} + +PauseModal .tiles-container +{ + flex-grow: 1; + width: 100%; + gap: 2rem; + + & > .left + { + width: 450px; + overflow: hidden; + } + + & > .right + { + flex-grow: 1; + overflow: hidden; + } +} \ No newline at end of file