upd: shop ui style

6 files changed, 132 insertions, 49 deletions

diff --git a/assets/sprites/gui/ui.atlas b/assets/sprites/gui/ui.atlas
index 9ed7174..0017372 100644
--- a/assets/sprites/gui/ui.atlas
+++ b/assets/sprites/gui/ui.atlas
@@ -2,12 +2,16 @@ ui.png
 size:64,64
 repeat:none
 idle
-bounds:0,1,32,36
+bounds:0,28,32,36
 split:7,7,7,11
 pad:7,7,7,11
 pressed
-bounds:32,5,32,32
+bounds:32,32,32,32
 split:7,7,7,7
 pad:7,7,7,7
+square
+bounds:32,0,32,32
+split:4,4,4,4
+pad:4,4,4,4
 tile
-bounds:0,0,1,1
+bounds:0,27,1,1
diff --git a/assets/sprites/gui/ui.png b/assets/sprites/gui/ui.png
index 8037376..6deca83 100644
--- a/assets/sprites/gui/ui.png
+++ b/assets/sprites/gui/ui.png
diff --git a/assets/sprites/gui/ui.skin b/assets/sprites/gui/ui.skin
index 344df4a..e73ff8d 100644
--- a/assets/sprites/gui/ui.skin
+++ b/assets/sprites/gui/ui.skin
@@ -1,6 +1,11 @@
 {
   Color: {
-    white: { hex: "#ffffffff" }
+    white: { hex: "#ffffffff" },
+    store_item: { hex: "#bbbbbbff" },
+    store_item_hover: { hex: "#ffffffff" },
+    store_item_disabled: { hex: "#888888ff" },
+    store_item_price_available: { hex: "#00ff00ff" },
+    store_item_price_disabled: { hex: "#ff0000ff" }
   },
   TintedDrawable: {
     button_pressed: { color: { hex: "#ad6235ff" }, name: pressed },
@@ -9,29 +14,73 @@
     button_disabled: { color: { hex: "#1f1f1fff" }, name: pressed },
     bg: { color: { hex: "#1f1f1fff" }, name: pressed },
 
-    white_tile: { color: white, name: tile }
+    white_tile: { color: white, name: tile },
+
+    // Store
+    store: { color: { hex: "#59413aff" }, name: square },
+    store_control: { color: { hex: "#47312cff" }, name: tile },
+    store_list: { color: { hex: "#30221eff" }, name: tile },
+    store_item: { color: { hex: "#402d28ff" }, name: tile },
+    store_item_hover: { color: { hex: "#4b352fff" }, name: tile },
+    store_item_disabled: { color: { hex: "#30221eff" }, name: tile }
   },
   // TODO: Test this file path on Android platform
   com.badlogic.gdx.graphics.g2d.BitmapFont: {
     default: {
       file: ../../fnt/FontText.fnt,
       scaledSize: 24
+    },
+    store_item_name: {
+      file: ../../fnt/FontText.fnt,
+      scaledSize: 19
+    },
+    store_item_price: {
+      file: ../../fnt/FontText.fnt,
+      scaledSize: 18
+    },
+    store_control: {
+      file: ../../fnt/FontText.fnt,
+      scaledSize: 18
     }
   },
   com.badlogic.gdx.scenes.scene2d.ui.TextButton$TextButtonStyle: {
     default: {
       font: default,
-      fontColor: white,
+      fontColor: { hex: "#763b29ff" },
       up: button_idle,
       down: button_pressed,
       over: button_hover,
-      disabled: button_disabled
+      disabled: button_disabled,
+    },
+    store_control: {
+      parent: default,
+      font: store_control
     }
   },
   com.badlogic.gdx.scenes.scene2d.ui.Label$LabelStyle: {
     default: {
       font: default,
-      fontColor: { hex: "#ffffffff" }
+      fontColor: white
+    },
+    store_item: {
+      font: store_item_name,
+      fontColor: store_item
+    },
+    store_item_hover: {
+      font: store_item_name,
+      fontColor: store_item_hover
+    },
+    store_item_disabled: {
+      font: store_item_name,
+      fontColor: store_item_disabled
+    },
+    store_item_price: {
+      font: store_item_price,
+      fontColor: store_item_price_available
+    },
+    store_item_price_disabled: {
+      font: store_item_price,
+      fontColor: store_item_price_disabled
     }
   },
   com.badlogic.gdx.scenes.scene2d.ui.TextField$TextFieldStyle: {
diff --git a/core/src/kz/ilotterytea/maxon/screens/GameScreen.java b/core/src/kz/ilotterytea/maxon/screens/GameScreen.java
index a6dcace..126bde7 100644
--- a/core/src/kz/ilotterytea/maxon/screens/GameScreen.java
+++ b/core/src/kz/ilotterytea/maxon/screens/GameScreen.java
@@ -55,7 +55,7 @@ public class GameScreen implements Screen, InputProcessor {
     MaxonSavegame player;
 
     Stage stage;
-    Skin skin;
+    private Skin skin, uiSkin;
 
     TextureAtlas mainAtlas;
 
@@ -341,7 +341,8 @@ public class GameScreen implements Screen, InputProcessor {
         for (final MaxonItem item : MaxonItemRegister.getItems()) {
             PurchaseItem p_item = new PurchaseItem(
                     skin,
-                    item
+                    item,
+                    mainAtlas
             );
 
             p_item.addListener(new ClickListener() {
@@ -553,7 +554,9 @@ public class GameScreen implements Screen, InputProcessor {
         this.skin = this.game.assetManager.get("MainSpritesheet.skin", Skin.class);
         this.mainAtlas = this.game.assetManager.get("MainSpritesheet.atlas", TextureAtlas.class);
 
-        this.shopUI = new ShopUI(savegame, this.stage, this.skin, this.mainAtlas);
+        this.uiSkin = this.game.assetManager.get("sprites/gui/ui.skin", Skin.class);
+
+        this.shopUI = new ShopUI(savegame, this.stage, this.uiSkin, this.mainAtlas);
 
         shopUI.createShopTitleUI();
         shopUI.createShopControlUI();
diff --git a/core/src/kz/ilotterytea/maxon/screens/game/shop/ShopUI.java b/core/src/kz/ilotterytea/maxon/screens/game/shop/ShopUI.java
index cf40ebf..43b66c8 100644
--- a/core/src/kz/ilotterytea/maxon/screens/game/shop/ShopUI.java
+++ b/core/src/kz/ilotterytea/maxon/screens/game/shop/ShopUI.java
@@ -11,6 +11,7 @@ import kz.ilotterytea.maxon.player.MaxonItem;
 import kz.ilotterytea.maxon.player.MaxonItemRegister;
 import kz.ilotterytea.maxon.player.MaxonSavegame;
 import kz.ilotterytea.maxon.ui.PurchaseItem;
+import kz.ilotterytea.maxon.utils.formatters.NumberFormatter;
 import kz.ilotterytea.maxon.utils.math.Math;
 
 import java.util.ArrayList;
@@ -39,7 +40,7 @@ public class ShopUI {
         this.items = MaxonItemRegister.getItems();
 
         this.table = new Table(skin);
-        this.table.setBackground("board");
+        this.table.setBackground("store");
 
         this.mainTable = new Table(this.skin);
         mainTable.setFillParent(true);
@@ -57,25 +58,29 @@ public class ShopUI {
 
         // Setting up the points
         Table pointsTable = new Table();
+        pointsTable.align(Align.left);
 
         Image pointsImage = new Image(this.atlas.findRegion("points"));
         this.pointsLabel = new Label(String.valueOf(savegame.points), this.skin);
+        pointsLabel.setAlignment(Align.left);
 
-        pointsTable.add(pointsImage);
-        pointsTable.add(pointsLabel).padLeft(15f);
+        pointsTable.add(pointsImage).size(64f, 64f).padRight(15f);
+        pointsTable.add(pointsLabel).grow();
 
-        table.add(pointsTable).padBottom(10f).row();
+        table.add(pointsTable).grow().padBottom(5f).row();
 
         // Setting up the multiplier
         Table multiplierTable = new Table();
+        multiplierTable.align(Align.left);
 
         Image multiplierImage = new Image(this.atlas.findRegion("multiplier"));
         this.multiplierLabel = new Label(String.format("%s/s", savegame.multiplier), this.skin);
+        multiplierLabel.setAlignment(Align.left);
 
-        multiplierTable.add(multiplierImage);
-        multiplierTable.add(multiplierLabel).padLeft(15f);
+        multiplierTable.add(multiplierImage).size(64f, 64f).padRight(15f);
+        multiplierTable.add(multiplierLabel).grow();
 
-        table.add(multiplierTable);
+        table.add(multiplierTable).grow();
 
         this.table.add(table).grow();
     }
@@ -83,15 +88,16 @@ public class ShopUI {
     public void createShopTitleUI() {
         Table table = new Table();
 
-        Label label = new Label("Store", skin, "store_title");
+        Label label = new Label("Store", skin);
         label.setAlignment(Align.center);
-        table.add(label).padTop(10f).grow();
+        table.add(label).pad(10f).grow();
 
         this.table.add(table).growX().row();
     }
 
     public void createShopControlUI() {
         Table table = new Table(this.skin);
+        table.setBackground("store_control");
 
         table.align(Align.center);
         table.pad(10f);
@@ -99,11 +105,11 @@ public class ShopUI {
         // Mode changer
         Table modeTable = new Table();
 
-        TextButton buyButton = new TextButton("Buy", this.skin);
+        TextButton buyButton = new TextButton("Buy", this.skin, "store_control");
         buyButton.setDisabled(true);
-        modeTable.add(buyButton).growX().row();
+        modeTable.add(buyButton).padBottom(5f).growX().row();
 
-        TextButton sellButton = new TextButton("Sell", this.skin);
+        TextButton sellButton = new TextButton("Sell", this.skin, "store_control");
         modeTable.add(sellButton).growX();
 
         sellButton.addListener(new ClickListener() {
@@ -126,16 +132,17 @@ public class ShopUI {
             }
         });
 
-        table.add(modeTable).grow();
+        table.add(modeTable).padRight(5f).grow();
 
         // Multiplier changer
         Table multiplierTable = new Table();
+        multiplierTable.align(Align.left);
 
-        TextButton x1Button = new TextButton("1x", this.skin);
+        TextButton x1Button = new TextButton("1x", this.skin, "store_control");
         x1Button.setDisabled(true);
         multiplierTable.add(x1Button).width(64f).height(64f).padRight(10f);
 
-        TextButton x10Button = new TextButton("10x", this.skin);
+        TextButton x10Button = new TextButton("10x", this.skin, "store_control");
         multiplierTable.add(x10Button).width(64f).height(64f);
 
         x1Button.addListener(new ClickListener() {
@@ -165,10 +172,9 @@ public class ShopUI {
 
     public void createShopListUI() {
         Table table = new Table(this.skin);
-        table.setBackground("shop_list");
 
         for (final MaxonItem item : this.items) {
-            PurchaseItem purchaseItem = new PurchaseItem(this.skin, item);
+            PurchaseItem purchaseItem = new PurchaseItem(this.skin, item, this.atlas);
             purchaseItem.addListener(new ClickListener() {
                 @Override
                 public void clicked(InputEvent event, float x, float y) {
@@ -200,8 +206,8 @@ public class ShopUI {
         scrollPane.setScrollingDisabled(true, false);
 
         Table scrollPaneTable = new Table(this.skin);
-        scrollPaneTable.setBackground("shop_list");
-        scrollPaneTable.pad(1f, 5f, 1f, 5f);
+        scrollPaneTable.setBackground("store_list");
+        scrollPaneTable.pad(4f, 0f, 4f, 0f);
         scrollPaneTable.add(scrollPane).grow();
 
         this.table.add(scrollPaneTable).grow().row();
@@ -235,8 +241,8 @@ public class ShopUI {
     }
 
     public void render() {
-        this.pointsLabel.setText(String.valueOf(savegame.points));
-        this.multiplierLabel.setText(String.format("%s/s", savegame.multiplier));
+        this.pointsLabel.setText(NumberFormatter.format(savegame.points));
+        this.multiplierLabel.setText(String.format("%s/s", NumberFormatter.format(savegame.multiplier)));
         updatePurchaseItems();
     }
 
diff --git a/core/src/kz/ilotterytea/maxon/ui/PurchaseItem.java b/core/src/kz/ilotterytea/maxon/ui/PurchaseItem.java
index 5ef7ab6..e9c69ef 100644
--- a/core/src/kz/ilotterytea/maxon/ui/PurchaseItem.java
+++ b/core/src/kz/ilotterytea/maxon/ui/PurchaseItem.java
@@ -1,60 +1,79 @@
 package kz.ilotterytea.maxon.ui;
 
+import com.badlogic.gdx.graphics.g2d.TextureAtlas;
 import com.badlogic.gdx.scenes.scene2d.Actor;
 import com.badlogic.gdx.scenes.scene2d.InputEvent;
 import com.badlogic.gdx.scenes.scene2d.ui.*;
 import com.badlogic.gdx.scenes.scene2d.utils.ClickListener;
 import com.badlogic.gdx.utils.Align;
-import kz.ilotterytea.maxon.MaxonConstants;
 import kz.ilotterytea.maxon.player.MaxonItem;
+import kz.ilotterytea.maxon.utils.formatters.NumberFormatter;
 
 public class PurchaseItem extends Table {
     private double price;
-    private final Label priceLabel;
+    private final Label priceLabel, nameLabel;
     private final MaxonItem item;
 
     private boolean isDisabled = false;
 
+    private final Label.LabelStyle idleStyle, hoverStyle, disabledStyle, availablePriceStyle, disabledPriceStyle;
+
     public PurchaseItem(
             Skin skin,
-            MaxonItem item
+            MaxonItem item,
+            TextureAtlas atlas
     ) {
         super(skin);
-        super.setBackground("shop_item");
+        super.setBackground("store_item");
         super.align(Align.left | Align.center);
 
         super.add(item.icon).size(64f).pad(6f);
 
+        this.idleStyle = skin.get("store_item", Label.LabelStyle.class);
+        this.hoverStyle = skin.get("store_item_hover", Label.LabelStyle.class);
+        this.disabledStyle = skin.get("store_item_disabled", Label.LabelStyle.class);
+        this.availablePriceStyle = skin.get("store_item_price", Label.LabelStyle.class);
+        this.disabledPriceStyle = skin.get("store_item_price_disabled", Label.LabelStyle.class);
+
         this.price = item.price;
         this.item = item;
 
-        Table summary = new Table();
-        summary.align(Align.topLeft);
+        Table summary = new Table(skin);
+        summary.align(Align.left);
+
+        this.nameLabel = new Label(item.name, skin, "store_item");
+        nameLabel.setAlignment(Align.left);
+
+        Image priceIcon = new Image(atlas.findRegion("points"));
 
-        Label name = new Label(item.name, skin, "item_title");
-        name.setAlignment(Align.left);
+        this.priceLabel = new Label(NumberFormatter.format((long) price), skin, "store_item_price");
+        priceLabel.setAlignment(Align.left);
 
-        this.priceLabel = new Label(String.format("%s SQP (%s/click)", MaxonConstants.DECIMAL_FORMAT.format(price), MaxonConstants.DECIMAL_FORMAT.format(item.multiplier)), skin, "item_price");
-        this.priceLabel.setAlignment(Align.left);
+        summary.add(nameLabel).align(Align.left).grow().row();
 
-        summary.add(name).align(Align.left).row();
-        summary.add(this.priceLabel).grow();
+        Table priceTable = new Table();
+        priceTable.align(Align.left);
+        priceTable.add(priceIcon).size(16f, 16f).padRight(5f);
+        priceTable.add(priceLabel).grow();
+        summary.add(priceTable).grow();
 
-        super.add(summary).grow();
+        super.add(summary).align(Align.left).grow();
 
         super.addListener(new ClickListener() {
             @Override
             public void enter(InputEvent event, float x, float y, int pointer, Actor fromActor) {
                 super.enter(event, x, y, pointer, fromActor);
                 if (!isDisabled) {
-                    PurchaseItem.super.setBackground("shop_item_hover");
+                    nameLabel.setStyle(hoverStyle);
+                    PurchaseItem.super.setBackground("store_item_hover");
                 }
             }
             @Override
             public void exit(InputEvent event, float x, float y, int pointer, Actor toActor) {
                 super.exit(event, x, y, pointer, toActor);
                 if (!isDisabled) {
-                    PurchaseItem.super.setBackground("shop_item");
+                    nameLabel.setStyle(idleStyle);
+                    PurchaseItem.super.setBackground("store_item");
                 }
             }
         });
@@ -62,7 +81,7 @@ public class PurchaseItem extends Table {
 
     public void setPrice(double price) {
         this.price = price;
-        this.priceLabel.setText(String.format("%s SQP (%s/click)", MaxonConstants.DECIMAL_FORMAT.format(price), MaxonConstants.DECIMAL_FORMAT.format(item.multiplier)));
+        this.priceLabel.setText(NumberFormatter.format((long) price));
     }
 
     public double getPrice() {
@@ -76,7 +95,9 @@ public class PurchaseItem extends Table {
     public void setDisabled(boolean disabled) {
         isDisabled = disabled;
 
-        super.setBackground(isDisabled ? "bg" : "shop_item");
+        priceLabel.setStyle(isDisabled ? disabledPriceStyle : availablePriceStyle);
+        nameLabel.setStyle(isDisabled ? disabledStyle : idleStyle);
+        super.setBackground(isDisabled ? "store_item_disabled" : "store_item");
     }
 
     public MaxonItem getItem() {