Clean up and fix a bunch of UI stuff

Deftu · Deftu · commit 4192e9c9376e · 2025-11-13T17:28:57.000+02:00
diff --git a/src/main/kotlin/org/polyfrost/polyplus/client/gui/CartControls.kt b/src/main/kotlin/org/polyfrost/polyplus/client/gui/CartControls.kt
@@ -0,0 +1,62 @@
+package org.polyfrost.polyplus.client.gui
+
+import org.polyfrost.polyui.component.Drawable
+import org.polyfrost.polyui.component.extensions.events
+import org.polyfrost.polyui.component.extensions.named
+import org.polyfrost.polyui.component.extensions.setPalette
+import org.polyfrost.polyui.component.impl.Button
+import org.polyfrost.polyui.component.impl.Group
+import org.polyfrost.polyui.component.impl.Text
+import org.polyfrost.polyui.event.Event
+import org.polyfrost.polyui.event.State
+import org.polyfrost.polyui.unit.Align
+import org.polyfrost.polyui.unit.Vec2
+
+fun CartControls(count: State<Int>): Drawable {
+    var checkoutButton: Drawable? = null
+
+    val countListener = countListener@ { count: Int ->
+        var text = checkoutButton?.get(0)
+        if (text !is Text) {
+            text = checkoutButton?.get(1)
+        }
+
+        if (text == null) {
+            return@countListener false
+        }
+
+        (text as? Text)?.text = createCheckoutButtonText(count)
+        false
+    }
+
+    count.listen(countListener)
+    return Group(
+        Button(
+            text = "Cart",
+            radii = floatArrayOf(6f),
+            padding = Vec2(42.75f, 5.5f),
+            size = Vec2(146f, 32f)
+        ).named("CartButton"),
+        Button(
+            text = createCheckoutButtonText(count.value),
+            radii = floatArrayOf(6f),
+            padding = Vec2(75.5f, 5.5f),
+            size = Vec2(306f, 32f)
+        ).setPalette { brand.fg }.named("CheckoutButton").also { checkoutButton = it },
+        size = Vec2(465f, 32f),
+        alignment = Align(padBetween = Vec2(13f, 0f))
+    ).events {
+        Event.Lifetime.Removed then {
+            count.removeListener(countListener)
+            Unit
+        }
+    }.named("CartControls")
+}
+
+private fun createCheckoutButtonText(count: Int): String {
+    return if (count > 0) {
+        "Checkout $count items"
+    } else {
+        "Checkout"
+    }
+}
diff --git a/src/main/kotlin/org/polyfrost/polyplus/client/gui/CosmeticList.kt b/src/main/kotlin/org/polyfrost/polyplus/client/gui/CosmeticList.kt
@@ -0,0 +1,17 @@
+package org.polyfrost.polyplus.client.gui
+
+import org.polyfrost.polyui.component.Drawable
+import org.polyfrost.polyui.component.extensions.named
+import org.polyfrost.polyui.component.impl.Group
+import org.polyfrost.polyui.unit.Vec2
+
+private const val CARD_WIDTH = 180f
+private const val CARD_HEIGHT = 258f
+
+fun CosmeticList(size: Vec2): Drawable {
+    val columnCount = (size.x / CARD_WIDTH).toInt()
+    val rowCount = (size.y / CARD_HEIGHT).toInt()
+    return Group(
+        size = size,
+    ).named("CosmeticList")
+}
diff --git a/src/main/kotlin/org/polyfrost/polyplus/client/gui/FullscreenLockerUI.kt b/src/main/kotlin/org/polyfrost/polyplus/client/gui/FullscreenLockerUI.kt
@@ -5,6 +5,7 @@ import org.polyfrost.oneconfig.api.ui.v1.OCPolyUIBuilder
 import org.polyfrost.oneconfig.api.ui.v1.UIManager
 import org.polyfrost.polyplus.PolyPlusConstants
 import org.polyfrost.polyui.animate.SetAnimation
+import org.polyfrost.polyui.color.rgba
 import org.polyfrost.polyui.component.Drawable
 import org.polyfrost.polyui.component.extensions.disable
 import org.polyfrost.polyui.component.extensions.named
@@ -18,6 +19,7 @@ import org.polyfrost.polyui.component.impl.Group
 import org.polyfrost.polyui.component.impl.Image
 import org.polyfrost.polyui.component.impl.Text
 import org.polyfrost.polyui.component.impl.TextInput
+import org.polyfrost.polyui.event.State
 import org.polyfrost.polyui.unit.Align
 import org.polyfrost.polyui.unit.Vec2
 import org.polyfrost.polyui.utils.image
