From 089e8f4ee2c650b5ec4e4bd8dd4004b855e7f1f4 Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Sun, 26 Feb 2023 16:23:36 +0100 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20WIP?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * move grid to Inventory component itself * partly enable dragging and dropping --- blazor_lab/Components/Inventory.razor | 37 ++++-- blazor_lab/Components/Inventory.razor.cs | 11 +- blazor_lab/Components/Inventory.razor.css | 21 ++++ blazor_lab/Components/InventoryGrid.razor | 21 ---- blazor_lab/Components/InventoryGrid.razor.cs | 25 ---- blazor_lab/Components/InventoryGrid.razor.css | 25 ---- blazor_lab/Components/InventoryItem.razor | 20 ++++ blazor_lab/Components/InventoryItem.razor.cs | 109 ++++++++++++++++++ blazor_lab/Components/InventoryItem.razor.css | 22 ++++ blazor_lab/Components/InventoryList.razor | 49 ++++---- blazor_lab/Components/InventoryList.razor.cs | 3 + blazor_lab/Components/InventoryList.razor.css | 28 ----- 12 files changed, 233 insertions(+), 138 deletions(-) delete mode 100644 blazor_lab/Components/InventoryGrid.razor delete mode 100644 blazor_lab/Components/InventoryGrid.razor.cs delete mode 100644 blazor_lab/Components/InventoryGrid.razor.css create mode 100644 blazor_lab/Components/InventoryItem.razor create mode 100644 blazor_lab/Components/InventoryItem.razor.cs create mode 100644 blazor_lab/Components/InventoryItem.razor.css diff --git a/blazor_lab/Components/Inventory.razor b/blazor_lab/Components/Inventory.razor index 61a947d..385acda 100644 --- a/blazor_lab/Components/Inventory.razor +++ b/blazor_lab/Components/Inventory.razor @@ -1,12 +1,25 @@ -@using blazor_lab.Components - -
-
-

@Localizer["my_inventory"]

- -
-
-

@Localizer["list_of_items"]

- -
-
\ No newline at end of file + + +
+ +
+ @for (int row = 0; row < 3; row++) {
+ @for (int col = 0; col < 6; col++) {
+ @if (InventoryContent != null && InventoryContent.Count > (row * 6 + col)) + { + + } +
+ } +
+ } +
+ +
+

@Localizer["list_of_items"]

