From d9c36b2e2d814e0fdecb1b24a638e5c14951a3a2 Mon Sep 17 00:00:00 2001 From: aujault Date: Fri, 16 Dec 2022 09:07:52 +0100 Subject: [PATCH] "action handling" --- Blazor/Blazor/Components/Crafting.razor | 1 - Blazor/Blazor/Components/Inventory.razor.cs | 4 ++ Blazor/Blazor/Components/Inventory.razor.css | 8 ++++ Blazor/Blazor/Components/Inventory.razor.js | 16 ++++++++ .../Blazor/Components/ItemInventory.razor.cs | 2 + Blazor/Blazor/Pages/Index.razor | 2 +- .../{Inventory.razor => InventoryPage.razor} | 39 +++++++++---------- ...tory.razor.css => InventoryPage.razor.css} | 28 ++++++------- 8 files changed, 64 insertions(+), 36 deletions(-) create mode 100644 Blazor/Blazor/Components/Inventory.razor.js rename Blazor/Blazor/Pages/{Inventory.razor => InventoryPage.razor} (76%) rename Blazor/Blazor/Pages/{Inventory.razor.css => InventoryPage.razor.css} (92%) diff --git a/Blazor/Blazor/Components/Crafting.razor b/Blazor/Blazor/Components/Crafting.razor index a3e1bd2..d644cb5 100644 --- a/Blazor/Blazor/Components/Crafting.razor +++ b/Blazor/Blazor/Components/Crafting.razor @@ -43,7 +43,6 @@
Actions
-
diff --git a/Blazor/Blazor/Components/Inventory.razor.cs b/Blazor/Blazor/Components/Inventory.razor.cs index a35c972..b9fa5bd 100644 --- a/Blazor/Blazor/Components/Inventory.razor.cs +++ b/Blazor/Blazor/Components/Inventory.razor.cs @@ -1,6 +1,7 @@ using Blazor.Models; using Blazor.Pages; using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; using System.Collections.ObjectModel; namespace Blazor.Components @@ -11,6 +12,9 @@ namespace Blazor.Components public Models.InventoryItem CurrentDragItem { get; set; } public ObservableCollection Actions { get; set; } + [Inject] + internal IJSRuntime JavaScriptRuntime { get; set; } + public Inventory() { Actions = new ObservableCollection(); diff --git a/Blazor/Blazor/Components/Inventory.razor.css b/Blazor/Blazor/Components/Inventory.razor.css index 1995814..3407b0e 100644 --- a/Blazor/Blazor/Components/Inventory.razor.css +++ b/Blazor/Blazor/Components/Inventory.razor.css @@ -3,4 +3,12 @@ gap: 10px; display: grid; width: 40%; +} + + + +.actions { + border: 1px solid black; + height: 250px; + overflow: scroll; } \ No newline at end of file diff --git a/Blazor/Blazor/Components/Inventory.razor.js b/Blazor/Blazor/Components/Inventory.razor.js new file mode 100644 index 0000000..263a9bf --- /dev/null +++ b/Blazor/Blazor/Components/Inventory.razor.js @@ -0,0 +1,16 @@ +window.Inventory = +{ + AddActions: function (data) { + + data.forEach(element => { + var div = document.createElement('div'); + div.innerHTML = 'Action: ' + element.action + ' - Index: ' + element.index; + + if (element.item) { + div.innerHTML += ' - Item Name: ' + element.item.name; + } + + document.getElementById('actions').appendChild(div); + }); + } +} \ No newline at end of file diff --git a/Blazor/Blazor/Components/ItemInventory.razor.cs b/Blazor/Blazor/Components/ItemInventory.razor.cs index 956c258..e642e85 100644 --- a/Blazor/Blazor/Components/ItemInventory.razor.cs +++ b/Blazor/Blazor/Components/ItemInventory.razor.cs @@ -73,11 +73,13 @@ namespace Blazor.Components } internal void OnDragEnter() { + if (this.Items == null) return; Parent.Actions.Add(new InventoryAction("Drag Enter",this.Index,Items.item)); } internal void OnDragLeave() { + if (this.Items == null) return; Parent.Actions.Add(new InventoryAction("Drag Leave",this.Index,Items.item)); } } diff --git a/Blazor/Blazor/Pages/Index.razor b/Blazor/Blazor/Pages/Index.razor index b099662..a7a3191 100644 --- a/Blazor/Blazor/Pages/Index.razor +++ b/Blazor/Blazor/Pages/Index.razor @@ -1,5 +1,5 @@ @page "/" @using Blazor.Components;
- +

Welcome

diff --git a/Blazor/Blazor/Pages/Inventory.razor b/Blazor/Blazor/Pages/InventoryPage.razor similarity index 76% rename from Blazor/Blazor/Pages/Inventory.razor rename to Blazor/Blazor/Pages/InventoryPage.razor index 4270bee..6a4164d 100644 --- a/Blazor/Blazor/Pages/Inventory.razor +++ b/Blazor/Blazor/Pages/InventoryPage.razor @@ -1,20 +1,19 @@ -@page "/inventory" -@using Blazor.Components -@using Blazor.Models - -Counter - -

Inventory

- -
-
- - - -
- - -
- -
-
+@page "/inventory" +@using Blazor.Components + +Counter + +

Inventory

+ +
+
+ + + +
+ + +
+ +
+
diff --git a/Blazor/Blazor/Pages/Inventory.razor.css b/Blazor/Blazor/Pages/InventoryPage.razor.css similarity index 92% rename from Blazor/Blazor/Pages/Inventory.razor.css rename to Blazor/Blazor/Pages/InventoryPage.razor.css index f778a72..3379461 100644 --- a/Blazor/Blazor/Pages/Inventory.razor.css +++ b/Blazor/Blazor/Pages/InventoryPage.razor.css @@ -1,14 +1,14 @@ -.inventory-list { - width: 40%; -} - -.inventory { - width: 40%; -} - -#master { - display: flex; - flex-direction: row; - justify-content: space-between; - width: 100%; -} +.inventory-list { + width: 40%; +} + +.inventory { + width: 40%; +} + +#master { + display: flex; + flex-direction: row; + justify-content: space-between; + width: 100%; +}