IGP/Pages/BuildCalculator/BuildCalculatorPage.razor

@@ -25,7 +25,9 @@
         <div class="gridItem" style="grid-area: timing;">
             <PanelComponent>
                 <InfoTooltipComponent InfoText="@Locale["Tooltip Filter Info"]">
-                    <FilterComponent></FilterComponent>
+                    <FactionBorderComponent>
+                        <FilterComponent></FilterComponent>
+                    </FactionBorderComponent>
                 </InfoTooltipComponent>
             </PanelComponent>
             
@@ -56,7 +58,9 @@
         <div class="gridItem" style="grid-area: view;">
             <PanelComponent>
                 <InfoTooltipComponent InfoText="@Locale["Tooltip Entity Info"]">
-                    <EntityClickViewComponent/>
+                    <ImmortalBorderComponent>
+                        <EntityClickViewComponent/>
+                    </ImmortalBorderComponent>
                 </InfoTooltipComponent>
 
             </PanelComponent>

IGP/Pages/BuildCalculator/Parts/EntityClickViewComponent.razor

@@ -2,6 +2,7 @@
 @inject IKeyService KeyService
 @inject IImmortalSelectionService FilterService
 @inject IStorageService StorageService
+@inject IBuildOrderService BuildOrderService
 @using Services.Website
 @implements IDisposable
 
@@ -33,6 +34,7 @@
         base.OnInitialized();
         KeyService.Subscribe(HandleClick);
         StorageService.Subscribe(RefreshDefaults);
+        BuildOrderService.Subscribe(OnBuildOrderServiceChanged);
 
         RefreshDefaults();
     }
@@ -40,11 +42,20 @@
     void IDisposable.Dispose()
     {
         KeyService.Unsubscribe(HandleClick);
-
         StorageService.Unsubscribe(RefreshDefaults);
+        BuildOrderService.Unsubscribe(OnBuildOrderServiceChanged);
     }
 
 
+    void OnBuildOrderServiceChanged()
+    {
+        if (BuildOrderService.GetLastRequestInterval() == 0)
+        {
+            _entity = null;
+            StateHasChanged();
+        }
+    }
+    
     void RefreshDefaults()
     {
         _viewType = StorageService.GetValue<bool>(StorageKeys.IsPlainView) ? EntityViewType.Plain : EntityViewType.Detailed;

IGP/Pages/BuildCalculator/Parts/FactionBorderComponent.razor

@@ -0,0 +1,32 @@
+@inject IImmortalSelectionService FilterService
+@using Model.Entity.Data
+@implements IDisposable
+
+<FormLayoutComponent>
+    <div style="@GetBorderStyle()">
+        @ChildContent
+    </div>
+</FormLayoutComponent>
+
+@code {
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        FilterService.Subscribe(StateHasChanged);
+    }
+
+    void IDisposable.Dispose()
+    {
+        FilterService.Unsubscribe(StateHasChanged);
+    }
+
+    string GetBorderStyle()
+    {
+        var faction = FilterService.GetFaction();
+        var color = faction == DataType.FACTION_Aru ? "#CD5C5C" : "#8EACCD";
+        return $"border-top: 4px solid {color}; padding-top: 4px;";
+    }
+}

IGP/Pages/BuildCalculator/Parts/ImmortalBorderComponent.razor

@@ -0,0 +1,37 @@
+@inject IImmortalSelectionService FilterService
+@using Model.Entity.Data
+@implements IDisposable
+
+<FormLayoutComponent>
+    <div style="@GetBorderStyle()">
+        @ChildContent
+    </div>
+</FormLayoutComponent>
+
+@code {
+
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        FilterService.Subscribe(StateHasChanged);
+    }
+
+    void IDisposable.Dispose()
+    {
+        FilterService.Unsubscribe(StateHasChanged);
+    }
+
+    string GetBorderStyle()
+    {
+        var immortal = FilterService.GetImmortal();
+        var color = "#666666";
+        if (immortal == DataType.IMMORTAL_Orzum) color = "#4A6B8A";
+        else if (immortal == DataType.IMMORTAL_Ajari) color = "#A3B8CC";
+        else if (immortal == DataType.IMMORTAL_Atzlan) color = "#8B7355";
+        else if (immortal == DataType.IMMORTAL_Mala) color = "#6B8E23";
+        else if (immortal == DataType.IMMORTAL_Xol) color = "#9CA89C";
+        return $"border-top: 4px solid {color}; padding-top: 4px;";
+    }
+}

