From 8bdb8c882b14059a505fa3a4d130f314106ec6a7 Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Sun, 26 Feb 2023 12:33:53 +0100 Subject: [PATCH 1/7] :necktie: Make an Inventory component to allow for an easier management of drag/drop --- .../{Pages => Components}/Inventory.razor | 4 +- blazor_lab/Components/Inventory.razor.cs | 15 +++ .../{Pages => Components}/Inventory.razor.css | 0 blazor_lab/Pages/Inventory.razor.cs | 24 ---- blazor_lab/Pages/InventoryPage.razor | 8 ++ blazor_lab/Pages/InventoryPage.razor.cs | 33 +++++ blazor_lab/Program.cs | 2 +- ...R.resx => Components.Inventory.fr-FR.resx} | 0 ...ventory.resx => Components.Inventory.resx} | 0 .../Components.InventoryList.fr-FR.resx | 4 +- .../Resources/Components.InventoryList.resx | 4 +- .../Resources/Pages.InventoryPage.fr-FR.resx | 123 ++++++++++++++++++ blazor_lab/Resources/Pages.InventoryPage.resx | 123 ++++++++++++++++++ blazor_lab/Services/DataApiService.cs | 5 - blazor_lab/blazor_lab.csproj | 55 ++++---- 15 files changed, 337 insertions(+), 63 deletions(-) rename blazor_lab/{Pages => Components}/Inventory.razor (71%) create mode 100644 blazor_lab/Components/Inventory.razor.cs rename blazor_lab/{Pages => Components}/Inventory.razor.css (100%) delete mode 100644 blazor_lab/Pages/Inventory.razor.cs create mode 100644 blazor_lab/Pages/InventoryPage.razor create mode 100644 blazor_lab/Pages/InventoryPage.razor.cs rename blazor_lab/Resources/{Pages.Inventory.fr-FR.resx => Components.Inventory.fr-FR.resx} (100%) rename blazor_lab/Resources/{Pages.Inventory.resx => Components.Inventory.resx} (100%) create mode 100644 blazor_lab/Resources/Pages.InventoryPage.fr-FR.resx create mode 100644 blazor_lab/Resources/Pages.InventoryPage.resx diff --git a/blazor_lab/Pages/Inventory.razor b/blazor_lab/Components/Inventory.razor similarity index 71% rename from blazor_lab/Pages/Inventory.razor rename to blazor_lab/Components/Inventory.razor index 74772ef..61a947d 100644 --- a/blazor_lab/Pages/Inventory.razor +++ b/blazor_lab/Components/Inventory.razor @@ -1,6 +1,4 @@ -@page "/inventory" -@using Minecraft.Crafting.Api.Models -@using blazor_lab.Components +@using blazor_lab.Components
diff --git a/blazor_lab/Components/Inventory.razor.cs b/blazor_lab/Components/Inventory.razor.cs new file mode 100644 index 0000000..fa0bb33 --- /dev/null +++ b/blazor_lab/Components/Inventory.razor.cs @@ -0,0 +1,15 @@ +using blazor_lab.Models; +using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.Localization; + +namespace blazor_lab.Components +{ + public partial class Inventory + { + [Inject] + public IStringLocalizer Localizer { get; set; } + + [Parameter] + public List Items { get; set; } = new(); + } +} diff --git a/blazor_lab/Pages/Inventory.razor.css b/blazor_lab/Components/Inventory.razor.css similarity index 100% rename from blazor_lab/Pages/Inventory.razor.css rename to blazor_lab/Components/Inventory.razor.css diff --git a/blazor_lab/Pages/Inventory.razor.cs b/blazor_lab/Pages/Inventory.razor.cs deleted file mode 100644 index f84cfee..0000000 --- a/blazor_lab/Pages/Inventory.razor.cs +++ /dev/null @@ -1,24 +0,0 @@ -using blazor_lab.Services; -using Microsoft.AspNetCore.Components; -using Microsoft.Extensions.Localization; -using Minecraft.Crafting.Api.Models; -using System.Diagnostics; - -namespace blazor_lab.Pages -{ - public partial class Inventory - { - private List Items = new(); - - [Inject] - public IStringLocalizer Localizer { get; set; } - - [Inject] - private DataApiService DataApiService { get; set; } - - protected override async Task OnInitializedAsync() - { - Items = await DataApiService.All(); - } - } -} diff --git a/blazor_lab/Pages/InventoryPage.razor b/blazor_lab/Pages/InventoryPage.razor new file mode 100644 index 0000000..021f98d --- /dev/null +++ b/blazor_lab/Pages/InventoryPage.razor @@ -0,0 +1,8 @@ +@page "/inventory" +@using blazor_lab.Components + +@Localizer["inventory"] + +

