Actions complete + Razor componoents

master
Aurian JAULT 3 years ago
parent a71b3ffe35
commit c34cc04d89

@ -0,0 +1,50 @@
<CascadingValue Value="@this">
<div class="container">
<div class="row">
<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 class="col-6">
<div>Recipe</div>
<div>
<div class="css-recipe">
<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" />
</div>
</div>
<div>Result</div>
<div>
<CraftingItem Item="RecipeResult" />
</div>
</div>
<div class="col-12">
<div>Actions</div>
<div class="actions" id="actions">
</div>
</div>
</div>
</div>
</CascadingValue>

@ -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<CraftingAction>();
Actions.CollectionChanged += OnActionsCollectionChanged;
this.RecipeItems = new List<Item> { null, null, null, null, null, null, null, null, null };
}
public ObservableCollection<CraftingAction> Actions { get; set; }
public Item CurrentDragItem { get; set; }
[Parameter]
public List<Item> Items { get; set; }
public List<Item> RecipeItems { get; set; }
public Item RecipeResult
{
get => this._recipeResult;
set
{
if (this._recipeResult == value)
{
return;
}
this._recipeResult = value;
this.StateHasChanged();
}
}
[Parameter]
public List<CraftingRecipe> Recipes { get; set; }
/// <summary>
/// Gets or sets the java script runtime.
/// </summary>
[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);
}
}
}

@ -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;
}

@ -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);
});
}
}

@ -1,6 +1,4 @@
@*@using Models; <div class="item"
<div class="item"
ondragover="event.preventDefault();" ondragover="event.preventDefault();"
draggable="true" draggable="true"
@ondragstart="@OnDragStart" @ondragstart="@OnDragStart"
@ -12,4 +10,4 @@
{ {
@Item.DisplayName @Item.DisplayName
} }
</div>*@ </div>

@ -1,4 +1,4 @@
/*using Blazor.Models; using Blazor.Models;
using Blazorise; using Blazorise;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
@ -62,4 +62,3 @@ namespace Blazor.Component
} }
} }
} }
*/

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

@ -0,0 +1,14 @@
@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>

@ -0,0 +1,16 @@
@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>

@ -0,0 +1,14 @@
@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>

@ -2,8 +2,6 @@
@using System.Globalization @using System.Globalization
@using Blazor.Component @using Blazor.Component
@using Blazor.Models; @using Blazor.Models;
@using Component;
@using Models;
@using Blazor.Pages; @using Blazor.Pages;
<PageTitle>Index</PageTitle> <PageTitle>Index</PageTitle>
@ -15,20 +13,6 @@ Welcome to your new app.
<p> <p>
<b>CurrentCulture</b>: @CultureInfo.CurrentCulture <b>CurrentCulture</b>: @CultureInfo.CurrentCulture
</p> </p>
<ShowItems Items="Cakes" > <div>
<ShowTemplate Context="CakeContext"> <Crafting Items="Items" Recipes="Recipes" />
<div class="card text-center"> </div>
<div class="card-header">
Cake Token Id - @CakeContext.Id
</div>
<div class="card-body">
<h5 class="card-title">@CakeContext.Name</h5>
<p class="card-text">Price $@CakeContext.Cost</p>
</div>
<div class="card-footer text-muted">
Click Here
</div>
</div>
</ShowTemplate>
</ShowItems>
<SurveyPrompt Title="How is Blazor working for you?" />

@ -1,43 +1,32 @@
using Blazor.Models; using Blazor.Component;
using Blazor.Models;
using Blazor.Services;
using Microsoft.AspNetCore.Components;
namespace Blazor.Pages namespace Blazor.Pages
{ {
public partial class Index public partial class Index
{ {
private Cake CakeItem = new Cake [Inject]
{ public IDataService DataService { get; set; }
Id = 1,
Name = "Black Forest",
Cost = 50
};
public List<Cake> Cakes { get; set; }
protected override Task OnAfterRenderAsync(bool firstRender) public List<Item> Items { get; set; } = new List<Item>();
{
LoadCakes();
StateHasChanged();
return base.OnAfterRenderAsync(firstRender);
}
public void LoadCakes() private List<CraftingRecipe> Recipes { get; set; } = new List<CraftingRecipe>();
{
Cakes = new List<Cake> protected override async Task OnAfterRenderAsync(bool firstRender)
{ {
// items hidden for display purpose base.OnAfterRenderAsync(firstRender);
new Cake
{ if (!firstRender)
Id = 1,
Name = "Red Velvet",
Cost = 60
},
new Cake
{ {
Id = 2, return;
Name = "Tiramisu",
Cost= 1000000,
} }
};
Items = await DataService.List(0, await DataService.Count());
Recipes = await DataService.GetRecipes();
StateHasChanged();
} }
} }
} }

@ -28,6 +28,8 @@
</div> </div>
<script src="_framework/blazor.server.js"></script> <script src="_framework/blazor.server.js"></script>
<script src="Component/Crafting.razor.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css">
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" /> <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />

@ -1,4 +1,5 @@
using Blazor.Factories; using Blazor.Component;
using Blazor.Factories;
using Blazor.Models; using Blazor.Models;
using Blazored.LocalStorage; using Blazored.LocalStorage;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
@ -181,5 +182,23 @@ namespace Blazor.Services
// Save the data // Save the data
await _localStorage.SetItemAsync("data", currentData); await _localStorage.SetItemAsync("data", currentData);
} }
public Task<List<CraftingRecipe>> GetRecipes()
{
var items = new List<CraftingRecipe>
{
new CraftingRecipe
{
Give = new Item { DisplayName = "Diamond", Name = "diamond" },
Have = new List<List<string>>
{
new List<string> { "dirt", "dirt", "dirt" },
new List<string> { "dirt", null, "dirt" },
new List<string> { "dirt", "dirt", "dirt" }
}
}
};
return Task.FromResult(items);
}
} }
} }

@ -1,4 +1,5 @@
using Blazor.Models; using Blazor.Component;
using Blazor.Models;
namespace Blazor.Services namespace Blazor.Services
{ {
@ -15,5 +16,6 @@ namespace Blazor.Services
Task Update(int id, ItemModel model); Task Update(int id, ItemModel model);
Task Delete(int id); Task Delete(int id);
Task<List<CraftingRecipe>> GetRecipes();
} }
} }

Loading…
Cancel
Save