Des changements

BlazorApp/BlazorApp/BlazorApp.csproj

@@ -45,4 +45,7 @@
       <DependentUpon>Pages.List.resx</DependentUpon>
     </Compile>
   </ItemGroup>
+  <ItemGroup>
+    <Content Remove="Components\inventoryAction.razor" />
+  </ItemGroup>
 </Project>

BlazorApp/BlazorApp/Components/Crafting.razor.cs

@@ -15,7 +15,7 @@ namespace BlazorApp.Components
         {
             Actions = new ObservableCollection<CraftingAction>();
             Actions.CollectionChanged += OnActionsCollectionChanged;
-            this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null };
+            this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null};
         }
 
         public ObservableCollection<CraftingAction> Actions { get; set; }

BlazorApp/BlazorApp/Components/InventoryComp.razor

@@ -0,0 +1,53 @@
+<CascadingValue Value="@this">
+    <div class="container">
+        <div class="row">
+            <div class="col-6">
+
+                <div>Inventory:</div>
+                <div>
+
+
+                    <div class="css-grid">
+                        <InventoryItem Index="0" />
+                        <InventoryItem Index="1" />
+                        <InventoryItem Index="2" />
+                        <InventoryItem Index="3" />
+                        <InventoryItem Index="4" />
+                        <InventoryItem Index="5" />
+                        <InventoryItem Index="6" />
+                        <InventoryItem Index="7" />
+                        <InventoryItem Index="8" />
+                        <InventoryItem Index="9" />
+                        <InventoryItem Index="10" />
+                        <InventoryItem Index="11" />
+                        <InventoryItem Index="12" />
+                        <InventoryItem Index="13" />
+                        <InventoryItem Index="14" />
+                        <InventoryItem Index="15" />
+                        <InventoryItem Index="16" />
+                        <InventoryItem Index="17" />
+                    </div>
+                    
+                </div>
+
+            </div>
+
+            <div class="col-6">
+                <div>Available items:</div>
+
+                <div>
+                    <div class="css-grid">
+
+                        @foreach (var item in Items)
+                        {
+                            <CraftingItem Item="item" NoDrop="true" />
+                        }
+                    </div>
+
+                </div>
+
+  
+            </div>
+        </div>
+    </div>
+</CascadingValue>

BlazorApp/BlazorApp/Components/InventoryComp.razor.cs

@@ -0,0 +1,31 @@
+using System;
+using BlazorApp.Models;
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+using System.Collections.ObjectModel;
+using System.Collections.Specialized;
+
+namespace BlazorApp.Components
+{
+    public partial class InventoryComp
+    {
+
+        public Item CurrentDragItem { get; set; }
+
+        [Parameter]
+        public List<Item> Items { get; set; }
+
+        public List<Item> RecipeItems { get; set; }
+
+        public InventoryComp()
+        {
+            this.RecipeItems = new List<Item> {};
+            for (int i= 0; i<18; i++)
+            {
+                this.RecipeItems.Append(null);
+            }
+        }
+
+    }
+}
+

BlazorApp/BlazorApp/Components/InventoryComp.razor.css

@@ -0,0 +1,14 @@
+.css-grid {
+    grid-template-columns: repeat(6,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 40%;
+}
+
+
+.css-recipe {
+    grid-template-columns: repeat(3,minmax(0,1fr));
+    gap: 10px;
+    display: grid;
+    width: 212px;
+}

BlazorApp/BlazorApp/Components/InventoryItem.razor

@@ -0,0 +1,13 @@
+<div class="item"
+     ondragover="event.preventDefault();"
+     draggable="true"
+     @ondragstart="@OnDragStart"
+     @ondrop="@OnDrop"
+     @ondragenter="@OnDragEnter"
+     @ondragleave="@OnDragLeave">
+
+    @if (Item != null)
+    {
+        @Item.DisplayName
+    }
+</div>

BlazorApp/BlazorApp/Components/InventoryItem.razor.cs

@@ -0,0 +1,58 @@
+using System;
+using BlazorApp.Models;
+using BlazorApp.Components;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorApp.Components
+{
+	public partial class InventoryItem
+	{
+        [Parameter]
+        public int Index { get; set; }
+
+        [Parameter]
+        public Item Item { get; set; }
+
+        [Parameter]
+        public bool NoDrop { get; set; }
+
+        [CascadingParameter]
+        public InventoryComp Parent { get; set; }
+
+        internal void OnDragEnter()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+        }
+
+        internal void OnDragLeave()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+        }
+
+        internal void OnDrop()
+        {
+            if (NoDrop)
+            {
+                return;
+            }
+
+            this.Item = Parent.CurrentDragItem;
+            Item tmp = Parent.RecipeItems[this.Index];
+            Parent.RecipeItems[this.Index] = this.Item;
+        }
+
+        private void OnDragStart()
+        {
+            Parent.CurrentDragItem = this.Item;
+        }
+    }
+}
+

