From a22ba71351e34c63fe822e13e29f7148380f3aab Mon Sep 17 00:00:00 2001 From: Louwar Date: Sat, 19 Nov 2022 10:01:05 +0100 Subject: [PATCH] TO DO Fix composant razor --- ValblazeProject/Components/Card.razor | 7 ++ ValblazeProject/Components/Card.razor.cs | 19 ++++ ValblazeProject/Components/Crafting.razor | 50 +++++++++++ ValblazeProject/Components/Crafting.razor.css | 19 ++++ ValblazeProject/Components/Crafting.razor.js | 16 ++++ ValblazeProject/Components/CraftingAction.cs | 11 +++ ValblazeProject/Components/CraftingItem.razor | 14 +++ .../Components/CraftingItem.razor.cs | 64 +++++++++++++ .../Components/CraftingItem.razor.css | 6 ++ ValblazeProject/Components/CraftingRecipe.cs | 10 +++ ValblazeProject/Components/ShowItems.razor | 12 +++ ValblazeProject/Components/ShowItems.razor.cs | 13 +++ ValblazeProject/Models/Cake.cs | 9 ++ ValblazeProject/Pages/Index.razor | 90 +++++++++++++++++++ ValblazeProject/Pages/Index.razor.cs | 61 +++++++++++++ ValblazeProject/Pages/_Layout.cshtml | 2 + ValblazeProject/Services/DataLocalService.cs | 19 ++++ ValblazeProject/Services/IDataService.cs | 1 + ValblazeProject/Shared/TableTemplate.razor | 28 ++++++ ValblazeProject/ValblazeProject.csproj | 10 +++ 20 files changed, 461 insertions(+) create mode 100644 ValblazeProject/Components/Card.razor create mode 100644 ValblazeProject/Components/Card.razor.cs create mode 100644 ValblazeProject/Components/Crafting.razor create mode 100644 ValblazeProject/Components/Crafting.razor.css create mode 100644 ValblazeProject/Components/Crafting.razor.js create mode 100644 ValblazeProject/Components/CraftingAction.cs create mode 100644 ValblazeProject/Components/CraftingItem.razor create mode 100644 ValblazeProject/Components/CraftingItem.razor.cs create mode 100644 ValblazeProject/Components/CraftingItem.razor.css create mode 100644 ValblazeProject/Components/CraftingRecipe.cs create mode 100644 ValblazeProject/Components/ShowItems.razor create mode 100644 ValblazeProject/Components/ShowItems.razor.cs create mode 100644 ValblazeProject/Models/Cake.cs create mode 100644 ValblazeProject/Pages/Index.razor.cs create mode 100644 ValblazeProject/Shared/TableTemplate.razor diff --git a/ValblazeProject/Components/Card.razor b/ValblazeProject/Components/Card.razor new file mode 100644 index 0000000..874f2bc --- /dev/null +++ b/ValblazeProject/Components/Card.razor @@ -0,0 +1,7 @@ +

Card

