diff --git a/Pages/Gardener.php b/Pages/Gardener.php index e3e3f8c..aef0061 100644 --- a/Pages/Gardener.php +++ b/Pages/Gardener.php @@ -86,50 +86,59 @@ $PageSection = "Social"; diff --git a/Scripts/Garden/Garden.js b/Scripts/Garden/Garden.js index 28ab03b..f770e46 100644 --- a/Scripts/Garden/Garden.js +++ b/Scripts/Garden/Garden.js @@ -216,109 +216,24 @@ async function SwitchGarden( function RenderGardenSelector() { - const PreviousButton = - document.getElementById( - "PreviousGardenButton" - ); - - const NextButton = - document.getElementById( - "NextGardenButton" - ); - - const NameInput = - document.getElementById( - "GardenNameInput" - ); - - if ( - PreviousButton === null || - NextButton === null || - NameInput === null - ) { - return; - } - - const GardenCount = - GameSave.Gardens.length; - - const GardenIndex = - GameSave.ActiveGardenIndex; - - const HasPreviousGarden = - GardenIndex > 0; - - const HasNextGarden = - GardenIndex < - GardenCount - 1; - - PreviousButton.disabled = - !HasPreviousGarden; - - NextButton.disabled = - !HasNextGarden; - - - PreviousButton.style.setProperty( - "--GardenSelectorBorderColour", - HasPreviousGarden - ? GetGardenBorderColour( - GardenIndex - 1 - ) - : "var(--Surface2)" - ); - - NameInput.style.setProperty( - "--GardenSelectorBorderColour", - GetGardenBorderColour( - GardenIndex - ) - ); - - NextButton.style.setProperty( - "--GardenSelectorBorderColour", - HasNextGarden - ? GetGardenBorderColour( - GardenIndex + 1 - ) - : "var(--Surface2)" - ); - - - PreviousButton.setAttribute( - "aria-label", - HasPreviousGarden - ? "Previous Garden: " + - GameSave.Gardens[ - GardenIndex - 1 - ].Name - : "No previous Garden" - ); - - NextButton.setAttribute( - "aria-label", - HasNextGarden - ? "Next Garden: " + - GameSave.Gardens[ - GardenIndex + 1 - ].Name - : "No next Garden" - ); - - - if ( - document.activeElement !== - NameInput - ) { - NameInput.value = - GameSave.Garden.Name; - } - - NameInput.title = - "Garden " + - (GardenIndex + 1) + - " of " + - GardenCount; + RenderGardenSelectorView({ + Gardens: GameSave.Gardens, + GardenIndex: + GameSave.ActiveGardenIndex, + PreviousButton: + document.getElementById( + "PreviousGardenButton" + ), + NameInput: + document.getElementById( + "GardenNameInput" + ), + NextButton: + document.getElementById( + "NextGardenButton" + ), + PreserveFocusedName: true + }); } diff --git a/Scripts/Garden/GardenView.js b/Scripts/Garden/GardenView.js index a7d77b1..e876dda 100644 --- a/Scripts/Garden/GardenView.js +++ b/Scripts/Garden/GardenView.js @@ -49,6 +49,117 @@ function GetGardenBorderColour( } + + +function RenderGardenSelectorView( + Options +) { + const Gardens = + Array.isArray(Options.Gardens) + ? Options.Gardens + : []; + + const GardenIndex = + Number(Options.GardenIndex) || 0; + + const PreviousButton = + Options.PreviousButton ?? null; + + const NextButton = + Options.NextButton ?? null; + + const NameInput = + Options.NameInput ?? null; + + if ( + PreviousButton === null || + NextButton === null || + NameInput === null || + Gardens.length === 0 + ) { + return; + } + + const HasPreviousGarden = + GardenIndex > 0; + + const HasNextGarden = + GardenIndex < + Gardens.length - 1; + + PreviousButton.disabled = + !HasPreviousGarden; + + NextButton.disabled = + !HasNextGarden; + + + PreviousButton.style.setProperty( + "--GardenSelectorBorderColour", + HasPreviousGarden + ? GetGardenBorderColour( + GardenIndex - 1 + ) + : "var(--Surface2)" + ); + + NameInput.style.setProperty( + "--GardenSelectorBorderColour", + GetGardenBorderColour( + GardenIndex + ) + ); + + NextButton.style.setProperty( + "--GardenSelectorBorderColour", + HasNextGarden + ? GetGardenBorderColour( + GardenIndex + 1 + ) + : "var(--Surface2)" + ); + + + PreviousButton.setAttribute( + "aria-label", + HasPreviousGarden + ? "Previous Garden: " + + Gardens[ + GardenIndex - 1 + ].Name + : "No previous Garden" + ); + + NextButton.setAttribute( + "aria-label", + HasNextGarden + ? "Next Garden: " + + Gardens[ + GardenIndex + 1 + ].Name + : "No next Garden" + ); + + + if ( + Options.PreserveFocusedName !== + true || + document.activeElement !== + NameInput + ) { + NameInput.value = + Gardens[GardenIndex] + ?.Name ?? "Garden"; + } + + NameInput.title = + "Garden " + + (GardenIndex + 1) + + " of " + + Gardens.length; +} + + function GetGardenPlotRotation( Plot ) { diff --git a/Scripts/Garden/Gardener.js b/Scripts/Garden/Gardener.js index 1d0a0bc..162fdd0 100644 --- a/Scripts/Garden/Gardener.js +++ b/Scripts/Garden/Gardener.js @@ -370,6 +370,10 @@ function RenderGardenerGardens() { Section.hidden = false; if (!Array.isArray(GardenerData.Gardens)) { + Section.classList.add( + "Panel" + ); + Section.replaceChildren( CreateGardenerPrivateSection( "Gardens", @@ -380,6 +384,10 @@ function RenderGardenerGardens() { return; } + Section.classList.remove( + "Panel" + ); + if (GardenerData.Gardens.length === 0) { const Message = document.getElementById( @@ -389,6 +397,7 @@ function RenderGardenerGardens() { if (Message !== null) { Message.textContent = "This gardener has no Gardens to preview."; + Message.hidden = false; } document.getElementById( @@ -417,17 +426,29 @@ function ChangeGardenerGarden( !Array.isArray( GardenerData?.Gardens ) || - GardenerData.Gardens.length <= 1 + GardenerData.Gardens.length === 0 + ) { + return; + } + + const NextIndex = Math.max( + 0, + Math.min( + GardenerData.Gardens.length - 1, + GardenerGardenIndex + + Difference + ) + ); + + if ( + NextIndex === + GardenerGardenIndex ) { return; } GardenerGardenIndex = - ( - GardenerGardenIndex + - Difference + - GardenerData.Gardens.length - ) % GardenerData.Gardens.length; + NextIndex; RenderCurrentGardenerGarden(); } @@ -447,39 +468,14 @@ function RenderCurrentGardenerGarden() { const Garden = Gardens[GardenerGardenIndex]; - const Section = - document.getElementById( - "GardenerGardensSection" - ); - const Grid = document.getElementById( "GardenerGardenGrid" ); - const Name = + const PlotsPanel = document.getElementById( - "GardenerGardenName" - ); - - const Size = - document.getElementById( - "GardenerGardenSize" - ); - - const Position = - document.getElementById( - "GardenerGardenPosition" - ); - - const PreviousButton = - document.getElementById( - "PreviousGardenerGardenButton" - ); - - const NextButton = - document.getElementById( - "NextGardenerGardenButton" + "GardenerPlots" ); const Message = @@ -487,11 +483,32 @@ function RenderCurrentGardenerGarden() { "GardenerGardensMessage" ); - if (Grid === null) { + if ( + Grid === null || + PlotsPanel === null + ) { return; } - Section?.style.setProperty( + RenderGardenSelectorView({ + Gardens, + GardenIndex: + GardenerGardenIndex, + PreviousButton: + document.getElementById( + "PreviousGardenerGardenButton" + ), + NameInput: + document.getElementById( + "GardenerGardenName" + ), + NextButton: + document.getElementById( + "NextGardenerGardenButton" + ) + }); + + PlotsPanel.style.setProperty( "--GardenBorderColour", GetGardenBorderColour( GardenerGardenIndex @@ -521,41 +538,9 @@ function RenderCurrentGardenerGarden() { ); } - if (Name !== null) { - Name.textContent = - Garden.Name ?? "Garden"; - } - - if (Size !== null) { - Size.textContent = - Number(Garden.Width) + - "×" + - Number(Garden.Height); - } - - if (Position !== null) { - Position.textContent = - (GardenerGardenIndex + 1) + - " / " + - Gardens.length; - } - - const HasMultiple = - Gardens.length > 1; - - if (PreviousButton !== null) { - PreviousButton.disabled = - !HasMultiple; - } - - if (NextButton !== null) { - NextButton.disabled = - !HasMultiple; - } - if (Message !== null) { - Message.textContent = - "Read-only Garden preview."; + Message.textContent = ""; + Message.hidden = true; } } @@ -616,7 +601,7 @@ function CreateGardenerGardenPlot( BorderProgress: Progress, DisplaySettings: { ShowPlantNames: true, - ShowGrowthTimers: true, + ShowGrowthTimers: false, ShowPlotRotation: false }, ImagePath, diff --git a/Styles/Style.css b/Styles/Style.css index 14eaa06..62d5d93 100644 --- a/Styles/Style.css +++ b/Styles/Style.css @@ -1738,39 +1738,6 @@ a.GardenerIdentity:hover .GardenerIdentityName { flex-basis: 7rem; } -.GardenerSectionHeader { - justify-content: space-between; -} - -.GardenerGardenControls { - display: grid; - grid-template-columns: minmax(7rem, auto) minmax(0, 1fr) minmax(7rem, auto); - gap: 0.75rem; - margin-bottom: 1rem; - align-items: center; -} - -.GardenerGardenTitle { - display: flex; - min-width: 0; - flex-direction: column; - gap: 0.2rem; - align-items: center; - text-align: center; -} - -.GardenerGardenTitle strong { - max-width: 100%; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -.GardenerGardenTitle span, -.GardenerSectionHeader span { - color: var(--Subtext1); -} - .GardenPlotReadOnly, .GardenPlotReadOnly:hover { cursor: default; @@ -1856,15 +1823,6 @@ a.GardenerIdentity:hover .GardenerIdentityName { flex-basis: 5.5rem; } - .GardenerGardenControls { - grid-template-columns: 1fr 1fr; - } - - .GardenerGardenTitle { - grid-column: 1 / -1; - grid-row: 1; - } - .GardenerCommentHeader { align-items: flex-start; flex-direction: column;