Focus View Grid layout and resizable components

Daybreak.Core/Configuration/Options/FocusViewOptions.cs

@@ -39,4 +39,33 @@ public sealed class FocusViewOptions
     [JsonPropertyName(nameof(EnergyDisplay))]
     [OptionName(Name = "Energy Display Mode", Description = "Sets how should the energy display show the information")]
     public PointsDisplay EnergyDisplay { get; set; }
+
+    [JsonPropertyName(nameof(GridColumns))]
+    [OptionName(Name = "Layout Grid Columns", Description = "Number of columns in the focus view layout grid")]
+    [OptionIgnore]
+    public int GridColumns { get; set; } = DefaultGridColumns;
+
+    [JsonPropertyName(nameof(GridRows))]
+    [OptionName(Name = "Layout Grid Rows", Description = "Number of rows in the focus view layout grid")]
+    [OptionIgnore]
+    public int GridRows { get; set; } = DefaultGridRows;
+
+    [JsonPropertyName(nameof(Layout))]
+    [OptionName(Name = "Layout", Description = "Tile-based layout of the focus view components")]
+    public List<FocusViewTile> Layout { get; set; } = DefaultLayout();
+
+    public const int DefaultGridColumns = 20;
+    public const int DefaultGridRows = 16;
+
+    public static List<FocusViewTile> DefaultLayout() =>
+    [
+        new() { Component = FocusViewComponent.Character, Column = 1, Row = 1, ColumnSpan = 10, RowSpan = 3 },
+        new() { Component = FocusViewComponent.PlayerResources, Column = 1, Row = 4, ColumnSpan = 10, RowSpan = 3 },
+        new() { Component = FocusViewComponent.Vanquish, Column = 1, Row = 7, ColumnSpan = 10, RowSpan = 1 },
+        new() { Component = FocusViewComponent.Title, Column = 1, Row = 8, ColumnSpan = 10, RowSpan = 1 },
+        new() { Component = FocusViewComponent.CurrentMap, Column = 1, Row = 9, ColumnSpan = 10, RowSpan = 1 },
+        new() { Component = FocusViewComponent.QuestLog, Column = 1, Row = 10, ColumnSpan = 10, RowSpan = 7 },
+        new() { Component = FocusViewComponent.Build, Column = 11, Row = 1, ColumnSpan = 10, RowSpan = 5 },
+        new() { Component = FocusViewComponent.Browser, Column = 11, Row = 6, ColumnSpan = 10, RowSpan = 11 },
+    ];
 }

Daybreak.Core/Views/Components/FocusView/TitleInformationComponent.razor

@@ -1,6 +1,23 @@
-@if (this.Context is not null)
-{
-    <div class="container backdrop-panel">
+<div class="container backdrop-panel">
+    @if (this.Context is null)
+    {
+        <SpinnerWidget IsLoading="true" />
+    }
+    else if (this.Context.Title is null)
+    {
+        <div class="title-track-container">
+            <div class="title-label">
+                Title Track
+            </div>
+        </div>
+        <div class="title-bar-container">
+            <div class="title-idle">
+                No active title
+            </div>
+        </div>
+    }
+    else
+    {
         <div class="title-track-container">
             <div class="title-label">
                 Title Track
@@ -18,8 +35,8 @@
                 </div>
             </div>
         </div>
-    </div>
-}
+    }
+</div>
 
 @code {
     [Parameter]
@@ -69,7 +86,7 @@
 
     private string GetTitleDescription()
     {
-        if (this.Context is null)
+        if (this.Context?.Title is null)
         {
             return string.Empty;
         }

Daybreak.Core/Views/Components/FocusView/TitleInformationComponent.razor.css

@@ -54,3 +54,15 @@
     color: var(--neutral-foreground-rest);
     z-index: 1;
 }
+
+.title-idle {
+    width: 100%;
+    height: var(--font-size-x-large);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--neutral-fill-rest);
+    border-radius: 0px 0px 8px 8px;
+    font-size: var(--font-size-medium);
+    color: var(--neutral-foreground-hint);
+}

Daybreak.Core/Views/Components/FocusView/VanquishComponent.razor

@@ -1,21 +1,34 @@
-@if (this.Context is not null &&
-     this.Context.HardMode &&
-     this.Context.Vanquishing)
-{
-    <div class="container backdrop-panel">
+<div class="container backdrop-panel">
+    @if (this.Context is null)
+    {
+        <SpinnerWidget IsLoading="true" />
+    }
+    else
+    {
         <div class="title">
             Vanquishing
         </div>
-        <div class="vanquish-bar-container">
-            <div class="vanquish-bar" @onclick="@(() => this.VanquishBarClicked())">
-                <div class="vanquish-bar-fill" style="@(this.GetVanquishBarWidth())"></div>
-                <div class="vanquish-bar-text">
-                    @this.GetVanquishBarText()
+        @if (this.Context.HardMode && this.Context.Vanquishing)
+        {
+            <div class="vanquish-bar-container">
+                <div class="vanquish-bar" @onclick="@(() => this.VanquishBarClicked())">
+                    <div class="vanquish-bar-fill" style="@(this.GetVanquishBarWidth())"></div>
+                    <div class="vanquish-bar-text">
+                        @this.GetVanquishBarText()
+                    </div>
                 </div>
             </div>
-        </div>
-    </div>
-}
+        }
+        else
+        {
+            <div class="vanquish-bar-container">
+                <div class="vanquish-idle">
+                    Not vanquishing
+                </div>
+            </div>
+        }
+    }
+</div>
 
 @code {
     [Parameter]
@@ -37,6 +50,11 @@
         }
 
         var totalFoes = this.Context.FoesToKill + this.Context.FoesKilled;
+        if (totalFoes is 0)
+        {
+            return "width: 0%;";
+        }
+
         return $"width: {this.Context.FoesKilled * 100d / totalFoes}%;";
     }
 

Daybreak.Core/Views/Components/FocusView/VanquishComponent.razor.css

@@ -40,3 +40,12 @@
     color: var(--neutral-foreground-rest);
     z-index: 1;
 }
+
+.vanquish-idle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: var(--font-size-medium);
+    color: var(--neutral-foreground-hint);
+}