@Localizer["inventory"]

+ + \ No newline at end of file diff --git a/blazor_lab/Pages/InventoryPage.razor.cs b/blazor_lab/Pages/InventoryPage.razor.cs new file mode 100644 index 0000000..aa9f35f --- /dev/null +++ b/blazor_lab/Pages/InventoryPage.razor.cs @@ -0,0 +1,33 @@ +using blazor_lab.Components; +using blazor_lab.Services; +using Microsoft.AspNetCore.Components; +using Microsoft.Extensions.Localization; + +namespace blazor_lab.Pages +{ + public partial class InventoryPage + { + [Inject] + public IStringLocalizer Localizer { get; set; } + + [Inject] + private IDataService DataService { get; set; } + + + private List Items = new(); + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + base.OnAfterRenderAsync(firstRender); + + if (!firstRender) + { + return; + } + + Items = await DataService.List(0, await DataService.Count()); + + StateHasChanged(); + } + } +} diff --git a/blazor_lab/Program.cs b/blazor_lab/Program.cs index af4cca6..52dbb2f 100644 --- a/blazor_lab/Program.cs +++ b/blazor_lab/Program.cs @@ -43,7 +43,7 @@ builder.Services.Configure(options => options.SupportedUICultures = new List { new CultureInfo("en-US"), new CultureInfo("fr-FR") }; }); -builder.Services.AddScoped(); +builder.Services.AddScoped(); var app = builder.Build(); diff --git a/blazor_lab/Resources/Pages.Inventory.fr-FR.resx b/blazor_lab/Resources/Components.Inventory.fr-FR.resx similarity index 100% rename from blazor_lab/Resources/Pages.Inventory.fr-FR.resx rename to blazor_lab/Resources/Components.Inventory.fr-FR.resx diff --git a/blazor_lab/Resources/Pages.Inventory.resx b/blazor_lab/Resources/Components.Inventory.resx similarity index 100% rename from blazor_lab/Resources/Pages.Inventory.resx rename to blazor_lab/Resources/Components.Inventory.resx diff --git a/blazor_lab/Resources/Components.InventoryList.fr-FR.resx b/blazor_lab/Resources/Components.InventoryList.fr-FR.resx index cccd282..9450ea6 100644 --- a/blazor_lab/Resources/Components.InventoryList.fr-FR.resx +++ b/blazor_lab/Resources/Components.InventoryList.fr-FR.resx @@ -130,9 +130,9 @@ Trier par - Trier par nom (Asc.) + nom (Asc.) - Trier par nom (Desc.) + nom (Desc.) \ No newline at end of file diff --git a/blazor_lab/Resources/Components.InventoryList.resx b/blazor_lab/Resources/Components.InventoryList.resx index 515e221..0e078f8 100644 --- a/blazor_lab/Resources/Components.InventoryList.resx +++ b/blazor_lab/Resources/Components.InventoryList.resx @@ -127,10 +127,10 @@ Search - Sort by name (Asc.) + name (Asc.) - Sort by name (Desc.) + name (Desc.) Sort diff --git a/blazor_lab/Resources/Pages.InventoryPage.fr-FR.resx b/blazor_lab/Resources/Pages.InventoryPage.fr-FR.resx new file mode 100644 index 0000000..dd8a16d --- /dev/null +++ b/blazor_lab/Resources/Pages.InventoryPage.fr-FR.resx @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + text/microsoft-resx + + + 2.0 + + + System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + Inventaire + + \ No newline at end of file diff --git a/blazor_lab/Resources/Pages.InventoryPage.resx b/blazor_lab/Resources/Pages.InventoryPage.resx new file mode 100644 index 0000000..6bf64db --- /dev/null +++ b/blazor_lab/Resources/Pages.InventoryPage.resx @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + text/microsoft-resx + + + 2.0 + + + System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + Inventory + + \ No newline at end of file diff --git a/blazor_lab/Services/DataApiService.cs b/blazor_lab/Services/DataApiService.cs index 2e5c4ab..8156ed9 100644 --- a/blazor_lab/Services/DataApiService.cs +++ b/blazor_lab/Services/DataApiService.cs @@ -31,11 +31,6 @@ namespace blazor_lab.Services return await _http.GetFromJsonAsync($"{_apiBaseUrl}/count"); } - public async Task> All() - { - return await _http.GetFromJsonAsync>($"{_apiBaseUrl}/all"); - } - public async Task> List(int currentPage, int pageSize) { return await _http.GetFromJsonAsync>($"{_apiBaseUrl}/?currentPage={currentPage}&pageSize={pageSize}"); diff --git a/blazor_lab/blazor_lab.csproj b/blazor_lab/blazor_lab.csproj index 2e58a00..9e1a300 100644 --- a/blazor_lab/blazor_lab.csproj +++ b/blazor_lab/blazor_lab.csproj @@ -1,34 +1,37 @@  - - net6.0 - enable - enable - + + net6.0 + enable + enable + - - - - - - - + + + + + + + - - - + + + - - - + + + - - - Designer - - - Designer - - + + + Designer + + + Designer + + + Designer + + -- 2.36.3 From 089e8f4ee2c650b5ec4e4bd8dd4004b855e7f1f4 Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Sun, 26 Feb 2023 16:23:36 +0100 Subject: [PATCH 2/7] =?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 -- 2.36.3 From fe350955a00ec061d2ee9aadee484eda023f5a2c Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Sun, 26 Feb 2023 16:47:47 +0100 Subject: [PATCH 3/7] =?UTF-8?q?=F0=9F=94=A5=20give=20up=20on=20pictures=20?= =?UTF-8?q?in=20inventory=20for=20now?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- blazor_lab/Components/InventoryItem.razor | 5 ++++- blazor_lab/Components/InventoryItem.razor.cs | 20 +++----------------- 2 files changed, 7 insertions(+), 18 deletions(-) diff --git a/blazor_lab/Components/InventoryItem.razor b/blazor_lab/Components/InventoryItem.razor index 789ca64..e19e94d 100644 --- a/blazor_lab/Components/InventoryItem.razor +++ b/blazor_lab/Components/InventoryItem.razor @@ -13,7 +13,10 @@ @if (InventoryModel is not null && IsInInventory) {
- @InventoryModel.ItemName + @if (InventoryModel.NumberItem > 0) + { +
@InventoryModel.ItemName
+ }
@InventoryModel.NumberItem
} diff --git a/blazor_lab/Components/InventoryItem.razor.cs b/blazor_lab/Components/InventoryItem.razor.cs index 6eb88a0..1d26a07 100644 --- a/blazor_lab/Components/InventoryItem.razor.cs +++ b/blazor_lab/Components/InventoryItem.razor.cs @@ -1,6 +1,7 @@ using blazor_lab.Services; using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components.Web; +using Minecraft.Crafting.Api; using Minecraft.Crafting.Api.Models; using System.Diagnostics; using Item = blazor_lab.Models.Item; @@ -27,9 +28,6 @@ namespace blazor_lab.Components [CascadingParameter] public Inventory? InventoryParent { get; set; } - [Inject] - public IDataService DataService { get; set; } - public InventoryModel InventoryModel { get; set; } = new InventoryModel(); public InventoryItem() @@ -54,7 +52,7 @@ namespace blazor_lab.Components { InventoryModel = InventoryParent!.CurrentDragItem!; InventoryModel.Position = Position; - InventoryParent.InventoryContent.Add(InventoryModel); + InventoryParent.InventoryContent.Insert(Position, InventoryModel); } else { @@ -64,6 +62,7 @@ namespace blazor_lab.Components } } } + StateHasChanged(); } internal void OnDragEnd() @@ -92,18 +91,5 @@ namespace blazor_lab.Components } } } - - 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; - } } } -- 2.36.3 From b1a582a2eee48b392dbe31ffa4afd85a80d46874 Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Sun, 26 Feb 2023 17:59:50 +0100 Subject: [PATCH 4/7] :necktie: Add image string to InventoryModel --- Minecraft.Crafting.Api/Models/InventoryModel.cs | 1 + 1 file changed, 1 insertion(+) diff --git a/Minecraft.Crafting.Api/Models/InventoryModel.cs b/Minecraft.Crafting.Api/Models/InventoryModel.cs index 0c0cda5..2664492 100644 --- a/Minecraft.Crafting.Api/Models/InventoryModel.cs +++ b/Minecraft.Crafting.Api/Models/InventoryModel.cs @@ -25,5 +25,6 @@ namespace Minecraft.Crafting.Api.Models /// Gets or sets the position. /// public int Position { get; set; } + public string? ImageBase64 { get; set; } } } \ No newline at end of file -- 2.36.3 From 8eda266e57105134cd7a4428ebe3b8003e5a90e2 Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Sun, 26 Feb 2023 18:03:27 +0100 Subject: [PATCH 5/7] :broom: Clean up --- blazor_lab/Components/Inventory.razor | 28 +++++++++++--------- blazor_lab/Components/InventoryList.razor.cs | 2 +- blazor_lab/Pages/InventoryPage.razor.cs | 3 +-- blazor_lab/Pages/List.razor.cs | 1 - 4 files changed, 18 insertions(+), 16 deletions(-) diff --git a/blazor_lab/Components/Inventory.razor b/blazor_lab/Components/Inventory.razor index 385acda..5f0d3f3 100644 --- a/blazor_lab/Components/Inventory.razor +++ b/blazor_lab/Components/Inventory.razor @@ -3,23 +3,27 @@
- @for (int row = 0; row < 3; row++) {
- @for (int col = 0; col < 6; col++) {
- @if (InventoryContent != null && InventoryContent.Count > (row * 6 + col)) + @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"]

- -
+
+

@Localizer["list_of_items"]

+ +
-
+
\ No newline at end of file diff --git a/blazor_lab/Components/InventoryList.razor.cs b/blazor_lab/Components/InventoryList.razor.cs index 5ed90bb..6f0628f 100644 --- a/blazor_lab/Components/InventoryList.razor.cs +++ b/blazor_lab/Components/InventoryList.razor.cs @@ -11,7 +11,7 @@ namespace blazor_lab.Components } public partial class InventoryList { - [CascadingParameter] + [CascadingParameter] public Inventory Parent { get; set; } [Inject] diff --git a/blazor_lab/Pages/InventoryPage.razor.cs b/blazor_lab/Pages/InventoryPage.razor.cs index aa9f35f..18c1909 100644 --- a/blazor_lab/Pages/InventoryPage.razor.cs +++ b/blazor_lab/Pages/InventoryPage.razor.cs @@ -1,5 +1,4 @@ -using blazor_lab.Components; -using blazor_lab.Services; +using blazor_lab.Services; using Microsoft.AspNetCore.Components; using Microsoft.Extensions.Localization; diff --git a/blazor_lab/Pages/List.razor.cs b/blazor_lab/Pages/List.razor.cs index 43cca97..ab6c643 100644 --- a/blazor_lab/Pages/List.razor.cs +++ b/blazor_lab/Pages/List.razor.cs @@ -5,7 +5,6 @@ using Blazored.Modal; using Blazored.Modal.Services; using Blazorise.DataGrid; using Microsoft.AspNetCore.Components; -using Microsoft.Extensions.Localization; namespace blazor_lab.Pages { -- 2.36.3 From 7a27fe6299dfee9dbbae94c225c816cf205ea9ae Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Sun, 26 Feb 2023 18:03:59 +0100 Subject: [PATCH 6/7] :sparkles: Implement drag and drop omg --- blazor_lab/Components/Inventory.razor.cs | 5 +- blazor_lab/Components/InventoryItem.razor | 7 ++- blazor_lab/Components/InventoryItem.razor.cs | 59 ++++++++++--------- blazor_lab/Components/InventoryItem.razor.css | 9 +++ 4 files changed, 44 insertions(+), 36 deletions(-) diff --git a/blazor_lab/Components/Inventory.razor.cs b/blazor_lab/Components/Inventory.razor.cs index eee718c..3f25207 100644 --- a/blazor_lab/Components/Inventory.razor.cs +++ b/blazor_lab/Components/Inventory.razor.cs @@ -9,12 +9,9 @@ namespace blazor_lab.Components { [Inject] public IStringLocalizer Localizer { get; set; } - [Parameter] public List Items { get; set; } - - public InventoryModel? CurrentDragItem { get; set; } - + public InventoryModel? CurrentDragItem { get; set; } = new(); public List InventoryContent { get; set; } = Enumerable.Range(1, 18).Select(_ => new InventoryModel()).ToList(); } } diff --git a/blazor_lab/Components/InventoryItem.razor b/blazor_lab/Components/InventoryItem.razor index e19e94d..3f61346 100644 --- a/blazor_lab/Components/InventoryItem.razor +++ b/blazor_lab/Components/InventoryItem.razor @@ -1,7 +1,6 @@ 
@if (Item is not null && IsInList) { @@ -12,10 +11,12 @@ } @if (InventoryModel is not null && IsInInventory) { -
+
@if (InventoryModel.NumberItem > 0) { -
@InventoryModel.ItemName
+
+ @InventoryModel.ItemName +
}
@InventoryModel.NumberItem
diff --git a/blazor_lab/Components/InventoryItem.razor.cs b/blazor_lab/Components/InventoryItem.razor.cs index 1d26a07..c40dd1d 100644 --- a/blazor_lab/Components/InventoryItem.razor.cs +++ b/blazor_lab/Components/InventoryItem.razor.cs @@ -1,9 +1,6 @@ -using blazor_lab.Services; +using Blazorise.Extensions; using Microsoft.AspNetCore.Components; -using Microsoft.AspNetCore.Components.Web; -using Minecraft.Crafting.Api; using Minecraft.Crafting.Api.Models; -using System.Diagnostics; using Item = blazor_lab.Models.Item; namespace blazor_lab.Components @@ -28,14 +25,16 @@ namespace blazor_lab.Components [CascadingParameter] public Inventory? InventoryParent { get; set; } - public InventoryModel InventoryModel { get; set; } = new InventoryModel(); + public InventoryModel? InventoryModel { get; set; } = new InventoryModel(); public InventoryItem() { - if (Item is not null && IsInList) + if (IsInInventory) { - InventoryModel.ItemName = Item.DisplayName; - InventoryModel.NumberItem = 1; + InventoryModel.ImageBase64 = null; + InventoryModel.ItemName = ""; + InventoryModel.NumberItem = 0; + InventoryModel.Position = Position; } } @@ -43,15 +42,19 @@ namespace blazor_lab.Components { if (IsInList) { + ListParent!.Parent.CurrentDragItem = null; return; } if (IsInInventory) { - if (InventoryModel.Position == -1) // new inventoryModel + InventoryModel ??= new(); + if (InventoryModel.ItemName.IsNullOrEmpty()) // new inventoryModel { - InventoryModel = InventoryParent!.CurrentDragItem!; + InventoryModel.ImageBase64 = InventoryParent!.CurrentDragItem!.ImageBase64; + InventoryModel.ItemName = InventoryParent!.CurrentDragItem!.ItemName; InventoryModel.Position = Position; + InventoryModel.NumberItem = 1; InventoryParent.InventoryContent.Insert(Position, InventoryModel); } else @@ -61,34 +64,32 @@ namespace blazor_lab.Components InventoryModel.NumberItem += 1; } } - } - StateHasChanged(); - } - - 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) { - if (IsInList) + ListParent!.Parent.CurrentDragItem = new InventoryModel { - ListParent!.Parent.CurrentDragItem = InventoryModel; - } - else if (IsInInventory) + ImageBase64 = Item!.ImageBase64, + ItemName = Item!.DisplayName, + NumberItem = 1, + Position = -1 + }; + } + else if (IsInInventory) // delete item stack if it is dragged from inventory + { + InventoryModel = new InventoryModel { - InventoryParent!.CurrentDragItem = InventoryModel; - } + ImageBase64 = null, + ItemName = "", + NumberItem = 0, + Position = Position + }; + InventoryParent!.CurrentDragItem = null; } } } diff --git a/blazor_lab/Components/InventoryItem.razor.css b/blazor_lab/Components/InventoryItem.razor.css index 440803a..e393170 100644 --- a/blazor_lab/Components/InventoryItem.razor.css +++ b/blazor_lab/Components/InventoryItem.razor.css @@ -12,6 +12,15 @@ margin-right: 10px; } +.slot-image { + font-weight : bold; + font-size: small; +} + +.slot-count { + font-size: small; +} + .item-name { font-weight: bold; } -- 2.36.3 From a97193ceeb273d232bfa0c0ddd3768382473d4fc Mon Sep 17 00:00:00 2001 From: Alexis DRAI Date: Sun, 26 Feb 2023 18:13:28 +0100 Subject: [PATCH 7/7] :lipstick: Fix style to allow dropping in the whole box --- blazor_lab/Components/InventoryItem.razor | 4 +-- blazor_lab/Components/InventoryItem.razor.css | 34 ++++++++++++------- 2 files changed, 23 insertions(+), 15 deletions(-) diff --git a/blazor_lab/Components/InventoryItem.razor b/blazor_lab/Components/InventoryItem.razor index 3f61346..27c0028 100644 --- a/blazor_lab/Components/InventoryItem.razor +++ b/blazor_lab/Components/InventoryItem.razor @@ -4,7 +4,7 @@ @ondrop="@OnDrop"> @if (Item is not null && IsInList) { -
+
@Item.DisplayName
@Item.DisplayName
@@ -17,8 +17,8 @@
@InventoryModel.ItemName
+
@InventoryModel.NumberItem
} -
@InventoryModel.NumberItem
}
diff --git a/blazor_lab/Components/InventoryItem.razor.css b/blazor_lab/Components/InventoryItem.razor.css index e393170..43cae0e 100644 --- a/blazor_lab/Components/InventoryItem.razor.css +++ b/blazor_lab/Components/InventoryItem.razor.css @@ -1,4 +1,6 @@ .inventory-list-item { + display: flex; + flex-direction: row; margin-bottom: 10px; padding: 10px; border: 1px solid #ddd; @@ -12,20 +14,26 @@ margin-right: 10px; } -.slot-image { - font-weight : bold; - font-size: small; +.inventory-grid-item { + display: flex; + flex-grow: 1; + flex-direction: column; + justify-content: center; + align-items: center; + border: 1px solid #ddd; + height: 64px; + width: 64px; } -.slot-count { - font-size: small; -} + .inventory-grid-item .slot-image { + font-weight: bold; + font-size: small; + } -.item-name { - font-weight: bold; -} + .inventory-grid-item .slot-count { + font-size: small; + } -.side-by-side { - display: flex; - flex-direction: row; -} + .inventory-grid-item .item-name { + font-weight: bold; + } -- 2.36.3