JonathanMcCaffrey/EarthborneTrailerblazer
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Files
main
EarthborneTrailerblazer/ET/Web/Pages/Simulation.razor
T
6d486f49 74840d32c1 ...
2026-06-12 17:31:35 -04:00

358 lines
17 KiB
Plaintext
Raw Permalink Blame History

@page "/simulation"
@inject GameSimulationService SimService
<PageTitle>Ecology Simulation</PageTitle>
<div class="section-header d-flex align-items-center mb-4">
<h1 class="mb-0">Ecology Simulation</h1>
<div class="ms-3 flex-grow-1 border-bottom opacity-25"></div>
</div>
@if (!SimService.Data.IsInitialized)
{
<div class="text-center py-5">
<p class="lead mb-4">Simulate 20 turns of predator, prey, and flora ecology across the valley.</p>
<button class="btn btn-primary btn-lg" @onclick="StartSimulation">Run Simulation</button>
</div>
}
else
{
<div class="simulation-layout" tabindex="0" @onkeydown="HandleKeyDown" @ref="layoutDiv">
<div class="sim-controls d-flex align-items-center justify-content-between mb-3 flex-wrap gap-2">
<div class="d-flex align-items-center gap-2">
<button class="btn btn-outline-light btn-sm" @onclick="PrevTurn" disabled="@(SimService.Data.CurrentTurn <= 0)">
&#9664; Prev
</button>
<span class="turn-label">
@if (SimService.Data.CurrentTurn == 0)
{
<span>Initial Setup</span>
}
else
{
<span>After Turn <strong>@SimService.Data.CurrentTurn</strong> / 20</span>
}
</span>
<button class="btn btn-outline-light btn-sm" @onclick="NextTurn" disabled="@(SimService.Data.CurrentTurn >= 20)">
Next &#9654;
</button>
</div>
<div class="d-flex align-items-center gap-2 flex-wrap">
@if (CurrentEvent != null)
{
@foreach (var act in CurrentEvent.Activations)
{
<span class="event-badge badge bg-@BadgeClass(act.MeepleType)">
@act.MeepleType in @act.RegionType
</span>
}
}
<button class="btn btn-secondary btn-sm" @onclick="RandomizeEvents">&#8635; Randomize Events</button>
</div>
</div>
<div class="sim-map-container">
<svg viewBox="0 0 700 461" class="sim-svg">
<defs>
<radialGradient id="sg-Grass" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#4caf50" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#4caf50" stop-opacity="0"/>
</radialGradient>
<radialGradient id="sg-Forest" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#2e7d32" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#2e7d32" stop-opacity="0"/>
</radialGradient>
<radialGradient id="sg-Mountain" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#78909c" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#78909c" stop-opacity="0"/>
</radialGradient>
<radialGradient id="sg-Water" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#42a5f5" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#42a5f5" stop-opacity="0"/>
</radialGradient>
<radialGradient id="sg-Wasteland" cx="50%" cy="50%" r="50%">
<stop offset="0%" stop-color="#8d6e63" stop-opacity="0.3"/>
<stop offset="100%" stop-color="#8d6e63" stop-opacity="0"/>
</radialGradient>
</defs>
<image href="docs/Map.png" width="700" height="461" preserveAspectRatio="xMidYMid meet"/>
@{
var currentRegions = SimService.GetCurrentState();
var prevRegions = SimService.GetPreviousState();
var prevLookup = prevRegions.ToDictionary(r => r.Name);
var activatedRegionNames = new HashSet<string>();
if (CurrentEvent != null)
{
var activatedTerrain = CurrentEvent.Activations.Select(a => a.RegionType).ToHashSet();
activatedRegionNames = currentRegions
.Where(r => activatedTerrain.Contains(r.Terrain))
.Select(r => r.Name)
.ToHashSet();
}
}
@foreach (var line in GetConnectionLines(currentRegions))
{
<line x1="@line.X1" y1="@line.Y1" x2="@line.X2" y2="@line.Y2"
stroke="rgba(255,255,255,0.12)" stroke-width="2" stroke-linecap="round"/>
}
@foreach (var region in currentRegions)
{
var isActivated = activatedRegionNames.Contains(region.Name);
var terrainColor = GetTerrainColor(region.Terrain);
var labelX = region.X + 24;
var prev = prevLookup.GetValueOrDefault(region.Name);
var dp = prev != null ? region.PredatorMeeples - prev.PredatorMeeples : 0;
var dr = prev != null ? region.PreyMeeples - prev.PreyMeeples : 0;
var df = prev != null ? region.FloraMeeples - prev.FloraMeeples : 0;
var hasDelta = dp != 0 || dr != 0 || df != 0;
// Meeple dot counts (max 3 visible per type)
var pdots = Math.Min(region.PredatorMeeples, 3);
var rdots = Math.Min(region.PreyMeeples, 3);
var fdots = Math.Min(region.FloraMeeples, 3);
var dotR = 3;
var dotGap = 7;
<g class="sim-region @(isActivated ? "sim-active" : "")">
<circle cx="@region.X" cy="@region.Y" r="34" fill="url(#sg-@region.Terrain)"/>
<circle cx="@region.X" cy="@region.Y" r="18"
fill="@(terrainColor)cc"
stroke="@(isActivated ? "#ffd700" : "rgba(255,255,255,0.5)")"
stroke-width="@(isActivated ? 3 : 2)"/>
@* Predator dots (red, top row) *@
@for (int d = 0; d < pdots; d++)
{
var dx = region.X + (d - (pdots - 1) * 0.5) * dotGap;
var dy = region.Y - 7;
<circle cx="@dx" cy="@dy" r="@dotR" fill="#e76f51" stroke="rgba(0,0,0,0.4)" stroke-width="0.5"/>
}
@if (region.PredatorMeeples > 3)
{
@((MarkupString)$"<text x=\"{region.X + 2 * dotGap + 2}\" y=\"{region.Y - 4}\" fill=\"#e76f51\" font-size=\"7\" font-weight=\"600\">+{region.PredatorMeeples - 3}</text>")
}
@* Prey dots (yellow, middle row) *@
@for (int d = 0; d < rdots; d++)
{
var dx = region.X + (d - (rdots - 1) * 0.5) * dotGap;
var dy = region.Y;
<circle cx="@dx" cy="@dy" r="@dotR" fill="#e9c46a" stroke="rgba(0,0,0,0.4)" stroke-width="0.5"/>
}
@if (region.PreyMeeples > 3)
{
@((MarkupString)$"<text x=\"{region.X + 2 * dotGap + 2}\" y=\"{region.Y + 3}\" fill=\"#e9c46a\" font-size=\"7\" font-weight=\"600\">+{region.PreyMeeples - 3}</text>")
}
@* Flora dots (green, bottom row) *@
@for (int d = 0; d < fdots; d++)
{
var dx = region.X + (d - (fdots - 1) * 0.5) * dotGap;
var dy = region.Y + 7;
<circle cx="@dx" cy="@dy" r="@dotR" fill="#4caf50" stroke="rgba(0,0,0,0.4)" stroke-width="0.5"/>
}
@if (region.FloraMeeples > 3)
{
@((MarkupString)$"<text x=\"{region.X + 2 * dotGap + 2}\" y=\"{region.Y + 10}\" fill=\"#4caf50\" font-size=\"7\" font-weight=\"600\">+{region.FloraMeeples - 3}</text>")
}
<text x="@labelX" y="@(region.Y + 4)" fill="rgba(255,255,255,0.9)"
font-family="system-ui,sans-serif" font-size="11" font-weight="600">
@region.Name
</text>
<text x="@labelX" y="@(region.Y + 20)" fill="rgba(255,255,255,0.7)"
font-family="system-ui,sans-serif" font-size="10">
P:@region.PredatorMeeples R:@region.PreyMeeples F:@region.FloraMeeples
</text>
@if (hasDelta && SimService.Data.CurrentTurn > 0)
{
var dy = region.Y + 34;
var parts = new List<string>();
if (dp != 0) parts.Add($"<tspan fill=\"{(dp > 0 ? "#4caf50" : "#e76f51")}\">{(dp > 0 ? "+" : "")}{dp}P</tspan>");
if (dr != 0) parts.Add($"<tspan fill=\"{(dr > 0 ? "#4caf50" : "#e76f51")}\">{(dr > 0 ? "+" : "")}{dr}R</tspan>");
if (df != 0) parts.Add($"<tspan fill=\"{(df > 0 ? "#4caf50" : "#e76f51")}\">{(df > 0 ? "+" : "")}{df}F</tspan>");
var deltaHtml = $"<text x=\"{labelX}\" y=\"{dy}\" font-family=\"system-ui,sans-serif\" font-size=\"9\">{string.Join(" ", parts)}</text>";
@((MarkupString)deltaHtml)
}
</g>
}
</svg>
</div>
@if (CurrentEvent != null && CurrentEvent.Details.Count > 0)
{
<div class="sim-details mt-3">
<h5 class="text-muted mb-2">Turn @CurrentEvent.TurnNumber Details</h5>
<div class="sim-details-scroll">
@foreach (var detail in CurrentEvent.Details)
{
<div class="sim-detail-item">@detail</div>
}
</div>
</div>
}
<div class="sim-totals mt-3 d-flex gap-4 justify-content-center">
@{
var totals = SimService.GetCurrentState();
}
<div class="total-pred"><span class="total-dot" style="background:#e76f51"></span> Predators: @totals.Sum(r => r.PredatorMeeples)</div>
<div class="total-prey"><span class="total-dot" style="background:#e9c46a"></span> Prey: @totals.Sum(r => r.PreyMeeples)</div>
<div class="total-flora"><span class="total-dot" style="background:#4caf50"></span> Flora: @totals.Sum(r => r.FloraMeeples)</div>
</div>
<div class="sim-chart mt-3">
<h5 class="text-muted mb-2">Population Trend</h5>
<svg viewBox="0 0 720 160" class="sim-chart-svg">
@{
var history = SimService.GetPopulationHistory();
var maxPop = Math.Max(history.Max(h => h.predators + h.prey + h.flora), 10);
var chartW = 700d;
var chartH = 120d;
var chartY = 20d;
var stepX = history.Length > 1 ? chartW / (history.Length - 1) : chartW;
string MakePath(Func<int, int> getVal, string color)
{
var pts = history.Select((h, i) =>
{
var x = i * stepX;
var y = chartY + chartH - (getVal(i) / (double)maxPop) * chartH;
return $"{x:F1},{y:F1}";
});
var d = "M" + string.Join(" L", pts);
return $"<path d=\"{d}\" fill=\"none\" stroke=\"{color}\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>";
}
// Y axis labels
@((MarkupString)$"<text x=\"0\" y=\"{chartY + 10}\" fill=\"rgba(255,255,255,0.3)\" font-size=\"9\">{maxPop}</text>")
@((MarkupString)$"<text x=\"0\" y=\"{chartY + chartH}\" fill=\"rgba(255,255,255,0.3)\" font-size=\"9\">0</text>")
// Grid lines
<line x1="0" y1="@(chartY + chartH)" x2="@chartW" y2="@(chartY + chartH)" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>
<line x1="0" y1="@chartY" x2="@chartW" y2="@chartY" stroke="rgba(255,255,255,0.06)" stroke-width="1"/>
// Current turn marker
var markerX = SimService.Data.CurrentTurn * stepX;
<line x1="@markerX" y1="@chartY" x2="@markerX" y2="@(chartY + chartH)" stroke="rgba(255,255,255,0.25)" stroke-width="1" stroke-dasharray="3,3"/>
@((MarkupString)MakePath(i => history[i].predators, "#e76f51"))
@((MarkupString)MakePath(i => history[i].prey, "#e9c46a"))
@((MarkupString)MakePath(i => history[i].flora, "#4caf50"))
// Turn markers on x-axis
@for (int i = 0; i < history.Length; i += 5)
{
var x = i * stepX;
@((MarkupString)$"<text x=\"{x}\" y=\"{chartY + chartH + 14}\" fill=\"rgba(255,255,255,0.25)\" font-size=\"8\" text-anchor=\"middle\">{i}</text>")
}
}
</svg>
<div class="sim-chart-legend d-flex gap-3 justify-content-center mt-1">
<span class="small"><span class="total-dot" style="background:#e76f51"></span> Predators</span>
<span class="small"><span class="total-dot" style="background:#e9c46a"></span> Prey</span>
<span class="small"><span class="total-dot" style="background:#4caf50"></span> Flora</span>
</div>
</div>
</div>
}
@code {
private ElementReference layoutDiv;
private TurnEvent? CurrentEvent => SimService.Data.CurrentTurn > 0 && SimService.Data.CurrentTurn <= SimService.Data.Events.Count
? SimService.Data.Events[SimService.Data.CurrentTurn - 1]
: null;
private static string BadgeClass(string meepleType) => meepleType switch
{
"Predator" => "danger",
"Prey" => "warning",
"Flora" => "success",
_ => "secondary"
};
protected override void OnInitialized()
{
SimService.RunSimulation();
}
private void StartSimulation()
{
SimService.RunSimulation();
}
private void PrevTurn()
{
if (SimService.Data.CurrentTurn > 0)
SimService.Data.CurrentTurn--;
}
private void NextTurn()
{
if (SimService.Data.CurrentTurn < 20)
SimService.Data.CurrentTurn++;
}
private void HandleKeyDown(KeyboardEventArgs e)
{
if (e.Key == "ArrowLeft") PrevTurn();
else if (e.Key == "ArrowRight") NextTurn();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await layoutDiv.FocusAsync();
}
private void RandomizeEvents()
{
SimService.RandomizeEvents();
}
private static string GetTerrainColor(string terrain)
{
return terrain switch
{
"Grass" => "#4caf50",
"Forest" => "#2e7d32",
"Mountain" => "#78909c",
"Water" => "#42a5f5",
"Wasteland" => "#8d6e63",
_ => "#888"
};
}
private record ConnectionLine(int X1, int Y1, int X2, int Y2);
private List<ConnectionLine> GetConnectionLines(List<RegionState> regions)
{
var lookup = regions.ToDictionary(r => r.Name);
var lines = new List<ConnectionLine>();
var drawn = new HashSet<string>();
foreach (var region in regions)
{
foreach (var conn in region.Connections)
{
var key = string.Compare(region.Name, conn, StringComparison.OrdinalIgnoreCase) < 0
? $"{region.Name}|{conn}"
: $"{conn}|{region.Name}";
if (!drawn.Add(key)) continue;
if (!lookup.TryGetValue(conn, out var target)) continue;
lines.Add(new ConnectionLine(region.X, region.Y, target.X, target.Y));
}
}
return lines;
}
}
Reference in New Issue View Git Blame Copy Permalink