Show theme name and price, add smaller font

core/src/io/github/lonamiwebs/klooni/Klooni.java

@@ -51,6 +51,7 @@ public class Klooni extends Game {
         skin.add("back_texture", new Texture(Gdx.files.internal("ui/back.png")));
 
         skin.add("font", new BitmapFont(Gdx.files.internal("font/geosans-light.fnt")));
+        skin.add("font_small", new BitmapFont(Gdx.files.internal("font/geosans-light32.fnt")));
 
         // Use only one instance for the theme, so anyone using it uses the most up-to-date
         Theme.skin = skin; // Not the best idea
@@ -102,6 +103,18 @@ public class Klooni extends Game {
         prefs.putBoolean("muteSound", soundsEnabled()).flush();
     }
 
+    public static boolean isThemeBought(Theme theme) {
+        if (theme.getPrice() == 0)
+            return true;
+
+        String[] themes = prefs.getString("boughtThemes", "").split(":");
+        for (String t : themes)
+            if (t.equals(theme.getName()))
+                return true;
+
+        return false;
+    }
+
     public static void updateTheme(Theme newTheme) {
         prefs.putString("themeName", newTheme.getName()).flush();
         theme.update(newTheme.getName());

core/src/io/github/lonamiwebs/klooni/Theme.java

@@ -120,6 +120,14 @@ public class Theme {
         return name;
     }
 
+    public String getDisplay() {
+        return displayName;
+    }
+
+    public int getPrice() {
+        return price;
+    }
+
     public ImageButton.ImageButtonStyle getStyle(int button) {
         return buttonStyles[button];
     }

core/src/io/github/lonamiwebs/klooni/actors/ThemeCard.java

@@ -4,8 +4,11 @@ import com.badlogic.gdx.graphics.Color;
 import com.badlogic.gdx.graphics.Pixmap;
 import com.badlogic.gdx.graphics.Texture;
 import com.badlogic.gdx.graphics.g2d.Batch;
+import com.badlogic.gdx.math.Rectangle;
 import com.badlogic.gdx.scenes.scene2d.Actor;
+import com.badlogic.gdx.scenes.scene2d.ui.Label;
 
+import io.github.lonamiwebs.klooni.Klooni;
 import io.github.lonamiwebs.klooni.Theme;
 import io.github.lonamiwebs.klooni.game.Cell;
 import io.github.lonamiwebs.klooni.game.GameLayout;
@@ -18,11 +21,27 @@ public class ThemeCard extends Actor {
     public final Theme theme;
     private final Texture background;
 
+    private final Label nameLabel;
+    private final Label priceLabel;
+
+    public final Rectangle nameBounds;
+    public final Rectangle priceBounds;
+
+    public float cellSize;
+
+    //endregion
+
+    //region Static members
+
+    private final static double BRIGHTNESS_CUTOFF = 0.5;
+
     //endregion
 
     //region Constructor
 
-    public ThemeCard(final GameLayout layout, final Theme theme) {
+    public ThemeCard(final Klooni game, final GameLayout layout, final Theme theme) {
+        this.theme = theme;
+
         // A 1x1 pixel map will be enough, the background texture will then be stretched accordingly
         // TODO We could also use white color and then batch.setColor(theme.background)
         Pixmap pixmap = new Pixmap(1, 1, Pixmap.Format.RGBA8888);
@@ -31,8 +50,21 @@ public class ThemeCard extends Actor {
         background = new Texture(pixmap);
         pixmap.dispose();
 
-        this.theme = theme;
+        Label.LabelStyle labelStyle = new Label.LabelStyle();
+        labelStyle.font = game.skin.getFont("font_small");
+
+        priceLabel = new Label("", labelStyle);
+        nameLabel = new Label(theme.getDisplay(), labelStyle);
+
+        Color labelColor = shouldUseWhite(theme.background) ? Color.WHITE : Color.BLACK;
+        priceLabel.setColor(labelColor);
+        nameLabel.setColor(labelColor);
+
+        priceBounds = new Rectangle();
+        nameBounds = new Rectangle();
+
         layout.update(this);
+        usedThemeUpdated();
     }
 
     //endregion
@@ -45,12 +77,10 @@ public class ThemeCard extends Actor {
 
         batch.setColor(Color.WHITE);
         batch.draw(background, x, y, getWidth(), getHeight());
-        // Consider 5 cells on the available size (1/5 height each)
+        // Do not draw on the borders (0,0 offset to add some padding), colors used:
-        // Do not draw on the borders to add some padding, colors used:
         // 0 7 7
         // 8 7 3
         // 8 8 3
-        float cellSize = getHeight() * 0.2f;
         Cell.draw(theme.getCellColor(0), batch, x + cellSize, y + cellSize, cellSize);
         Cell.draw(theme.getCellColor(7), batch, x + cellSize * 2, y + cellSize, cellSize);
         Cell.draw(theme.getCellColor(7), batch, x + cellSize * 3, y + cellSize, cellSize);
@@ -62,6 +92,32 @@ public class ThemeCard extends Actor {
         Cell.draw(theme.getCellColor(8), batch, x + cellSize, y + cellSize * 3, cellSize);
         Cell.draw(theme.getCellColor(8), batch, x + cellSize * 2, y + cellSize * 3, cellSize);
         Cell.draw(theme.getCellColor(3), batch, x + cellSize * 3, y + cellSize * 3, cellSize);
+
+        nameLabel.setBounds(x + nameBounds.x, y + nameBounds.y, nameBounds.width, nameBounds.height);
+        nameLabel.draw(batch, parentAlpha);
+
+        priceLabel.setBounds(x + priceBounds.x, y + priceBounds.y, priceBounds.width, priceBounds.height);
+        priceLabel.draw(batch, parentAlpha);
+    }
+
+    public void usedThemeUpdated() {
+        if (Klooni.theme.getName().equals(theme.getName()))
+            priceLabel.setText("currently used");
+        else if (Klooni.isThemeBought(theme))
+            priceLabel.setText("bought");
+        else
+            priceLabel.setText("buy for "+theme.getPrice());
+    }
+
+    // Used to determine the best foreground color (black or white) given a background color
+    // Formula took from http://alienryderflex.com/hsp.html
+    private static boolean shouldUseWhite(Color color) {
+        double brightness = Math.sqrt(
+                color.r * color.r * .299 +
+                        color.g * color.g * .587 +
+                        color.b * color.b * .114);
+
+        return brightness < BRIGHTNESS_CUTOFF;
     }
 
     //endregion

core/src/io/github/lonamiwebs/klooni/game/GameLayout.java

@@ -16,7 +16,7 @@ public class GameLayout {
     //region Members
 
     private float screenWidth, marginWidth, availableWidth;
-    private float scoreHeight, boardHeight, pieceHolderHeight;
+    private float scoreHeight, boardHeight, pieceHolderHeight, themeCardHeight;
 
     //endregion
 
@@ -43,6 +43,8 @@ public class GameLayout {
         scoreHeight = screenHeight * 0.15f;
         boardHeight = screenHeight * 0.50f;
         pieceHolderHeight = screenHeight * 0.25f;
+
+        themeCardHeight = screenHeight * 0.15f;
     }
 
     //endregion
@@ -107,7 +109,17 @@ public class GameLayout {
     }
 
     public void update(ThemeCard card) {
-        card.setSize(availableWidth - marginWidth, scoreHeight);
+        card.setSize(availableWidth - marginWidth, themeCardHeight);
+        card.cellSize = themeCardHeight * 0.2f;
+
+        // X offset from the cells (5 cells = themeCardHeight)
+        card.nameBounds.set(
+                themeCardHeight, card.cellSize,
+                availableWidth - themeCardHeight, themeCardHeight);
+
+        card.priceBounds.set(
+                themeCardHeight, -card.cellSize,
+                availableWidth - themeCardHeight, themeCardHeight);
     }
 
     //endregion

core/src/io/github/lonamiwebs/klooni/screens/CustomizeScreen.java

@@ -103,13 +103,18 @@ class CustomizeScreen implements Screen {
 
         // Load all the available themes
         table.row();
-        VerticalGroup themesGroup = new VerticalGroup();
+        final VerticalGroup themesGroup = new VerticalGroup();
         for (Theme theme : Theme.getThemes()) {
-            final ThemeCard card = new ThemeCard(layout, theme);
+            final ThemeCard card = new ThemeCard(game, layout, theme);
             card.addListener(new InputListener() {
                 @Override
                 public boolean touchDown(InputEvent event, float x, float y, int pointer, int button) {
                     Klooni.updateTheme(card.theme);
+
+                    for (Actor a : themesGroup.getChildren()) {
+                        ThemeCard c = (ThemeCard)a;
+                        c.usedThemeUpdated();
+                    }
                     return true;
                 }
             });