JonathanMcCaffrey/IGP-Fan-Reference
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Jonathan McCaffrey
2022-03-28 18:44:08 -04:00
commit e43d9a90e7
267 changed files with 17049 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
IGP/Pages/Database/DatabasePage.razor
+220
View File
@@ -0,0 +1,220 @@
@layout PageLayout
@page "/database"
@implements IDisposable
<LayoutLargeContentComponent>
<WebsiteTitleComponent>Database</WebsiteTitleComponent>
<PaperComponent>
<FormDisplayComponent Label="Patch">
<Display>
Game Patch: @EntityModel.GameVersion
</Display>
</FormDisplayComponent>
</PaperComponent>
<PaperComponent>
<EntityFilterComponent></EntityFilterComponent>
@if (searches != null) {
<div class="databaseItems">
@foreach (var entity in searches) {
<EntityViewComponent Entity=entity></EntityViewComponent>
}
</div>
}
</PaperComponent>
<ContentDividerComponent></ContentDividerComponent>
<PaperComponent>
<InfoBodyComponent>
<InfoQuestionComponent>
What is this tool?
</InfoQuestionComponent>
<InfoAnswerComponent>
This is a reference database. Mostly so unit stats can be reviewed outside of the game, IMMORTAL: Gates of Pyre.
</InfoAnswerComponent>
</InfoBodyComponent>
<InfoBodyComponent>
<InfoQuestionComponent>
Is this database complete?
</InfoQuestionComponent>
<InfoAnswerComponent>
No. A lot of content is missing, that needs to be manually transfered from screenshots of IMMORTAL: Gates of Pyre. This will happen slowly over-time.
</InfoAnswerComponent>
</InfoBodyComponent>
<InfoBodyComponent>
<InfoQuestionComponent>
Is this database updated to the latest version?
</InfoQuestionComponent>
<InfoAnswerComponent>
Maybe. Check this <b>@EntityModel.GameVersion</b> version number, and compare it to the number on discord, in the <b>#game-updates</b> channel. That should give a general sense of how out of date the data is.
</InfoAnswerComponent>
</InfoBodyComponent>
<InfoBodyComponent>
<InfoQuestionComponent>
This database has some errors in it.
</InfoQuestionComponent>
<InfoAnswerComponent>
Yup. The content is being transferred by hand, so some mistakes are expected.
</InfoAnswerComponent>
</InfoBodyComponent>
<InfoBodyComponent>
<InfoQuestionComponent>
Can I see this data as raw JSON?
</InfoQuestionComponent>
<InfoAnswerComponent>
<a href="/raw-database">raw json link</a>
</InfoAnswerComponent>
</InfoBodyComponent>
</PaperComponent>
</LayoutLargeContentComponent>
<style>
.databaseItems {
height: 700px;
overflow-x: hidden;
overflow-y: auto;
background-color: var(--background);
gap: 4px;
border-top: 4px solid var(--accent);
border-bottom: 4px solid var(--accent);
padding: 4px;
}
</style>
@code {
[Inject]
public IEntityFilterService EntityFilterService { get; set; }
readonly List<EntityModel> defaults = (from entity in EntityModel.GetList()
where entity.IsSpeculative == false
select entity).ToList();
List<EntityModel> factions;
List<EntityModel> immortals;
List<EntityModel> entities;
List<EntityModel> searches;
string selectedFactionType = FactionType.Any;
string selectedImmortalType = ImmortalType.Any;
string selectedEntityType = EntityType.Army;
string searchText = "";
protected override void OnInitialized() {
RefreshFactionSearch();
EntityFilterService.Subscribe(OnChange);
}
void IDisposable.Dispose() {
EntityFilterService.Subscribe(OnChange);
}
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 == FactionType.Any) {
factions = defaults.ToList();
}
else {
factions = (from entity in defaults
where entity.Faction() != null && entity.Faction().Faction == selectedFactionType
select entity).ToList();
}
RefreshImmortalSearch();
}
void OnImmortalChanged(ChangeEventArgs e) {
selectedImmortalType = e.Value.ToString();
RefreshImmortalSearch();
}
void RefreshImmortalSearch() {
selectedImmortalType = EntityFilterService.GetImmortalType();
if (selectedImmortalType == ImmortalType.Any) {
immortals = factions.ToList();
}
else {
immortals = (from entity in factions
where entity.Vanguard() == null || entity.Vanguard().Immortal == selectedImmortalType
select entity).ToList();
}
RefreshEntitySearch();
}
void OnEntityChanged(ChangeEventArgs e) {
selectedEntityType = e.Value.ToString();
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 OnSearchTextChanged(ChangeEventArgs e) {
searchText = e.Value.ToString();
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();
}
}
IGP/Pages/Database/Entity/EntityViewComponent.razor
+63
View File
@@ -0,0 +1,63 @@
@if (Entity != null) {
var isVanguard = Entity.Vanguard() != null ? " vanguard" : "";
<div class="enititiesContainer @isVanguard">
<EntityHeaderComponent Entity=Entity></EntityHeaderComponent>
<div class="entityPartsContainer">
<EntityVanguardComponent Entity=Entity></EntityVanguardComponent>
<EntityInfoComponent Entity=Entity></EntityInfoComponent>
<EntityVanguardsComponent Entity=Entity></EntityVanguardsComponent>
<EntityProductionComponent Entity=Entity></EntityProductionComponent>
<EntityStatsComponent Entity=Entity></EntityStatsComponent>
<EntityMechanicsComponent Entity=Entity></EntityMechanicsComponent>
<EntityPassivesComponent Entity=Entity></EntityPassivesComponent>
<EntityPyreSpellsComponent Entity=Entity></EntityPyreSpellsComponent>
<EntityUpgradesComponent Entity=Entity></EntityUpgradesComponent>
<EntityWeaponsComponent Entity=Entity></EntityWeaponsComponent>
<EntityAbilitiesComponent Entity=Entity></EntityAbilitiesComponent>
</div>
</div>
}
<style>
.enititiesContainer {
margin-bottom: 12px;
width: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 30px;
display: flex;
flex-wrap: wrap;
}
.vanguard {
border: 4px solid var(--accent);
border-radius: 8px;
}
.entityPartsContainer {
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
}
@@media only screen and (max-width: 1025px) {
.enititiesContainer {
padding: 0px;
}
.entityPartsContainer {
margin: 0px;
}
}
</style>
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityAbilitiesComponent.razor
+43
View File
@@ -0,0 +1,43 @@
@if (Entity.IdAbilities().Count > 0) {
<EntityDisplayComponent Title="Abilities">
@foreach (var idAbility in Entity.IdAbilities()) {
var spell = EntityModel.Get(idAbility.Id);
var info = spell.Info();
var production = spell.Production();
<div>
<div>
<b>Name:</b> @info.Name
</div>
<div style="max-width: 600px;">
<b>Description:</b> @((MarkupString)info.Description)
</div>
<div>
@if (production != null) {
if (production.Energy != 0) {
<b> Energy: </b>
@production.Energy
}
if (production.BuildTime != 0) {
<b> BuildTime: </b>
@production.BuildTime
}
if (production.Cooldown != 0) {
<b> Cooldown: </b>
@production.Cooldown
}
}
</div>
</div>
}
</EntityDisplayComponent>
}
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityHeaderComponent.razor
+46
View File
@@ -0,0 +1,46 @@
<div class="entityHeader">
<div class="entityHeaderText">
@Entity.Info().Name
</div>
<div style="font-size:1.4rem;">
<b>@Entity.EntityType.Replace("_", " ")</b>
@if (Entity.Info().Descriptive != DescriptiveType.None) {
<span>
<b>:</b> @Entity.Info().Descriptive.Replace("_", " ")
</span>
}
</div>
</div>
<style>
.entityHeader {
display: flex;
flex-direction: row;
gap: 4px;
justify-content: space-between;
margin-bottom: 22px;
width: 100%;
margin-left: -6px;
}
.entityHeaderText {
font-size: 2rem;
font-weight: 900;
}
@@media only screen and (max-width: 1025px) {
.entityHeader {
flex-direction: column;
justify-content: normal;
margin-left: 4px;
}
}
</style>
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityInfoComponent.razor
+57
View File
@@ -0,0 +1,57 @@
<EntityDisplayComponent Title="Info">
@if (Entity.Info().Description != "") {
<div>
<b>Description:</b> @((MarkupString)Entity.Info().Description)
</div>
}
<div class="infoDisplayContainer">
<div>
@if (Entity.Faction() != null) {
<div>
<b>Faction:</b> @Entity.Faction().Faction
</div>
}
@if (Entity.Tier() != null) {
<div>
<b>Tier:</b> @Entity.Tier().Tier
</div>
}
</div>
@if (Entity.Hotkey() != null) {
<div>
<div>
<b>Hotkey Group:</b> @Entity.Hotkey().HotkeyGroup
</div>
<div>
<b>Hotkey:</b> @Entity.Hotkey().Hotkey
</div>
<div>
<b>Hold Space:</b> @(Entity.Hotkey().HoldSpace ? "Yes" : "No")
</div>
</div>
}
</div>
</EntityDisplayComponent>
<style>
.infoDisplayContainer {
display: flex;
gap: 32px;
}
@@media only screen and (max-width: 1025px) {
.infoDisplayContainer {
flex-direction: column;
gap: 4px;
}
}
</style>
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityMechanicsComponent.razor
+27
View File
@@ -0,0 +1,27 @@
@if (Entity.Mechanics().Count > 0) {
<EntityDisplayComponent Title="Mechanics">
<div>
@foreach (var data in Entity.Mechanics()) {
<div>
<div>
<span>
<b>Name:</b> @data.Name
</span>
</div>
<div>
<b>Description:</b> @data.Description
</div>
<br/>
</div>
}
</div>
</EntityDisplayComponent>
}
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityPassivesComponent.razor
+26
View File
@@ -0,0 +1,26 @@
@if (Entity.IdPassives().Count > 0) {
<EntityDisplayComponent Title="Passives">
@foreach (var idPassive in Entity.IdPassives()) {
var passive = EntityModel.Get(idPassive.Id);
var info = passive.Info();
<div>
<div>
<b>Name:</b> @info.Name
</div>
<div style="max-width: 600px;">
<b>Description:</b> @((MarkupString)info.Description)
</div>
</div>
}
</EntityDisplayComponent>
}
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityProductionComponent.razor
+94
View File
@@ -0,0 +1,94 @@
@{
var production = Entity.Production();
var supply = Entity.Supply();
var requirements = Entity.Requirements();
}
@if (production != null || supply != null || requirements.Count > 0) {
<EntityDisplayComponent Title="Production">
<div class="productionContainer">
@if (requirements.Count() > 0) {
<div>
@foreach (var requirement in requirements) {
<div>
<span>
<b>@requirement.Requirement.Replace("_", " "):</b> @requirement.Name
</span>
</div>
}
</div>
}
@if (production != null && (!production.Alloy.Equals(0)
|| !production.Ether.Equals(0)
|| !production.BuildTime.Equals(0)
|| !production.Cooldown.Equals(0))) {
<div>
@if (!production.Alloy.Equals(0)) {
<div>
<b>Alloy:</b> @production.Alloy
</div>
}
@if (!production.Ether.Equals(0)) {
<div>
<b>Ether:</b> @production.Ether
</div>
}
@if (!production.Pyre.Equals(0)) {
<div>
<b>Pyre:</b> @production.Pyre
</div>
}
@if (!production.BuildTime.Equals(0)) {
<div>
<b>Build Time:</b> @production.BuildTime.ToString()s
</div>
}
@if (!production.Cooldown.Equals(0)) {
<div>
<b>Cooldown:</b> @production.Cooldown.ToString()s
</div>
}
</div>
}
@if (supply != null) {
<div>
@if (!supply.Grants.Equals(0)) {
<div>
<b>Grants:</b> @supply.Grants
</div>
}
@if (!supply.Takes.Equals(0)) {
<div>
<b>Takes:</b> @supply.Takes Supply
</div>
}
</div>
}
</div>
</EntityDisplayComponent>
}
<style>
.productionContainer {
display: flex;
gap: 32px;
}
@@media only screen and (max-width: 1025px) {
.productionContainer {
flex-direction: column;
gap: 4px;
}
}
</style>
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityPyreSpellsComponent.razor
+43
View File
@@ -0,0 +1,43 @@
@if (Entity.IdPyreSpells().Count > 0) {
<EntityDisplayComponent Title="Pyre Spells">
@foreach (var pyreSpell in Entity.IdPyreSpells()) {
var spell = EntityModel.Get(pyreSpell.Id);
var info = spell.Info();
var production = spell.Production();
<div>
<div>
<b>Name:</b> @info.Name
</div>
<div>
<b>Description:</b> @((MarkupString)info.Description)
</div>
<div>
@if (production != null) {
if (production.Pyre != 0) {
<b> Pyre: </b>
@production.Pyre
}
if (production.BuildTime != 0) {
<b> BuildTime: </b>
@production.BuildTime
}
if (production.Cooldown != 0) {
<b> Cooldown: </b>
@production.Cooldown
}
}
</div>
</div>
}
</EntityDisplayComponent>
}
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityStatsComponent.razor
+86
View File
@@ -0,0 +1,86 @@
@{
var vitality = Entity.Vitality();
var movement = Entity.Movement();
}
@if (vitality != null || movement != null) {
<EntityDisplayComponent Title="Stats">
<div class="statContainer">
@if (vitality != null) {
<div>
@if (!vitality.DefenseLayer.Equals(0)) {
<div>
<b>Shield:</b> @vitality.DefenseLayer
</div>
}
@if (!vitality.Health.Equals(0)) {
<div>
<b>Health:</b> @vitality.Health
</div>
}
@if (!vitality.Energy.Equals(0)) {
<div>
<b>Energy:</b> @vitality.Energy
</div>
}
@if (vitality.Armor != "") {
<div>
<b>Armor:</b> @vitality.Armor
</div>
}
@if (vitality.IsEtheric) {
<div>
<b> + Etheric</b>
</div>
}
@if (vitality.IsStructure) {
<div>
<b> + Structure</b>
</div>
}
</div>
}
@if (movement != null) {
<div>
@if (!movement.Speed.Equals(0)) {
<div>
<b>Speed:</b> @movement.Speed
</div>
}
else {
<div>
<b>Speed:</b> Immobile
</div>
}
<div>
<b>Move Type:</b> @movement.Movement
</div>
</div>
}
</div>
</EntityDisplayComponent>
}
<style>
.statContainer {
display: flex;
gap: 32px;
}
@@media only screen and (max-width: 1025px) {
.statContainer {
flex-direction: column;
gap: 4px;
}
}
</style>
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityUpgradesComponent.razor
+38
View File
@@ -0,0 +1,38 @@
@if (Entity.IdUpgrades().Count > 0) {
<EntityDisplayComponent Title="Upgrades">
<div class="upgradesContainer">
@foreach (var upgradeId in Entity.IdUpgrades()) {
var entity = EntityModel.Get(upgradeId.Id);
<div>
<div>
<b>Name:</b> @entity.Info().Name
</div>
<div>
<b>Description:</b> @entity.Info().Description
</div>
</div>
}
</div>
</EntityDisplayComponent>
}
<style>
.upgradesContainer {
display: flex;
gap: 32px;
}
@@media only screen and (max-width: 1025px) {
.upgradesContainer {
flex-direction: column;
gap: 4px;
}
}
</style>
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityVanguardComponent.razor
+21
View File
@@ -0,0 +1,21 @@
@if (Entity.Vanguard() != null) {
<EntityDisplayComponent Title="Vanguard">
<div>
<div>
<b>Immortal:</b> @Entity.Vanguard().Immortal.Replace("_", " ")
</div>
@if (Entity.Vanguard().Replaces != "") {
<div>
<b>Replaces:</b> @Entity.Vanguard().Replaces.Replace("_", " ")
</div>
}
</div>
</EntityDisplayComponent>
}
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityVanguardsComponent.razor
+35
View File
@@ -0,0 +1,35 @@
@if (Entity.IdVanguards().Count > 0) {
<EntityDisplayComponent Title="Vanguards">
@foreach (var data in Entity.IdVanguards()) {
var entity = EntityModel.Get(data.Id);
var info = entity.Info();
var production = entity.Production();
var requirements = entity.Requirements();
var vanguard = entity.Vanguard();
var productionBuilding = (from building in requirements
where building.Requirement == RequirementType.Production_Building
select building).First().Name;
<div>
<div>
<b>Name:</b> @info.Name
</div>
<div>
<b>Replaces:</b> @vanguard.Replaces
</div>
<div>
<b>Built From:</b> @productionBuilding
</div>
</div>
}
</EntityDisplayComponent>
}
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Entity/Parts/EntityWeaponsComponent.razor
+114
View File
@@ -0,0 +1,114 @@
@if (Entity.Weapons().Count > 0) {
<EntityDisplayComponent Title="Weapons">
<div class="weaponsContainer">
@foreach (var data in Entity.Weapons()) {
<div>
<div>
<div class="damageContainer">
<div>
<b>Damage:</b> @data.Damage
</div>
@if (data.LightDamage != 0) {
<div class="alternateDamage">
<i>vs Light: @data.LightDamage</i>&nbsp;
</div>
}
@if (data.MediumDamage != 0) {
<div class="alternateDamage">
<i>vs Medium: @data.MediumDamage</i>&nbsp;
</div>
}
@if (data.HeavyDamage != 0) {
<div class="alternateDamage">
<i>vs Heavy: @data.HeavyDamage</i>&nbsp;
</div>
}
@if (data.EthericDamageBonus != 0) {
<div class="alternateDamage">
<i>vs Etheric +@data.EthericDamageBonus</i>&nbsp;
</div>
}
@if (data.StructureDamageBonus != 0) {
<div class="alternateDamage">
<i>vs Structure: +@data.StructureDamageBonus</i>&nbsp;
</div>
}
</div>
</div>
<div>
<b>Range:</b> @data.Range
</div>
@if (data.SecondsBetweenAttacks > 0) {
<div>
<b>AttacksPerSecond:</b> @(1 / data.SecondsBetweenAttacks)
</div>
<div>
(or <b>SecondsBetweenAttacks:</b> @data.SecondsBetweenAttacks)
</div>
}
else if (data.AttacksPerSecond > 0) {
<div>
<b>AttacksPerSecond:</b> @data.AttacksPerSecond
</div>
<div>
(or <b>SecondsBetweenAttacks:</b> @(1 / data.AttacksPerSecond))
</div>
}
<div>
<b>Targets:</b> @data.Targets
</div>
@if (data.AttacksPerSecond != 0) {
<span>
<b>DPS:</b> @(Math.Round(data.Damage * data.AttacksPerSecond))&nbsp;
</span>
@if (data.LightDamage != 0) {
<span>
<i>L: @(Math.Round(data.LightDamage * data.AttacksPerSecond))</i>&nbsp;
</span>
}
@if (data.MediumDamage != 0) {
<span>
<i>M: @(Math.Round(data.MediumDamage * data.AttacksPerSecond))</i>&nbsp;
</span>
}
@if (data.HeavyDamage != 0) {
<span>
<i>H: @(Math.Round(data.HeavyDamage * data.AttacksPerSecond))</i>&nbsp;
</span>
}
}
</div>
}
</div>
</EntityDisplayComponent>
}
<style>
.weaponsContainer {
display: flex;
gap: 32px;
}
@@media only screen and (max-width: 1025px) {
.weaponsContainer {
flex-direction: column;
gap: 4px;
}
}
.alternateDamage {
margin-left: 18px;
}
.damageContainer {
margin-bottom: 6px;
}
</style>
@code {
[Parameter]
public EntityModel Entity { get; set; }
}
IGP/Pages/Database/Parts/EntityFilterComponent.razor
+235
View File
@@ -0,0 +1,235 @@
<div class="desktopFilters">
<div class="desktopFiltersContainer">
<div class="filtersContainer">
<div class="filterContainer">
@foreach (var choice in EntityFilterService.GetFactionChoices()) {
var styleClass = "";
if (choice.Equals(EntityFilterService.GetFactionType())) {
styleClass = "selected";
}
<button @onclick="@(e => OnChangeFaction(choice))" class="choiceButton @styleClass">@choice</button>
}
</div>
@if (EntityFilterService.GetFactionType() != "Any" && EntityFilterService.GetFactionType() != "None") {
<div class="filterContainer">
@foreach (var choice in EntityFilterService.GetImmortalChoices()) {
var styleClass = "";
if (choice.Equals(EntityFilterService.GetImmortalType())) {
styleClass = "selected";
}
<button class="choiceButton @styleClass" @onclick="@(e => OnChangeImmortal(choice))">@choice</button>
}
</div>
}
</div>
<div class="filterContainer">
@foreach (var choice in EntityFilterService.GetEntityChoices()) {
var styleClass = "";
if (choice.Equals(EntityFilterService.GetEntityType())) {
styleClass = "selected";
}
<button class="choiceButton @styleClass" @onclick="@(e => OnChangeEntity(choice))">@choice.Replace("_", " ")</button>
}
</div>
<FormTextComponent Label="Search Label" Placeholder="Throne..." OnChange="@(e => EntityFilterService.EnterSearchText(e.Value.ToString()))"/>
</div>
</div>
<div class="mobileFilters">
<FormLayoutComponent>
<FormSelectComponent OnChange="@OnFactionChanged">
<FormLabelComponent>Faction</FormLabelComponent>
<ChildContent>
<option value="@FactionType.Any" selected>Any</option>
<option value="@FactionType.Aru">Aru</option>
<option value="@FactionType.QRath">Q'Rath</option>
</ChildContent>
</FormSelectComponent>
<FormSelectComponent OnChange="@OnImmortalChanged">
<FormLabelComponent>Immortal</FormLabelComponent>
<ChildContent>
<option value="@ImmortalType.Any" selected>Any</option>
<option value="@ImmortalType.Mala">Mala</option>
<option value="@ImmortalType.Xol">Xol</option>
<option value="@ImmortalType.Orzum">Orzum</option>
<option value="@ImmortalType.Ajari">Ajari</option>
</ChildContent>
</FormSelectComponent>
<FormSelectComponent OnChange="@OnEntityChanged">
<FormLabelComponent>Entity</FormLabelComponent>
<ChildContent>
<option value="@EntityType.Any">Any</option>
<option value="@EntityType.Ability">Ability</option>
<option value="@EntityType.Army" selected>Army</option>
<option value="@EntityType.Building">Building</option>
<option value="@EntityType.Building_Upgrade">Building Upgrade</option>
<option value="@EntityType.Command">Command</option>
<option value="@EntityType.Faction">Faction</option>
<option value="@EntityType.Immortal">Immortal</option>
<option value="@EntityType.Pyre_Spell">Spell</option>
<option value="@EntityType.Passive">Passive</option>
<option value="@EntityType.Tech">Tech</option>
<option value="@EntityType.Worker">Worker</option>
</ChildContent>
</FormSelectComponent>
<FormTextComponent Label="Search Label" Placeholder="Throne..." OnChange="OnSearchTextChanged"/>
</FormLayoutComponent>
</div>
<style>
.desktopFilters {
display: flex;
gap: 12px;
flex-direction: column;
justify-content: flex-start;
justify-items: flex-start;
top: 50px;
padding: 12px;
width: 100%;
left: 0px;
}
.desktopFiltersContainer {
width: 75%;
min-width: 1000px;
margin: auto;
display: flex;
gap: 16px;
flex-direction: column;
justify-content: flex-start;
justify-items: flex-start;
}
.filtersContainer {
display: flex;
gap: 16px;
}
.filterContainer {
display: flex;
background-color: var(--background);
gap: 2px;
margin-right: auto;
border-radius: 8px;
}
.choiceButton {
background-color: var(--primary);
color: white;
padding: 12px;
border: 1px solid var(--primary);
}
.choiceButton:hover {
background-color: var(--primary-hover);
border-color: var(--primary-border-hover);
}
.selected {
background-color: var(--secondary);
color: white;
font-style: normal;
font-weight: bold;
}
.selected:hover {
background-color: var(--secondary-hover);
border-color: var(--secondary-border-hover);
}
.filterContainer .choiceButton:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.filterContainer .choiceButton:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
@@media only screen and (max-width: 1025px) {
.desktopNavContainer {
display: none;
}
}
@@media only screen and (max-width: 480px) {
.filtersContainer {
flex-direction: column;
}
.filterContainer {
flex-direction: column;
}
}
.mobileFilters {
display: none;
}
@@media only screen and (max-width: 1024px) {
.mobileFilters {
display: block;
}
.desktopFilters {
display: none;
}
.desktopSpacer {
display: none;
}
}
</style>
@code {
[Inject]
public IEntityFilterService EntityFilterService { get; set; }
protected override void OnInitialized() { }
void OnChangeFaction(string clickedFaction) {
EntityFilterService.SelectFactionType(clickedFaction);
StateHasChanged();
}
void OnChangeImmortal(string clickedImmortal) {
EntityFilterService.SelectImmortalType(clickedImmortal);
}
void OnChangeEntity(string clickedEntity) {
EntityFilterService.SelectEntityType(clickedEntity);
}
void OnFactionChanged(ChangeEventArgs e) {
EntityFilterService.SelectFactionType(e.Value.ToString());
}
void OnImmortalChanged(ChangeEventArgs e) {
EntityFilterService.SelectImmortalType(e.Value.ToString());
}
void OnEntityChanged(ChangeEventArgs e) {
EntityFilterService.SelectEntityType(e.Value.ToString());
}
void OnSearchTextChanged(ChangeEventArgs e) {
EntityFilterService.EnterSearchText(e.Value.ToString());
}
}
IGP/Pages/Database/Parts/EntityFilterComponent.razor.css
+106
View File
@@ -0,0 +1,106 @@
.desktopFilters {
display: flex;
gap: 12px;
flex-direction: column;
justify-content: flex-start;
justify-items: flex-start;
top: 50px;
padding: 12px;
width: 100%;
left: 0px;
}
.desktopFiltersContainer {
width: 75%;
min-width: 1000px;
margin: auto;
display: flex;
gap: 16px;
flex-direction: column;
justify-content: flex-start;
justify-items: flex-start;
}
.filtersContainer {
display: flex;
gap: 16px;
}
.filterContainer {
display: flex;
background-color: var(--background);
gap: 2px;
margin-right: auto;
border-radius: 8px;
}
.choiceButton {
background-color: var(--primary);
color: white;
padding: 12px;
border: 1px solid var(--primary);
}
.choiceButton:hover {
background-color: var(--primary-hover);
border-color: var(--primary-border-hover);
}
.selected {
background-color: var(--secondary);
color: white;
font-style: normal;
font-weight: bold;
}
.selected:hover {
background-color: var(--secondary-hover);
border-color: var(--secondary-border-hover);
}
.filterContainer .choiceButton:first-child {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.filterContainer .choiceButton:last-child {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
@media only screen and (max-width: 1025px) {
.desktopNavContainer {
display: none;
}
}
@media only screen and (max-width: 480px) {
.filtersContainer {
flex-direction: column;
}
.filterContainer {
flex-direction: column;
}
}
.mobileFilters {
display: none;
}
@media only screen and (max-width: 1024px) {
.mobileFilters {
display: block;
}
.desktopFilters {
display: none;
}
.desktopSpacer {
display: none;
}
}