From 58acd62bd5c0089efb84221a0ca2ee18bf6db84d Mon Sep 17 00:00:00 2001
From: Alexis DRAI <alexis.drai@etu.uca.fr>
Date: Sat, 25 Feb 2023 14:47:04 +0100
Subject: [PATCH] :sparkles: Set up basic inventory grid

---
 blazor_lab/Components/InventoryGrid.razor     | 21 ++++++++++
 blazor_lab/Components/InventoryGrid.razor.cs  | 38 +++++++++++++++++++
 blazor_lab/Components/InventoryGrid.razor.css | 25 ++++++++++++
 blazor_lab/Pages/Inventory.razor              | 28 ++------------
 blazor_lab/Pages/Inventory.razor.cs           |  7 +++-
 5 files changed, 92 insertions(+), 27 deletions(-)
 create mode 100644 blazor_lab/Components/InventoryGrid.razor
 create mode 100644 blazor_lab/Components/InventoryGrid.razor.cs
 create mode 100644 blazor_lab/Components/InventoryGrid.razor.css

diff --git a/blazor_lab/Components/InventoryGrid.razor b/blazor_lab/Components/InventoryGrid.razor
new file mode 100644
index 0000000..8ce7449
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/blazor_lab/Components/InventoryGrid.razor.cs b/blazor_lab/Components/InventoryGrid.razor.cs
new file mode 100644
index 0000000..87a879b
--- /dev/null
+++ b/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;
+        }
+    }
+}
diff --git a/blazor_lab/Components/InventoryGrid.razor.css b/blazor_lab/Components/InventoryGrid.razor.css
new file mode 100644
index 0000000..155b226
--- /dev/null
+++ b/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;
+}
diff --git a/blazor_lab/Pages/Inventory.razor b/blazor_lab/Pages/Inventory.razor
index 3e00518..6837b6b 100644
--- a/blazor_lab/Pages/Inventory.razor
+++ b/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" />
\ No newline at end of file
diff --git a/blazor_lab/Pages/Inventory.razor.cs b/blazor_lab/Pages/Inventory.razor.cs
index 0905619..b5b367f 100644
--- a/blazor_lab/Pages/Inventory.razor.cs
+++ b/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();
     }
 }