✨ Set up basic inventory grid

blazor_lab/Components/InventoryGrid.razor

@@ -0,0 +1,21 @@
+<div class="inventory-grid">
+    @for (int row = 0; row < 3; row++)
+    {
+        <div class="inventory-row">
+            @for (int col = 0; col < 6; col++)
+            {
+                <div class="inventory-slot">
+                    @if (Inventory != null && Inventory.Count > (row * 6 + col))
+                    {
+                        var slot = Inventory[row * 6 + col];
+                        @if (slot.NumberItem > 0)
+                        {
+                            <img src="@($"data:image/png;base64,{GetItemImageBase64(@slot.ItemName)}")" alt="@slot.ItemName" />
+                            <div class="slot-count">@slot.NumberItem</div>
+                        }
+                    }
+                </div>
+            }
+        </div>
+    }
+</div>

blazor_lab/Components/InventoryGrid.razor.cs

@@ -0,0 +1,38 @@
+using Microsoft.AspNetCore.Components;
+using Minecraft.Crafting.Api.Models;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Net.Http;
+using System.Net.Http.Json;
+using System.Threading.Tasks;
+
+
+namespace blazor_lab.Components
+{
+
+    public partial class InventoryGrid
+    {
+        [Parameter]
+        public List<InventoryModel> Inventory { get; set; }
+
+        public List<Item> Items { get; set; } = new List<Item>();
+
+        [Inject]
+        public HttpClient HttpClient { get; set; }
+
+        [Inject]
+        public IConfiguration Config { get; set; }
+
+        protected override async Task OnInitializedAsync()
+        {
+            Items = await HttpClient.GetFromJsonAsync<List<Item>>($"{Config["CraftingApi:BaseUrl"]}/api/Crafting/all");
+        }
+
+        public string GetItemImageBase64(string displayName)
+        {
+            var item = Items.FirstOrDefault(i => i.DisplayName == displayName);
+            return item?.ImageBase64;
+        }
+    }
+}

blazor_lab/Components/InventoryGrid.razor.css

@@ -0,0 +1,25 @@
+.inventory-grid {
+    display: flex;
+    flex-direction: column;
+}
+
+.inventory-row {
+    display: flex;
+    flex-direction: row;
+}
+
+.inventory-slot {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    margin: 5px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow: hidden;
+}
+
+
+.item-count {
+    margin-top: 5px;
+}

blazor_lab/Pages/Inventory.razor

@@ -1,29 +1,7 @@
 @page "/inventory"
-@using blazor_lab.Models
+@using Minecraft.Crafting.Api.Models
+@using blazor_lab.Components
 
 <h1>Inventory</h1>
 
-<div class="row">
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-</div>
-<div class="row">
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-</div>
-<div class="row">
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-    <div class="col-md-2" style="border: 1px solid black; height: 150px;"></div>
-</div>
+<InventoryGrid Inventory="Stuff" />

blazor_lab/Pages/Inventory.razor.cs

@@ -1,6 +1,9 @@
-namespace blazor_lab.Pages
+using Minecraft.Crafting.Api.Models;
+
+namespace blazor_lab.Pages
 {
     public partial class Inventory
     {
+        private List<InventoryModel> Stuff = Enumerable.Range(1, 18).Select(_ => new InventoryModel()).ToList();
     }
 }