BlazorApp/BlazorApp/Components/InventoryItem.razor.css

@@ -0,0 +1,6 @@
+.item {
+    width: 64px;
+    height: 64px;
+    border: 1px solid;
+    overflow: hidden;
+}

BlazorApp/BlazorApp/Components/MyFirstChildComponent.razor

@@ -1,14 +0,0 @@
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [CascadingParameter]
-    public MyRootComponent RootComponent { get; set; }
-}
-
-<div style="border: 1px solid black; padding: 10px;">
-    <strong>MyFirstChildComponent - @RootComponent.Text</strong>
-    <div>
-        @ChildContent
-    </div>
-</div>

BlazorApp/BlazorApp/Components/MyRootComponent.razor

@@ -1,16 +0,0 @@
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [Parameter]
-    public string Text { get; set; }
-}
-
-<div style="border: 1px solid black; padding: 10px;">
-    <strong>MyRootComponent - @Text</strong>
-    <div>
-        <CascadingValue Value="@this">
-            @ChildContent
-        </CascadingValue>
-    </div>
-</div>

BlazorApp/BlazorApp/Components/MySecondChildComponent.razor

@@ -1,14 +0,0 @@
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-
-    [CascadingParameter]
-    public MyRootComponent RootComponent { get; set; }
-}
-
-<div style="border: 1px solid black; padding: 10px;">
-    <strong>MySecondChildComponent - @RootComponent.Text</strong>
-    <div>
-        @ChildContent
-    </div>
-</div>

BlazorApp/BlazorApp/Components/TestRenderFragment.razor

@@ -1,7 +0,0 @@
-<h3>TestRenderFragment</h3>
-
-@code {
-    [Parameter]
-    public RenderFragment ChildContent { get; set; }
-}
-

BlazorApp/BlazorApp/Pages/Inventory.razor

@@ -1,42 +1,10 @@
 @page "/inventory"
 @using BlazorApp.Components;
 
-
 <h3>Inventory</h3>
 
-
+<div>
-<div class="css-grid">
+    <InventoryComp Items="Items" />
-    <CraftingItem Index="0" />
-    <CraftingItem Index="1" />
-    <CraftingItem Index="2" />
-    <CraftingItem Index="3" />
-    <CraftingItem Index="4" />
-    <CraftingItem Index="5" />
-    <CraftingItem Index="6" />
-    <CraftingItem Index="7" />
-    <CraftingItem Index="8" />
-    <CraftingItem Index="9" />
-    <CraftingItem Index="10" />
-    <CraftingItem Index="11" />
-    <CraftingItem Index="12" />
-    <CraftingItem Index="13" />
-    <CraftingItem Index="14" />
-    <CraftingItem Index="15" />
-    <CraftingItem Index="16" />
-    <CraftingItem Index="17" />
-    <!--
-    <CraftingItem Index="18" />
-    <CraftingItem Index="19" />
-    <CraftingItem Index="20" />
-    <CraftingItem Index="21" />
-    <CraftingItem Index="22" />
-    <CraftingItem Index="23" />
-    <CraftingItem Index="24" />
-    <CraftingItem Index="25" />
-    <CraftingItem Index="26" />
-    -->
 </div>
 
-<div>
+
-    <AvailableItem Items="Items"/>
-</div>

BlazorApp/BlazorApp/Pages/Inventory.razor.cs

@@ -23,7 +23,6 @@ namespace BlazorApp.Pages
             }
 
             Items = await DataService.List(0, await DataService.Count());
-
             StateHasChanged();
         }
     }

BlazorApp/BlazorApp/Pages/InventoryPage.razor.cs

@@ -0,0 +1,32 @@
+using System;
+using BlazorApp.Components;
+using BlazorApp.Models;
+using BlazorApp.Services;
+using Microsoft.AspNetCore.Components;
+
+namespace BlazorApp.Pages
+{
+	public partial class InventoryPage
+	{
+        [Inject]
+        public IDataService DataService { get; set; }
+
+        public List<Item> Items { get; set; } = new List<Item>();
+
+        protected override async Task OnAfterRenderAsync(bool firstRender)
+        {
+            base.OnAfterRenderAsync(firstRender);
+
+            if (!firstRender)
+            {
+                return;
+            }
+
+            Items = await DataService.List(0, await DataService.Count());
+            Recipes = await DataService.GetRecipes();
+
+            StateHasChanged();
+        }
+    }
+}
+