Board Visual Updates

Made the Player Board smaller and opponent board bigger when firing for improved visibility.

BlazorBattleship/Pages/Index.razor

@@ -4,7 +4,7 @@
 @inject NavigationManager Navigation
 @implements IAsyncDisposable
 
-<PageTitle>Battle Ship</PageTitle>
+<PageTitle>@currentGameState</PageTitle>
 
 
 
@@ -15,14 +15,30 @@
 <button class="toggle-button" @onclick="ToggleSidebar"></button>
 
 <div class="game-area @(isSidebarOpen ? "shifted" : "")">
-@if ((currentGameState == GameState.Initial) || userInput == "")
+
+    <div class="player-info">
+
+        <div class="player-name">
+            <h3>Your Name: @userName</h3>
+        </div>
+
+        <div class="opponent-name">
+            <h3>Opponent: @opponent</h3>
+        </div>
+
+    </div>
+
+
+@if ((currentGameState == GameState.Initial) || userName == "")
 {
-    <div class="form-group">
-        <label>
-            Enter your name:
-            <input @bind="userInput" />
-        </label>
-        <button class="play-buton" @onclick="(() => {currentGameState = GameState.ChooseRoom;})">Play</button>
+    <div class="name-entry-container">
+        <div class="name-entry-box">
+            <label>
+                Enter your name:
+                <input @bind="userName" />
+            </label>
+            <button class="play-buton" @onclick="(() => {currentGameState = GameState.ChooseRoom;})">Play</button>
+        </div>
     </div>
 }
 
@@ -52,9 +68,9 @@
 }
 
 
