diff --git a/App.razor b/App.razor index 6fd3ed1..373eb8f 100644 --- a/App.razor +++ b/App.razor @@ -1,4 +1,4 @@ - +@* @@ -7,6 +7,8 @@ Not found

Sorry, there's nothing at this address.

- + - +*@ + + \ No newline at end of file diff --git a/DEV.txt b/DEV.txt new file mode 100644 index 0000000..2acd3d5 --- /dev/null +++ b/DEV.txt @@ -0,0 +1,29 @@ + +open CMD or press CTRL+D +dotnet watch run + +TODO use await +https://github.com/IgniteUI/igniteui-react-examples/blob/vnext/samples/charts/financial-chart/multiple-data/src/StocksHistory.ts + +https://stackoverflow.com/questions/12460378/how-to-get-json-from-url-in-javascript +//async function fetchDataAsync(url) { +// const response = await fetch(url); +// console.log(await response.json()); +//} +//fetchDataAsync('paste URL'); + +//fetchData(callback) { +// let url = window.location.protocol + '//' + window.location.host + '/data/bp-extracted-small.json'; +// fetch(url) +// .then(response => response.json()) +// .then(json => callback(null, json)) +// .catch(error => callback(error, null)) +//} +//Then use it like this: + +//fetchData((error, data) => { +// if (error) +// console.log(error) +// else +// console.log(data[0]) +//}); \ No newline at end of file diff --git a/Pages/Chart.razor b/Pages/Chart.razor index 187adb3..f24f538 100644 --- a/Pages/Chart.razor +++ b/Pages/Chart.razor @@ -5,7 +5,7 @@ @inject FAF.WebService WebService @page "/chart" -@page "/" +@*@page "/"*@ @*Index*@ @@ -26,7 +26,7 @@ @* *@ -
+
Hello, Commander! Welcome to Supreme Units Database - -@**@ + \ No newline at end of file diff --git a/Pages/Scripter.Evemts.razor.cs b/Pages/Scripter.Evemts.razor.cs new file mode 100644 index 0000000..8182ee5 --- /dev/null +++ b/Pages/Scripter.Evemts.razor.cs @@ -0,0 +1,8 @@ +using Microsoft.AspNetCore.Components; + +namespace SupremeUnitsApp.Pages +{ + public class ScripterBase2 : ComponentBase + { + } +} diff --git a/Pages/Scripter.razor b/Pages/Scripter.razor new file mode 100644 index 0000000..a66d1f4 --- /dev/null +++ b/Pages/Scripter.razor @@ -0,0 +1,408 @@ + +@using FAF +@using System.Text.Json +@inject IIgniteUIBlazor IgniteUIBlazor +@inject IJSRuntime JSR + +@page "/" +@page "/scripter" + +Chart + +
+ @*

Hello, Test Scripter5!

