From 81f68ec7f3e2ff5613f4788c8ca44e7549837cd7 Mon Sep 17 00:00:00 2001 From: Lucas Delanier Date: Sun, 25 Dec 2022 22:06:36 +0100 Subject: [PATCH] hyi --- .../Components/CraftingItem.razor.cs | 2 + .../Components/CraftingItem.razor.css | 2 + .../Components/InventoryComponent.razor | 45 +++++++------ .../Components/InventoryComponent.razor.cs | 33 ++++++---- .../Components/InventoryComponent.razor.css | 33 +++++++++- .../Components/InventoryComponent.razor.js | 16 +++++ BlazorAppClean/Components/InventoryItem.razor | 14 ++++ .../Components/InventoryItem.razor.cs | 65 +++++++++++++++++++ .../Components/InventoryItem.razor.css | 10 +++ BlazorAppClean/Pages/Inventory.razor | 2 +- BlazorAppClean/Pages/Inventory.razor.cs | 5 +- BlazorAppClean/Shared/MainLayout.razor.css | 11 ++++ 12 files changed, 201 insertions(+), 37 deletions(-) create mode 100644 BlazorAppClean/Components/InventoryComponent.razor.js create mode 100644 BlazorAppClean/Components/InventoryItem.razor create mode 100644 BlazorAppClean/Components/InventoryItem.razor.cs create mode 100644 BlazorAppClean/Components/InventoryItem.razor.css diff --git a/BlazorAppClean/Components/CraftingItem.razor.cs b/BlazorAppClean/Components/CraftingItem.razor.cs index e7d4bd6..1abdd22 100644 --- a/BlazorAppClean/Components/CraftingItem.razor.cs +++ b/BlazorAppClean/Components/CraftingItem.razor.cs @@ -12,6 +12,8 @@ namespace BlazorAppClean.Components [Parameter] public Item Item { get; set; } + + [Parameter] public bool NoDrop { get; set; } diff --git a/BlazorAppClean/Components/CraftingItem.razor.css b/BlazorAppClean/Components/CraftingItem.razor.css index b2d4521..2a3d09a 100644 --- a/BlazorAppClean/Components/CraftingItem.razor.css +++ b/BlazorAppClean/Components/CraftingItem.razor.css @@ -3,4 +3,6 @@ height: 64px; border: 1px solid; overflow: hidden; + } + diff --git a/BlazorAppClean/Components/InventoryComponent.razor b/BlazorAppClean/Components/InventoryComponent.razor index 4f8483f..e59d953 100644 --- a/BlazorAppClean/Components/InventoryComponent.razor +++ b/BlazorAppClean/Components/InventoryComponent.razor @@ -6,28 +6,32 @@
- +
- - - - - - - - - - - - - - - - - - +
+

Inventory