@@ -35,17 +37,20 @@ object FullscreenLockerUI {
         val builder = OCPolyUIBuilder.create()
             .blurs()
             .atResolution(DESIGNED_WIDTH, DESIGNED_HEIGHT)
-            .renderer(uiManager.renderer)
-            .translatorDelegate("assets/${PolyPlusConstants.ID}")
+            .backgroundColor(rgba(21, 21, 21))
+            .size(1499f, 1080f)
+            .translatorDelegate("assets/${PolyPlusConstants.ID}/lang")
+                as OCPolyUIBuilder
 
+        val cartCount = State(0)
         val polyUI = builder.make(
             Group(
                 // Header
                 Group(
                     // Left
                     Group(
                         // TODO: Implement navigation history
-                        Image("assets/oneconfig/ico/left-arrow.svg".image()).disable().onClick {
+                        Image("/assets/polyplus/ico/left-arrow.svg".image()).disable().onClick {
 //                            val prev = previous.removeLastOrNull() ?: return@onClick false
 //                            if (previous.isEmpty()) prevArrow?.disable()
 //                            val current = current
@@ -54,7 +59,7 @@ object FullscreenLockerUI {
 //                            nextArrow?.disable(false)
                             false
                         }.named("Back").bindTo(::backArrow),
-                        Image("assets/oneconfig/ico/right-arrow.svg".image()).disable().onClick {
+                        Image("/assets/polyplus/ico/right-arrow.svg".image()).disable().onClick {
 //                            val nextDrawable = next.removeLastOrNull() ?: return@onClick false
 //                            if (next.isEmpty()) nextArrow?.disable()
 //                            openPage(nextDrawable, clearNext = false)
@@ -66,43 +71,48 @@ object FullscreenLockerUI {
 
                     // Right
                     Block(
-                        Image("assets/oneconfig/ico/search.svg".image()).named("SearchIcon"),
+                        Image("/assets/polyplus/ico/search.svg".image()).named("SearchIcon"),
                         TextInput(
                             placeholder = "polyplus.search.placeholder",
-                            visibleSize = Vec2(256f, 32f)
+                            visibleSize = Vec2(210f, 12f)
                         ).onChange { text: String ->
                             // TODO: Filter cosmetics list based on search input
                             false
-                        }.named("SearchInput")
+                        }.named("SearchInput"),
+
+                        size = Vec2(256f, 32f),
+                        alignment = Align(pad = Vec2(10f, 7f))
                     ).onRightClick {
                         (this[1] as TextInput).text = ""
-                    }.withBorder(1f) { page.border5 }.named("SearchField")
+                    }.withBorder(1f) { page.border5 }.named("SearchField"),
+
+                    size = Vec2(1482f, 78f),
+                    alignment = Align(main = Align.Content.SpaceBetween, line = Align.Line.Center),
                 ),
 
                 // Content
                 Group(
                     // Cosmetic list
-                    Group(),
+                    CosmeticList(
+                        size = Vec2(972f, 802f),
+                    ),
 
                     // Sidebar
                     Group(
                         // Purchasing options
-                        Group(
-
-                        ),
+                        CartControls(cartCount),
 
                         // Player preview
-                        Group()
+                        PlayerPreview(),
                     ),
                 ),
 
                 size = Vec2(1499f, 1080f),
             ),
         )
 
-        val screen = uiManager.createPolyUIScreen(polyUI, DESIGNED_WIDTH, DESIGNED_HEIGHT, false, true) { }
         polyUI.window = uiManager.createWindow()
-        return screen
+        return uiManager.createPolyUIScreen(polyUI, DESIGNED_WIDTH, DESIGNED_HEIGHT, false, true) { }
     }
 
     private fun Drawable.bindTo(ref: KMutableProperty0<Drawable?>): Drawable {
diff --git a/src/main/kotlin/org/polyfrost/polyplus/client/gui/LockerUI.kt b/src/main/kotlin/org/polyfrost/polyplus/client/gui/LockerUI.kt
@@ -25,8 +25,8 @@ object LockerUI {
 private fun LockerPage(): Drawable {
     return Group(
         // Cosmetics List
-        Group(
-            visibleSize = Vec2(610f, 614f),
+        CosmeticList(
+            size = Vec2(610f, 614f),
         ),
 
         // Right sidebar
diff --git a/src/main/kotlin/org/polyfrost/polyplus/client/gui/PlayerPreview.kt b/src/main/kotlin/org/polyfrost/polyplus/client/gui/PlayerPreview.kt
@@ -0,0 +1,10 @@
+package org.polyfrost.polyplus.client.gui
+
+import org.polyfrost.polyui.component.Drawable
+import org.polyfrost.polyui.component.extensions.named
+import org.polyfrost.polyui.component.impl.Group
+
+fun PlayerPreview(): Drawable {
+    return Group(
+    ).named("PlayerPreview")
+}
diff --git a/src/main/resources/assets/polyplus/ico/left-arrow.svg b/src/main/resources/assets/polyplus/ico/left-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M15 9H3M3 9L7.5 13.5M3 9L7.5 4.5" stroke="#DFEAFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/main/resources/assets/polyplus/ico/right-arrow.svg b/src/main/resources/assets/polyplus/ico/right-arrow.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 9H15M15 9L10.5 4.5M15 9L10.5 13.5" stroke="#DFEAFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/main/resources/assets/polyplus/ico/search.svg b/src/main/resources/assets/polyplus/ico/search.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M14 14L11.1 11.1M12.6667 7.33333C12.6667 10.2789 10.2789 12.6667 7.33333 12.6667C4.38781 12.6667 2 10.2789 2 7.33333C2 4.38781 4.38781 2 7.33333 2C10.2789 2 12.6667 4.38781 12.6667 7.33333Z" stroke="#DFEAFF" stroke-opacity="0.75" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/src/main/resources/assets/polyplus/lang/en_default.lang b/src/main/resources/assets/polyplus/lang/en_default.lang
@@ -0,0 +1,2 @@
+polyplus.locker.title=Locker
+polyplus.search.placeholder=Search cosmetics...

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+polyplus.locker.title=Locker`
	`2`	`+polyplus.search.placeholder=Search cosmetics...`