IGP/Pages/BuildCalculator/Parts/TutorialHelperComponent.razor

@@ -0,0 +1,82 @@
+@inject IImmortalSelectionService FilterService
+
+@implements IDisposable
+
+<FormLayoutComponent>
+    <InfoBodyComponent>
+        <InfoQuestionComponent>
+            What is this tool?
+        </InfoQuestionComponent>
+        <InfoAnswerComponent>
+            This is a calculator to determine build timings. Mostly so someone can quickly try out a few build
+            orders to see if they somewhat make sense.
+        </InfoAnswerComponent>
+    </InfoBodyComponent>
+
+    <InfoBodyComponent>
+        <InfoQuestionComponent>
+            How does it work?
+        </InfoQuestionComponent>
+        <InfoAnswerComponent>
+            The tool calculates every second of game time. So if you attempt to build a <b>Legion Hall</b> as
+            your first action, the tool will scan every second, until you get to one where the request can be
+            made. In this case, that is interval 58.
+            <br/>
+            <br/>
+            If you then build 2 <b>Apostle of Bindings</b> a <b>Soul Foundry</b> and a 3 <b>Absolvers</b> you
+            should see yourself roughly floating 500 alloy, with barely having any ether. Which means you could
+            of gotten an <b>Acropolis</b> and a <b>Zentari</b> without hurting your build.
+            <br/>
+            <br/>
+            Try building <b>Apostle of Bindings</b> before the <b>Legion Hall</b> and see how that changes the
+            timing of your 3 <b>Absolvers</b>. (Spoiler:
+            <SpoilerTextComponent> your <b>Absolvers</b> will be built much faster, and you won't be floating so
+                much alloy.
+            </SpoilerTextComponent>
+            )
+        </InfoAnswerComponent>
+    </InfoBodyComponent>
+
+    <InfoBodyComponent>
+        <InfoQuestionComponent>
+            What is CONTROL key for?
+        </InfoQuestionComponent>
+        <InfoAnswerComponent>
+            Economy and tech related upgrades for townhalls.
+        </InfoAnswerComponent>
+    </InfoBodyComponent>
+
+    <InfoBodyComponent>
+        <InfoQuestionComponent>
+            What is SHIFT key for?
+        </InfoQuestionComponent>
+        <InfoAnswerComponent>
+            Misc building related upgrades. (Omnivores)
+        </InfoAnswerComponent>
+    </InfoBodyComponent>
+
+    <InfoBodyComponent>
+        <InfoQuestionComponent>
+            What is 2 key for?
+        </InfoQuestionComponent>
+        <InfoAnswerComponent>
+            It will be for Pyre camps. Currently not implemented.
+        </InfoAnswerComponent>
+    </InfoBodyComponent>
+</FormLayoutComponent>
+
+@code {
+
+    protected override void OnInitialized()
+    {
+        base.OnInitialized();
+        FilterService.Subscribe(StateHasChanged);
+    }
+
+    void IDisposable.Dispose()
+    {
+        FilterService.Unsubscribe(StateHasChanged);
+    }
+    
+
+}

Playwright/helpers/website.js

@@ -11,9 +11,7 @@ class Website {
     } else {
       const hook = process.env.TEST_HOOK || '';
       this.deploymentType = hook.includes('localhost') ? 'Local' : 'Dev';
-      this.baseUrl = this.deploymentType === 'Dev'
+      this.baseUrl = 'https://localhost:7234';
-        ? 'https://calm-mud-04916b210.1.azurestaticapps.net'
-        : 'https://localhost:7234';
     }
 
     const BuildCalculatorPage = require('../pages/buildCalculatorPage');

