Character movement

Server/Components/Pages/GamePage.razor

@@ -46,6 +46,7 @@
 				<div class="info-content">
 					<div @onclick="() => _popup.ShowComponent<EquipmentPopup>(_equipmentPopupParameters)">
 						<img src="assets/infobutton.svg" />
+
 					</div>
 				</div>
 			</div>
@@ -85,7 +86,7 @@
 		<div class="journal">
 			<div class="info">
 				<div class="info-content">
-					<div @onclick="() => _popup.ShowComponent<JournalPopup>()"></div><img src="assets/infobutton.svg" />
+					<div @onclick="() => _popup.ShowComponent<JournalPopup>()" ></div><img src="assets/infobutton.svg" />
 				</div>
 			</div>
 
@@ -130,7 +131,6 @@
 	</div>
 </div>
 
-
 @code {
 	private User _user = new();
 	private readonly ObservableCollection<Item> _equipment = new();

Server/Components/Popups/MapPopup.razor

@@ -2,11 +2,17 @@
 @using Fracture.Server.Modules.MapGenerator.UI
 @using Fracture.Server.Modules.MapGenerator.UI.Models
 
+@inject NavigationManager NavigationManager
+
+@page "/map"
+
 <div class="row">
-	<MapView Map="Map" MapDisplayData="MapDisplayData" Path="null" IsMiniMap="false"></MapView>
+	<MapView Map="Map" MapDisplayData="MapDisplayData" Path="null" IsMiniMap="false" CharacterX="x" CharacterY="y"></MapView>
 </div>
 
 @code {
 	[Parameter] public required MapData Map { get; set; }
 	[Parameter] public required MapDisplayData MapDisplayData { get; set; }
+	int x = MapView.CharacterXX;
+	int y = MapView.CharacterYY;
 }

Server/Components/UI/PopupContainer.razor

@@ -7,7 +7,7 @@
         <DynamicComponent Type="@_componentType" Parameters="@_parameters" @ref="Component" />
     }
     <div>
-        <button class="closeBtn" @onclick="() => IsVisible = false"><img src="assets/closebutton.svg" /></button>
+        <button class="closeBtn" @onclick="() => IsVisible=false"><img src="assets/closebutton.svg" /></button>
     </div>
 </div>
 
@@ -23,6 +23,7 @@
         StateHasChanged();
     }
 
+
     public DynamicComponent? Component = null;
     private Type? _componentType = null;
     private IDictionary<string, object>? _parameters;

Server/Modules/MapGenerator/UI/MapView.razor

@@ -1,8 +1,11 @@
 @using Fracture.Server.Modules.MapGenerator.Models
 @using Fracture.Server.Modules.MapGenerator.UI.Models
 @using Fracture.Server.Modules.Pathfinding.Models
+@using Microsoft.AspNetCore.Components.Web
 
-<div id="map">
+
+
+<div id="map" tabindex="0" @onkeydown="HandleKeyDown">
     @if (Map != null && MapDisplayData != null)
     {
         <table class="@(IsMiniMap ? "miniMapTable" : "mapTable")">
@@ -11,26 +14,34 @@
                 <tr>
                     @for (int x = 0; x < Map.Grid.GetLength(0); x++)
                     {
-                        @if (MapDisplayData.TileInformationDisplay == TileInformationDisplay.Position)
+                        @if (x == CharacterXX && y == CharacterYY)
+                        {
+
+
+                            <td style='background: @GetTileColor(@Map.Grid[x, y])'>
+                                C
+                            </td>
+                        }
+                        else if (MapDisplayData.TileInformationDisplay == TileInformationDisplay.Position)
                         {
-                            <td style='background: @GetTileColor(@Map.Grid[x,y])'>
-                                x:@x<br />y:@y
+                            <td style='background: @GetTileColor(@Map.Grid[x, y])'>
+                                x:@x<br/>y:@y
                             </td>
                         }
                         else if (MapDisplayData.TileInformationDisplay == TileInformationDisplay.Noise)
                         {
-                            <td style="background: @GetTileColor(@Map.Grid[x,y])">
+                            <td style="background: @GetTileColor(@Map.Grid[x, y])">
                                 @Math.Round(Map.Grid[x, y].NoiseValue, 2)
                             </td>
                         }
                         else if (MapDisplayData.TileInformationDisplay == TileInformationDisplay.None)
                         {
-                            <td style='background: @GetTileColor(@Map.Grid[x,y])'>
+                            <td style='background: @GetTileColor(@Map.Grid[x, y])'>
                             </td>
                         }
                         else if (MapDisplayData.TileInformationDisplay == TileInformationDisplay.Path)
                         {
-                            <td style='font-size: 16px; background: @GetTileColor(@Map.Grid[x,y])'>
+                            <td style='font-size: 16px; background: @GetTileColor(@Map.Grid[x, y])'>
                                 @GetPathForTile(Map.Grid[x, y])
                             </td>
                         }
@@ -53,7 +64,19 @@
 
     [Parameter]
     public bool IsMiniMap { get; set; } = true;
+
+    private bool isMoving = false;
+    public static int CharacterXX { get; set; } = 16;
+    public static int CharacterYY { get; set; } = 16;
+    [Parameter] public int CharacterX { get; set; } = CharacterXX;
+    [Parameter] public int CharacterY { get; set; } = CharacterXX;
+
 
+    private readonly HashSet<string> _blockingColors = new HashSet<string>
+    {
+        "#21618C","#2E86C1"
+    };
+
     private string GetTileColor(Node node)
     {
         if (MapDisplayData!.ShowColorMap)
@@ -101,4 +124,55 @@
             _ => ""
         };
     }
+
+    private void HandleKeyDown(KeyboardEventArgs e)
+    {
+        if (IsMiniMap==false)
+        {
+            if (isMoving) return; 
+            isMoving = true;
+            int newX = CharacterXX;
+            int newY = CharacterYY;
+            switch (e.Key)
+            {
+                case "ArrowUp":
+                    if (CharacterYY > 0) newY--;;
+                    break;
+                case "ArrowDown":
+                    if (CharacterYY < Map.Grid.GetLength(1)-1 ) newY++;
+                    break;
+                case "ArrowLeft":
+                    if (CharacterXX > 0) newX--;
+                    break;
+                case "ArrowRight":
+                    if (CharacterXX < Map.Grid.GetLength(0)-1 ) newX++;
+                    break;
+            }
+
+            if (CanMoveToTile(newX, newY))
+            {
+                CharacterXX = newX;
+                CharacterYY = newY;
+                StateHasChanged();
+            }
+
+            Task.Delay(100).ContinueWith(_ =>
+            {
+                isMoving = false; 
+            });
+        }
+
+
+    }
+
+    private bool CanMoveToTile(int x, int y)
+    {
+        Node targetNode = Map.Grid[x, y];
+        string tileColor = GetTileColor(targetNode);
+
+        return !_blockingColors.Contains(tileColor);
+    }
+
+
 }
+