*@ +
+ @*z-index: 1000*@ + + @*SeriesMouseEnterScript="onSeriesMouseEnter"*@ + + + + + + + + + @* + *@ + @*TrendLineType="TrendLineType.CubicFit"*@ + + + + + @* + *@ + + +
+ +
+ + +
+ + + Orange + Apple + Banana + Mango + + +
+ +
+ @if (UnitTitles == null) + { +

Loading...

+ } + else + { +
X-Axis
+ +
Y-Axis
+ +
Trendline Type
+ +
Marker Type
+ + + @* + *@ + @* ValueKey="" + DisplayKey=""*@ + + @* @foreach (var item in UnitTitles) + { + + } *@ + } +
+
+
+ + +@code { + + + + private IgbLegend legend; + private IgbDataChart chart; + private IgbNumericXAxis xAxis; + private IgbNumericYAxis yAxis; + private IgbScatterSeries trendSeries; + private IgbScatterSeries dataSeries; + private IgbDataToolTipLayer dataToolTipLayer; + private List DataUnits; + + private int DataCount = 100; + private string Factions = "UEF, Cybran, Aeon, Seraphim, Nomads, UNKNOWN"; + private string Brushes = "#1174ed, #eb2c1e, #19d113, #d1bb13, #874b01, #292828"; + + + + // private List? UnitTitles = null; // = new List(); + //private string UnitTitles = ""; + private List _UnitTitles; + public List UnitTitles + { + get { return _UnitTitles; } + set { _UnitTitles = value; StateHasChanged(); } + } + + protected override async Task OnInitializedAsync() + { + // await BindDataAsync(); + } + + + private bool isRefreshCompleted = false; + private void OnRefreshCompleted(IgbRefreshCompletedEventArgs args) + { + //Console.WriteLine("APP OnRefreshCompleted=" + isRefreshCompleted); + if (!isRefreshCompleted) + { + isRefreshCompleted = true; + BindData(); + //Task.Delay(1).ContinueWith((t) => BindDataAsync()); + } + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + DataTrendLineLookup = new Dictionary(); + foreach(var item in DataTrendLineList) + { + DataTrendLineLookup.Add(item.ToString(), item); + } + + if (firstRender) + { + await GenerateData(); + } + SyncChart(); + //Task.Delay(1).ContinueWith((t) => BindDataAsync()); + // await BindDataAsync(); + } + + private async Task GenerateData() + { + + TaskUtils.Start("Blueprint.Load "); + //await JSR.InvokeVoidAsync("generateData", this.DataCount); + var json = await JSR.InvokeAsync("load"); + // TaskUtils.Stop("Blueprint.Load "); + + //var unit = await JSR.InvokeAsync("getUnit"); + TaskUtils.Start("Blueprint.Deserialize "); + DataUnits = JsonSerializer.Deserialize>(json); + // TaskUtils.Stop("Blueprint.Deserialize "); + + //Console.WriteLine("APP json=" + DataUnits?.Count()); + //Console.WriteLine("APP unit2=" + unit); + + var jsonTitles = await JSR.InvokeAsync("getUnitTitles"); + var listTitles = JsonSerializer.Deserialize>(jsonTitles); + this.UnitTitles = listTitles; //string.Join("\n", listTitles); + + Console.WriteLine("APP titles=" + listTitles.Count); + } + + protected void SyncChart() + { + //Console.WriteLine("FAF SyncChart ..."); + + if (this.DataUnits == null) return; + if (this.DataUnits.Count == 0) return; + + if (this.chart == null) return; + if (this.chart.Series.Count > 0) return; + // if (this.chart.Series.Count >= this.DataUnits.Count) return; + + //if (this.UnitBlueprints == null) return; + //if (this.UnitBlueprints.Count == 0) return; + + // BP.ChartStart = DateTime.Now; + // Console.WriteLine("FAF SyncChart " ); + //Console.WriteLine("FAF SyncChart " + this.DataUnits.Count); + + //foreach (var group in this.DataUnits) + //{ + // AddSeries(group.Units, group.Title); + //} + + AddSeries(DataUnits, "DataUnits"); + + //BP.ChartStop = DateTime.Now; + // Console.WriteLine("FAF SyncChart " + BP.ChartStop.Subtract(BP.ChartStart).TotalMilliseconds); + + //await JSR.InvokeVoidAsync("load"); + + // JSR.InvokeVoidAsync("bindData", this.DataUnits.Count); + + + this.chart.RefreshCompleted += OnRefreshCompleted; + } + + private void BindData() + { + Task.Delay(1).ContinueWith((t) => BindDataAsync()); + } + + private async Task BindDataAsync() + { + // Console.WriteLine("FAF BindDataAsync ..."); + // await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("bindData"); + //await JSR.InvokeVoidAsync("plotUnits"); + await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("plotUnits", this.DataMemberX, this.DataMemberY); + // Console.WriteLine("FAF BindData ... end"); + } + + private async Task UpdateMarkerTypeAsync() + { + await IgniteUIBlazor.JsRuntime.InvokeVoidAsync("updateMarkerType", this.DataMarkerType); + } + + public void AddSeries(List units, string faction) + { + //var units = UnitBlueprints.Where(x => x.General.FactionName == faction).ToList(); + //Console.WriteLine("FAF BP " + faction + "=" + units.Count); + // var Start = DateTime.Now; + TaskUtils.Start("AddSeries"); + + // var first = units[0]; + // first.Economy.BuildTime + + //var scale = new IgbSizeScale(); + //scale.MinimumValue = 10; + //scale.MaximumValue = 50; + + //this.trendSeries.XMemberPath = this.dataSeries.XMemberPath; + //this.trendSeries.YMemberPath = this.dataSeries.YMemberPath; + + //var s = new IgbBubbleSeries(); + var s = this.dataSeries; + //var s = new IgbScatterSeries(); + //s.Name = "Series" + this.chart.Series.Count; + + ////s.XMemberAsLegendLabel = "Build Time"; + ////s.YMemberAsLegendLabel = "Build Cost"; + ////s.RadiusMemberAsLegendLabel = "BuildRate"; + //s.XAxisName = "xAxis"; + //s.YAxisName = "yAxis"; + //// s.XMemberPath = "Economy.BuildTime"; + ////s.XMemberPath = "Economy.BuildTime"; + //s.XMemberPath = "Economy.BuildTime"; + ////s.YMemberPath = "FactionIndex"; + //s.YMemberPath = "Economy.BuildCostMass"; + ////s.YMemberPath = "General.FactionIndex"; + //s.MarkerTemplateScript = "onSeriesMarkerTemplate"; + //s.MaximumMarkers = 1000; + //s.ShowDefaultTooltip = true; + + ////s.XMemberPath = "[EconomyBuildCostMass]"; + ////s.YMemberPath = "[GeneralFactionIndex]"; + //s.XMemberPath = "EconomyBuildCostMass"; + //s.YMemberPath = "GeneralFactionIndex"; + + //s.RadiusMemberPath = "Economy.BuildRate"; + + // s.MarkerType="MarkerType.Circle" + // s.MarkerThickness="2" + //s.MarkerBrush = color; + //s.MarkerOutline = color; + // s.MarkerFillOpacity = 0.5; + // s.ShowDefaultTooltip = true; + // s.Title = faction + " (" + units.Count + ")"; + //s.RadiusScale = scale; + + if (!string.IsNullOrEmpty(s.YMemberPath)) this.yAxis.Title = s.YMemberPath; //.Replace(".", " "); + if (!string.IsNullOrEmpty(s.XMemberPath)) this.xAxis.Title = s.XMemberPath; //.Replace(".", " ") + "2"; + + if (s.YMemberPath == "General.FactionIndex") + { + //this.yAxis.IsLogarithmic = false; + //this.yAxis.MinimumValue = 0; + //this.yAxis.MaximumValue = 6; + //this.yAxis.Interval = 1; + } + else + { + //this.yAxis.IsLogarithmic = false; + //this.yAxis.MinimumValue = double.NaN; + //this.yAxis.MaximumValue = double.NaN; + //this.yAxis.Interval = double.NaN; + } + + if (s.YMemberPath.Contains("Faction") || + s.YMemberPath.Contains("Level")) + { + //this.yAxis.IsLogarithmic = false; + + if (s.YMemberPath == "FactionLevel") + { + //this.yAxis.IsLogarithmic = false; + //this.yAxis.MinimumValue = 0; + //this.yAxis.MaximumValue = 52; + //this.yAxis.Interval = 2; + } + } + + + } +} \ No newline at end of file diff --git a/Pages/Scripter.razor.cs b/Pages/Scripter.razor.cs new file mode 100644 index 0000000..8c762d9 --- /dev/null +++ b/Pages/Scripter.razor.cs @@ -0,0 +1,134 @@ +using IgniteUI.Blazor.Controls; +using Microsoft.AspNetCore.Components; + +namespace SupremeUnitsApp.Pages +{ + public partial class Scripter + { + + private string DataMemberR = ""; + + private string _DataMemberX = "Economy.BuildCostMass"; //Economy.BuildCostTotal"; + public string DataMemberX + { + get { return _DataMemberX; } + set { _DataMemberX = value; StateHasChanged(); } + } + + private string _DataMemberY = "FactionLevel"; + public string DataMemberY + { + get { return _DataMemberY; } + set { _DataMemberY = value; StateHasChanged(); } + } + + public List DataMemberPathsX + { + get { return _DataMemberPathsX; } + set { _DataMemberPathsX = value; StateHasChanged(); } + } + + public List DataMemberPathsY + { + get { return _DataMemberPathsY; } + set { _DataMemberPathsY = value; StateHasChanged(); } + } + private List _DataMemberPathsX = new List { + "Economy.BuildTime", + "Economy.BuildCostMass", + "Economy.BuildCostEnergy", + "Economy.BuildCostTotal", + "FactionLevel", + "TechLevel", + "Index", + }; + private List _DataMemberPathsY = new List { + "Economy.BuildCostMass", + "Economy.BuildTime", + "Economy.BuildCostEnergy", + "Economy.BuildCostTotal", + "FactionLevel", + "TechLevel", + "Index", + }; + + private List DataMarkerTypeList = new List { + "UnitType", + "Circle", + }; + + private string _DataMarkerType = "UnitType"; + public string DataMarkerType + { + get { return _DataMarkerType; } + set { _DataMarkerType = value; StateHasChanged(); } + } + + private Dictionary DataTrendLineLookup = new Dictionary(); + private List DataTrendLineList = new List + { + TrendLineType.PowerLawFit, + TrendLineType.CubicFit, + TrendLineType.CumulativeAverage, + TrendLineType.ExponentialAverage, + TrendLineType.ExponentialFit, + TrendLineType.LinearFit, + TrendLineType.LogarithmicFit, + TrendLineType.ModifiedAverage, + TrendLineType.QuarticFit, + TrendLineType.QuinticFit, + TrendLineType.SimpleAverage, + TrendLineType.WeightedAverage, + TrendLineType.None, + }; + private TrendLineType _DataTrendLine = TrendLineType.PowerLawFit; + public TrendLineType DataTrendLine + { + get { return _DataTrendLine; } + set { _DataTrendLine = value; StateHasChanged(); } + } + + #region Events + + + void onDataMemberX(ChangeEventArgs e) + { + this.DataMemberX = e.Value.ToString(); + Console.WriteLine("DataMemberX: " + DataMemberX); + BindData(); + } + + void onDataMemberY(ChangeEventArgs e) + { + this.DataMemberY = e.Value.ToString(); + Console.WriteLine("DataMemberY: " + DataMemberY); + BindData(); + } + + void onDataTrendLine(ChangeEventArgs e) + { + Console.WriteLine("onDataTrendLine: " + e.Value); + var trendlineName = e.Value.ToString(); + this.DataTrendLine = DataTrendLineLookup[trendlineName]; + //BindData(); + } + + void onDataMarkerType(ChangeEventArgs e) + { + Console.WriteLine("onDataMarkerType: " + e.Value); + var markerType = e.Value.ToString(); + if (this.DataMarkerType == "UnitType") + { + // dataSeries.MarkerTemplateScript = "onSeriesMarkerTemplate"; + } + else { + // dataSeries.MarkerTemplateScript = null; + // dataSeries.MarkerType = MarkerType.Square; + } + this.DataMarkerType = markerType; + + Task.Delay(1).ContinueWith((t) => UpdateMarkerTypeAsync()); + } + #endregion + } +} diff --git a/Program.cs b/Program.cs index 1030253..21eb826 100644 --- a/Program.cs +++ b/Program.cs @@ -16,6 +16,9 @@ // registering Infragistics Blazor builder.Services.AddIgniteUIBlazor( + typeof(IgbSelectModule), + typeof(IgbComboModule), + typeof(IgbSwitchModule), typeof(IgbAnnotationLayerProxyModule), typeof(IgbCrosshairLayerModule), typeof(IgbLegendModule), diff --git a/Shared/MainLayout.razor b/Shared/MainLayout.razor index 3ad470a..963a762 100644 --- a/Shared/MainLayout.razor +++ b/Shared/MainLayout.razor @@ -1,18 +1,22 @@ @inherits LayoutComponentBase -
+
+ @*
About
*@ -
+ @*
+ @Body +
*@ +
@Body -
+
diff --git a/Shared/MainLayout.razor.css b/Shared/MainLayout.razor.css index c865427..0301c8f 100644 --- a/Shared/MainLayout.razor.css +++ b/Shared/MainLayout.razor.css @@ -65,7 +65,7 @@ main { .top-row { position: sticky; top: 0; - z-index: 1; + /*z-index: 1;*/ } .top-row.auth ::deep a:first-child { diff --git a/Shared/NavLayout.razor b/Shared/NavLayout.razor new file mode 100644 index 0000000..2fa2d6d --- /dev/null +++ b/Shared/NavLayout.razor @@ -0,0 +1,17 @@ +@inherits LayoutComponentBase + +
+
+ +
+ +
+ @Body +
+ +
+ +@code { + + +} diff --git a/Shared/NavLayout.razor.css b/Shared/NavLayout.razor.css new file mode 100644 index 0000000..0301c8f --- /dev/null +++ b/Shared/NavLayout.razor.css @@ -0,0 +1,81 @@ +.page { + position: relative; + display: flex; + flex-direction: column; +} + +main { + flex: 1; +} + +.sidebar { + background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); +} + +.top-row { + background-color: #f7f7f7; + border-bottom: 1px solid #d6d5d5; + justify-content: flex-end; + height: 3.5rem; + display: flex; + align-items: center; +} + + .top-row ::deep a, .top-row ::deep .btn-link { + white-space: nowrap; + margin-left: 1.5rem; + text-decoration: none; + } + + .top-row ::deep a:hover, .top-row ::deep .btn-link:hover { + text-decoration: underline; + } + + .top-row ::deep a:first-child { + overflow: hidden; + text-overflow: ellipsis; + } + +@media (max-width: 640.98px) { + .top-row:not(.auth) { + display: none; + } + + .top-row.auth { + justify-content: space-between; + } + + .top-row ::deep a, .top-row ::deep .btn-link { + margin-left: 0; + } +} + +@media (min-width: 641px) { + .page { + flex-direction: row; + } + + .sidebar { + width: 250px; + height: 100vh; + position: sticky; + top: 0; + } + + .top-row { + position: sticky; + top: 0; + /*z-index: 1;*/ + } + + .top-row.auth ::deep a:first-child { + flex: 1; + text-align: right; + width: 0; + } + + .top-row, article { + padding-left: 2rem !important; + padding-right: 1.5rem !important; + } +} diff --git a/Shared/NavMenu.razor b/Shared/NavMenu.razor index 16bfde1..d1b6cb9 100644 --- a/Shared/NavMenu.razor +++ b/Shared/NavMenu.razor @@ -24,6 +24,11 @@ Counter
+
+ + Scripter + +
Fetch data diff --git a/SupremeUnitsApp.csproj b/SupremeUnitsApp.csproj index 7abb2ef..8dcad0d 100644 --- a/SupremeUnitsApp.csproj +++ b/SupremeUnitsApp.csproj @@ -1,4 +1,4 @@ - + net6.0 @@ -8,11 +8,11 @@ - 1701;1702;BL0005;CS8618;8618;8601;8602;8603;8712;8714 + 1701;1702;BL0005;CS8618;CS1998;8618;8601;8602;8603;8712;8714 - 1701;1702;BL0005;CS8618;8618;8601;8602;8603;8712;8714 + 1701;1702;BL0005;CS8618;CS1998;8618;8601;8602;8603;8712;8714 @@ -20,7 +20,7 @@ - + @@ -29,5 +29,22 @@ - + + + + + + + + + + + + + + + + + + diff --git a/SupremeUnitsApp.csproj.user b/SupremeUnitsApp.csproj.user new file mode 100644 index 0000000..6081432 --- /dev/null +++ b/SupremeUnitsApp.csproj.user @@ -0,0 +1,9 @@ + + + + ProjectDebugger + + + IIS Express + + \ No newline at end of file diff --git a/wwwroot/css/app.css b/wwwroot/css/app.css index 9cd148f..d88e1db 100644 --- a/wwwroot/css/app.css +++ b/wwwroot/css/app.css @@ -1,5 +1,43 @@ @import url('open-iconic/font/css/open-iconic-bootstrap.min.css'); +.overflow-hidden { + overflow-y: hidden; + overflow-x: hidden; +} + +.overflow-auto { + overflow-y: auto; + overflow-x: auto; +} + +.sud-list-viewer { + overflow-y: scroll; + padding: 0.5rem; + height: 15rem; + color: black; + background: lightgray; + display: flex; + flex-direction: column; +} + +.ui-tooltip-content { + /*background: white;*/ + display: flex; + flex-direction: column; +} + +.tooltipHorizontal { + /* background: gray;*/ + display: flex; + flex-direction: row; +} + +.tooltipVal { + flex: 1; + text-align: right; + /* background: red;*/ +} + html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } @@ -12,6 +50,10 @@ a, .btn-link { color: #0071c1; } +article, main { + background: transparent; +} + .btn-primary { color: #fff; background-color: #1b6ec2; diff --git a/wwwroot/css/shared.css b/wwwroot/css/shared.css new file mode 100644 index 0000000..1829d3a --- /dev/null +++ b/wwwroot/css/shared.css @@ -0,0 +1,479 @@ +@import url('https://fonts.googleapis.com/css?family=Titillium+Web'); +@import url('https://fonts.googleapis.com/icon?family=Material+Icons'); + +#root, html, body, main { + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + background: white; + height: 100%; + width: 100%; + padding: 0rem; + margin: 0rem; +} + +/* ============ container styles ============ */ + + +.container { + display: flex; + flex-flow: column; + flex-wrap: nowrap; + align-items: stretch; + align-self: stretch; + /*overflow-y: hidden;*/ + /*overflow-x: hidden;*/ + /* min-width: 200px; */ + height: 100%; + width: 100%; + padding: 0rem; + margin: 0rem; + /*position: relative;*/ + max-width: none; + /* font-size: 1rem; */ + /* font-weight: 400; */ + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + box-sizing: border-box; +} + +/* used to layout a component in center of its parent */ +.container-center { + background: white; + height: calc(100% - 1rem); + width: calc(100% - 1rem); + padding: 0.5rem; + margin: 0rem; + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; +} + +/* used to overlay multiple components on top of each other */ +.container-relative { + background: white; + width: calc(100% - 10px); + height: calc(100% - 10px); + padding: 0.5rem; + margin: 0rem; + overflow: hidden; + align-items: center; + justify-content: center; + position: relative +} + +.container-overlay { + height: 100%; + width: 100%; + top: 0; + left: 0; + position: absolute; +} + +.sample { + padding-bottom: 0.5rem; + padding-left: 0.5rem; + padding-right: 0.5rem; + padding-top: 0.5rem; + width: 100%; + height: 100%; + box-sizing: border-box; +} + +.fill > * { + height: 100%; + width: 100%; +} + +/* ============ option styles ============ */ + +.options { + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + position: relative; + margin: 0rem; + padding: 0rem; + margin-left: 0.1rem; + margin-right: 0.25rem; + display: flex; + flex-wrap: wrap; + color: #494949; + align-items: normal; +} + +.options-item { + margin-left: 0.5rem; + margin-right: 0.5rem; + display: inline-block; + vertical-align: middle; +} + +/* .options > span, */ +.options > label, +.options-label { + font-size: 0.85rem; /* med */ + padding: 0rem; + margin-top: .25rem; + margin-bottom: .25rem; + /* margin-left: 0.5rem;*/ + margin-right: 0.25rem; + vertical-align: middle; + white-space: nowrap; + align-self: center; +} + +.options-value { + font-size: 0.75rem; /* med */ + padding: 0rem; + margin-top: 0rem; + margin-left: 0.0rem; + margin-right: 0.25rem; + vertical-align: middle; + width: 2rem; + text-align: center; + align-self: center; +} + +.options > input[type=range], +.options > slider, +.options-slider { + padding: 0rem; + margin-left: 1rem; + width: 5rem; +} + +.options > input[type=button], +.options > button, +.options-button { + margin: 0.25rem; + margin-left: 0.5rem; + color: #fff; + background: #0099ff; + border: 0px solid #0099ff; + border-radius: 0.15rem; + padding: 0.25rem 0.5rem; + vertical-align: middle; + cursor: pointer; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + font-size: 0.75rem; /* med */ + min-width: 6rem; + white-space: nowrap; +} + + .options > input[type=button]:hover, + .options > button:hover, + .options-button:hover { + background: #36aefe; + } + + .options > input[type=button]:active, + .options > button:active, + .options-button:active { + background: #36aefe; + } + + .options > input[type=button]:focus, + .options > button:focus, + .options-button:focus { + outline: none; + } + +.options-radio, +.options-checkbox, +.options > label > input[type=radio], +.options > label > input[type=checkbox], +.options > input { + margin-top: 0.35rem; + margin-bottom: 0.35rem; + margin-left: 0.35rem; + margin-right: 0.35rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + padding: 0rem; + align-items: center; + align-self: center; + vertical-align: middle; + cursor: pointer; +} + + .options > label > input[type=color], + .options > input[type=color], + .options-color { + align-self: stretch; + } + + .options > input[type=text], + .options > text, + .options-text { + padding-left: 0.5rem; + margin-left: 0.5rem; + min-width: 4rem; + vertical-align: middle; + } + +.options > select, +.options-select { + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + font-size: 0.75rem; /* med */ + margin-top: 0rem; + margin-bottom: 0.25rem; + margin-top: 0.25rem; + margin-left: 0.25rem; + margin-right: 0.25rem; + vertical-align: middle; + padding-left: 0.5rem; + padding-right: 0.5rem; + border-radius: 0.2rem; + outline: none; + cursor: pointer; +} + + .options > select:focus, + .options-select { + outline: none; + } + +/* ============ overlay styles ============ */ + +.overlay-border { + border-radius: 5px; + border: 1px solid gray; + padding: 0.5rem; + background: rgba(217, 217, 217, 0.5); +} + +.overlay-center, .overlay-left, .overlay-right, +.overlay-top, .overlay-top-left, .overlay-top-right, .overlay-top-center, +.overlay-bottom, .overlay-bottom-left, .overlay-bottom-center, .overlay-bottom-right { + position: absolute; + display: flex; + flex-direction: column; + font-size: 0.8rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ +} + +.overlay-top-left { + top: 0.5rem; + left: 0.5rem; + align-items: flex-start; +} + +.overlay-top-right { + top: 0.25rem; + right: 0.25rem; + align-items: flex-end; +} + +.overlay-center { + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.overlay-top-center { + top: 0.25rem; + left: 50%; + transform: translate(-50%, 0%); +} + +.overlay-bottom-center { + bottom: 0.25rem; + left: 50%; + transform: translate(-50%, 0%); +} + +.overlay-bottom-left { + bottom: 0.25rem; + left: 0.25rem; + align-items: flex-start; +} + +.overlay-bottom-right { + bottom: 0.25rem; + right: 0.25rem; + align-items: flex-end; +} + +.overlay-left { + left: 0.5rem; + align-items: flex-start; +} + +.overlay-right { + right: 0.25rem; + align-items: flex-end; +} + +.overlay-top { + top: 0.5rem; +} + +.overlay-bottom { + bottom: 0.25rem; +} + +.overlay-row { + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + display: flex; + flex-direction: row; + justify-content: space-between; +} + +.overlay-label { + display: block; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + font-weight: 600; +} + +.overlay-field { + text-align: left; + width: 5rem; +} + +.overlay-value { + text-align: end; +} + +.overlay-title { + color: black; + display: block; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + font-weight: 600; + padding-bottom: 0.5rem; +} + +.vertical { + display: flex; + flex-flow: column; +} + +.horizontal { + display: flex; + flex-flow: row; +} + +table { + border-collapse: inherit; +} + +/* ============ legend styles ============ */ +.legend { + --legend-item-overflow: hidden; + width: 100%; + margin-bottom: 0.5rem; +} + +#legendTitle, +.legend-title { + width: 100%; + margin: 0rem; + padding: 0rem; + vertical-align: middle; + white-space: nowrap; + padding-left: 0.75rem; + font-size: 1.25rem; + font-weight: 600; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + color: black; +} + +.ig-chart-legend-item-badge > canvas { + vertical-align: middle; + /* margin-bottom: 0.2rem; */ +} + + +/* ============ tooltip styles ============ */ + +.tooltipBox { + font-size: 0.75rem; + font-weight: normal; + color: Black; + font-size: 0.75rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; +} + +.tooltipTitle { + display: block; + color: Black; + font-weight: bold; + font-size: 0.75rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + margin-left: 0rem; +} + +.tooltipTable { + display: table; + margin: 0rem; + width: 100%; + height: 100%; + border-spacing: 5px; + font-size: 0.75rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; +} + +.tooltipHorizontal { + display: flex; + flex-direction: row; + font-size: 0.75rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; +} + +.tooltipVertical { + display: flex; + flex-direction: column; + font-size: 0.75rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; +} + +.tooltipRow { + display: table-row; + font-size: 0.75rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; +} + +.tooltipVal { + display: table-cell; + text-align: "right"; + font-weight: bold; + font-size: 0.75rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; + padding-left: 5px; +} + +.tooltipLbl { + display: table-cell; + text-align: "left"; + font-size: 0.75rem; + font-family: 'Titillium Web', Verdana, Tahoma, sans-serif; +} + +.tooltipFlagImage { + display: inline-block; + object-fit: fill; + height: 50px; + width: 70px; + margin-right: 5px; +} + +.tooltipFlagBoarder { + display: inline-block; + padding: 0rem; + border-width: thin; + border-color: rgb(177, 177, 177); + border-style: solid; + height: 50px; + width: 70px; +} + +.options, .legend, .legend-title, +.no-selection { + -webkit-touch-callout: none; /* iOS Safari */ + -webkit-user-select: none; /* Safari */ + -khtml-user-select: none; /* Konqueror HTML */ + -moz-user-select: none; /* Firefox */ + -ms-user-select: none; /* Internet Explorer/Edge */ + -o-user-select: none; + user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ +} diff --git a/wwwroot/data/bp-extracted.json b/wwwroot/data/bp-extracted.json index 22da4b1..9a77d69 100644 --- a/wwwroot/data/bp-extracted.json +++ b/wwwroot/data/bp-extracted.json @@ -26190,7 +26190,11 @@ }, "BuildIconSortPriority" : 40 }, { - "Categories" : ["PRODUCTFA", "SELECTABLE", "BUILTBYTIER2SUPPORTFACTORY", "BUILTBYTIER3ENGINEER", "BUILTBYTIER3COMMANDER", "SERAPHIM", "STRUCTURE", "LAND", "TECH3", "CONSTRUCTION", "FACTORY", "RALLYPOINT", "DRAGBUILD", "CONSTRUCTIONSORTDOWN", "SIZE16", "VISIBLETORECON", "RECLAIMABLE", "SHOWQUEUE", "SORTCONSTRUCTION", "SUPPORTFACTORY", "RULEUTL_Secret"], + "Categories" : ["PRODUCTFA", "SELECTABLE", + "BUILTBYTIER2SUPPORTFACTORY", + "BUILTBYTIER3ENGINEER", "BUILTBYTIER3COMMANDER", + "SERAPHIM", "STRUCTURE", "LAND", "TECH3", + "CONSTRUCTION", "FACTORY", "RALLYPOINT", "DRAGBUILD", "CONSTRUCTIONSORTDOWN", "SIZE16", "VISIBLETORECON", "RECLAIMABLE", "SHOWQUEUE", "SORTCONSTRUCTION", "SUPPORTFACTORY", "RULEUTL_Secret"], "Description" : "Land Factory", "General" : { "Icon" : "land", diff --git a/wwwroot/index.html b/wwwroot/index.html index cae4ba1..b24feee 100644 --- a/wwwroot/index.html +++ b/wwwroot/index.html @@ -13,19 +13,23 @@ + - + + + - -
Loading...
+ + +
Loading...
An unhandled error has occurred. @@ -33,12 +37,16 @@ 🗙
+ - + + + + diff --git a/wwwroot/scripts/chart-markers.js b/wwwroot/scripts/chart-markers.js new file mode 100644 index 0000000..54c015f --- /dev/null +++ b/wwwroot/scripts/chart-markers.js @@ -0,0 +1,233 @@ +console.log("JS loaded chart-markers.js"); + +function drawRect(ctx, x, y, width, height) { + ctx.fillRect(x, y, width, height); + ctx.strokeRect(x, y, width, height); + ctx.stroke(); + ctx.fill(); +} + +function drawSquare(ctx, x, y, size) { + drawRect(ctx, x, y, size, size); +} + +function drawCircle(ctx, x, y, size) { + ctx.beginPath(); + ctx.arc(x, y, size / 2.0, 0, 2 * Math.PI); + ctx.closePath(); + ctx.strokeStyle = "red"; + ctx.stroke(); + ctx.fill(); +} + +function drawDiamond(ctx, x, y, width, height) { + var halfWidth = width / 2; + var halfHeight = height / 2; + //ctx.save(); + //ctx.strokeStyle = "red"; + ctx.beginPath(); + ctx.moveTo(x, y - halfHeight); // top + // top left edge + ctx.lineTo(x - halfWidth, y); + // bottom left edge + ctx.lineTo(x, y + halfHeight); + // bottom right edge + ctx.lineTo(x + halfWidth, y); + // the top right edge + ctx.lineTo(x, y - halfHeight); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + //ctx.restore(); +} + +function drawPyramid(ctx, x, y, width, height) { + var halfWidth = width / 2; + var halfHeight = height / 2; + var offset = height / 7; + //ctx.save(); + // ctx.globalAlpha = 0.25; + // ctx.strokeStyle = "red"; + ctx.beginPath(); + ctx.moveTo(x, y - halfHeight - offset); // top + // left edge + ctx.lineTo(x - halfWidth, y + halfHeight - offset); + // bottom edge + ctx.lineTo(x + halfWidth, y + halfHeight - offset); + // right edge + ctx.lineTo(x, y - halfHeight - offset); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); + // ctx.globalAlpha = 1.0; + //ctx.restore(); +} + +function drawArc(ctx, x, y, size, startAngle, endAngle, scaleX, scaleY) { + var radius = size / 2.0; + let radStart = startAngle * (Math.PI / 180); + let radEnd = endAngle * (Math.PI / 180); + ctx.save(); + ctx.beginPath(); + ctx.arc(x, y, radius, radStart, radEnd); + ctx.scale(scaleX || 1, scaleY || 1); + ctx.closePath(); + ctx.restore(); + ctx.fill(); + ctx.stroke(); +} + +function drawCurve(ctx, x, y, size) { + var radius = size / 2.0; + ctx.beginPath(); + y = y + (size / 4) + var x0 = x - radius, + y0 = y, // - radius, + x2 = x + radius, + y2 = y; // + radius; + var x1 = x * 2 - (x0 + x2) / 2, + y1 = (y - size) * 2 - (y0 + y2) / 2; + ctx.beginPath(); + ctx.moveTo(x0, y0); + ctx.quadraticCurveTo(x1, y1, x2, y2); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); +} + +function drawOval(ctx, x, y, size, isDownwards) { + var radius = size / 2.0; + var offset = size * 0.7; + + var xStart = x - radius, + yStart = y + (size / 2.5), + xC1 = x - offset, + yC1 = y - offset, + xC2 = x + offset, + yC2 = y - offset; + + if (isDownwards) { + yStart = y - (size / 3); + yC1 = y + (size * 0.75); + yC2 = y + (size * 0.75); + } + + ctx.beginPath(); + ctx.moveTo(xStart, yStart); + ctx.bezierCurveTo(xC1, yC1, xC2, yC2, x + radius, yStart); + ctx.closePath(); + ctx.fill(); + ctx.stroke(); +} + +function drawPolygon(ctx, x, y, size, corner) { + // let length = cLength; //fLength / cLength; + let length = size / 2 + ctx.beginPath(); + ctx.moveTo(x - corner, y - length); + ctx.lineTo(x + corner, y - length); + ctx.lineTo(x + length, y - corner); + ctx.lineTo(x + length, y + corner); + ctx.lineTo(x + corner, y + length); + ctx.lineTo(x - corner, y + length); + ctx.lineTo(x - length, y + corner); + ctx.lineTo(x - length, y - corner); + ctx.lineTo(x - corner, y - length); + ctx.fill(); + ctx.stroke(); +} +var firstMarker = true; +function onSeriesMarkerTemplate(o, e) { + + let size = 20; + + + return { + measure: function (measureInfo) { + const data = measureInfo.data; + const context = measureInfo.context; + let value = "0.00"; + let item = data.item; + //if (item !== null) { + // value = item.Value.toString(); + //} + const height = context.measureText("M").width; + const width = context.measureText("M").width; + //const width = context.measureText(value).width; + measureInfo.width = width; + measureInfo.height = height + size; + }, + render: function (renderInfo) { + const item = renderInfo.data.item; + //const value = item.Value.toString(); + const ctx = renderInfo.context; + let x = renderInfo.xPosition; + let y = renderInfo.yPosition; + //let halfHeight = renderInfo.availableHeight / 2.0; + if (renderInfo.isHitTestRender) { + ctx.fillStyle = renderInfo.data.actualItemBrush.fill; + let width = renderInfo.availableWidth; + let height = renderInfo.availableHeight; + ctx.fillRect(x - (width / 2), y - (height / 2), width, height); + return; + } + + if (item === null || + item.FactionColor === null || + item.FactionColor === undefined) + return; + + let width = size; //renderInfo.availableWidth + offset; + let height = size; //halfHeight + yOffset; + + if (firstMarker) { + firstMarker = false; + console.log(item); + } + // console.log("onSeriesMarkerTemplate"); + //ctx.beginPath(); + + //ctx.globalAlpha = 0.2; + ctx.fillStyle = toRGBA(item.FactionColor, 0.25); + //ctx.fillRect(x - (width / 2), y - (height / 2), width, height); + + ctx.lineWidth = 1; + ctx.strokeStyle = item.FactionColor; + // ctx.strokeRect(x - (width / 2), y - (height / 2), width, height); + //ctx.globalAlpha = 1.0; + + // console.log("JS onSeriesMarkerTemplate " + dataMarkerType); + + if (item.CategoriesHash.AIR) { + drawPyramid(ctx, x, y, size, size); + } else if (item.CategoriesHash.STRUCTURE) { + drawSquare(ctx, x, y, size); + } else if (item.CategoriesHash.LAND) { + drawDiamond(ctx, x, y, size, size); + } else if (item.CategoriesHash.NAVAL) { + //if (item.CategoriesHash.SUBMERSIBLE) { + // drawOval(ctx, x, y, size, true); + //} else { + drawOval(ctx, x, y, size, false); + //} + } else if (item.CategoriesHash.SONAR) { + drawSquare(ctx, x, y, size); + } else { + drawCircle(ctx, x, y, size); + } + + //drawDiamond(ctx, x, y, size, size); + //drawPyramid(ctx, x, y, size, size); + //drawCircle(ctx, x, y, size); + //drawArc(ctx, x, y, size, 180, 0, 1, 2); + //drawOval(ctx, x, y, size, size); + //drawPolygon(ctx, x, y, size, 2); + + //ctx.font = '8pt Verdana'; + //ctx.fillStyle = "#4d4d4d"; + //ctx.fillText(item.TechLevel, x - 4, y + 4); + } + } +} + +igRegisterScript("onSeriesMarkerTemplate", onSeriesMarkerTemplate, true); diff --git a/wwwroot/chart-tooltips.js b/wwwroot/scripts/chart-tooltips.js similarity index 50% rename from wwwroot/chart-tooltips.js rename to wwwroot/scripts/chart-tooltips.js index a1d2db3..ce6eefa 100644 --- a/wwwroot/chart-tooltips.js +++ b/wwwroot/scripts/chart-tooltips.js @@ -1,10 +1,13 @@ -console.log("JS loaded"); +console.log("JS loaded chart-tooltips.js"); function onSeriesMouseEnter(o, e) { + + //console.log("JS onSeriesMouseEnter "); + if (e.series.tooltipTemplate === null || e.series.tooltipTemplate === undefined) { e.series.tooltipTemplate = createChartTooltip; - console.log("JS onSeriesMouseEnter "); + // console.log("JS onSeriesMouseEnter tooltipTemplate="); } } igRegisterScript("onSeriesMouseEnter", onSeriesMouseEnter, false); @@ -20,19 +23,39 @@ function createChartTooltip(context) { var tooltip = document.createElement("div"); tooltip.className = "ui-tooltip-content"; + //tooltip.style = "z-index: 10000" var title = document.createElement("div"); - title.innerHTML = dataItem.Id + " "; + //title.innerHTML = dataItem.Id + " "; + title.innerHTML = dataItem.Title; title.className = "tooltipTitle"; + title.style = "color: " + toFactionColor(dataItem.FactionName) + ";"; + tooltip.appendChild(title); // console.log("JS createChartTooltip "); - var line1 = createChartTooltipLine(dataSeries, "Build Mass", dataItem.Economy.BuildCostMass); - var line2 = createChartTooltipLine(dataSeries, "Build Time", dataItem.Economy.BuildTime); - tooltip.appendChild(line1); - tooltip.appendChild(line2); + var itemDetails = []; + itemDetails.push({ txt: "ID", value: dataItem.Id }); + itemDetails.push({ txt: "Build Mass", value: dataItem.Economy.BuildCostMass }); + itemDetails.push({ txt: "Build Time", value: dataItem.Economy.BuildTime }); + //itemDetails.push({ txt: "Faction", value: dataItem.FactionName }); + + if (dataItem.Name) { + itemDetails.push({ txt: "Name", value: dataItem.Name }); + } + + for (let info of itemDetails) { + var line = createChartTooltipLine(dataSeries, info.txt, info.value); + tooltip.appendChild(line); + } + + //var line1 = createChartTooltipLine(dataSeries, "Build Mass", dataItem.Economy.BuildCostMass); + //var line2 = createChartTooltipLine(dataSeries, "Build Time", dataItem.Economy.BuildTime); + + //tooltip.appendChild(line1); + //tooltip.appendChild(line2); return tooltip; } @@ -45,14 +68,16 @@ function createChartTooltipLine(dataSeries, dataName, dataValue) { label.style.width = "4rem"; var value = document.createElement("label"); - value.innerHTML = dataValue; + value.innerHTML = toCSV(dataValue); value.className = "tooltipVal"; + // value.style = "text-align: right; width: 2.5rem" + //value.style = "text-align: right;" var line = document.createElement("div"); line.className = "tooltipHorizontal"; // applying conditional styling based on mapping of the current series - var isMatching = dataSeries.valueMemberPath == dataName; + var isMatching = dataSeries.valueMemberPath === dataName; if (isMatching) line.style.color = dataSeries.actualBrush; else @@ -61,4 +86,5 @@ function createChartTooltipLine(dataSeries, dataName, dataValue) { line.appendChild(label); line.appendChild(value); return line; -} \ No newline at end of file +} + diff --git a/wwwroot/scripts/units-provider.js b/wwwroot/scripts/units-provider.js new file mode 100644 index 0000000..4b37d01 --- /dev/null +++ b/wwwroot/scripts/units-provider.js @@ -0,0 +1,567 @@ +console.log("JS loaded units-provider.js"); + +let unitBlueprints = []; +let unitData = []; + +var unitFactions = []; +var unitClasses = []; +var unitTypes = []; +var unitIcons = []; +var unitIdentifiers = []; +var weaponCategories = []; +var weaponTypes = []; + +var unitsByClass = {}; +var unitsByFaction = {}; +var unitsByType = {}; + +var Factions = { + UEF: { Index: 0, Symbol: "U", Color: "#1174ed", Name: "UEF" }, + Cybran: { Index: 1, Symbol: "C", Color: "#eb2c1e", Name: "Cybran" }, + Aeon: { Index: 2, Symbol: "A", Color: "#19d113", Name: "Aeon" }, + Seraphim: { Index: 3, Symbol: "S", Color: "#d1bb13", Name: "Seraphim" }, + Nomads: { Index: 4, Symbol: "N", Color: "#9e6d31", Name: "Nomads" }, + UNKNOWN: { Index: 5, Symbol: "X", Color: "#292828", Name: "UNKNOWN" }, +}; + +var FactionsByIndex = {}; +var FactionsBySymbol = {}; +function initalize() { + + + for (let faction of Factions) { + FactionsByIndex[faction.Index] = faction; + } +} + +function getFactionData(faction) { + //console.log("getFactionData '" + faction + "'"); + + for (let info of Object.values(Factions)) { + if (faction === info.Index || + faction === info.Symbol || + faction === info.Name) { + // console.log(info); + return info; + } + } + return null; +} + +function toFactionColor(faction) { + + var info = getFactionData(faction); + if (info) + return info.Color; + + return "black"; +} + +function groupUnitsBy(key) { + var groups = {}; + for (let unit of unitBlueprints) { + + var name = unit[key]; + if (name === undefined) continue; + + if (groups[name] === undefined) { + groups[name] = []; + } + groups[name].push(unit.Id); + } + + return groups; +} + +function is(unit, categories) { + if (typeof categories === "string") { + return unit.CategoriesHash[categories] || false; + } else { + for (let c of (categories || [])) { + + if (!unit.CategoriesHash[c]) return false; + } + return true; + } +} + +function isValid(unit) { + + if (unit.isWall) return false; + if (unit.isCrabbEgg) return false; + + if (unit.isStructure) return false; + + if (unit.isFactionN) return false; + //if (unit.isFactionU) return false; + //if (unit.isFactionA) return false; + //if (unit.isFactionS) return false; + // if (unit.isFactionC) return false; + //if (unit.isT3 || unit.isT2) return true; + + + return true; +} + +var unitTitles = []; +function populate(unit) { + + if (unit.Categories) { + unit.CategoriesHash = toHash(unit.Categories); + + + unit.isFactionN = is(unit, "NOMADS"); + unit.isFactionU = is(unit, "UEF"); + unit.isFactionC = is(unit, "CYRBAN"); + unit.isFactionA = is(unit, "AEON"); + unit.isFactionS = is(unit, "SERAPHIM"); + + unit.isT1 = is(unit, ["TECH1"]); + unit.isT2 = is(unit, ["TECH2"]); + unit.isT3 = is(unit, ["TECH3"]); + unit.isT4 = is(unit, ["EXPERIMENTAL"]); + unit.isCrabbEgg = is(unit, ["CRABEGG"]); + + unit.isStealth = is(unit, ["STRUCTURE", "STEALTHFIELD"]); + unit.isSensor = is(unit, ["STRUCTURE", "OPTICS", "TECH3"]); + + unit.isDefenseAA = is(unit, ["STRUCTURE", "DEFENSE", "ANTIAIR"]); + unit.isDefensePD = is(unit, ["STRUCTURE", "DEFENSE", "DIRECTFIRE"]); + unit.isDefenseTP = is(unit, ["STRUCTURE", "DEFENSE", "ANTINAVY"]); + + unit.isSMD = is(unit, ["STRUCTURE", "ANTIMISSILE", "SILO"]); + unit.isTMD = is(unit, ["STRUCTURE", "ANTIMISSILE", "TECH2"]); + unit.isWall = is(unit, ["STRUCTURE", "WALL"]); + unit.isStructure = is(unit, ["STRUCTURE"]); + + unit.isCommander = is(unit, ["LAND", "COMMAND"]); + + + //if (unit.Id === "ZSB9601") { + // console.log("ZSB9601") + //} + unit.isFactorySupport = is(unit, ["STRUCTURE", "SUPPORTFACTORY"]); + unit.isFactoryHQ = !unit.isFactorySupport && is(unit, ["STRUCTURE", "FACTORY"]); + unit.isFactory = unit.isFactorySupport || unit.isFactoryHQ; + + //if (unit.Categories.indexOf("STRUCTURE") >= 0 && + // unit.Categories.indexOf("TECH3") >= 0) { + + // unit.isFactorySupport = unit.Categories.indexOf("SUPPORTFACTORY") >= 0; + // unit.isFactoryHQ = unit.Categories.indexOf("FACTORY") >= 0; + + //} + + if (unit.Categories.indexOf("STRUCTURE") >= 0 && + unit.Categories.indexOf("ECONOMIC") >= 0) { + + unit.isStorage = is(unit, "MASSSTORAGE") || is(unit, "ENERGYSTORAGE"); + //unit.Categories.indexOf("MASSSTORAGE") >= 0 || + //unit.Categories.indexOf("ENERGYSTORAGE") >= 0; + } + + if (unit.isT1) unit.TechLevel = 1; + else if (unit.isT2) unit.TechLevel = 2; + else if (unit.isT3) unit.TechLevel = 3; + else if (unit.isT4) unit.TechLevel = 4; + else if (unit.isCommander) unit.TechLevel = 0; + else unit.TechLevel = 4; + + unit.TechSymbol = "T" + unit.TechLevel; + } + + unit.FactionName = unit.General.FactionName || "UKNOWN"; + unit.FactionColor = Factions[unit.FactionName].Color; + unit.FactionIndex = Factions[unit.FactionName].Index; + unit.FactionSymbol = Factions[unit.FactionName].Symbol; + unit.FactionLevel = 2 + (unit.FactionIndex * 10) + (unit.TechLevel * 2) + + unit.Title = unit.Description.replace("Experimental ", ""); + unit.Title = unit.Title.replace("Mobile Rapid-Fire", "Rapid-Fire"); + unit.Title = unit.Title.replace("Support Armored", "Support"); + unit.Title = unit.Title.replace("Stealth Shield", "Stealth"); + unit.Title = unit.Title.replace("Stealth Field", "Stealth"); + unit.Title = unit.Title.replace("Intelligence", "Intel"); + unit.Title = unit.Title.replace("Staging Beacon", "Staging Facility"); + + unit.Title = unit.Title.replace("Rapid-fire", "Rapid-Fire"); + unit.Title = unit.Title.replace("Hydrocarbon", "Hydro"); + + unit.Title = unit.Title.replace("AA Flak Artillery", "AA Turret"); + unit.Title = unit.Title.replace("AA Turret", "AA Flak Turret"); + unit.Title = unit.Title.replace("Heavy Railgun Array", "Torpedo Launcher"); + + unit.Title = unit.Title.replace("Mobile Missile Anti-Air", "Mobile AA Launcher"); + unit.Title = unit.Title.replace("Mobile Rapid-Fire AA Cannon", "Mobile AA Launcher"); + unit.Title = unit.Title.replace("Mobile Anti-Air Missile Launcher", "Mobile AA Launcher"); + unit.Title = unit.Title.replace("Lightning Tank", "Mobile AA Lightning Tank"); + unit.Title = unit.Title.replace("Anti-Air", "AA"); + unit.Title = unit.Title.replace("Defense Satellite", "Satellite Defense Laser"); + unit.Title = unit.Title.replace("Satellite System", "Satellite Defense Factory"); + unit.Title = unit.Title.replace("Orbital", "Satellite"); + + if (unit.isT3 && unit.isDefenseAA) + unit.Title = "AA SAM Launcher"; + + if (unit.Title === "Artillery Installation") + unit.Title = "Stationary Artillery"; + + unit.Title = unit.Title.replace("Installation", ""); + + if (unit.isFactoryHQ && !unit.Title.endsWith("HQ")) { + unit.Title = unit.Title + " HQ" + } + if (unit.isFactorySupport && !unit.Title.endsWith("Support")) { + unit.Title = unit.Title + " Support" + } + + //unit.Title = unit.Title + " " + unit.Id; +// unit.Title = unit.Title + " " + unit.isFactoryHQ + " " + unit.isFactorySupport + " " + unit.Id; + //unit.Title = unit.Title + " " + unit.isFactorySupport; + + unit.Title = unit.TechSymbol + " " + unit.Title; + + if (isValid(unit)) { + if (!unitTitles.includes(unit.Title)) { + unitTitles.push(unit.Title); + } + } + unit.Title = "(" + unit.FactionSymbol + ") " + unit.Title; + + if (unit.General && unit.General.UnitName) { + unit.Name = unit.General.UnitName; + } + + //if (unit.Economy === undefined) { + // unit.Economy = {}; + //} + + //if (unit.Economy.BuildTime === undefined) { + // unit.Economy.BuildTime = 1; + //} + + //if (unit.Economy.BuildCostMass === undefined) { + // unit.Economy.BuildCostMass = 1; + //} + + //if (unit.Economy.BuildCostEnergy === undefined) { + // unit.Economy.BuildCostEnergy = 1; + //} + + //if (unitFactions.indexOf(unit.FactionName) < 0) { + // unitFactions.push(unit.FactionName); + //} + + if (!unit.Economy) { unit.Economy = {}; console.log("no eco " + unit.Id) } + if (!unit.Economy.BuildCostMass) unit.Economy.BuildCostMass = 1; + if (!unit.Economy.BuildCostEnergy) unit.Economy.BuildCostEnergy = 1; + + + if (unit.Economy && + unit.Economy.BuildCostMass > 0 && + unit.Economy.BuildCostEnergy > 0) { + unit.Economy.BuildCostTotal = Math.round(unit.Economy.BuildCostMass + (unit.Economy.BuildCostEnergy / 150)); + } + + unit.Type = unit.General.Icon || "UKNOWN"; + if (unitTypes.indexOf(unit.Type) < 0) { + unitTypes.push(unit.Type); + } + + var icon = unit.StrategicIconName; + if (unitIcons.indexOf(icon) < 0) { + unitIcons.push(icon); + } + + unitIdentifiers.push(unit.Id); + + var clas = unit.General.Classification; + clas = clas.replace('RULEUC_', ''); + clas = clas.replace('RULEUMT_', ''); + clas = clas.replace('Military', ''); + clas = clas.replace('MiscSupport', 'Support'); + + if (unit.isStorage) clas = "Storage"; + if (unit.isFactorySupport) clas = "FactorySupport"; + if (unit.isFactoryHQ) clas = "FactoryHQ"; + + if (clas === "CounterMeasure") { + + if (unit.Defense && + unit.Defense.Shield && + unit.Defense.Shield.ShieldSize > 0) { + clas = "Sheild"; + } + else if (unit.isStealth) clas = "Stealth"; + else if (unit.isTMD) clas = "TMD"; + else if (unit.isSMD) clas = "SMD"; + else if (unit.isSensor) clas = "Sensor"; + } + + //unit.General.Classification = clas; + unit.Classification = clas; + + if (unitClasses.indexOf(clas) < 0) { + unitClasses.push(clas); + } + + if (unit.isCommander) { + // normalize + unit.Economy.BuildTime = 150000; + } + //if (unitsByClass[clas] === undefined) { + // unitsByClass[clas] = []; + //} + //unitsByClass[clas].push(unit.Id); + + + var unitInfo = {}; // Object.create(unit); + unitInfo.Economy = unit.Economy; + unitInfo.Physics = unit.Physics; + unitInfo.Defense = unit.Defense; + unitInfo.Intel = unit.Intel; + unitInfo.Id = unit.Id; + //unitInfo.Weapon = []; + //unitInfo.Veteran = null; + //unitInfo.Display = null; + //unitInfo.Wreckage = null; + //unitInfo.Description = null; + //unitInfo.StrategicIconName = null; + unitData.push(unitInfo); + + for (let w of (unit.Weapon || [])) { + + var wc = w.WeaponCategory; + if (wc && + wc !== "Death" && + wc !== "Teleport" && + wc !== "Experimental") { + + wc = wc.replace('Naval', ''); + wc = wc.replace('Experimental', ''); + wc = wc.replace('Kamikaze', 'Bomb'); + wc = wc.replace(' ', ''); + wc = wc.trim(); + + if (weaponCategories.indexOf(wc) < 0) { + weaponCategories.push(wc); + } + + w.isValid = true; + } + + var wt = w.DamageType; + if (wt && wc !== "Deathnuke") { + if (weaponTypes.indexOf(wt) < 0) { + weaponTypes.push(wt); + } + w.issValid = true; + } + } + + //Object.assign({}, item); + //var wep = Object.create(unit.Weapon); +} + +var dataMarkerType = "init"; +async function updateMarkerType(markerType) { + + var charts = document.querySelectorAll("igc-data-chart"); + if (charts && charts.length > 0) { + for (var i = 0; i < charts.length; i++) { + var dc = charts[i]; + if (dc.actualAxes.length > 0) { + + var series = dc.actualAxes[0]; + console.log("JS updateMarkerType " + series.markerType + " >> " + markerType); + + dataMarkerType = markerType; + + if (markerType === "UnitType") { + // dc.actualAxes[0].markerType = "Circle"; + //dc.actualAxes[0].markerTemplate = onSeriesMarkerTemplate(); + } + else { //if (markerType === "") { + // dc.actualAxes[0].markerType = "Square"; + } + + //dc.actualSeries[0].notifyClearItems(unitBlueprints); + } + } + } +} + +// xProp, yProp, rProp +async function plotUnits(xProp, yProp, rProp) { + const start = Date.now(); + // console.log("JS plotUnits ..."); + + var charts = document.querySelectorAll("igc-data-chart"); + //console.log("JS plotUnits charts=" + charts.length); + //console.log("JS plotUnits x=" + xProp + " y=" + yProp); + + var xMin = Number.MAX_VALUE; + var xMax = Number.MIN_VALUE; + var yMin = Number.MAX_VALUE; + var yMax = Number.MIN_VALUE; + + for (var unit of unitBlueprints) { + var xValue = getDataValue(unit, xProp); + var yValue = getDataValue(unit, yProp); + xMin = Math.min(xMin, xValue); + xMax = Math.max(xMax, xValue); + + yMin = Math.min(yMin, yValue); + yMax = Math.max(yMax, yValue); + } + console.log("JS plotUnits x=" + xMin + " " + xMax + " " + xProp); + console.log("JS plotUnits y=" + yMin + " " + yMax + " " + yProp); + + var xRange = xMax - xMin; + var yRange = yMax - yMin; + + if (charts && charts.length > 0) { + for (var i = 0; i < charts.length; i++) { + var dc = charts[i]; + + if (dc.actualAxes.length > 0) { + dc.actualAxes[0].isLogarithmic = xRange > 1000; + dc.actualAxes[1].isLogarithmic = yRange > 1000; + //console.log("JS plotUnits x axis=" + dc.actualAxes[0].isLogarithmic); + //console.log("JS plotUnits y axis=" + dc.actualAxes[1].isLogarithmic); + } + + if (dc.actualSeries.length > 0) { + + dc.actualSeries[0].xMemberPath = xProp; + dc.actualSeries[0].yMemberPath = yProp; + + //console.log("JS plotUnits series=" + dc.actualSeries.length); + if (dc.actualSeries[0].dataSource === null || + dc.actualSeries[0].dataSource === undefined) { + + dc.actualSeries[0].dataSource = unitBlueprints; //unitData; + dc.actualSeries[0].notifyClearItems(unitBlueprints); + } + + + if (dc.actualSeries[1].dataSource === null || + dc.actualSeries[1].dataSource === undefined) { + dc.actualSeries[1].dataSource = unitBlueprints; //unitData; + dc.actualSeries[1].notifyClearItems(unitBlueprints); + } + + for (let s of dc.actualSeries) { + //console.log("JS plotUnits type=" + typeof (s)); + //console.log("JS plotUnits type=" + s.title); + } + + //if (dc.actualSeries[0].dataSource === unitData) { + // dc.actualSeries[0].notifyClearItems(unitData); + // console.log("JS plotUnits notifyClearItems"); + //} + } + + } + } + return new Promise((resolve, reject) => { + //console.log("JS JSON load end"); + const time = Date.now() - start; + // console.log(`JS JSON load end ` + (Math.floor(time / 1000)).toFixed(2)); + // console.log(`JS plotUnits end ` + time); + //resolve(bpUnits); + resolve("plotUnits"); + }); +} + + +async function load() { + const start = Date.now(); + //let url = window.location.origin + '/data/bp-extracted-small.json'; + let url = window.location.origin + '/data/bp-extracted.json'; + console.log("JS JSON url " + url); + + const response = await fetch(url); + console.log("JS JSON load fetch"); + + var units = await response.json(); + console.log("JS JSON load response"); + + unitBlueprints = []; + for (let unit of units) { + populate(unit); + + if (isValid(unit)) { + unit.Index = unitBlueprints.length; + unitBlueprints.push(unit); + } + } + + unitsByFaction = groupUnitsBy("FactionName"); + unitsByClass = groupUnitsBy("Classification"); + unitsByType = groupUnitsBy("Type"); + + + // console.log(unitTitles); + //console.log("JS JSON " + factions.length); + // console.log(unitFactions); + ////console.log("unitClasses"); + ////console.log(unitClasses); + //console.log("weaponCategories"); + //console.log(weaponCategories); + //console.log("weaponTypes"); + //console.log(weaponTypes); + //console.log("unitsByClass"); + //console.log(unitsByClass); + //console.log("unitsByFaction"); + //console.log(unitsByFaction); + //console.log("unitsByType"); + //console.log(unitsByType); + + + // console.log("bps=" + unitBlueprints.length); + // console.log("ids=" + unitIdentifiers.length); + // console.log("icons=" + unitIcons.length); + + //var charts = document.querySelectorAll("igc-data-chart"); + //console.log("JS JSON load charts=" + charts.length); + + return new Promise((resolve, reject) => { + //console.log("JS JSON load end"); + const time = Date.now() - start; + // console.log(`JS JSON load end ` + (Math.floor(time / 1000)).toFixed(2)); + console.log(`JS JSON load end ` + time + " items=" + unitData.length); + resolve(JSON.stringify(unitData)); + //resolve(unitBlueprints); + //("items=" + unitBlueprints.length); + }); +} + +function getFactionsTest() { + return new Promise((resolve, reject) => { + //console.log("JS JSON load end"); + const time = Date.now() - start; + // console.log(`JS JSON load end ` + (Math.floor(time / 1000)).toFixed(2)); + // console.log(`JS JSON load end ` + time); + //resolve(bpUnits); + resolve("items=" + units.length); + }); +} + + + +async function getUnitTitles() { + unitTitles.sort(); + //return unitTitles; + + return new Promise((resolve, reject) => { + console.log("JS getUnitTitles items=" + unitTitles.length); + var json = JSON.stringify(unitTitles); + //console.log(json); + resolve(json); + }); +} + +function getUnit() { + return 'x'.repeat(5); +} \ No newline at end of file diff --git a/wwwroot/scripts/utils.js b/wwwroot/scripts/utils.js new file mode 100644 index 0000000..ea96d89 --- /dev/null +++ b/wwwroot/scripts/utils.js @@ -0,0 +1,77 @@ +console.log("JS loaded utils.js"); + +function getLocation() { + + //var location + console.log("JS getLocation "); + console.log(window.location); + +} + +function toHash(array) { + var hash = {}; + for (let item of array) { + hash[item] = true; + } + return hash; +} + + +function toStringAbbr(number) { + var ret = ""; + var value = Math.abs(number); + if (value > 1000000000000) { + ret = (value / 1000000000000).toFixed(1) + " T" + } else if (value > 1000000000) { + ret = (value / 1000000000).toFixed(1) + " B" + } else if (value > 1000000) { + ret = (value / 1000000).toFixed(1) + " M" + } else if (value > 1000) { + ret = (value / 1000).toFixed(1) + " K" + } else { + ret = value.toFixed(0); + } + if (number < 0) { + ret = "-" + ret; + } + return ret; +} + +function toCSV(number) { + if (typeof (number) === "number") { + return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); + } + return number; +} + + +function toRGBA(hex, alpha) { + var c; + if (/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) { + c = hex.substring(1).split(''); + if (c.length === 3) { + c = [c[0], c[0], c[1], c[1], c[2], c[2]]; + } + c = '0x' + c.join(''); + var r = (c >> 16) & 255; + var g = (c >> 8) & 255; + var b = c & 255; + var a = alpha || 1; + return 'rgba(' + [r, g, b].join(',') + ',' + a + ')'; + } + throw new Error('Bad Hex'); +} + + +function getDataValue(item, property) { + var propWithDot = property.includes("."); + if (!propWithDot) { + return item[property]; + } else { + var props = property.split('.'); + var subItem = item[props[0]]; + var subProp = props.slice(1).join('.'); + return getDataValue(subItem, subProp); + } + +} \ No newline at end of file