-@if (userInput != "" && (currentGameState == GameState.Setup || currentGameState == GameState.Playing))
+@if (userName != "" && (currentGameState == GameState.Setup || currentGameState == GameState.Playing))
 {
-    <div class="user-board">
+        <div class="user-board @(currentGameState == GameState.Playing ? "minimized" : "")">
         <h3>@(currentGameState == GameState.Setup ? "Place your ships!" : "Your Board")</h3>
 
         <div class="column-headers">
@@ -95,7 +111,7 @@
 
 @if (player2Ready && room != 0)
 {
-    <div class="opponent-board">
+    <div class="opponent-board @(currentGameState == GameState.Playing ? "enlarged" : "")">
         <h3>@(opponent)'s Board</h3>
         <div class="column-headers">
             <p /><p>1</p><p>2</p><p>3</p><p>4</p><p>5</p><p>6</p><p>7</p><p>8</p><p>9</p><p>10</p>
@@ -149,7 +165,7 @@
     #endregion
     #region Player Information
     private List<string> moves = new List<string>();
-    private string userInput = "";
+    private string userName = "";
     private (int x, int y)? coordinates = (0, 0);
     #endregion
     #region Boards
@@ -400,9 +416,9 @@
                 {
                     roomStatuses[i] = $"{playersInRooms[i][0]} is waiting";
                 }
-                if (playersInRooms[i].Count == 2 && playersInRooms[i].Contains(userInput))
+                if (playersInRooms[i].Count == 2 && playersInRooms[i].Contains(userName))
                 {
-                    if (playersInRooms[i][0] == userInput)
+                    if (playersInRooms[i][0] == userName)
                     {
                         isPlayer1 = true;
                         isTurn = true;
@@ -452,7 +468,7 @@
         hubConnection.On<string, int, int>("ReceiveCoordinates", (user, x, y) =>
         {
             opponentShots[x, y] = true;
-
+            currentGameState = GameState.Playing;
             Ship? hitShip = null;
 
             foreach (var ship in ships)
@@ -521,15 +537,15 @@
         if (hubConnection is not null)
         {
             room = roomNum;
-            await hubConnection.SendAsync("JoinRoom", userInput, roomNum);
+            await hubConnection.SendAsync("JoinRoom", userName, roomNum);
         }
     }
 
     private async Task LeaveRoom()
     {
         if (hubConnection is not null)
         {
-            await hubConnection.SendAsync("LeaveRoom", userInput, room);
+            await hubConnection.SendAsync("LeaveRoom", userName, room);
 
             // Reset game state and room information locally
             currentGameState = GameState.ChooseRoom; // Return to room selection screen
@@ -564,8 +580,8 @@
     {
         if (hubConnection is not null && coordinates.HasValue)
         {
-            await hubConnection.SendAsync("SendCoordinates", userInput, room, coordinates.Value.x, coordinates.Value.y);
-            currentGameState = GameState.Playing;
+            await hubConnection.SendAsync("SendCoordinates", userName, room, coordinates.Value.x, coordinates.Value.y);
+            currentGameState = GameState.Waiting;
             isTurn = false;
             //StateHasChanged();
         }

BlazorBattleship/wwwroot/css/site.css

@@ -14,6 +14,21 @@ a, .btn-link {
     color: #33FF33; /* Green link color */
 }
 
+
+/* Main game content area */
+.game-area {
+    padding: 20px;
+    transition: margin-left 0.3s ease; /* Smooth shifting when the sidebar opens */
+    margin-left: 0; /* Default with sidebar closed */
+    box-sizing: border-box;
+}
+
+.game-area.shifted {
+    margin-left: 250px; /* Shift when sidebar is open */
+}
+
+
+
 /*Non-Gridspace UI Elements*/
 input[type="text"], input[type="number"], input {
     background-color: #000000; /* Black background */
@@ -115,9 +130,74 @@ button:disabled, .play-buton:disabled, .join-room:disabled, .square:disabled, .l
     color: #33FF33;
 }
 
+
+
+/* Styling for top section displaying player and opponent names */
+.player-info {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    background-color: #000; /* Black background */
+    color: #33FF33; /* Green text */
+    font-family: 'Courier New', Courier, monospace;
+    border-bottom: 2px solid #33FF33; /* Green border at the bottom */
+}
+
+    .player-info .player-name,
+    .player-info .opponent-name {
+        flex: 1;
+        text-align: center;
+    }
+
+/* Centering name entry box */
+.name-entry-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: calc(100vh - 100px); /* Full height minus space for top section */
+}
+
+.name-entry-box {
+    background-color: #000; /* Black background */
+    padding: 20px;
+    border: 2px solid #33FF33; /* Green border */
+    color: #33FF33; /* Green text */
+    text-align: center;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+.name-entry-box input {
+    background-color: #000; /* Black background for input */
+    border: 2px solid #33FF33; /* Green border */
+    color: #33FF33; /* Green text */
+    font-family: 'Courier New', Courier, monospace;
+    padding: 10px;
+    margin-bottom: 10px;
+    display: block;
+    width: 100%;
+    text-align: center;
+}
+
+.name-entry-box .play-button {
+    background-color: #000;
+    border: 2px solid #33FF33;
+    color: #33FF33;
+    padding: 10px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    width: 100%;
+    font-family: 'Courier New', Courier, monospace;
+}
+
+/* Button hover effect */
+.play-button:hover {
+    background-color: #33FF33;
+    color: #000;
+}
+
+
 .row button {
-    width: 50px;
-    height: 50px;
     background-color: #000000; /* Black background for game squares */
     border:1px solid black;
     color: #33FF33; /* Green text */
@@ -129,6 +209,43 @@ button:disabled, .play-buton:disabled, .join-room:disabled, .square:disabled, .l
 .user-board {
     width: 50%;
     float: left;
+    transition: width 0.3s ease;
+}
+
+.user-board .row button{
+    width: 50px;
+    height: 50px;
+}
+
+.user-board.minimized {
+    width: 25%;
+    height: 25%;
+}
+
+.user-board.minimized .row button{
+    width: 20px;
+    height: 20px;
+}
+
+.opponent-board{
+    width: 50%;
+    float: right;
+    transition: width 0.3s ease, margin-left 0.3s ease;
+}
+
+.opponent-board .row button{
+    width: 50px;
+    height: 50px;
+}
+
+.opponent-board.enlarged{
+    width: 70%;
+    margin-left: 15%;
+}
+
+.opponent-board.enlarged .row button{
+    width:70px;
+    height: 70px;
 }
 
 .hit {
@@ -143,6 +260,7 @@ button:disabled, .play-buton:disabled, .join-room:disabled, .square:disabled, .l
 .row {
     margin-left: 0;
     white-space: nowrap;
+    display: flex;
 }
 
 .letter {
@@ -206,9 +324,9 @@ button:disabled, .play-buton:disabled, .join-room:disabled, .square:disabled, .l
     overflow-y: auto;
 }
 
-    .sidebar.open {
-        left: 0;
-    }
+.sidebar.open {
+    left: 0;
+}
 
     .sidebar h3 {
         margin-top: 0;
@@ -236,17 +354,6 @@ button:disabled, .play-buton:disabled, .join-room:disabled, .square:disabled, .l
     box-sizing: border-box;
 }
 
-.page-content {
-    padding: 20px;
-    transition: margin-left 0.3s ease;
-    margin-left: 0;
-    box-sizing: border-box;
-}
-
-    .page-content.shifted {
-        margin-left: 250px;
-    }
-
 /* Toggle button for the sidebar */
 .toggle-button {
     position: fixed;