display number

Blazor/Blazor/Components/CraftingItem.razor.css

@@ -1,6 +1,17 @@
 .item {
-    width: 64px;
-    height: 64px;
-    border: 1px solid;
-    overflow: hidden;
+    position: absolute;
+    text-align: center;
+    width: 50px;
+    height: 50px;
+    color: white;
+}
+
+.number-item{
+    position: absolute;
+    bottom: 5px;
+    right: 5px;
+    font-size: 3em;
+    font-weight: bold;
+    -webkit-text-stroke: 2px black;
+    font-family: 'Segoe UI', Tahoma, Verdana, Geneva, Tahoma, sans-serif
 }

Blazor/Blazor/Components/Inventory.razor.cs

@@ -1,9 +1,14 @@
 using Blazor.Models;
 using Blazor.Pages;
+using Blazored.LocalStorage;
+using Blazorise.DataGrid;
+using Blazorise;
 using Microsoft.AspNetCore.Components;
 using Microsoft.JSInterop;
 using System.Collections.ObjectModel;
 using System.Collections.Specialized;
+using static System.Net.WebRequestMethods;
+using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage;
 
 namespace Blazor.Components
 {
@@ -16,20 +21,60 @@ namespace Blazor.Components
         [Inject]
         internal IJSRuntime JavaScriptRuntime { get; set; }
 
+        [Inject]
+        public ILocalStorageService LocalStorage { get; set; }
+
         public Inventory() 
         {
             Actions = new ObservableCollection<InventoryAction>();
             Actions.CollectionChanged += OnActionsCollectionChanged;
         }
-        public void update()
+        public async void update()
         {
+            await LocalStorage.SetItemAsync("list", inventory);
             this.StateHasChanged();
             return;
         }
 
+
         private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e)
         {
             JavaScriptRuntime.InvokeVoidAsync("Crafting.AddActions", e.NewItems);
         }
+
+        
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            // Do not treat this action if is not the first render
+            if (!firstRender)
+            {
+                return;
+            }
+
+            var currentData = await LocalStorage.GetItemAsync<Item[]>("data");
+
+            // Check if data exist in the local storage
+            if (currentData == null)
+            {
+                // this code add in the local storage the fake data (we load the data sync for initialize the data before load the OnReadData method)
+                await LocalStorage.SetItemAsync("list", inventory);
+            }
+        }
+
+        private async Task OnReadData(DataGridReadDataEventArgs<Item> e)
+        {
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            var response = (await LocalStorage.GetItemAsync<Models.InventoryList>("list"));
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                inventory = response;
+            }
+        }
+
     }
 }

Blazor/Blazor/Components/InventoryList.razor.cs

@@ -32,28 +32,6 @@ namespace Blazor.Components
             [CascadingParameter]
             public Inventory Parent { get; set; }
 
-
-        public void OnDragStart()
-        {
-            
-        }
-
-
-        public void OnDrop()
-        {
-            Parent.CurrentDragItem = null;
-            return;
-        }
-        internal void OnDragEnter()
-        {
-            Parent.Actions.Add(new InventoryAction("Drag Enter", this.items[0].Id, items[0]));
-        }
-
-        internal void OnDragLeave()
-        {
-            Parent.Actions.Add(new InventoryAction("Drag Leave", this.items[0].Id, items[0]));
-        }
-
         protected override async Task OnInitializedAsync()
         {
             items = await DataService.getAll();

Blazor/Blazor/Components/InventoryListImage.razor.cs

@@ -14,7 +14,7 @@ namespace Blazor.Components
 
         internal void OnDragEnter()
         {
-            Parent.CurrentDragItem = new InventoryItem(Item,1);
+
             Parent.Actions.Add(new InventoryAction("On drag enter", Item.Id, Item));
             return;
         }
@@ -34,7 +34,9 @@ namespace Blazor.Components
 
         private void OnDragStart()
         {
+            Parent.CurrentDragItem = new InventoryItem(Item);
             Parent.Actions.Add(new InventoryAction("On drag start", Item.Id, Item));
+            Parent.update();
             return;
         }
     }

Blazor/Blazor/Components/ItemInventory.razor

