diff --git a/Scripts/Garden/Shop.js b/Scripts/Garden/Shop.js index ddf096a..49d8233 100644 --- a/Scripts/Garden/Shop.js +++ b/Scripts/Garden/Shop.js @@ -116,17 +116,6 @@ function CreateShopSeedCard( "span" ); - Number.className = - "ShopItemNumber"; - - Number.textContent = - "No. " + - String(Plant.Id).padStart( - 3, - "0" - ); - - const Name = document.createElement( "h3" @@ -137,7 +126,6 @@ function CreateShopSeedCard( Header.append( - Number, Name ); @@ -291,6 +279,15 @@ function CreateShopPlantVisual( "ShopPlantVisual"; + const ImageFrame = + document.createElement( + "div" + ); + + ImageFrame.className = + "ShopPlantImageFrame"; + + const PlantKey = GetPlantKeyById( Plant.Id @@ -316,32 +313,52 @@ function CreateShopPlantVisual( Missing.textContent = "No image"; - Visual.appendChild( + ImageFrame.appendChild( Missing ); + } else { + const Image = + document.createElement( + "img" + ); - return Visual; + Image.className = + "ShopPlantImage"; + + Image.src = + Images[ + Images.length - 1 + ]; + + Image.alt = + Plant.Name; + + ImageFrame.appendChild( + Image + ); } - const Image = + const Number = document.createElement( - "img" + "span" ); - Image.className = - "ShopPlantImage"; + Number.className = + "ShopItemNumber"; - Image.src = - Images[ - Images.length - 1 - ]; + Number.textContent = + String( + Plant.Id + ).padStart( + 3, + "0" + ); - Image.alt = - Plant.Name; - Visual.appendChild( - Image + Visual.append( + ImageFrame, + Number ); diff --git a/Styles/Style.css b/Styles/Style.css index 8511119..ad500d3 100644 --- a/Styles/Style.css +++ b/Styles/Style.css @@ -1201,13 +1201,11 @@ select { margin: 0; } -.ShopItemNumber { - color: var(--Overlay2); -} - .ShopItemBody { display: grid; - grid-template-columns: 5rem minmax(0, 1fr); + grid-template-columns: + 5.75rem + minmax(0, 1fr); gap: 0.75rem; align-items: start; @@ -1215,9 +1213,19 @@ select { .ShopPlantVisual { display: flex; + flex-direction: column; + gap: 0.35rem; - width: 5rem; - height: 5rem; + width: 5.75rem; + + align-items: center; +} + +.ShopPlantImageFrame { + display: flex; + + width: 5.75rem; + height: 5.75rem; align-items: center; justify-content: center; @@ -1238,6 +1246,14 @@ select { image-rendering: pixelated; } +.ShopItemNumber { + width: 100%; + + color: var(--Overlay2); + + text-align: center; +} + .ShopPlantMissing { padding: 0.35rem; @@ -1348,12 +1364,18 @@ select { } .ShopItemBody { - grid-template-columns: 4.5rem minmax(0, 1fr); + grid-template-columns: + 5.25rem + minmax(0, 1fr); } .ShopPlantVisual { - width: 4.5rem; - height: 4.5rem; + width: 5.25rem; + } + + .ShopPlantImageFrame { + width: 5.25rem; + height: 5.25rem; } }