Realignment of component(s), left side needs some work still

BareMinimumStudios · Jul 25, 2024 · 35a8393 · 35a8393
1 parent 9b4d4f7
commit 35a8393
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 14 deletions.
diff --git a/src/client/kotlin/com/bibireden/playerex/ui/components/labels/AttributeComponent.kt b/src/client/kotlin/com/bibireden/playerex/ui/components/labels/AttributeComponent.kt
@@ -12,6 +12,7 @@ import io.wispforest.owo.ui.component.Components
 import io.wispforest.owo.ui.component.LabelComponent
 import io.wispforest.owo.ui.container.Containers
 import io.wispforest.owo.ui.container.FlowLayout
+import io.wispforest.owo.ui.core.HorizontalAlignment
 import io.wispforest.owo.ui.core.Positioning
 import io.wispforest.owo.ui.core.Sizing
 import io.wispforest.owo.ui.core.VerticalAlignment
@@ -23,7 +24,7 @@ import net.minecraft.util.Formatting
 private val StackingBehavior.symbol: String
     get() = if (this == StackingBehavior.Add) "+" else "×"
 
-class AttributeComponent(val attribute: EntityAttribute, val player: PlayerEntity, component: IPlayerDataComponent) : FlowLayout(Sizing.fill(100), Sizing.fixed(18), Algorithm.HORIZONTAL) {
+class AttributeComponent(val attribute: EntityAttribute, val player: PlayerEntity, component: IPlayerDataComponent) : FlowLayout(Sizing.fill(35), Sizing.fixed(18), Algorithm.HORIZONTAL) {
     fun updateTooltip() {
         // todo: allow data_attributes to have API funcs for obtaining this data.
         val entries = DataAttributes.FUNCTIONS_CONFIG.functions.data[attribute.id]
@@ -54,18 +55,25 @@ class AttributeComponent(val attribute: EntityAttribute, val player: PlayerEntit
 
     init {
         this.child(
-            Components.label(Text.translatable(attribute.translationKey)).sizing(Sizing.content(), Sizing.fill(100))
-                .also { this.updateTooltip() }.id("${attribute.id}:label")
+            Components.label(Text.translatable(attribute.translationKey))
+                .verticalTextAlignment(VerticalAlignment.CENTER)
+                .sizing(Sizing.content(), Sizing.fill(100))
+                .also { this.updateTooltip() }
+                .id("${attribute.id}:label")
         )
         this.child(AttributeLabelComponent(attribute, player))
         this.child(
-            Containers.horizontalFlow(Sizing.fill(50), Sizing.fill(100)).also {
+            Containers.horizontalFlow(Sizing.content(), Sizing.fill(100)).also {
                 it.child(AttributeButtonComponent(attribute, player, component, AttributeButtonComponentType.Remove))
                 it.child(AttributeButtonComponent(attribute, player, component, AttributeButtonComponentType.Add))
                 it.child(Components.textBox(Sizing.fixed(27)).text("1").verticalSizing(Sizing.fixed(12)).id("entry:${attribute.id}"))
                 it.gap(4)
-            }.positioning(Positioning.relative(100, 0)).verticalAlignment(VerticalAlignment.CENTER)
+            }
+                .horizontalAlignment(HorizontalAlignment.RIGHT)
+                .verticalAlignment(VerticalAlignment.CENTER)
+                .positioning(Positioning.relative(100, 0))
         )
         this.gap(3)
+        this.verticalAlignment(VerticalAlignment.CENTER)
     }
 }
diff --git a/src/client/kotlin/com/bibireden/playerex/ui/components/labels/AttributeLabelComponent.kt b/src/client/kotlin/com/bibireden/playerex/ui/components/labels/AttributeLabelComponent.kt
@@ -4,6 +4,8 @@ import com.bibireden.data_attributes.api.DataAttributesAPI
 import com.bibireden.data_attributes.api.attribute.IEntityAttribute
 import com.bibireden.playerex.ext.id
 import io.wispforest.owo.ui.component.LabelComponent
+import io.wispforest.owo.ui.core.Sizing
+import io.wispforest.owo.ui.core.VerticalAlignment
 import net.minecraft.entity.attribute.EntityAttribute
 import net.minecraft.entity.player.PlayerEntity
 import net.minecraft.text.Text
@@ -15,7 +17,9 @@ private fun createTextFromAttribute(attribute: EntityAttribute, player: PlayerEn
 
 class AttributeLabelComponent(private val attribute: EntityAttribute, private val player: PlayerEntity) : LabelComponent(createTextFromAttribute(attribute, player)) {
     init {
-        this.id("${attribute.id}:current_level")
+        id("${attribute.id}:current_level")
+        verticalSizing(Sizing.fill(100))
+        verticalTextAlignment(VerticalAlignment.CENTER)
     }
 
     fun update(): LabelComponent = text(createTextFromAttribute(attribute, player))

diff --git a/src/client/kotlin/com/bibireden/playerex/ui/menus/AttributeMenu.kt b/src/client/kotlin/com/bibireden/playerex/ui/menus/AttributeMenu.kt
@@ -15,7 +15,7 @@ import net.minecraft.client.network.ClientPlayerEntity
 import net.minecraft.registry.Registries
 import net.minecraft.text.Text
 
-class AttributeMenu : MenuComponent(Sizing.fill(75), Sizing.content(), Algorithm.VERTICAL) {
+class AttributeMenu : MenuComponent(Sizing.fill(100), Sizing.fill(100), Algorithm.VERTICAL) {
     private fun onLevelUpdate(level: Int) {}
 
     /** Whenever ANY attribute gets updated. */
@@ -28,7 +28,7 @@ class AttributeMenu : MenuComponent(Sizing.fill(75), Sizing.content(), Algorithm
 
     override fun build(player: ClientPlayerEntity, adapter: OwoUIAdapter<FlowLayout>, component: IPlayerDataComponent) {
         child(Components.label(Text.translatable("playerex.ui.category.primary_attributes")))
-        child(Components.box(Sizing.fill(60), Sizing.fixed(2)))
+        child(Components.box(Sizing.fill(35), Sizing.fixed(2)))
         gap(5)
         children(PlayerEXAttributes.PRIMARY_ATTRIBUTE_IDS.mapNotNull(Registries.ATTRIBUTE::get).map { AttributeComponent(it, player, component) })
         positioning(Positioning.relative(10, 25))

diff --git a/src/client/resources/assets/playerex/owo_ui/main_ui_model.xml b/src/client/resources/assets/playerex/owo_ui/main_ui_model.xml
@@ -14,7 +14,7 @@
                                     <text translate="true">playerex.ui.main.title</text>
                                     <vertical-text-alignment>center</vertical-text-alignment>
                                     <sizing>
-                                        <horizontal method="fill">25</horizontal>
+                                        <horizontal method="fill">30</horizontal>
                                         <vertical method="fill">25</vertical>
                                     </sizing>
                                     <positioning type="relative">0,50</positioning>
@@ -44,7 +44,7 @@
                                     <children>
 
                                         <button id="previous">
-                                            <text>⬅</text>
+                                            <text>⮜</text>
                                             <tooltip-text>Go to the previous page.</tooltip-text>
 
                                             <renderer><flat color="black" hovered-color="dark-aqua" disabled-color="dark-red"/></renderer>
@@ -55,17 +55,16 @@
                                         </label>
 
                                         <button id="next">
-                                            <text>➡</text>
+                                            <text>⮞</text>
                                             <tooltip-text>Advance to the next page.</tooltip-text>
-
                                             <renderer><flat color="black" hovered-color="dark-aqua" disabled-color="dark-red"/></renderer>
                                         </button>
 
                                         <button id="exit">
                                             <text translate="true">playerex.ui.main.exit</text>
                                             <tooltip-text translate="true">playerex.ui.main.exit.tooltip</tooltip-text>
 
-                                            <sizing><vertical method="fill">60</vertical><horizontal method="fill">4</horizontal></sizing>
+                                            <sizing><vertical method="fill">100</vertical><horizontal method="content">4</horizontal></sizing>
                                             <renderer><flat color="black" hovered-color="dark-red" disabled-color="red"/></renderer>
                                         </button>
                                     </children>
@@ -99,7 +98,9 @@
                         <!-- footer -->
                         <flow-layout direction="horizontal" id="footer">
                             <children>
-                                <label id="level:current"/>
+                                <label id="level:current">
+                                    <margins><vertical>1</vertical></margins>
+                                </label>
                                 <text-box id="level:amount">
                                     <text>1</text>