@@ -8,15 +8,23 @@
     {
      @if(!string.IsNullOrWhiteSpace(Items.item.ImageBase64))
      {
-            <img src="data:image/png;base64, @(Items.item.ImageBase64)" class="img-thumbnail" title="@Items.item.DisplayName" alt="@Items.item.DisplayName" style="width: 50px;" />
+         <div class="item">
+                <img src="data:image/png;base64, @(Items.item.ImageBase64)" title="@Items.item.DisplayName" alt="@Items.item.DisplayName" style="width: 50px; height: 50px" />
+            <span class="number-item">@Items.Stack</span>
+         </div>
      }
      else
      {
-            <img src="images/default.png" class="img-thumbnail" title="@Items.item.DisplayName" alt="@Items.item.DisplayName" style="width: 50px; height: 50px" />
-     }
+            <div class="item" >
+                <img src="images/default.png" title="@Items.item.DisplayName" alt="@Items.item.DisplayName" style="width: 50px; height: 50px"/>
+                <span class="number-item">@Items.Stack</span>
+            </div>
+        }
     }
     else
     {
-        <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAINJREFUeF7t18ENACAMAzE6OuLD1jDImREiGitz9n0r/EYAfoAT0AHhDlxKkAIUoAAFKBBOAIMYxCAGMRhGwBjCIAYxiEEMYjCcAAYxiEEMYjCMgDWIQQxiEIMYxGA4AQxiEIMYxGAYAWsQgxjEIAYxiMFwAhjEIAYxiMEwAtYgBusMfuMLowEYJcXzAAAAAElFTkSuQmCC" class="img-thumbnail" title="empty" alt="empty slot" style="width: 50px; height: 50px" />
+        <div class="item">
+            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAINJREFUeF7t18ENACAMAzE6OuLD1jDImREiGitz9n0r/EYAfoAT0AHhDlxKkAIUoAAFKBBOAIMYxCAGMRhGwBjCIAYxiEEMYjCcAAYxiEEMYjCMgDWIQQxiEIMYxGA4AQxiEIMYxGAYAWsQgxjEIAYxiMFwAhjEIAYxiMEwAtYgBusMfuMLowEYJcXzAAAAAElFTkSuQmCC" class="img-thumbnail" title="empty" alt="empty slot" style="width: 50px; height: 50px" />
+        </div>
     }
 </div>

Blazor/Blazor/Components/ItemInventory.razor.cs

@@ -39,7 +39,7 @@ namespace Blazor.Components
             if (!this.NoDrop)
             {
                 this.Items = Parent.CurrentDragItem;
-                NoDrop = true;
+                this.NoDrop = true;
                 Parent.CurrentDragItem = null;
                 if (this.Items == null) return;
                 Parent.inventory.inventoryItems[this.Index] = this.Items;
@@ -55,8 +55,8 @@ namespace Blazor.Components
                 this.Items = Parent.CurrentDragItem;
                 this.NoDrop= true;
                 Parent.CurrentDragItem = null;
-                Parent.Actions.Add(new InventoryAction("On drag start",this.Index,Items.item));
                 Parent.inventory.inventoryItems[this.Index] = this.Items;
+                Parent.Actions.Add(new InventoryAction("On drag start",this.Index,Items.item));
                 Parent.update();
                 return;
             }
@@ -66,6 +66,7 @@ namespace Blazor.Components
                 if (total >this.Items.item.StackSize)
                 {
                     this.Items.Stack = this.Items.item.StackSize;
+                    Parent.CurrentDragItem = null;
                     Parent.Actions.Add(new InventoryAction("On drag start",this.Index,Items.item));
                     Parent.inventory.inventoryItems[this.Index] = this.Items;
                     Parent.update();
@@ -74,6 +75,7 @@ namespace Blazor.Components
                 else
                 {
                     this.Items.Stack = total;
+                    Parent.CurrentDragItem = null;
                     Parent.inventory.inventoryItems[this.Index] = this.Items;
                     Parent.update();
                     return;

Blazor/Blazor/Models/InventoryItem.cs

@@ -11,10 +11,10 @@
             item = new Item();
             Stack = 64;
         }
-        public InventoryItem(Item item, int stack)
+        public InventoryItem(Item item)
         {
             this.item = item;
-            this.stack = stack;
+            Stack = 1;
         }
     }
 }