Playwright/tests/buildCalculator.spec.js

@@ -58,33 +58,12 @@ test.describe('Build Calculator', () => {
     const calc = website.buildCalculatorPage;
     await calc.goto();
 
-    const buttons = page.locator('.keyContainer > div > div');
-    console.log('Initial Q button text:', await buttons.filter({ hasText: /^Q/ }).first().textContent());
-
-    // Wait for Blazor re-render to complete by waiting for the button text to stabilize
-    // (it goes from QAcropolis → empty during re-render → back to QAcropolis)
-    let tries = 0;
-    let text = '';
-    while (tries < 20) {
-      await page.waitForTimeout(500);
-      try {
-        text = (await buttons.filter({ hasText: /^Q/ }).first().textContent() || '').trim();
-        if (text && text.length > 1) break;
-      } catch { }
-      tries++;
-    }
-    console.log(`After Blazor render (${(tries+1)*0.5}s): Q button text: ${JSON.stringify(text)}`);
-
     await calc.filter.selectFaction("Q'Rath");
     await calc.filter.selectImmortal('Orzum');
-    await page.waitForTimeout(1000);
-
-    console.log('After filter Q button text:', await buttons.filter({ hasText: /^Q/ }).first().textContent());
 
     expect(await calc.timeline.containsEntity('Acropolis')).toBe(false);
 
     await calc.hotkeys.clickKey('Q');
-    await page.waitForTimeout(1000);
 
     expect(await calc.entityView.getEntityName()).toBe('Acropolis');
     expect(await calc.timeline.containsEntity('Acropolis')).toBe(true);

docs/.obsidian/workspace.json

@@ -23,105 +23,7 @@
             }
           },
           {
-            "id": "2389ff9bfbc7c06e",
+            "id": "094e8bbc34e4a833",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "Untitled.md",
-                "mode": "source",
-                "source": false
-              },
-              "icon": "lucide-file",
-              "title": "Untitled"
-            }
-          },
-          {
-            "id": "516344d92af043d3",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "Entity Click View Tests.md",
-                "mode": "source",
-                "source": false
-              },
-              "icon": "lucide-file",
-              "title": "Entity Click View Tests"
-            }
-          },
-          {
-            "id": "e080f009e5533348",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "Hotkey Tests.md",
-                "mode": "source",
-                "source": false
-              },
-              "icon": "lucide-file",
-              "title": "Hotkey Tests"
-            }
-          },
-          {
-            "id": "8c62a38928399310",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "Army Calc UI.md",
-                "mode": "source",
-                "source": false
-              },
-              "icon": "lucide-file",
-              "title": "Army Calc UI"
-            }
-          },
-          {
-            "id": "63052cace03ac2f7",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "Timeline Tests.md",
-                "mode": "source",
-                "source": false
-              },
-              "icon": "lucide-file",
-              "title": "Timeline Tests"
-            }
-          },
-          {
-            "id": "b468ed9d43376232",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "Army Display Split.md",
-                "mode": "source",
-                "source": false
-              },
-              "icon": "lucide-file",
-              "title": "Army Display Split"
-            }
-          },
-          {
-            "id": "2c63d9663088f304",
-            "type": "leaf",
-            "state": {
-              "type": "markdown",
-              "state": {
-                "file": "Highest Alloy and Ether Tests.md",
-                "mode": "source",
-                "source": false
-              },
-              "icon": "lucide-file",
-              "title": "Highest Alloy and Ether Tests"
-            }
-          },
-          {
-            "id": "461430f8c29407ab",
             "type": "leaf",
             "state": {
               "type": "markdown",
@@ -135,21 +37,35 @@
             }
           },
           {
-            "id": "094e8bbc34e4a833",
+            "id": "68e1ba2b54081b9a",
             "type": "leaf",
             "state": {
               "type": "markdown",
               "state": {
-                "file": "Top Borders in Calculator should change based on Selected Faction and Immortal.md",
+                "file": "Helper Tutorial Info Improvements.md",
                 "mode": "source",
                 "source": false
               },
               "icon": "lucide-file",
-              "title": "Top Borders in Calculator should change based on Selected Faction and Immortal"
+              "title": "Helper Tutorial Info Improvements"
+            }
+          },
+          {
+            "id": "b98a69cefb529fc8",
+            "type": "leaf",
+            "state": {
+              "type": "markdown",
+              "state": {
+                "file": "Changing Factions and Immortal should clear out build.md",
+                "mode": "source",
+                "source": false
+              },
+              "icon": "lucide-file",
+              "title": "Changing Factions and Immortal should clear out build"
             }
           }
         ],