+ + + + + + + + + + + + + + + + + + +
+
@@ -62,6 +66,9 @@
+
Actions
+
+
diff --git a/BlazorAppClean/Components/InventoryComponent.razor.cs b/BlazorAppClean/Components/InventoryComponent.razor.cs index f5b8402..d26dca8 100644 --- a/BlazorAppClean/Components/InventoryComponent.razor.cs +++ b/BlazorAppClean/Components/InventoryComponent.razor.cs @@ -1,19 +1,9 @@ using BlazorAppClean.Models; -using Blazorise.DataGrid; +using BlazorAppClean.Services; using Microsoft.AspNetCore.Components; using Microsoft.JSInterop; using System.Collections.ObjectModel; using System.Collections.Specialized; -using BlazorAppClean.Modals; -using BlazorAppClean.Models; -using BlazorAppClean.Services; -using Blazored.LocalStorage; -using Blazored.Modal; -using Blazored.Modal.Services; -using Blazorise.DataGrid; -using Microsoft.AspNetCore.Components; -using Microsoft.Extensions.Localization; -using Blazorise; namespace BlazorAppClean.Components { @@ -23,7 +13,24 @@ namespace BlazorAppClean.Components public IDataService DataService { get; set; } private int totalItem; + + public Item CurrentDragItem { get; set; } + + [CascadingParameter] + public InventoryComponent Parent { get; set; } + public List RecipeItems { get; set; } public List Items { get; set; } = new List(); + public ObservableCollection Actions { get; set; } + + [Inject] + internal IJSRuntime JavaScriptRuntime { get; set; } + + public InventoryComponent() + { + Actions = new ObservableCollection(); + Actions.CollectionChanged += OnActionsCollectionChanged; + this.RecipeItems = new List { null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null }; + } protected override async Task OnAfterRenderAsync(bool firstRender) { @@ -39,6 +46,10 @@ namespace BlazorAppClean.Components StateHasChanged(); } + private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e) + { + JavaScriptRuntime.InvokeVoidAsync("Crafting.AddActions", e.NewItems); + } } } diff --git a/BlazorAppClean/Components/InventoryComponent.razor.css b/BlazorAppClean/Components/InventoryComponent.razor.css index 9827773..d132796 100644 --- a/BlazorAppClean/Components/InventoryComponent.razor.css +++ b/BlazorAppClean/Components/InventoryComponent.razor.css @@ -4,12 +4,37 @@ display: grid; width: 500px; } +h1 { + margin: 5px 10px; + padding-inline-end: 300px; + font-family: 'VT323', monospace; + font-size: 24px; + color: #404040; +} +.content { + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} +.slotSpace { + margin: 10px 10px; + display: flex; + flex-wrap: wrap; +} .css-inv { grid-template-columns: repeat(6,minmax(0,1fr)); gap: 10px; - display: grid; - width: 500px; + width: 410px; + background: #c6c6c6; + border-radius: 3px; + box-shadow: 5px 5px 0px #555555, inset 4px 4px 0px #fefefe; + padding-top: 5px; + padding-left: 5px; + margin-bottom: 10px; } .actions { @@ -20,4 +45,8 @@ .body { display: flex; + background: #ccc; + box-sizing: border-box; + width: 100%; + height: 80vh; } diff --git a/BlazorAppClean/Components/InventoryComponent.razor.js b/BlazorAppClean/Components/InventoryComponent.razor.js new file mode 100644 index 0000000..e9dc10c --- /dev/null +++ b/BlazorAppClean/Components/InventoryComponent.razor.js @@ -0,0 +1,16 @@ +window.Inventory = +{ + AddActions: function (data) { + + data.forEach(element => { + var div = document.createElement('div'); + div.innerHTML = 'Aaction: ' + 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/BlazorAppClean/Components/InventoryItem.razor b/BlazorAppClean/Components/InventoryItem.razor new file mode 100644 index 0000000..1e1470b --- /dev/null +++ b/BlazorAppClean/Components/InventoryItem.razor @@ -0,0 +1,14 @@ +
+ + @if (Item != null) + { + @Item.DisplayName + } +
\ No newline at end of file diff --git a/BlazorAppClean/Components/InventoryItem.razor.cs b/BlazorAppClean/Components/InventoryItem.razor.cs new file mode 100644 index 0000000..cc407cb --- /dev/null +++ b/BlazorAppClean/Components/InventoryItem.razor.cs @@ -0,0 +1,65 @@ +using BlazorAppClean.Models; +using BlazorAppClean.Pages; +using Blazorise; +using Microsoft.AspNetCore.Components; + +namespace BlazorAppClean.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 InventoryComponent Parent { get; set; } + + internal void OnDragEnter() + { + if (NoDrop) + { + return; + } + + Parent.Actions.Add(new InventoryAction { Action = "Drag Enter", Item = this.Item, Index = this.Index }); + } + + internal void OnDragLeave() + { + if (NoDrop) + { + return; + } + + Parent.Actions.Add(new InventoryAction { Action = "Drag Leave", Item = this.Item, Index = this.Index }); + } + + internal void OnDrop() + { + if (NoDrop) + { + return; + } + + this.Item = Parent.CurrentDragItem; + + + Parent.Actions.Add(new InventoryAction { Action = "Drop", Item = this.Item, Index = this.Index }); + + } + + private void OnDragStart() + { + Parent.CurrentDragItem = this.Item; + + Parent.Actions.Add(new InventoryAction { Action = "Drag Start", Item = this.Item, Index = this.Index }); + } + } +} diff --git a/BlazorAppClean/Components/InventoryItem.razor.css b/BlazorAppClean/Components/InventoryItem.razor.css new file mode 100644 index 0000000..e9f2861 --- /dev/null +++ b/BlazorAppClean/Components/InventoryItem.razor.css @@ -0,0 +1,10 @@ +.item { + width: 64px; + height: 64px; + border: 1px solid; + + display: flex; + justify-content: center; + background: #8b8b8b; + box-shadow: inset 1.5px 1.5px 0px rgba(55, 55, 55, 0.8), inset -2px -2px 0px #ffffff; +} diff --git a/BlazorAppClean/Pages/Inventory.razor b/BlazorAppClean/Pages/Inventory.razor index d0a70a4..1cdc229 100644 --- a/BlazorAppClean/Pages/Inventory.razor +++ b/BlazorAppClean/Pages/Inventory.razor @@ -4,5 +4,5 @@

My Inventory

+ - diff --git a/BlazorAppClean/Pages/Inventory.razor.cs b/BlazorAppClean/Pages/Inventory.razor.cs index 354f882..0695267 100644 --- a/BlazorAppClean/Pages/Inventory.razor.cs +++ b/BlazorAppClean/Pages/Inventory.razor.cs @@ -14,8 +14,6 @@ namespace BlazorAppClean.Pages public List Items { get; set; } = new List(); - private List Recipes { get; set; } = new List(); - protected override async Task OnAfterRenderAsync(bool firstRender) { base.OnAfterRenderAsync(firstRender); @@ -25,8 +23,7 @@ namespace BlazorAppClean.Pages return; } - Items = await DataService.List(0, await DataService.Count()); - Recipes = await DataService.GetRecipes(); + Items = await DataService.getAll(); StateHasChanged(); } diff --git a/BlazorAppClean/Shared/MainLayout.razor.css b/BlazorAppClean/Shared/MainLayout.razor.css index 551e4b2..b7fa124 100644 --- a/BlazorAppClean/Shared/MainLayout.razor.css +++ b/BlazorAppClean/Shared/MainLayout.razor.css @@ -8,6 +8,17 @@ main { flex: 1; } +.inventory { + width: 335px; + height: 200px; + background: #c6c6c6; + border-radius: 3px; + box-shadow: 5px 5px 0px #555555, inset 4px 4px 0px #fefefe; + padding-top: 5px; + padding-left: 5px; + margin-bottom: 10px; +} + .sidebar { background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); }