+ +
+ +
+ + \ No newline at end of file diff --git a/blazor_lab/Components/Inventory.razor.cs b/blazor_lab/Components/Inventory.razor.cs index fa0bb33..eee718c 100644 --- a/blazor_lab/Components/Inventory.razor.cs +++ b/blazor_lab/Components/Inventory.razor.cs @@ -1,6 +1,7 @@ -using blazor_lab.Models; -using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components; using Microsoft.Extensions.Localization; +using Minecraft.Crafting.Api.Models; +using Item = blazor_lab.Models.Item; namespace blazor_lab.Components { @@ -10,6 +11,10 @@ namespace blazor_lab.Components public IStringLocalizer Localizer { get; set; } [Parameter] - public List Items { get; set; } = new(); + public List Items { get; set; } + + public InventoryModel? CurrentDragItem { get; set; } + + public List InventoryContent { get; set; } = Enumerable.Range(1, 18).Select(_ => new InventoryModel()).ToList(); } } diff --git a/blazor_lab/Components/Inventory.razor.css b/blazor_lab/Components/Inventory.razor.css index ff5602f..dd61555 100644 --- a/blazor_lab/Components/Inventory.razor.css +++ b/blazor_lab/Components/Inventory.razor.css @@ -2,3 +2,24 @@ display: flex; flex-direction: row; } + +.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; +} diff --git a/blazor_lab/Components/InventoryGrid.razor b/blazor_lab/Components/InventoryGrid.razor deleted file mode 100644 index 8ce7449..0000000 --- a/blazor_lab/Components/InventoryGrid.razor +++ /dev/null @@ -1,21 +0,0 @@ -
- @for (int row = 0; row < 3; row++) - { -
- @for (int col = 0; col < 6; col++) - { -
- @if (Inventory != null && Inventory.Count > (row * 6 + col)) - { - var slot = Inventory[row * 6 + col]; - @if (slot.NumberItem > 0) - { - @slot.ItemName -
@slot.NumberItem
- } - } -
- } -
- } -
\ No newline at end of file diff --git a/blazor_lab/Components/InventoryGrid.razor.cs b/blazor_lab/Components/InventoryGrid.razor.cs deleted file mode 100644 index 51c4e58..0000000 --- a/blazor_lab/Components/InventoryGrid.razor.cs +++ /dev/null @@ -1,25 +0,0 @@ -using Microsoft.AspNetCore.Components; -using Minecraft.Crafting.Api.Models; - - -namespace blazor_lab.Components -{ - - public partial class InventoryGrid - { - public List Inventory { get; set; } = Enumerable.Range(1, 18).Select(_ => new InventoryModel()).ToList(); - - /// - /// Used by GetItemImageBase64 in this component, rather than calling our DataService every time. - /// A very basic cache, not kept up to date in any way, but event listeners could be set up in the future - /// - [Parameter] - public List Items { get; set; } - - 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 deleted file mode 100644 index 155b226..0000000 --- a/blazor_lab/Components/InventoryGrid.razor.css +++ /dev/null @@ -1,25 +0,0 @@ -.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/Components/InventoryItem.razor b/blazor_lab/Components/InventoryItem.razor new file mode 100644 index 0000000..789ca64 --- /dev/null +++ b/blazor_lab/Components/InventoryItem.razor @@ -0,0 +1,20 @@ +
+ @if (Item is not null && IsInList) + { +
+ @Item.DisplayName +
@Item.DisplayName
+
+ } + @if (InventoryModel is not null && IsInInventory) + { +
+ @InventoryModel.ItemName +
@InventoryModel.NumberItem
+
+ } +
diff --git a/blazor_lab/Components/InventoryItem.razor.cs b/blazor_lab/Components/InventoryItem.razor.cs new file mode 100644 index 0000000..6eb88a0 --- /dev/null +++ b/blazor_lab/Components/InventoryItem.razor.cs @@ -0,0 +1,109 @@ +using blazor_lab.Services; +using Microsoft.AspNetCore.Components; +using Microsoft.AspNetCore.Components.Web; +using Minecraft.Crafting.Api.Models; +using System.Diagnostics; +using Item = blazor_lab.Models.Item; + +namespace blazor_lab.Components +{ + public partial class InventoryItem + { + [Parameter] + public Item? Item { get; set; } + + [Parameter] + public int Position { get; set; } = -1; + + [Parameter] + public bool IsInList { get; set; } + + [Parameter] + public bool IsInInventory { get; set; } + + [CascadingParameter] + public InventoryList? ListParent { get; set; } + + [CascadingParameter] + public Inventory? InventoryParent { get; set; } + + [Inject] + public IDataService DataService { get; set; } + + public InventoryModel InventoryModel { get; set; } = new InventoryModel(); + + public InventoryItem() + { + if (Item is not null && IsInList) + { + InventoryModel.ItemName = Item.DisplayName; + InventoryModel.NumberItem = 1; + } + } + + internal void OnDrop() + { + if (IsInList) + { + return; + } + + if (IsInInventory) + { + if (InventoryModel.Position == -1) // new inventoryModel + { + InventoryModel = InventoryParent!.CurrentDragItem!; + InventoryModel.Position = Position; + InventoryParent.InventoryContent.Add(InventoryModel); + } + else + { + if (InventoryModel.ItemName == InventoryParent!.CurrentDragItem!.ItemName) // adding to an existing stack + { + InventoryModel.NumberItem += 1; + } + } + } + } + + internal void OnDragEnd() + { + if (IsInList) + { + ListParent!.Parent.CurrentDragItem = null; + } + else if (IsInInventory) + { + InventoryParent!.CurrentDragItem = null; + } + } + + private void OnDragStart() + { + if (InventoryModel is not null) + { + if (IsInList) + { + ListParent!.Parent.CurrentDragItem = InventoryModel; + } + else if (IsInInventory) + { + InventoryParent!.CurrentDragItem = InventoryModel; + } + } + } + + public async Task GetItemImageBase64() + { + // FIXME probably not great to inject a service in each item and query the whole database everytime we display it + + if (InventoryParent is not null) + { + return (await DataService.List(0, await DataService.Count())) + .FirstOrDefault(i => i.DisplayName == InventoryModel.ItemName)? + .ImageBase64; + } + else return null; + } + } +} diff --git a/blazor_lab/Components/InventoryItem.razor.css b/blazor_lab/Components/InventoryItem.razor.css new file mode 100644 index 0000000..440803a --- /dev/null +++ b/blazor_lab/Components/InventoryItem.razor.css @@ -0,0 +1,22 @@ +.inventory-list-item { + margin-bottom: 10px; + padding: 10px; + border: 1px solid #ddd; + border-radius: 5px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); +} + + .inventory-list-item img { + max-width: 64px; + max-height: 64px; + margin-right: 10px; + } + +.item-name { + font-weight: bold; +} + +.side-by-side { + display: flex; + flex-direction: row; +} diff --git a/blazor_lab/Components/InventoryList.razor b/blazor_lab/Components/InventoryList.razor index 610ebfd..288aace 100644 --- a/blazor_lab/Components/InventoryList.razor +++ b/blazor_lab/Components/InventoryList.razor @@ -1,4 +1,6 @@ -
+ + +
@@ -12,32 +14,31 @@
- @foreach (var item in VisibleItems) - { -
- @item.DisplayName -
@item.DisplayName
-
- } + @foreach (var item in VisibleItems) + { + + }
- @for (var i = 1; i <= TotalPages; i++) - { - var pageNumber = i; // copy the loop variable to avoid closure issues - - } + @for (var i = 1; i <= TotalPages; i++) + { + var pageNumber = i; // copy the loop variable to avoid closure issues + + }
- @if (VisibleItems.Any()) - { - var firstItem = (currentPage - 1) * pageSize + 1; - var lastItem = Math.Min(currentPage * pageSize, TotalItems); - @firstItem - @lastItem @Localizer["out_of"] @TotalItems - } - else - { - @Localizer["no_items_found"] - } + @if (VisibleItems.Any()) + { + var firstItem = (currentPage - 1) * pageSize + 1; + var lastItem = Math.Min(currentPage * pageSize, TotalItems); + @firstItem - @lastItem @Localizer["out_of"] @TotalItems + } + else + { + @Localizer["no_items_found"] + }
-
\ No newline at end of file + + + \ No newline at end of file diff --git a/blazor_lab/Components/InventoryList.razor.cs b/blazor_lab/Components/InventoryList.razor.cs index 71334eb..5ed90bb 100644 --- a/blazor_lab/Components/InventoryList.razor.cs +++ b/blazor_lab/Components/InventoryList.razor.cs @@ -11,6 +11,9 @@ namespace blazor_lab.Components } public partial class InventoryList { + [CascadingParameter] + public Inventory Parent { get; set; } + [Inject] public IStringLocalizer Localizer { get; set; } diff --git a/blazor_lab/Components/InventoryList.razor.css b/blazor_lab/Components/InventoryList.razor.css index 6756e33..04d1cf6 100644 --- a/blazor_lab/Components/InventoryList.razor.css +++ b/blazor_lab/Components/InventoryList.razor.css @@ -4,32 +4,4 @@ .search-container { margin-bottom: 20px; -} - -.inventory-list-item { - margin-bottom: 10px; - padding: 10px; - border: 1px solid #ddd; - border-radius: 5px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); -} - - .inventory-list-item img { - max-width: 64px; - max-height: 64px; - margin-right: 10px; - } - -.item-name { - font-weight: bold; -} - -.side-by-side { - display: flex; - flex-direction: row; -} - -button[disabled] { - opacity: 0.5; - cursor: default; } \ No newline at end of file