-        "currentTab": 9
+        "currentTab": 3
       }
     ],
     "direction": "vertical"
@@ -206,8 +122,7 @@
       }
     ],
     "direction": "horizontal",
-    "width": 200,
+    "width": 200
-    "collapsed": true
   },
   "right": {
     "id": "dd7c1dc4bd54d927",
@@ -322,27 +237,27 @@
       "bases:Create new base": false
     }
   },
-  "active": "094e8bbc34e4a833",
+  "active": "b98a69cefb529fc8",
   "lastOpenFiles": [
     "_Tasks Kanban.base",
     "Helper Tutorial Info Improvements.md",
-    "Make a Plan to Fully Test the Calculator.md",
     "Highest Alloy and Ether Tests.md",
     "Army Display Split.md",
     "Timeline Tests.md",
     "Army Calc UI.md",
-    "Untitled 1.md",
     "Hotkey Tests.md",
-    "Add a Timeline Editor.md",
-    "Worker Income UI and Tests.md",
     "Entity Click View Tests.md",
     "Untitled.md",
+    "Top Borders in Calculator should change based on Selected Faction and Immortal.md",
+    "Make a Plan to Fully Test the Calculator.md",
+    "Untitled 1.md",
+    "Add a Timeline Editor.md",
+    "Worker Income UI and Tests.md",
     "More Wait Tests.md",
     "Build Clear should clear out more stuff.md",
     "Changing Factions and Immortal should clear out build.md",
     "Input building delay should have an effect on when a building is built. Tests against 0, 2, 4, 60.md",
     "Ensure build order gets greyed out past the attack time. Clicking the cancel button will wipe the entire greyed out timeline..md",
-    "Top Borders in Calculator should change based on Selected Faction and Immortal.md",
     "Pasted image 20260601093510.png",
     "Pasted image 20260601093506.png",
     "Pasted image 20260601083333.png",

docs/Get AI to Add easy Test Tasks.md

@@ -1,6 +1,6 @@
 ---
 type: Task
-status: AI Agent Work
+status: Done
 category:
 ---
 Consider Playwright features we can use to create obvious tests to our test project in the Playwright folder.

docs/Helper Tutorial Info Improvements.md

@@ -8,5 +8,33 @@ category:
 
 ![[Pasted image 20260601083333.png]]
 
-- Ensure referenced data is taken from the database.  Unit names and costs are currently hard coded.
+- Ensure referenced data is taken from the database. Unit names and costs are currently hard coded.
 - Would be cute to dynamically change the information based on the calculator filter. i.e. when making a build for Aru, we should use the Aru unit names in the help information instead of Q'Rath
+
+
+---
+
+The TutorialHelperComponent should change it's information based on the selected Immortal and Faction.
+
+Currently, it explains a hard coded example of a user playing as Q'Rath and Orzum, and making a Legion Hall, Apostle of Bindings, a Soul Foundry, and 3 Absolvers and a Zentari.
+
+Obviously, if the the filter has Aru selected for the faction, the user would be making a Ether Maw, Altar of the Worthy, God Heart Upgrade and a Amber Womb.
+
+For the units, if they have the Immortal of Mala or Atlzan selected, they would be making Masked Hunters. But if they had Xol selected, they would instead be making Bone Stalkers.
+
+For the units, if they have the Immortal of Atlzan selected, they would be making Resinants. But if they had Mala or Xol selected, they would instead be making Blood Anchors.
+
+If they have Q'Rath selected, things are as they are. But if they have Ajari selected as the Immortal, they build Sipari instead of Zentari.
+
+The calculations should be based on the Alloy and Ether costs from the database.
+
+These variables will be need to be used, and will be taken from hard coded values on the page that matches the associated filter combinations.
+
+Given the steps can be very different between filter combinations, the exact contents will also need to be changed based on the filters. Note the extra God Heart Upgrade step for Aru.
+
+This hard coded content will need to be regenerated a a later date to match information currently in the database. But do not worry about implementing that right now.
+
+
+
+
+---

docs/Make Tests for the Build Calculator.md

@@ -1,6 +1,6 @@
 ---
 type: Task
-status: AI Agent Work
+status: Done
 category:
 ---
 

docs/Top Borders in Calculator should change based on Selected Faction and Immortal.md

@@ -1,6 +1,6 @@
 ---
 type: Task
-status: Working On
+status: AI Agent Work
 category:
   - Feature
   - QA
@@ -10,4 +10,19 @@ category:
 - Top border on the Options component changes based on the selected Faction. Light-gray-blue for Q'Rath, Red for Aru.
 - Top border on Entity Click View component changes based on the selected Immortal. Ex. Grey-ish-Green for Xol, Green-red for Mala, Brown for Atzlan. Dark-grey-ish-blue for Orzum, Light-ish-blue for Ajari.
 
+---
 
+Make two new UI component to handle the border display changes based on events given by the FilterService.
+
+One will listen against events on the GetFaction changes, and one based on the GetImmortal changes.
+
+These new UI components will be layered on top of FormLayoutComponent. 
+
+The purpose is to change the top border colour based on events, to act as UI feedback.
+
+One component will cover the FilterComponent for changing the Faction, and one component will cover the EntityClickViewComponent for changing the Immortal.
+
+Goal is to accomplish:
+
+- Top border over the FilterComponent component changes based on the selected Faction. Light-gray-blue for Q'Rath, Red for Aru.
+- Top border on EntityClickViewComponent changes based on the selected Immortal. Ex. Grey-ish-Green for Xol, Green-red for Mala, Brown for Atzlan. Dark-grey-ish-blue for Orzum, Light-ish-blue for Ajari.

docs/_Tasks Kanban.base

@@ -45,11 +45,9 @@ views:
           - Jenkins CI.md
           - Improve your SEO.md
           - Create Mobile Calculator UI.md
-          - Top Borders in Calculator should change based on Selected Faction and Immortal.md
           - Army Display Split.md
           - Entity Click View Tests.md
           - Worker Income UI and Tests.md
-          - Changing Factions and Immortal should clear out build.md
           - Ensure build order gets greyed out past the attack time. Clicking the cancel button will wipe the entire greyed out timeline..md
           - Build Clear should clear out more stuff.md
           - Army Calc UI.md
@@ -57,7 +55,10 @@ views:
           - Input building delay should have an effect on when a building is built. Tests against 0, 2, 4, 60.md
           - More Wait Tests.md
           - Timeline Tests.md
-        Working On: []
+        Working On:
+          - Helper Tutorial Info Improvements.md
+          - Changing Factions and Immortal should clear out build.md
+          - Highest Alloy and Ether Tests.md
         Backlog:
           - Fully Test the Build Calculator.md
           - Add an Ability to Favourite Data.md
@@ -72,8 +73,7 @@ views:
           - Change Ctrl + K Hotkey to something that doesn't conflict with Edge or other browsers.md
           - Language Support.md
         AI Agent Work:
-          - Make Tests for the Build Calculator.md
+          - Top Borders in Calculator should change based on Selected Faction and Immortal.md
-          - Get AI to Add easy Test Tasks.md
         Blocked Backlog:
           - Nice looking map refrence.md
           - Auto Build consideration in Calculator.md