Migrate Nim to Blazor

Author: CorruptComputer

Home/Components/GamesNavbar.razor

@@ -2,14 +2,14 @@
 <nav>
     <div class="navSquare @(SelectedGameButton == GameButton.Nim ? "selected" : string.Empty)" id="nimButton">
         <a @onclick="NavigateToNotNim">
-            <img src="/images/home.webp" alt="Nim" />
+            <img src="/images/games/nim-icon.png" alt="Nim" />
             <div>Nim</div>
         </a>
     </div>
-    <div class="navSquare @(SelectedGameButton == GameButton.Voronoi ? "selected" : string.Empty)" id="voronoiButton">
+    <!--div class="navSquare @(SelectedGameButton == GameButton.Voronoi ? "selected" : string.Empty)" id="voronoiButton">
         <a @onclick="NavigateToVoronoi">
             <img src="/images/blog.webp" alt="Voronoi" />
             <div>Voronoi</div>
         </a>
-    </div>
+    </div-->
 </nav>

Home/Components/GamesNavbar.razor.cs

@@ -4,20 +4,17 @@ namespace Home.Components;
 
 public partial class GamesNavbar(NavigationManager NavManager) : ComponentBase
 {
-    [Parameter]
-    public GameButton? SelectedGameButton { get; set; }
+    public GameButton SelectedGameButton { get; set; } = GameButton.Nim;
 
     protected override void OnInitialized()
     {
         GetSelectedGameButton();
-
         base.OnInitialized();
     }
 
     protected override void OnParametersSet()
     {
         GetSelectedGameButton();
-
         base.OnParametersSet();
     }
 
@@ -43,15 +40,10 @@ private void GetSelectedGameButton()
         {
             SelectedGameButton = GameButton.Voronoi;
         }
-        else
-        {
-            SelectedGameButton = GameButton.None;
-        }
     }
 
     public enum GameButton
     {
-        None,
         Nim,
         Voronoi
     }

Home/Components/GamesNavbar.razor.css

@@ -54,7 +54,7 @@ a img {
 	from {
 		transform:rotate(0deg);
 	}
-	
+
 	to {
 		transform:rotate(360deg);
 	}
@@ -89,9 +89,11 @@ a img {
 	nav {
 		flex-direction: row;
 		height: 70px;
+		margin-bottom: 70px;
+		margin-left: -70px;
 		width: 100%;
-		position: sticky;
-		float: bottom;
+		position: fixed;
+		float: inline-end;
 	}
 
 	.navSquare{

Home/Components/Navbar.razor

@@ -15,10 +15,10 @@
             <div>Blog</div>
         </a>
     </div>
-    <!--div class="navSquare @(SelectedNavButton == NavButton.Games ? "selected" : string.Empty)" id="gamesButton">
+    <div class="navSquare @(SelectedNavButton == NavButton.Games ? "selected" : string.Empty)" id="gamesButton">
         <a @onclick="NavigateToGames">
-            <img src="/images/blog.webp" alt="Games" />
+            <img src="/images/games/games.png" alt="Games" />
             <div>Games</div>
         </a>
-    </div-->
+    </div>
 </nav>

Home/Components/Navbar.razor.cs

@@ -51,8 +51,13 @@ protected void NavigateToBlog()
 
     protected void NavigateToGames()
     {
+        if (SelectedNavButton == NavButton.Games)
+        {
+            return;
+        }
+
         SelectedNavButton = NavButton.Games;
-        NavManager.NavigateTo("/games");
+        NavManager.NavigateTo("/games/nim");
     }
 
     // For legacy blog URLs, /{Year}/{Month}/{Day}/{Slug}
@@ -65,7 +70,7 @@ private void SetSelectedNavButton()
         {
             SelectedNavButton = NavButton.Blog;
         }
-        else if (NavManager.Uri.Contains("/games")) // Legacy games don't use this navbar so they don't matter
+        else if (NavManager.Uri.Contains("/games"))
         {
             SelectedNavButton = NavButton.Games;
         }

Home/Components/Navbar.razor.css

@@ -53,7 +53,7 @@ a img {
 	from {
 		transform:rotate(0deg);
 	}
-	
+
 	to {
 		transform:rotate(360deg);
 	}
@@ -88,8 +88,8 @@ a img {
 		flex-direction: row;
 		height: 70px;
 		width: 100%;
-		position: sticky;
-		float: bottom;
+		position: fixed;
+		float: inline-end;
 	}
 
 	.navSquare{

Home/Layout/GamesLayout.razor

@@ -2,8 +2,13 @@
 @using Home.Components
 
 <h1 style="display:none;">My Website and Blog</h1>
-<div class="container">
+<div class="@ContainerClass">
     @Body
 </div>
 
+@if (ShowGamesNavbar)
+{
+    <GamesNavbar />
+}
+
 <Navbar />