Show available themes on customize

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

@@ -0,0 +1,70 @@
+package io.github.lonamiwebs.klooni.actors;
+
+import com.badlogic.gdx.Gdx;
+import com.badlogic.gdx.graphics.GL20;
+import com.badlogic.gdx.graphics.Texture;
+import com.badlogic.gdx.graphics.g2d.Batch;
+import com.badlogic.gdx.graphics.g2d.NinePatch;
+import com.badlogic.gdx.graphics.glutils.ShapeRenderer;
+import com.badlogic.gdx.math.Vector2;
+import com.badlogic.gdx.scenes.scene2d.Actor;
+
+import io.github.lonamiwebs.klooni.Theme;
+import io.github.lonamiwebs.klooni.game.Cell;
+import io.github.lonamiwebs.klooni.game.GameLayout;
+
+public class ThemeCard extends Actor {
+
+    private final ShapeRenderer shapeRenderer;
+
+    private final Theme theme;
+
+    // TODO Use the cell patch given the theme, not basic
+    private final NinePatch cellPatch;
+
+    public ThemeCard(final GameLayout layout, final Theme theme) {
+        shapeRenderer = new ShapeRenderer(20);
+        this.theme = theme;
+        cellPatch = new NinePatch(
+                new Texture(Gdx.files.internal("ui/cells/basic.png")), 4, 4, 4, 4);
+
+        layout.update(this);
+    }
+
+    @Override
+    public void draw(Batch batch, float parentAlpha) {
+        batch.end();
+
+        final float x = getX(), y = getY();
+
+        Vector2 pos = localToStageCoordinates(new Vector2(x, y));
+
+        // TODO Something is wrong with this code, shape renderer fills one yes one no if multiple themes
+        Gdx.gl.glEnable(GL20.GL_BLEND);
+        shapeRenderer.begin(ShapeRenderer.ShapeType.Filled);
+        shapeRenderer.setColor(0.5f, 0.5f, 0.5f, 0.3f);
+        shapeRenderer.rect(pos.x, pos.y, getWidth(), getHeight());
+        shapeRenderer.end();
+        Gdx.gl.glDisable(GL20.GL_BLEND);
+
+        batch.begin();
+
+        // Consider 5 cells on the available size (1/5 height each)
+        // 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, cellPatch, x + cellSize, y + cellSize, cellSize);
+        Cell.draw(theme.getCellColor(7), batch, cellPatch, x + cellSize * 2, y + cellSize, cellSize);
+        Cell.draw(theme.getCellColor(7), batch, cellPatch, x + cellSize * 3, y + cellSize, cellSize);
+
+        Cell.draw(theme.getCellColor(8), batch, cellPatch, x + cellSize, y + cellSize * 2, cellSize);
+        Cell.draw(theme.getCellColor(7), batch, cellPatch, x + cellSize * 2, y + cellSize * 2, cellSize);
+        Cell.draw(theme.getCellColor(8), batch, cellPatch, x + cellSize * 3, y + cellSize * 2, cellSize);
+
+        Cell.draw(theme.getCellColor(8), batch, cellPatch, x + cellSize, y + cellSize * 3, cellSize);
+        Cell.draw(theme.getCellColor(8), batch, cellPatch, x + cellSize * 2, y + cellSize * 3, cellSize);
+        Cell.draw(theme.getCellColor(3), batch, cellPatch, x + cellSize * 3, y + cellSize * 3, cellSize);
+    }
+}

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

@@ -2,12 +2,13 @@ package io.github.lonamiwebs.klooni.game;
 
 import com.badlogic.gdx.Gdx;
 import com.badlogic.gdx.graphics.Color;
+import com.badlogic.gdx.graphics.g2d.Batch;
 import com.badlogic.gdx.graphics.g2d.NinePatch;
 import com.badlogic.gdx.graphics.g2d.SpriteBatch;
 import com.badlogic.gdx.math.Interpolation;
 import com.badlogic.gdx.math.Vector2;
 
-class Cell {
+public class Cell {
 
     private boolean empty;
     private Color color;
@@ -53,7 +54,7 @@ class Cell {
     }
 
     // TODO Use skin atlas
-    static void draw(Color color, SpriteBatch batch, NinePatch patch,
+    public static void draw(Color color, Batch batch, NinePatch patch,
                             float x, float y, float size) {
         batch.setColor(color);
         patch.draw(batch, x, y, size, size);

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

@@ -5,6 +5,7 @@ import com.badlogic.gdx.Gdx;
 import com.badlogic.gdx.math.Rectangle;
 
 import io.github.lonamiwebs.klooni.actors.Band;
+import io.github.lonamiwebs.klooni.actors.ThemeCard;
 
 // Helper class to calculate the size of each element
 //
@@ -89,4 +90,8 @@ public class GameLayout {
         band.scoreBounds.set(area.x, area.y + area.height * 0.55f, area.width, area.height * 0.35f);
         band.infoBounds.set(area.x, area.y + area.height * 0.10f, area.width, area.height * 0.35f);
     }
+
+    public void update(ThemeCard card) {
+        card.setSize(availableWidth, logoHeight);
+    }
 }

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

@@ -15,6 +15,9 @@ import com.badlogic.gdx.scenes.scene2d.ui.VerticalGroup;
 import com.badlogic.gdx.scenes.scene2d.utils.ChangeListener;
 
 import io.github.lonamiwebs.klooni.Klooni;
+import io.github.lonamiwebs.klooni.Theme;
+import io.github.lonamiwebs.klooni.actors.ThemeCard;
+import io.github.lonamiwebs.klooni.game.GameLayout;
 
 public class CustomizeScreen implements Screen {
     private Klooni game;
@@ -22,6 +25,8 @@ public class CustomizeScreen implements Screen {
     private Stage stage;
 
     public CustomizeScreen(Klooni aGame, final Screen lastScreen) {
+        final GameLayout layout = new GameLayout();
+
         game = aGame;
         stage = new Stage();
 
@@ -81,9 +86,12 @@ public class CustomizeScreen implements Screen {
         table.row();
 
         VerticalGroup themesGroup = new VerticalGroup();
-        themesGroup.space(8);
+        for (Theme theme : Theme.getThemes()) {
+            themesGroup.addActor(new ThemeCard(layout, theme));
+        }
 
-        table.add(themesGroup).expandY();
+        themesGroup.space(8);
+        table.add(new ScrollPane(themesGroup)).expandY();
     }
 
     @Override