"local storage + stack display"

Blazor/Blazor/Components/CraftingItem.razor.css

@@ -1,17 +1 @@
-.item {
+
-    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

@@ -31,8 +31,8 @@ namespace Blazor.Components
         }
         public async void update()
         {
-            await LocalStorage.SetItemAsync("list", inventory);
             this.StateHasChanged();
+            await LocalStorage.SetItemAsync("list", inventory.inventoryItems);
             return;
         }
 
@@ -43,24 +43,7 @@ namespace Blazor.Components
         }
 
         
-        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)
@@ -68,13 +51,13 @@ namespace Blazor.Components
                 return;
             }
 
-            var response = (await LocalStorage.GetItemAsync<Models.InventoryList>("list"));
+            var response = (await LocalStorage.GetItemAsync<List<InventoryItem>>("list"));
 
             if (!e.CancellationToken.IsCancellationRequested)
             {
-                inventory = response;
+                inventory.inventoryItems = response;
             }
-        }
+        }*/
 
     }
 }

Blazor/Blazor/Components/ItemInventory.razor

@@ -8,14 +8,14 @@
     {
      @if(!string.IsNullOrWhiteSpace(Items.item.ImageBase64))
      {
-         <div class="item">
+            <div Class="itemDisplay">
                 <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
      {
-            <div class="item" >
+            <div class="itemDisplay">
                 <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>
@@ -23,7 +23,7 @@
     }
     else
     {
-        <div class="item">
+        <div class="itemDisplay">
             <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAINJREFUeF7t18ENACAMAzE6OuLD1jDImREiGitz9n0r/EYAfoAT0AHhDlxKkAIUoAAFKBBOAIMYxCAGMRhGwBjCIAYxiEEMYjCcAAYxiEEMYjCMgDWIQQxiEIMYxGA4AQxiEIMYxGAYAWsQgxjEIAYxiMFwAhjEIAYxiMEwAtYgBusMfuMLowEYJcXzAAAAAElFTkSuQmCC" class="img-thumbnail" title="empty" alt="empty slot" style="width: 50px; height: 50px" />
         </div>
     }

Blazor/Blazor/Components/ItemInventory.razor.cs

@@ -41,8 +41,8 @@ namespace Blazor.Components
                 this.Items = Parent.CurrentDragItem;
                 this.NoDrop = true;
                 Parent.CurrentDragItem = null;
-                if (this.Items == null) return;
                 Parent.inventory.inventoryItems[this.Index] = this.Items;
+                if (this.Items == null) return;
                 Parent.Actions.Add(new InventoryAction("On Drop",this.Index,Items.item));
                 return;
             }

Blazor/Blazor/Components/ItemInventory.razor.css

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