+@typeparam TItem +
+ @CardHeader(Item) + @CardBody(Item) + @CardFooter +
\ No newline at end of file diff --git a/ValblazeProject/Components/Card.razor.cs b/ValblazeProject/Components/Card.razor.cs new file mode 100644 index 0000000..f444b0c --- /dev/null +++ b/ValblazeProject/Components/Card.razor.cs @@ -0,0 +1,19 @@ +using Microsoft.AspNetCore.Components; + +namespace ValblazeProject.Components +{ + public partial class Card + { + [Parameter] + public RenderFragment CardBody { get; set; } + + [Parameter] + public RenderFragment CardFooter { get; set; } + + [Parameter] + public RenderFragment CardHeader { get; set; } + + [Parameter] + public TItem Item { get; set; } + } +} diff --git a/ValblazeProject/Components/Crafting.razor b/ValblazeProject/Components/Crafting.razor new file mode 100644 index 0000000..65c9b93 --- /dev/null +++ b/ValblazeProject/Components/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/ValblazeProject/Components/Crafting.razor.css b/ValblazeProject/Components/Crafting.razor.css new file mode 100644 index 0000000..291bff1 --- /dev/null +++ b/ValblazeProject/Components/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; +} \ No newline at end of file diff --git a/ValblazeProject/Components/Crafting.razor.js b/ValblazeProject/Components/Crafting.razor.js new file mode 100644 index 0000000..8fdb58e --- /dev/null +++ b/ValblazeProject/Components/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/ValblazeProject/Components/CraftingAction.cs b/ValblazeProject/Components/CraftingAction.cs new file mode 100644 index 0000000..d82bab8 --- /dev/null +++ b/ValblazeProject/Components/CraftingAction.cs @@ -0,0 +1,11 @@ +using ValblazeProject.Models; + +namespace ValblazeProject.Components +{ + public class CraftingAction + { + public string Action { get; set; } + public int Index { get; set; } + public Item Item { get; set; } + } +} diff --git a/ValblazeProject/Components/CraftingItem.razor b/ValblazeProject/Components/CraftingItem.razor new file mode 100644 index 0000000..c1043b8 --- /dev/null +++ b/ValblazeProject/Components/CraftingItem.razor @@ -0,0 +1,14 @@ +
+ + @if (Item != null) + { + @Item.DisplayName + } +
\ No newline at end of file diff --git a/ValblazeProject/Components/CraftingItem.razor.cs b/ValblazeProject/Components/CraftingItem.razor.cs new file mode 100644 index 0000000..23f6b0a --- /dev/null +++ b/ValblazeProject/Components/CraftingItem.razor.cs @@ -0,0 +1,64 @@ +using Blazorise; +using Microsoft.AspNetCore.Components; +using ValblazeProject.Models; + +namespace ValblazeProject.Components +{ + public partial class CraftingItem + { + [Parameter] + public int Index { get; set; } + + [Parameter] + public Item Item { get; set; } + + [Parameter] + public bool NoDrop { get; set; } + + [CascadingParameter] + public Crafting Parent { get; set; } + + internal void OnDragEnter() + { + if (NoDrop) + { + return; + } + + Parent.Actions.Add(new CraftingAction { Action = "Drag Enter", Item = this.Item, Index = this.Index }); + } + + internal void OnDragLeave() + { + if (NoDrop) + { + return; + } + + Parent.Actions.Add(new CraftingAction { Action = "Drag Leave", Item = this.Item, Index = this.Index }); + } + + internal void OnDrop() + { + if (NoDrop) + { + return; + } + + this.Item = Parent.CurrentDragItem; + Parent.RecipeItems[this.Index] = this.Item; + + Parent.Actions.Add(new CraftingAction { Action = "Drop", Item = this.Item, Index = this.Index }); + + // Check recipe + Parent.CheckRecipe(); + } + + private void OnDragStart() + { + Parent.CurrentDragItem = this.Item; + + Parent.Actions.Add(new CraftingAction { Action = "Drag Start", Item = this.Item, Index = this.Index }); + } + } +} diff --git a/ValblazeProject/Components/CraftingItem.razor.css b/ValblazeProject/Components/CraftingItem.razor.css new file mode 100644 index 0000000..b2d4521 --- /dev/null +++ b/ValblazeProject/Components/CraftingItem.razor.css @@ -0,0 +1,6 @@ +.item { + width: 64px; + height: 64px; + border: 1px solid; + overflow: hidden; +} diff --git a/ValblazeProject/Components/CraftingRecipe.cs b/ValblazeProject/Components/CraftingRecipe.cs new file mode 100644 index 0000000..17127ad --- /dev/null +++ b/ValblazeProject/Components/CraftingRecipe.cs @@ -0,0 +1,10 @@ +using ValblazeProject.Models; + +namespace ValblazeProject.Components +{ + public class CraftingRecipe + { + public Item Give { get; set; } + public List> Have { get; set; } + } +} diff --git a/ValblazeProject/Components/ShowItems.razor b/ValblazeProject/Components/ShowItems.razor new file mode 100644 index 0000000..7739061 --- /dev/null +++ b/ValblazeProject/Components/ShowItems.razor @@ -0,0 +1,12 @@ +@typeparam TItem + +
+ @if ((Items?.Count ?? 0) != 0) + { + @foreach (var item in Items) + { + @ShowTemplate(item) + ; + } + } +
\ No newline at end of file diff --git a/ValblazeProject/Components/ShowItems.razor.cs b/ValblazeProject/Components/ShowItems.razor.cs new file mode 100644 index 0000000..543679f --- /dev/null +++ b/ValblazeProject/Components/ShowItems.razor.cs @@ -0,0 +1,13 @@ +using Microsoft.AspNetCore.Components; + +namespace ValblazeProject.Components +{ + public partial class ShowItems + { + [Parameter] + public List Items { get; set; } + + [Parameter] + public RenderFragment ShowTemplate { get; set; } + } +} diff --git a/ValblazeProject/Models/Cake.cs b/ValblazeProject/Models/Cake.cs new file mode 100644 index 0000000..77812fd --- /dev/null +++ b/ValblazeProject/Models/Cake.cs @@ -0,0 +1,9 @@ +namespace ValblazeProject.Models +{ + public class Cake + { + public int Id { get; set; } + public string Name { get; set; } + public decimal Cost { get; set; } + } +} diff --git a/ValblazeProject/Pages/Index.razor b/ValblazeProject/Pages/Index.razor index 85f572e..f8de525 100644 --- a/ValblazeProject/Pages/Index.razor +++ b/ValblazeProject/Pages/Index.razor @@ -1,4 +1,7 @@ @using System.Globalization +@using ValblazeProject.Components +@using ValblazeProject.Models + @page "/" @@ -14,3 +17,90 @@ Welcome to your new app. + + + + + +
+ Cake Token Number - @context.Id +
+ + +
+
@context.Name
+
$ @context.Cost
+
+ + +
+ Click Here +
+ + + + + +
+ Cake Token Number - @cakeContext.Id +
+ + +
+
@cakeContext.Name
+
$ @cakeContext.Cost
+
+ + + + + +
+
+ Cake Token Id - @CakeContext.Id +
+
+
@CakeContext.Name
+

Price $@CakeContext.Cost

+
+
+ Click Here +
+
+ + + +
+ +
\ No newline at end of file diff --git a/ValblazeProject/Pages/Index.razor.cs b/ValblazeProject/Pages/Index.razor.cs new file mode 100644 index 0000000..8b3586a --- /dev/null +++ b/ValblazeProject/Pages/Index.razor.cs @@ -0,0 +1,61 @@ +using Microsoft.AspNetCore.Components; +using ValblazeProject.Components; +using ValblazeProject.Models; +using ValblazeProject.Services; + +namespace ValblazeProject.Pages +{ + public partial class Index + { + public List Cakes { get; set; } + + protected override Task OnAfterRenderAsync(bool firstRender) + { + LoadCakes(); + StateHasChanged(); + return base.OnAfterRenderAsync(firstRender); + } + + public void LoadCakes() + { + Cakes = new List + { + // items hidden for display purpose + new Cake + { + Id = 1, + Name = "Red Velvet", + Cost = 60 + }, + }; + } + private Cake CakeItem = new Cake + { + Id = 1, + Name = "Black Forest", + Cost = 50 + }; + + [Inject] + public IDataService DataService { get; set; } + + public List Items { get; set; } = new List(); + + private List Recipes { get; set; } = new List(); + + 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(); + } + } +} diff --git a/ValblazeProject/Pages/_Layout.cshtml b/ValblazeProject/Pages/_Layout.cshtml index 5f604c0..782a83f 100644 --- a/ValblazeProject/Pages/_Layout.cshtml +++ b/ValblazeProject/Pages/_Layout.cshtml @@ -38,5 +38,7 @@ + + diff --git a/ValblazeProject/Services/DataLocalService.cs b/ValblazeProject/Services/DataLocalService.cs index fe670d1..c983df0 100644 --- a/ValblazeProject/Services/DataLocalService.cs +++ b/ValblazeProject/Services/DataLocalService.cs @@ -1,5 +1,6 @@ using Blazored.LocalStorage; using Microsoft.AspNetCore.Components; +using ValblazeProject.Components; using ValblazeProject.Factories; using ValblazeProject.Models; @@ -162,5 +163,23 @@ namespace ValblazeProject.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/ValblazeProject/Services/IDataService.cs b/ValblazeProject/Services/IDataService.cs index 40ae93b..20c52b8 100644 --- a/ValblazeProject/Services/IDataService.cs +++ b/ValblazeProject/Services/IDataService.cs @@ -10,5 +10,6 @@ namespace ValblazeProject.Services Task GetById(int id); Task Update(int id, ItemModel model); Task Delete(int id); + Task> GetRecipes(); } } diff --git a/ValblazeProject/Shared/TableTemplate.razor b/ValblazeProject/Shared/TableTemplate.razor new file mode 100644 index 0000000..72c3ae5 --- /dev/null +++ b/ValblazeProject/Shared/TableTemplate.razor @@ -0,0 +1,28 @@ +@typeparam TItem +@using System.Diagnostics.CodeAnalysis + + + + @TableHeader + + + @foreach (var item in Items) + { + if (RowTemplate is not null) + { + @RowTemplate(item) + } + } + +
+ +@code { + [Parameter] + public RenderFragment? TableHeader { get; set; } + + [Parameter] + public RenderFragment? RowTemplate { get; set; } + + [Parameter, AllowNull] + public IReadOnlyList Items { get; set; } +} \ No newline at end of file diff --git a/ValblazeProject/ValblazeProject.csproj b/ValblazeProject/ValblazeProject.csproj index 36fa7ff..ee741df 100644 --- a/ValblazeProject/ValblazeProject.csproj +++ b/ValblazeProject/ValblazeProject.csproj @@ -6,6 +6,16 @@ enable + + + + + + + + + +