From c34cc04d89b1fbb9b2cbba66fcbe98a2146e1572 Mon Sep 17 00:00:00 2001 From: aujault Date: Fri, 18 Nov 2022 11:45:08 +0100 Subject: [PATCH] Actions complete + Razor componoents --- Component/Crafting.razor | 50 ++++++++++++++++ Component/Crafting.razor.cs | 80 ++++++++++++++++++++++++++ Component/Crafting.razor.css | 19 ++++++ Component/Crafting.razor.js | 16 ++++++ Component/CraftingItem.razor | 6 +- Component/CraftingItem.razor.cs | 3 +- Component/CraftingItem.razor.css | 6 ++ Component/MyFirstChildComponent.razor | 14 +++++ Component/MyRootComponent.razor | 16 ++++++ Component/MySecondChildComponent.razor | 14 +++++ Pages/Index.razor | 22 +------ Pages/Index.razor.cs | 49 ++++++---------- Pages/_Layout.cshtml | 2 + Services/DataLocalService.cs | 21 ++++++- Services/IDataService.cs | 4 +- 15 files changed, 265 insertions(+), 57 deletions(-) create mode 100644 Component/Crafting.razor create mode 100644 Component/Crafting.razor.cs create mode 100644 Component/Crafting.razor.css create mode 100644 Component/Crafting.razor.js create mode 100644 Component/CraftingItem.razor.css create mode 100644 Component/MyFirstChildComponent.razor create mode 100644 Component/MyRootComponent.razor create mode 100644 Component/MySecondChildComponent.razor diff --git a/Component/Crafting.razor b/Component/Crafting.razor new file mode 100644 index 0000000..65c9b93 --- /dev/null +++ b/Component/Crafting.razor @@ -0,0 +1,50 @@ + +
+
+
+ +
Available items:
+
+
+ + @foreach (var item in Items) + { + + } +
+
+ +
+ +
+
Recipe
+ +
+ +
+ + + + + + + + + +
+
+ +
Result
+
+ +
+
+ +
+
Actions
+
+
+
+
+
+ \ No newline at end of file diff --git a/Component/Crafting.razor.cs b/Component/Crafting.razor.cs new file mode 100644 index 0000000..283ebd1 --- /dev/null +++ b/Component/Crafting.razor.cs @@ -0,0 +1,80 @@ +using Blazor.Models; +using Microsoft.AspNetCore.Components; +using Microsoft.JSInterop; +using System.Collections.ObjectModel; +using System.Collections.Specialized; + +namespace Blazor.Component +{ + public partial class Crafting + { + private Item _recipeResult; + + public Crafting() + { + Actions = new ObservableCollection(); + Actions.CollectionChanged += OnActionsCollectionChanged; + this.RecipeItems = new List { null, null, null, null, null, null, null, null, null }; + } + + public ObservableCollection Actions { get; set; } + public Item CurrentDragItem { get; set; } + + [Parameter] + public List Items { get; set; } + + public List RecipeItems { get; set; } + + public Item RecipeResult + { + get => this._recipeResult; + set + { + if (this._recipeResult == value) + { + return; + } + + this._recipeResult = value; + this.StateHasChanged(); + } + } + + [Parameter] + public List Recipes { get; set; } + + /// + /// Gets or sets the java script runtime. + /// + [Inject] + internal IJSRuntime JavaScriptRuntime { get; set; } + + public void CheckRecipe() + { + RecipeResult = null; + + // Get the current model + var currentModel = string.Join("|", this.RecipeItems.Select(s => s != null ? s.Name : string.Empty)); + + this.Actions.Add(new CraftingAction { Action = $"Items : {currentModel}" }); + + foreach (var craftingRecipe in Recipes) + { + // Get the recipe model + var recipeModel = string.Join("|", craftingRecipe.Have.SelectMany(s => s)); + + this.Actions.Add(new CraftingAction { Action = $"Recipe model : {recipeModel}" }); + + if (currentModel == recipeModel) + { + RecipeResult = craftingRecipe.Give; + } + } + } + + private void OnActionsCollectionChanged(object? sender, NotifyCollectionChangedEventArgs e) + { + JavaScriptRuntime.InvokeVoidAsync("Crafting.AddActions", e.NewItems); + } + } +} diff --git a/Component/Crafting.razor.css b/Component/Crafting.razor.css new file mode 100644 index 0000000..2a388f2 --- /dev/null +++ b/Component/Crafting.razor.css @@ -0,0 +1,19 @@ +.css-grid { + grid-template-columns: repeat(4,minmax(0,1fr)); + gap: 10px; + display: grid; + width: 286px; +} + +.css-recipe { + grid-template-columns: repeat(3,minmax(0,1fr)); + gap: 10px; + display: grid; + width: 212px; +} + +.actions { + border: 1px solid black; + height: 250px; + overflow: scroll; +} diff --git a/Component/Crafting.razor.js b/Component/Crafting.razor.js new file mode 100644 index 0000000..8fdb58e --- /dev/null +++ b/Component/Crafting.razor.js @@ -0,0 +1,16 @@ +window.Crafting = +{ + 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/Component/CraftingItem.razor b/Component/CraftingItem.razor index 2c0b429..e64e6cd 100644 --- a/Component/CraftingItem.razor +++ b/Component/CraftingItem.razor @@ -1,6 +1,4 @@ -@*@using Models; - -
*@ \ No newline at end of file +
\ No newline at end of file diff --git a/Component/CraftingItem.razor.cs b/Component/CraftingItem.razor.cs index 17ce183..29a3a61 100644 --- a/Component/CraftingItem.razor.cs +++ b/Component/CraftingItem.razor.cs @@ -1,4 +1,4 @@ -/*using Blazor.Models; +using Blazor.Models; using Blazorise; using Microsoft.AspNetCore.Components; @@ -62,4 +62,3 @@ namespace Blazor.Component } } } -*/ \ No newline at end of file diff --git a/Component/CraftingItem.razor.css b/Component/CraftingItem.razor.css new file mode 100644 index 0000000..e527d89 --- /dev/null +++ b/Component/CraftingItem.razor.css @@ -0,0 +1,6 @@ +.item { + width: 64px; + height: 64px; + border: 1px solid; + overflow: hidden; +} \ No newline at end of file diff --git a/Component/MyFirstChildComponent.razor b/Component/MyFirstChildComponent.razor new file mode 100644 index 0000000..592c4e4 --- /dev/null +++ b/Component/MyFirstChildComponent.razor @@ -0,0 +1,14 @@ +@code { + [Parameter] + public RenderFragment ChildContent { get; set; } + + [CascadingParameter] + public MyRootComponent RootComponent { get; set; } +} + +
+ MyFirstChildComponent - @RootComponent.Text +
+ @ChildContent +
+
\ No newline at end of file diff --git a/Component/MyRootComponent.razor b/Component/MyRootComponent.razor new file mode 100644 index 0000000..18895ba --- /dev/null +++ b/Component/MyRootComponent.razor @@ -0,0 +1,16 @@ +@code { + [Parameter] + public RenderFragment ChildContent { get; set; } + + [Parameter] + public string Text { get; set; } +} + +
+ MyRootComponent - @Text +
+ + @ChildContent + +
+
\ No newline at end of file diff --git a/Component/MySecondChildComponent.razor b/Component/MySecondChildComponent.razor new file mode 100644 index 0000000..7d207e6 --- /dev/null +++ b/Component/MySecondChildComponent.razor @@ -0,0 +1,14 @@ +@code { + [Parameter] + public RenderFragment ChildContent { get; set; } + + [CascadingParameter] + public MyRootComponent RootComponent { get; set; } +} + +
+ MySecondChildComponent - @RootComponent.Text +
+ @ChildContent +
+
\ No newline at end of file diff --git a/Pages/Index.razor b/Pages/Index.razor index 47f10bb..1894e7f 100644 --- a/Pages/Index.razor +++ b/Pages/Index.razor @@ -2,8 +2,6 @@ @using System.Globalization @using Blazor.Component @using Blazor.Models; -@using Component; -@using Models; @using Blazor.Pages; Index @@ -15,20 +13,6 @@ Welcome to your new app.

CurrentCulture: @CultureInfo.CurrentCulture

- - -
-
- Cake Token Id - @CakeContext.Id -
-
-
@CakeContext.Name
-

Price $@CakeContext.Cost

-
-
- Click Here -
-
- - - +
+ +
\ No newline at end of file diff --git a/Pages/Index.razor.cs b/Pages/Index.razor.cs index 2f8c5a6..6060a18 100644 --- a/Pages/Index.razor.cs +++ b/Pages/Index.razor.cs @@ -1,43 +1,32 @@ -using Blazor.Models; +using Blazor.Component; +using Blazor.Models; +using Blazor.Services; +using Microsoft.AspNetCore.Components; namespace Blazor.Pages { public partial class Index { - private Cake CakeItem = new Cake - { - Id = 1, - Name = "Black Forest", - Cost = 50 - }; - public List Cakes { get; set; } + [Inject] + public IDataService DataService { get; set; } - protected override Task OnAfterRenderAsync(bool firstRender) - { - LoadCakes(); - StateHasChanged(); - return base.OnAfterRenderAsync(firstRender); - } + public List Items { get; set; } = new List(); - public void LoadCakes() - { - Cakes = new List + private List Recipes { get; set; } = new List(); + + protected override async Task OnAfterRenderAsync(bool firstRender) { - // items hidden for display purpose - new Cake - { - Id = 1, - Name = "Red Velvet", - Cost = 60 - }, - new Cake + base.OnAfterRenderAsync(firstRender); + + if (!firstRender) { - Id = 2, - Name = "Tiramisu", - Cost= 1000000, + return; } - }; + + Items = await DataService.List(0, await DataService.Count()); + Recipes = await DataService.GetRecipes(); + + StateHasChanged(); } } - } diff --git a/Pages/_Layout.cshtml b/Pages/_Layout.cshtml index 001f014..538b0a5 100644 --- a/Pages/_Layout.cshtml +++ b/Pages/_Layout.cshtml @@ -28,6 +28,8 @@ + + diff --git a/Services/DataLocalService.cs b/Services/DataLocalService.cs index 5282bf3..69c233a 100644 --- a/Services/DataLocalService.cs +++ b/Services/DataLocalService.cs @@ -1,4 +1,5 @@ -using Blazor.Factories; +using Blazor.Component; +using Blazor.Factories; using Blazor.Models; using Blazored.LocalStorage; using Microsoft.AspNetCore.Components; @@ -181,5 +182,23 @@ namespace Blazor.Services // Save the data await _localStorage.SetItemAsync("data", currentData); } + public Task> GetRecipes() + { + var items = new List + { + new CraftingRecipe + { + Give = new Item { DisplayName = "Diamond", Name = "diamond" }, + Have = new List> + { + new List { "dirt", "dirt", "dirt" }, + new List { "dirt", null, "dirt" }, + new List { "dirt", "dirt", "dirt" } + } + } + }; + + return Task.FromResult(items); + } } } diff --git a/Services/IDataService.cs b/Services/IDataService.cs index 2d7dd8f..7568595 100644 --- a/Services/IDataService.cs +++ b/Services/IDataService.cs @@ -1,4 +1,5 @@ -using Blazor.Models; +using Blazor.Component; +using Blazor.Models; namespace Blazor.Services { @@ -15,5 +16,6 @@ namespace Blazor.Services Task Update(int id, ItemModel model); Task Delete(int id); + Task> GetRecipes(); } }