feat: improve menus

GavrilovNI · Mar 17, 2024 · 58dabc3 · 58dabc3
1 parent b47d831
commit 58dabc3
Show file tree

Hide file tree

Showing 12 changed files with 115 additions and 17 deletions.
diff --git a/code/UI/FakeLoadingScreen.razor b/code/UI/FakeLoadingScreen.razor
@@ -9,7 +9,7 @@
 @inherits PanelComponent
 @implements ILocalPlayerInitializable
 
-<root class="enabled">
+<root class="enabled" style="background-image: url(@BackgroundImagePath);">
 	<div class="title-holder">
 		<AdaptiveLabel class="title">Loading...</AdaptiveLabel>
 	</div>
@@ -27,6 +27,7 @@
 	[Property] protected float LastSpeed { get; set; } = 0.005f;
 	[Property] protected float WaitingPercent { get; set; } = 0.99f;
 	[Property] protected float FinishingTime { get; set; } = 1f;
+	[Property] protected string BackgroundImagePath { get; set; } = "textures/voxelworld/ui/background.png";
 
 	protected Panel FillPanel { get; set; } = null!;
 

diff --git a/code/UI/FakeLoadingScreen.razor.scss b/code/UI/FakeLoadingScreen.razor.scss
@@ -2,8 +2,9 @@ FakeLoadingScreen {
     position: absolute;
     width: 100vw;
     height: 100vh;
-    background-color: #333;
     z-index: 99999;
+    background-position: center;
+    background-size: auto 100%;
     font-family: Poppins;
 
     .title-holder {
@@ -20,6 +21,8 @@ FakeLoadingScreen {
         position: relative;
         font-size: 10%;
         text-align: center;
+        color: #206a83;
+        text-stroke: 2px #9dd9ee;
         padding-bottom: 30px;
     }
 
@@ -29,6 +32,7 @@ FakeLoadingScreen {
         left: 50%;
         transform: translate(-50%, -50%);
         background-color: #444;
+        border: 2px solid #ccc;
         width: 60%;
         aspect-ratio: 20;
 

diff --git a/code/UI/Menus/MainMenus/GameCreationMenu.razor b/code/UI/Menus/MainMenus/GameCreationMenu.razor
@@ -12,7 +12,7 @@
 @inherits PanelComponent
 
 
-<root>
+<root style="background-image: url(@BackgroundImagePath);">
     @{
         <div class="centered-content flex-column fill-parent">
             <AdaptiveLabel class="title">Create Game</AdaptiveLabel>
@@ -49,6 +49,7 @@
     [Property] protected MainMenuController MainMenuController { get; set; } = null!;
     [Property] protected string SavesPath { get; set; } = "saves";
     [Property] protected GameLoader GameLoader { get; set; } = null!;
+    [Property] protected string BackgroundImagePath { get; set; } = "textures/voxelworld/ui/background.png";
 
     protected TextEntry NameTextEntry { get; set; }
     protected TextEntry SeedTextEntry { get; set; }

diff --git a/code/UI/Menus/MainMenus/GameCreationMenu.razor.scss b/code/UI/Menus/MainMenus/GameCreationMenu.razor.scss
@@ -1,10 +1,11 @@
 GameCreationMenu {
-    background-color: #333;
     width: 100vw;
     height: 100vh;
     z-index: 999;
     pointer-events: all;
     justify-content: center;
+    background-position: center;
+    background-size: auto 100%;
     align-items: center;
     font-family: Poppins;
 
@@ -28,6 +29,8 @@ GameCreationMenu {
     .title {
         position: relative;
         font-size: 9%;
+        color: #206a83;
+        text-stroke: 2px #9dd9ee;
         overflow: hidden;
         padding-bottom: 30px;
     }
@@ -49,6 +52,7 @@ GameCreationMenu {
                 aspect-ratio: 10;
                 min-height: 50px;
                 background-color: #3e3e3e;
+                border: 1px solid #777;
 
                 .info {
                     position: relative;
@@ -61,6 +65,7 @@ GameCreationMenu {
                     .label {
                         position: relative;
                         font-size: 50%;
+                        color: #aaa;
                     }
                 }
 
@@ -70,7 +75,9 @@ GameCreationMenu {
                     position: relative;
                     width: 70%;
                     text-align: left;
+                    border-left: 1px solid #777;
                     background-color: #444;
+                    color: #111;
 
                     .placeholder {
                         color: #888888ff;
@@ -97,11 +104,13 @@ GameCreationMenu {
 
     .button {
         background-color: #444;
+        border: 1px solid #777;
 
         .label {
             position: relative;
             text-align: center;
             width: 100%;
+            color: #aaa;
         }
 
         &:hover {

diff --git a/code/UI/Menus/MainMenus/GameSelectionMenu.razor b/code/UI/Menus/MainMenus/GameSelectionMenu.razor
@@ -13,7 +13,7 @@
 @inherits PanelComponent
 
 
-<root>
+<root style="background-image: url(@BackgroundImagePath);">
     @{
         var saves = GetAllSaves().OrderBy(s => s.Value.Name);
         var savesCount = saves.Count();
@@ -61,6 +61,7 @@
     [Property] protected GameCreationMenu GameCreationMenu { get; set; } = null!;
     [Property] protected string SavesPath { get; set; } = "saves";
     [Property] protected GameLoader GameLoader { get; set; } = null!;
+    [Property] protected string BackgroundImagePath { get; set; } = "textures/voxelworld/ui/background.png";
 
     private bool _isLoadingGame = false;
 

diff --git a/code/UI/Menus/MainMenus/GameSelectionMenu.razor.scss b/code/UI/Menus/MainMenus/GameSelectionMenu.razor.scss
@@ -1,9 +1,10 @@
 GameSelectionMenu {
-    background-color: #333;
     width: 100vw;
     height: 100vh;
     z-index: 999;
     pointer-events: all;
+    background-position: center;
+    background-size: auto 100%;
     align-items: center;
     justify-content: center;
 
@@ -25,6 +26,8 @@ GameSelectionMenu {
 
     .title {
         position: relative;
+        color: #206a83;
+        text-stroke: 2px #9dd9ee;
         font-size: 10%;
         overflow: hidden;
         padding-bottom: 30px;
@@ -131,11 +134,13 @@ GameSelectionMenu {
 
     .button {
         background-color: #444;
+        border: 1px solid #777;
 
         .label {
             position: relative;
             text-align: center;
             width: 100%;
+            color: #aaa;
         }
 
         &:hover {

diff --git a/code/UI/Menus/MainMenus/MainMenu.razor b/code/UI/Menus/MainMenus/MainMenu.razor
@@ -6,13 +6,25 @@
 @inherits PanelComponent
 
 
-<root>
+<root style="background-image: url(@BackgroundImagePath);">
 	<div class="centered-content flex-column fill-parent">
 		<AdaptiveLabel class="title centered-content">Voxel World</AdaptiveLabel>
 		<div class="buttons centered-content flex-column">
 			<div id="button singleplayer" class="button" onclick="@(OpenGameSelectingMenu)">
 				<AdaptiveLabel>Singleplayer</AdaptiveLabel>
 			</div>
+			<div id="button multiplayer" class="button disabled">
+				<AdaptiveLabel>Multiplayer</AdaptiveLabel>
+			</div>
+			<div id="button mods" class="button disabled">
+				<AdaptiveLabel>Mods</AdaptiveLabel>
+			</div>
+			<div id="button settigs" class="button disabled">
+				<AdaptiveLabel>Settings</AdaptiveLabel>
+			</div>
+			<div id="button quit" class="button" onclick="@(Quit)">
+				<AdaptiveLabel>Quit</AdaptiveLabel>
+			</div>
 		</div>
 	</div>
 </root>
@@ -22,9 +34,15 @@
 {
 	[Property] protected MainMenuController MainMenuController { get; set; } = null!;
 	[Property] protected GameSelectionMenu GameSelectionMenu { get; set; } = null!;
+	[Property] protected string BackgroundImagePath { get; set; } = "textures/voxelworld/ui/background.png";
 
 	protected void OpenGameSelectingMenu()
 	{
 		MainMenuController.OpenMenu(GameSelectionMenu);
 	}
+
+	protected void Quit()
+	{
+		Game.Close();
+	}
 }
diff --git a/code/UI/Menus/MainMenus/MainMenu.razor.scss b/code/UI/Menus/MainMenus/MainMenu.razor.scss
@@ -1,10 +1,11 @@
 MainMenu {
-    background-color: #333;
     width: 100vw;
     height: 100vh;
     z-index: 999;
     align-items: center;
     justify-content: center;
+    background-position: center;
+    background-size: auto 100%;
     pointer-events: all;
     font-family: Poppins;
 
@@ -27,18 +28,21 @@ MainMenu {
     .title {
         position: relative;
         font-size: 10%;
+        color: #206a83;
+        text-stroke: 2px #9dd9ee;
         padding-bottom: 30px;
     }
 
     .buttons {
         position: relative;
-        height: 50%;
+        height: 55%;
         width: 700px;
 
         .button {
             background-color: #444;
+            border: 1px solid #777;
             width: 100%;
-            height: 25%;
+            height: 20%;
             align-items: center;
             justify-content: center;
             align-self: flex-start;
@@ -49,6 +53,19 @@ MainMenu {
                 text-align: center;
                 width: 100%;
                 font-size: 30%;
+                color: #aaa;
+            }
+
+            &.disabled {
+                background-color: #333;
+
+                &:hover {
+                    background-color: #333;
+                }
+
+                &:active {
+                    background-color: #333;
+                }
             }
 
             &:hover {

diff --git a/code/UI/Screens/EscapeScreen.razor b/code/UI/Screens/EscapeScreen.razor
@@ -11,6 +11,10 @@
 
 <root>
 	<div class="buttons">
+		<div class="button" onclick="@(Back)">Back</div>
+		<div class="button disabled">Mods</div>
+		<div class="button disabled">Settings</div>
+		<div id="save-game-button" class="button" onclick="@(() => _ = Save())">Save</div>
 		<div id="leave-game-button" class="button" onclick="@(() => _ = SaveAndLeaveGame())">Save and Leave</div>
 	</div>
 </root>
@@ -20,21 +24,35 @@
 {
 	protected bool Saving = false;
 
-	protected async Task SaveAndLeaveGame()
+	protected void Back()
 	{
-		if (Saving)
+		MenuController.Instance.CloseMenu();
+	}
+
+	protected async Task Save()
+	{
+		if(Saving)
 			return;
 
 		Saving = true;
 		if(GameController.InitalizationStatus == InitalizationStatus.Initialized &&
 			GameController.LoadingStatus == LoadingStatus.Loaded)
 		{
 			var saved = await GameController.Instance!.SaveGame();
-			if (!saved)
+			if(!saved)
 				Log.Warning("Couldn't save something");
 		}
 
-		Game.ActiveScene.LoadFromFile("scenes/mainmenu.scene");
 		Saving = false;
 	}
+
+	protected async Task SaveAndLeaveGame()
+	{
+		if (Saving)
+			return;
+
+		await Save();
+
+		Game.ActiveScene.LoadFromFile("scenes/mainmenu.scene");
+	}
 }
diff --git a/code/UI/Screens/EscapeScreen.razor.scss b/code/UI/Screens/EscapeScreen.razor.scss
@@ -13,24 +13,45 @@ EscapeScreen {
     .buttons {
         position: absolute;
         width: 500px;
-        height: 50%;
+        height: 60%;
         justify-content: center;
         background-color: #333;
         padding: 3%;
         display: flex;
         flex-direction: column;
+        gap: 5%;
 
         .button {
             background-color: #444;
             width: 100%;
-            height: 25%;
+            height: 20%;
             align-items: center;
             justify-content: center;
             font-size: 30%;
             font-family: Poppins;
             align-self: flex-end;
             margin-top: auto;
 
+            .label {
+                position: relative;
+                text-align: center;
+                width: 100%;
+                font-size: 30%;
+                color: #aaa;
+            }
+
+            &.disabled {
+                background-color: #3a3a3a;
+
+                &:hover {
+                    background-color: #3a3a3a;
+                }
+
+                &:active {
+                    background-color: #383838;
+                }
+            }
+
             &:hover {
                 background-color: #555;
             }