Agent Catalog and Maui Test
This commit is contained in:
@@ -0,0 +1,394 @@
|
||||
@inherits BasePage
|
||||
@page "/catalog"
|
||||
@using Model
|
||||
@using Model.Entity.Data
|
||||
@using Model.Entity.Parts
|
||||
@implements IDisposable
|
||||
|
||||
@inject IEntityDisplayService EntityDisplayService
|
||||
|
||||
<LayoutLargeContentComponent>
|
||||
<WebsiteTitleComponent>Catalog</WebsiteTitleComponent>
|
||||
|
||||
<PaperComponent>
|
||||
<FormDisplayComponent Label="Patch">
|
||||
<Display>
|
||||
Game Patch: @Variables.GamePatch
|
||||
</Display>
|
||||
</FormDisplayComponent>
|
||||
</PaperComponent>
|
||||
|
||||
<PaperComponent>
|
||||
<CatalogEntityFilterComponent></CatalogEntityFilterComponent>
|
||||
|
||||
<div class="catalogResultCount">
|
||||
@searches.Count @(searches.Count == 1 ? "entity" : "entities")
|
||||
</div>
|
||||
|
||||
@if (searches.Any())
|
||||
{
|
||||
<div class="catalogGrid">
|
||||
@foreach (var entity in searches)
|
||||
{
|
||||
<PaperComponent>
|
||||
<div class="catalogCard" @onclick="() => OpenDialog(entity)">
|
||||
<div class="catalogCardHeader">
|
||||
<span class="catalogCardName">@entity.Info().Name</span>
|
||||
<span class="catalogCardType type-@(entity.EntityType.ToLower().Replace("_", "-"))">@entity.EntityType.Replace("_", " ")</span>
|
||||
</div>
|
||||
|
||||
<div class="catalogCardSubheader">
|
||||
@{
|
||||
var faction = entity.Faction();
|
||||
}
|
||||
@if (faction != null)
|
||||
{
|
||||
var factionName = EntityData.Get().TryGetValue(faction.Faction, out var fac) ? fac.Info().Name : "";
|
||||
<span class="catalogCardFaction">@factionName</span>
|
||||
}
|
||||
@{
|
||||
var vanguard = entity.VanguardAdded();
|
||||
}
|
||||
@if (vanguard != null)
|
||||
{
|
||||
<span class="catalogCardDivider">|</span>
|
||||
var immortalName = EntityData.Get().TryGetValue(vanguard.ImmortalId, out var imm) ? imm.Info().Name : "";
|
||||
<span class="catalogCardImmortal">@immortalName</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (!string.IsNullOrEmpty(entity.Info().Description))
|
||||
{
|
||||
<div class="catalogCardDesc">
|
||||
@(entity.Info().Description.Length > 160
|
||||
? entity.Info().Description[..157] + "..."
|
||||
: entity.Info().Description)
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="catalogCardStats">
|
||||
@{
|
||||
var tier = entity.Tier();
|
||||
if (tier != null && tier.Tier > 0)
|
||||
{
|
||||
<span class="catalogStat" title="Tier">T@(tier.Tier)</span>
|
||||
}
|
||||
}
|
||||
@{
|
||||
var supply = entity.Supply();
|
||||
if (supply != null && (supply.Takes > 0 || supply.Grants > 0))
|
||||
{
|
||||
<span class="catalogStat" title="Supply">@supply.Takes@(supply.Grants > 0 ? $"/{supply.Grants}" : "")</span>
|
||||
}
|
||||
}
|
||||
@{
|
||||
var prod = entity.Production();
|
||||
if (prod != null)
|
||||
{
|
||||
if (prod.Alloy > 0) { <span class="catalogStat catalogStatAlloy" title="Alloy">@prod.Alloy</span> }
|
||||
if (prod.Ether > 0) { <span class="catalogStat catalogStatEther" title="Ether">@prod.Ether</span> }
|
||||
if (prod.Pyre > 0) { <span class="catalogStat catalogStatPyre" title="Pyre">@prod.Pyre</span> }
|
||||
if (prod.Energy > 0) { <span class="catalogStat catalogStatEnergy" title="Energy">@prod.Energy</span> }
|
||||
if (prod.BuildTime > 0) { <span class="catalogStat" title="Build time">@prod.BuildTime"s</span> }
|
||||
}
|
||||
}
|
||||
@{
|
||||
var vitality = entity.Vitality();
|
||||
if (vitality != null && vitality.Health > 0)
|
||||
{
|
||||
<span class="catalogStat catalogStatHealth" title="Health">@vitality.Health</span>
|
||||
}
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</PaperComponent>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
else
|
||||
{
|
||||
<div class="catalogEmpty">No entities match the selected filters.</div>
|
||||
}
|
||||
</PaperComponent>
|
||||
</LayoutLargeContentComponent>
|
||||
|
||||
@if (selectedEntity != null)
|
||||
{
|
||||
<CatalogEntityDialogComponent Entity="selectedEntity" OnClose="CloseDialog"/>
|
||||
}
|
||||
|
||||
<style>
|
||||
.catalogResultCount {
|
||||
padding: 8px 0 16px 0;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.catalogGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.catalogCard {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.catalogCard:hover .catalogCardName {
|
||||
color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.catalogCardHeader {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.catalogCardName {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.catalogCardType {
|
||||
font-size: 0.7rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.5px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.type-army { background: #1a6b8a; color: #fff; }
|
||||
.type-building { background: #5a7a1a; color: #fff; }
|
||||
.type-building-upgrade { background: #4a6a0a; color: #fff; }
|
||||
.type-ability { background: #8a1a6b; color: #fff; }
|
||||
.type-passive { background: #8a6b1a; color: #fff; }
|
||||
.type-immortal { background: #6b1a8a; color: #fff; }
|
||||
.type-worker { background: #1a6b4a; color: #fff; }
|
||||
.type-tech { background: #3a1a6b; color: #fff; }
|
||||
.type-spell { background: #1a3a8a; color: #fff; }
|
||||
.type-faction { background: #6b3a1a; color: #fff; }
|
||||
.type-command { background: #3a6b2a; color: #fff; }
|
||||
.type-none { background: #444; color: #fff; }
|
||||
|
||||
.catalogCardSubheader {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 0.8rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.catalogCardFaction {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.catalogCardImmortal {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.catalogCardDivider {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.catalogCardDesc {
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.45;
|
||||
opacity: 0.8;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.catalogCardStats {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.catalogStat {
|
||||
font-size: 0.72rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: var(--secondary);
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.catalogStatAlloy {
|
||||
background: #8a7a2a;
|
||||
}
|
||||
|
||||
.catalogStatEther {
|
||||
background: #2a6a8a;
|
||||
}
|
||||
|
||||
.catalogStatPyre {
|
||||
background: #8a3a2a;
|
||||
}
|
||||
|
||||
.catalogStatEnergy {
|
||||
background: #2a8a6a;
|
||||
}
|
||||
|
||||
.catalogStatHealth {
|
||||
background: #4a2a6a;
|
||||
}
|
||||
|
||||
.catalogEmpty {
|
||||
padding: 32px;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@@media only screen and (max-width: 1025px) {
|
||||
.catalogGrid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Inject] public IEntityFilterService EntityFilterService { get; set; } = default!;
|
||||
|
||||
readonly List<EntityModel> defaults = (from entity in EntityModel.GetList()
|
||||
where !entity.IsSpeculative
|
||||
select entity).ToList();
|
||||
|
||||
List<EntityModel> factions = default!;
|
||||
List<EntityModel> immortals = default!;
|
||||
List<EntityModel> entities = default!;
|
||||
List<EntityModel> searches = default!;
|
||||
|
||||
EntityModel? selectedEntity;
|
||||
string selectedFactionType = DataType.Any;
|
||||
string selectedImmortalType = DataType.Any;
|
||||
string selectedEntityType = EntityType.Army;
|
||||
string searchText = "";
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
RefreshFactionSearch();
|
||||
|
||||
EntityFilterService.Subscribe(OnChange);
|
||||
EntityDisplayService.Subscribe(StateHasChanged);
|
||||
}
|
||||
|
||||
void IDisposable.Dispose()
|
||||
{
|
||||
EntityFilterService.Unsubscribe(OnChange);
|
||||
EntityDisplayService.Unsubscribe(StateHasChanged);
|
||||
}
|
||||
|
||||
void OpenDialog(EntityModel entity)
|
||||
{
|
||||
selectedEntity = entity;
|
||||
}
|
||||
|
||||
void CloseDialog()
|
||||
{
|
||||
selectedEntity = null;
|
||||
}
|
||||
|
||||
void OnChange(EntityFilterEvent filterEntityEvent)
|
||||
{
|
||||
if (filterEntityEvent == EntityFilterEvent.OnRefreshFaction)
|
||||
{
|
||||
RefreshFactionSearch();
|
||||
}
|
||||
|
||||
if (filterEntityEvent == EntityFilterEvent.OnRefreshImmortal)
|
||||
{
|
||||
RefreshImmortalSearch();
|
||||
}
|
||||
|
||||
if (filterEntityEvent == EntityFilterEvent.OnRefreshEntity)
|
||||
{
|
||||
RefreshEntitySearch();
|
||||
}
|
||||
|
||||
if (filterEntityEvent == EntityFilterEvent.OnRefreshSearch)
|
||||
{
|
||||
RefreshTextSearch();
|
||||
}
|
||||
}
|
||||
|
||||
void RefreshFactionSearch()
|
||||
{
|
||||
selectedFactionType = EntityFilterService.GetFactionType();
|
||||
|
||||
if (selectedFactionType == DataType.Any)
|
||||
{
|
||||
factions = defaults.ToList();
|
||||
}
|
||||
else
|
||||
{
|
||||
factions = (from entity in defaults
|
||||
where entity.Faction() != null && entity.Faction().Faction == selectedFactionType
|
||||
select entity).ToList();
|
||||
}
|
||||
|
||||
RefreshImmortalSearch();
|
||||
}
|
||||
|
||||
void RefreshImmortalSearch()
|
||||
{
|
||||
selectedImmortalType = EntityFilterService.GetImmortalType();
|
||||
|
||||
if (selectedImmortalType == DataType.Any)
|
||||
{
|
||||
immortals = factions.ToList();
|
||||
}
|
||||
else
|
||||
{
|
||||
immortals = (from entity in factions
|
||||
let vanguardAdded = entity.VanguardAdded()
|
||||
where vanguardAdded == null || vanguardAdded.ImmortalId == selectedImmortalType
|
||||
select entity).ToList();
|
||||
}
|
||||
|
||||
RefreshEntitySearch();
|
||||
}
|
||||
|
||||
void RefreshEntitySearch()
|
||||
{
|
||||
selectedEntityType = EntityFilterService.GetEntityType();
|
||||
|
||||
if (selectedEntityType == EntityType.Any)
|
||||
{
|
||||
entities = immortals.ToList();
|
||||
}
|
||||
else
|
||||
{
|
||||
entities = (from entity in immortals
|
||||
where entity.EntityType == selectedEntityType
|
||||
select entity).ToList();
|
||||
}
|
||||
|
||||
RefreshTextSearch();
|
||||
}
|
||||
|
||||
void RefreshTextSearch()
|
||||
{
|
||||
searchText = EntityFilterService.GetSearchText();
|
||||
|
||||
if (searchText.Trim() == "")
|
||||
{
|
||||
searches = entities.ToList();
|
||||
}
|
||||
else
|
||||
{
|
||||
searches = (from entity in entities
|
||||
where entity.Info().Name.ToLower().Contains(searchText.ToLower())
|
||||
select entity).ToList();
|
||||
}
|
||||
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,733 @@
|
||||
@using Model
|
||||
@using Model.Entity.Data
|
||||
@using Model.Entity.Parts
|
||||
|
||||
<div class="catalogDetailOverlay" @onclick="Close">
|
||||
<div class="catalogDetailPanel"
|
||||
@onclick:preventDefault="true"
|
||||
@onclick:stopPropagation="true">
|
||||
|
||||
<div class="detailHeader">
|
||||
<div class="detailHeaderLeft">
|
||||
@if (history.Count > 1)
|
||||
{
|
||||
<button class="detailBackBtn" @onclick="GoBack" title="Back">←</button>
|
||||
}
|
||||
<div class="detailName">@Current.Info().Name</div>
|
||||
<span class="detailBadge type-bg-@(Current.EntityType.ToLower().Replace("_", "-"))">@Current.EntityType.Replace("_", " ")</span>
|
||||
</div>
|
||||
<button class="detailCloseBtn" @onclick="Close">×</button>
|
||||
</div>
|
||||
|
||||
<div class="detailBody">
|
||||
|
||||
@* Tags row *@
|
||||
<div class="detailTags">
|
||||
@{
|
||||
var faction = Current.Faction();
|
||||
var vanguard = Current.VanguardAdded();
|
||||
}
|
||||
@if (faction != null)
|
||||
{
|
||||
var facName = EntityData.Get().TryGetValue(faction.Faction, out var fac) ? fac.Info().Name : "";
|
||||
<span class="detailTag">@facName</span>
|
||||
}
|
||||
@if (vanguard != null)
|
||||
{
|
||||
var immName = EntityData.Get().TryGetValue(vanguard.ImmortalId, out var imm) ? imm.Info().Name : "";
|
||||
<span class="detailTag detailTagImmortal">@immName</span>
|
||||
}
|
||||
@if (Current.Info().Descriptive != "None")
|
||||
{
|
||||
<span class="detailTag detailTagDesc">@Current.Info().Descriptive.Replace("_", " ")</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
@* Stats grid *@
|
||||
@{
|
||||
var vitality = Current.Vitality();
|
||||
var supply = Current.Supply();
|
||||
var tier = Current.Tier();
|
||||
var movement = Current.Movement();
|
||||
var hotkey = Current.Hotkey();
|
||||
}
|
||||
@if ((vitality != null && vitality.Health > 0) || tier != null || supply != null || movement != null)
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailStatGrid">
|
||||
@if (vitality != null && vitality.Health > 0)
|
||||
{
|
||||
<div class="detailStatCard">
|
||||
<span class="detailStatValue">@vitality.Health</span>
|
||||
<span class="detailStatLabel">Health</span>
|
||||
</div>
|
||||
}
|
||||
@if (vitality != null && vitality.DefenseLayer > 0)
|
||||
{
|
||||
<div class="detailStatCard">
|
||||
<span class="detailStatValue">@vitality.DefenseLayer</span>
|
||||
<span class="detailStatLabel">Defense</span>
|
||||
</div>
|
||||
}
|
||||
@if (tier != null && tier.Tier > 0)
|
||||
{
|
||||
<div class="detailStatCard">
|
||||
<span class="detailStatValue">T@(tier.Tier)</span>
|
||||
<span class="detailStatLabel">Tier</span>
|
||||
</div>
|
||||
}
|
||||
@if (supply != null && (supply.Takes > 0 || supply.Grants > 0))
|
||||
{
|
||||
<div class="detailStatCard">
|
||||
<span class="detailStatValue">@supply.Takes@(supply.Grants > 0 ? $"/{supply.Grants}" : "")</span>
|
||||
<span class="detailStatLabel">Supply</span>
|
||||
</div>
|
||||
}
|
||||
@if (movement != null && movement.Speed > 0)
|
||||
{
|
||||
<div class="detailStatCard">
|
||||
<span class="detailStatValue">@movement.Speed.ToString("F1")</span>
|
||||
<span class="detailStatLabel">Speed</span>
|
||||
</div>
|
||||
}
|
||||
@if (vitality != null && vitality.Vision > 0)
|
||||
{
|
||||
<div class="detailStatCard">
|
||||
<span class="detailStatValue">@vitality.Vision</span>
|
||||
<span class="detailStatLabel">Sight</span>
|
||||
</div>
|
||||
}
|
||||
@if (vitality != null && vitality.Energy > 0)
|
||||
{
|
||||
<div class="detailStatCard">
|
||||
<span class="detailStatValue">@vitality.Energy</span>
|
||||
<span class="detailStatLabel">Energy</span>
|
||||
</div>
|
||||
}
|
||||
@if (vitality != null && !string.IsNullOrEmpty(vitality.Armor) && vitality.Armor != "None")
|
||||
{
|
||||
<div class="detailStatCard">
|
||||
<span class="detailStatValue" style="font-size:0.85rem">@vitality.Armor</span>
|
||||
<span class="detailStatLabel">Armor</span>
|
||||
</div>
|
||||
}
|
||||
@if (hotkey != null && !string.IsNullOrEmpty(hotkey.Hotkey))
|
||||
{
|
||||
<div class="detailStatCard">
|
||||
<span class="detailStatValue">@hotkey.Hotkey</span>
|
||||
<span class="detailStatLabel">@hotkey.HotkeyGroup</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Cost *@
|
||||
@{
|
||||
var prod = Current.Production();
|
||||
}
|
||||
@if (prod != null && (prod.Alloy > 0 || prod.Ether > 0 || prod.Pyre > 0 || prod.Energy > 0 || prod.BuildTime > 0))
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionTitle">Cost</div>
|
||||
<div class="detailCostRow">
|
||||
@if (prod.Alloy > 0)
|
||||
{
|
||||
<span class="detailCost">A @prod.Alloy</span>
|
||||
}
|
||||
@if (prod.Ether > 0)
|
||||
{
|
||||
<span class="detailCost">E @prod.Ether</span>
|
||||
}
|
||||
@if (prod.Pyre > 0)
|
||||
{
|
||||
<span class="detailCost">P @prod.Pyre</span>
|
||||
}
|
||||
@if (prod.Energy > 0)
|
||||
{
|
||||
<span class="detailCost">En @prod.Energy</span>
|
||||
}
|
||||
@if (prod.BuildTime > 0)
|
||||
{
|
||||
<span class="detailCost">@prod.BuildTime s</span>
|
||||
}
|
||||
</div>
|
||||
@if (!string.IsNullOrEmpty(prod.ProducedBy))
|
||||
{
|
||||
var producerName = EntityData.Get().TryGetValue(prod.ProducedBy, out var producer) ? producer.Info().Name : prod.ProducedBy;
|
||||
<div class="detailProducedBy">Built at: @producerName</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Description *@
|
||||
@if (!string.IsNullOrEmpty(Current.Info().Description))
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionTitle">Description</div>
|
||||
<div class="detailDescription">@Current.Info().Description</div>
|
||||
@if (!string.IsNullOrEmpty(Current.Info().FlavorText))
|
||||
{
|
||||
<div class="detailFlavor">@((MarkupString)Current.Info().FlavorText)</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Weapons *@
|
||||
@{
|
||||
var weapons = Current.Weapons();
|
||||
}
|
||||
@if (weapons.Any())
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionTitle">Weapons</div>
|
||||
@foreach (var weapon in weapons)
|
||||
{
|
||||
<div class="detailWeapon">
|
||||
<div class="detailWeaponRow">
|
||||
<span class="detailWeaponDmg">@weapon.Damage dmg</span>
|
||||
@if (weapon.AttacksPerSecond > 0)
|
||||
{
|
||||
<span class="detailWeaponStat">@weapon.AttacksPerSecond.ToString("F2") APS</span>
|
||||
}
|
||||
<span class="detailWeaponStat">Rng @weapon.Range</span>
|
||||
@if (weapon.MinimumRange > 0)
|
||||
{
|
||||
<span class="detailWeaponStat">Min @weapon.MinimumRange</span>
|
||||
}
|
||||
<span class="detailWeaponStat">@weapon.Targets</span>
|
||||
@if (weapon.HasSplash)
|
||||
{
|
||||
<span class="detailWeaponTag">Splash</span>
|
||||
}
|
||||
</div>
|
||||
@if (weapon.LightDamage > 0 || weapon.MediumDamage > 0 || weapon.HeavyDamage > 0)
|
||||
{
|
||||
<div class="detailWeaponDmgBreakdown">
|
||||
@if (weapon.LightDamage > 0)
|
||||
{
|
||||
<span class="dmgLight">L: @weapon.LightDamage</span>
|
||||
}
|
||||
@if (weapon.MediumDamage > 0)
|
||||
{
|
||||
<span class="dmgMedium">M: @weapon.MediumDamage</span>
|
||||
}
|
||||
@if (weapon.HeavyDamage > 0)
|
||||
{
|
||||
<span class="dmgHeavy">H: @weapon.HeavyDamage</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Abilities *@
|
||||
@{
|
||||
var abilityIds = Current.IdAbilities();
|
||||
}
|
||||
@if (abilityIds.Any())
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionTitle">Abilities</div>
|
||||
<div class="detailRefList">
|
||||
@foreach (var abil in abilityIds)
|
||||
{
|
||||
var target = EntityData.Get().TryGetValue(abil.Id, out var a) ? a : null;
|
||||
<button class="detailRefItem" @onclick="() => NavigateTo(abil.Id)">
|
||||
<span class="detailRefBullet">→</span>
|
||||
@(target?.Info().Name ?? abil.Id)
|
||||
@if (target != null && target.Info().Descriptive != "None")
|
||||
{
|
||||
<span class="detailRefDesc">@target.Info().Descriptive.Replace("_", " ")</span>
|
||||
}
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Passives *@
|
||||
@{
|
||||
var passives = Current.Passives();
|
||||
var passiveIds = Current.IdPassives();
|
||||
}
|
||||
@if (passives.Any() || passiveIds.Any())
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionTitle">Passives</div>
|
||||
@foreach (var p in passives)
|
||||
{
|
||||
<div class="detailPassive">
|
||||
<div class="detailPassiveName">@p.Name</div>
|
||||
<div class="detailPassiveDesc">@p.Description</div>
|
||||
</div>
|
||||
}
|
||||
@if (passiveIds.Any())
|
||||
{
|
||||
<div class="detailRefList">
|
||||
@foreach (var pid in passiveIds)
|
||||
{
|
||||
var target = EntityData.Get().TryGetValue(pid.Id, out var p) ? p : null;
|
||||
<button class="detailRefItem" @onclick="() => NavigateTo(pid.Id)">
|
||||
<span class="detailRefBullet">→</span>
|
||||
@(target?.Info().Name ?? pid.Id)
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Mechanics *@
|
||||
@{
|
||||
var mechanics = Current.Mechanics();
|
||||
}
|
||||
@if (mechanics.Any())
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionTitle">Mechanics</div>
|
||||
@foreach (var m in mechanics)
|
||||
{
|
||||
<div class="detailPassive">
|
||||
<div class="detailPassiveName">@m.Name</div>
|
||||
<div class="detailPassiveDesc">@m.Description</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Upgrades *@
|
||||
@{
|
||||
var upgradeIds = Current.IdUpgrades();
|
||||
}
|
||||
@if (upgradeIds.Any())
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionTitle">Upgrades</div>
|
||||
<div class="detailRefList">
|
||||
@foreach (var uid in upgradeIds)
|
||||
{
|
||||
var target = EntityData.Get().TryGetValue(uid.Id, out var u) ? u : null;
|
||||
<button class="detailRefItem" @onclick="() => NavigateTo(uid.Id)">
|
||||
<span class="detailRefBullet">→</span>
|
||||
@(target?.Info().Name ?? uid.Id)
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Vanguards *@
|
||||
@{
|
||||
var vanguardIds = Current.IdVanguards();
|
||||
var vanguardAdded = Current.VanguardAdded();
|
||||
}
|
||||
@if (vanguardIds.Any())
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionTitle">Vanguard Units</div>
|
||||
<div class="detailRefList">
|
||||
@foreach (var vid in vanguardIds)
|
||||
{
|
||||
var target = EntityData.Get().TryGetValue(vid.Id, out var v) ? v : null;
|
||||
<button class="detailRefItem" @onclick="() => NavigateTo(vid.Id)">
|
||||
<span class="detailRefBullet">→</span>
|
||||
@(target?.Info().Name ?? vid.Id)
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@* Notes *@
|
||||
@if (!string.IsNullOrEmpty(Current.Info().Notes))
|
||||
{
|
||||
<div class="detailSection">
|
||||
<div class="detailSectionTitle">Notes</div>
|
||||
<div class="detailDescription">@Current.Info().Notes</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.catalogDetailOverlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.catalogDetailPanel {
|
||||
width: 620px;
|
||||
max-width: 100%;
|
||||
height: 100vh;
|
||||
background-color: var(--paper);
|
||||
border-left: 2px solid var(--paper-border);
|
||||
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@@keyframes slideIn {
|
||||
from { transform: translateX(100%); }
|
||||
to { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.detailHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 20px;
|
||||
border-bottom: 1px solid var(--paper-border);
|
||||
background-color: var(--accent);
|
||||
gap: 10px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detailHeaderLeft {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.detailBackBtn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-size: 1.3rem;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.detailBackBtn:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detailName {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.detailBadge {
|
||||
font-size: 0.65rem;
|
||||
padding: 3px 10px;
|
||||
border-radius: 4px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
white-space: nowrap;
|
||||
color: #fff;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.type-bg-army { background: #1a6b8a; }
|
||||
.type-bg-building { background: #5a7a1a; }
|
||||
.type-bg-building-upgrade { background: #4a6a0a; }
|
||||
.type-bg-ability { background: #8a1a6b; }
|
||||
.type-bg-passive { background: #8a6b1a; }
|
||||
.type-bg-immortal { background: #6b1a8a; }
|
||||
.type-bg-worker { background: #1a6b4a; }
|
||||
.type-bg-tech { background: #3a1a6b; }
|
||||
.type-bg-spell { background: #1a3a8a; }
|
||||
.type-bg-faction { background: #6b3a1a; }
|
||||
.type-bg-command { background: #3a6b2a; }
|
||||
.type-bg-none { background: #444; }
|
||||
|
||||
.detailCloseBtn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.detailCloseBtn:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detailBody {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.detailTags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detailTag {
|
||||
font-size: 0.75rem;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
background: var(--secondary);
|
||||
color: rgba(255, 255, 255, 0.85);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detailTagImmortal {
|
||||
background: #3a1a5a;
|
||||
}
|
||||
|
||||
.detailTagDesc {
|
||||
background: #2a3a4a;
|
||||
}
|
||||
|
||||
.detailSection {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.detailSectionTitle {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.8px;
|
||||
opacity: 0.35;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.detailStatGrid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(76px, 1fr));
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detailStatCard {
|
||||
background: var(--secondary);
|
||||
border-radius: 8px;
|
||||
padding: 10px 6px;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.detailStatValue {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 800;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detailStatLabel {
|
||||
font-size: 0.6rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.45;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detailCostRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.detailCost {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
background: var(--secondary);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detailProducedBy {
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.55;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.detailDescription {
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.55;
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.detailFlavor {
|
||||
font-style: italic;
|
||||
opacity: 0.5;
|
||||
margin-top: 8px;
|
||||
font-size: 0.83rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.detailWeapon {
|
||||
background: var(--secondary);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.detailWeaponRow {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
font-size: 0.83rem;
|
||||
}
|
||||
|
||||
.detailWeaponDmg {
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.detailWeaponStat {
|
||||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.detailWeaponTag {
|
||||
font-size: 0.65rem;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
background: #4a3a2a;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.detailWeaponDmgBreakdown {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 6px;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
.dmgLight { color: #6ba86b; }
|
||||
.dmgMedium { color: #a8a86b; }
|
||||
.dmgHeavy { color: #a86b6b; }
|
||||
|
||||
.detailRefList {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.detailRefItem {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 7px 12px;
|
||||
border-radius: 6px;
|
||||
background: var(--secondary);
|
||||
font-size: 0.83rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
border: none;
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.detailRefItem:hover {
|
||||
background: var(--secondary-hover);
|
||||
}
|
||||
|
||||
.detailRefBullet {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.detailRefDesc {
|
||||
font-weight: 400;
|
||||
opacity: 0.5;
|
||||
font-size: 0.75rem;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.detailPassive {
|
||||
background: var(--secondary);
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.detailPassiveName {
|
||||
font-size: 0.83rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.detailPassiveDesc {
|
||||
font-size: 0.78rem;
|
||||
opacity: 0.7;
|
||||
line-height: 1.4;
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Parameter] public EntityModel Entity { get; set; } = default!;
|
||||
|
||||
[Parameter] public EventCallback OnClose { get; set; }
|
||||
|
||||
List<string> history = new();
|
||||
EntityModel Current => history.Count > 0 ? EntityModel.Get(history[^1]) : Entity;
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
if (Entity != null)
|
||||
{
|
||||
history.Add(Entity.DataType);
|
||||
}
|
||||
}
|
||||
|
||||
async Task Close()
|
||||
{
|
||||
await OnClose.InvokeAsync();
|
||||
}
|
||||
|
||||
void NavigateTo(string entityId)
|
||||
{
|
||||
if (EntityData.Get().ContainsKey(entityId))
|
||||
{
|
||||
history.Add(entityId);
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
void GoBack()
|
||||
{
|
||||
if (history.Count > 1)
|
||||
{
|
||||
history.RemoveAt(history.Count - 1);
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,197 @@
|
||||
@using Model.Entity.Data
|
||||
|
||||
<div class="catalogFilters">
|
||||
<div class="filterGroup">
|
||||
<span class="filterLabel">Faction</span>
|
||||
<div class="filterPills">
|
||||
@foreach (var choice in EntityFilterService.GetFactionChoices())
|
||||
{
|
||||
<button class="filterPill @(choice.Equals(EntityFilterService.GetFactionType()) ? "active" : "")"
|
||||
@onclick="() => OnChangeFaction(choice)">
|
||||
@(choice == DataType.Any
|
||||
? "Any"
|
||||
: EntityData.Get().TryGetValue(choice, out var fac) ? fac.Info().Name : choice)
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@if (EntityFilterService.GetFactionType() != "Any" && EntityFilterService.GetFactionType() != "None")
|
||||
{
|
||||
<div class="filterGroup">
|
||||
<span class="filterLabel">Immortal</span>
|
||||
<div class="filterPills">
|
||||
@foreach (var choice in EntityFilterService.GetImmortalChoices())
|
||||
{
|
||||
<button class="filterPill @(choice.Equals(EntityFilterService.GetImmortalType()) ? "active" : "")"
|
||||
@onclick="() => OnChangeImmortal(choice)">
|
||||
@(EntityData.Get().TryGetValue(choice, out var imm) ? imm.Info().Name : choice)
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="filterGroup">
|
||||
<span class="filterLabel">Type</span>
|
||||
<div class="filterPills">
|
||||
@foreach (var choice in EntityFilterService.GetEntityChoices())
|
||||
{
|
||||
<button class="filterPill @(choice.Equals(EntityFilterService.GetEntityType()) ? "active" : "")"
|
||||
@onclick="() => OnChangeEntity(choice)">
|
||||
@choice.Replace("_", " ")
|
||||
</button>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="filterSearch">
|
||||
<svg class="searchIcon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<input class="searchInput" type="text" placeholder="Search by name..."
|
||||
@bind="searchText"
|
||||
@bind:after="OnSearchChanged"/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.catalogFilters {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filterGroup {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
opacity: 0.5;
|
||||
min-width: 64px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.filterPills {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.filterPill {
|
||||
padding: 6px 16px;
|
||||
border-radius: 20px;
|
||||
border: 1px solid var(--primary-border);
|
||||
background: var(--primary);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-family: inherit;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.filterPill:hover {
|
||||
background: var(--primary-hover);
|
||||
border-color: var(--primary-border-hover);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.filterPill.active {
|
||||
background: var(--secondary);
|
||||
border-color: var(--primary-border-hover);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.filterSearch {
|
||||
position: relative;
|
||||
margin-top: 4px;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.searchIcon {
|
||||
position: absolute;
|
||||
left: 12px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
opacity: 0.5;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.searchInput {
|
||||
width: 100%;
|
||||
padding: 10px 12px 10px 36px;
|
||||
border-radius: 20px;
|
||||
border: 2px solid var(--primary-border);
|
||||
background: var(--primary);
|
||||
color: #fff;
|
||||
font-family: inherit;
|
||||
font-size: 0.9rem;
|
||||
outline: none;
|
||||
transition: border-color 0.15s ease;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.searchInput::placeholder {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.searchInput:focus {
|
||||
border-color: var(--primary-border-hover);
|
||||
}
|
||||
|
||||
@@media only screen and (max-width: 600px) {
|
||||
.filterGroup {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.filterLabel {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@code {
|
||||
|
||||
[Inject] public IEntityFilterService EntityFilterService { get; set; } = default!;
|
||||
|
||||
string searchText = "";
|
||||
|
||||
protected override void OnInitialized()
|
||||
{
|
||||
base.OnInitialized();
|
||||
searchText = EntityFilterService.GetSearchText();
|
||||
}
|
||||
|
||||
void OnChangeFaction(string choice)
|
||||
{
|
||||
EntityFilterService.SelectFactionType(choice);
|
||||
}
|
||||
|
||||
void OnChangeImmortal(string choice)
|
||||
{
|
||||
EntityFilterService.SelectImmortalType(choice);
|
||||
}
|
||||
|
||||
void OnChangeEntity(string choice)
|
||||
{
|
||||
EntityFilterService.SelectEntityType(choice);
|
||||
}
|
||||
|
||||
void OnSearchChanged()
|
||||
{
|
||||
EntityFilterService.EnterSearchText(searchText);
|
||||
}
|
||||
|
||||
}
|
||||
Reference in New Issue
Block a user