Handle game layout better

android/AndroidManifest.xml

@@ -14,7 +14,7 @@
         <activity
             android:name="io.github.lonamiwebs.klooni.AndroidLauncher"
             android:label="@string/app_name" 
-            android:screenOrientation="landscape"
+            android:screenOrientation="portrait"
             android:configChanges="keyboard|keyboardHidden|orientation|screenSize">
             <intent-filter>
                 <action android:name="android.intent.action.MAIN" />

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

@@ -10,17 +10,15 @@ import com.badlogic.gdx.math.Vector2;
 public class Board {
 
     Cell[][] cells;
-    public final int cellCount; // Cell count
+    public final int cellCount;
-    public final int cellSize; // Size per cell
+    public float cellSize;
 
     final Vector2 pos;
 
     public NinePatch cellPatch;
 
-    public Board(float x, float y, int cellCount, int cellSize, boolean center) {
+    public Board(final GameLayout layout, int cellCount) {
-        pos = new Vector2(x, y);
         this.cellCount = cellCount;
-        this.cellSize = cellSize;
 
         cells = new Cell[this.cellCount][this.cellCount];
         for (int i = 0; i < this.cellCount; i++) {
@@ -32,14 +30,8 @@ public class Board {
         cellPatch = new NinePatch(
                 new Texture(Gdx.files.internal("ui/cells/basic.png")), 4, 4, 4, 4);
 
-        if (center) {
+        pos = new Vector2();
-            float half = getPxSize() / 2;
+        layout.update(this);
-            pos.sub(half, half);
-        }
-    }
-
-    public int getPxSize() {
-        return cellCount * cellSize;
     }
 
     private boolean inBounds(int x, int y) {
@@ -87,7 +79,7 @@ public class Board {
         // The reason why we can't check first rows and then columns
         // (or vice versa) is because the following case (* filled, _ empty):
         //
-        // 4x4 board    piece
+        // 4x4 boardHeight    piece
         // _ _ * *      * *
         // _ * * *      *
         // * * _ _

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

@@ -23,7 +23,7 @@ class Cell {
         color = Color.WHITE;
     }
 
-    void draw(SpriteBatch batch, NinePatch patch, float x, float y, int size) {
+    void draw(SpriteBatch batch, NinePatch patch, float x, float y, float size) {
         draw(color, batch, patch, x, y, size);
     }
 
@@ -38,6 +38,7 @@ class Cell {
         return empty;
     }
 
+    // TODO Use vanish with a pretty animation instead .setEmpty()
     public void vanish() {
         empty = true;
     }

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

@@ -0,0 +1,54 @@
+package io.github.lonamiwebs.klooni.game;
+
+
+import com.badlogic.gdx.Gdx;
+
+// Helper class to calculate the size of each element
+//
+// TODO In a future, perhaps this could handle landscape mode differently
+// For example, the boardHeight on the left and the piece holder on the right
+public class GameLayout {
+
+    // Widths
+    private float screenWidth, marginWidth;
+
+    // Heights
+    private float screenHeight, logoHeight, scoreHeight, boardHeight, pieceHolderHeight;
+
+    public GameLayout() {
+        calculate();
+    }
+
+    private void calculate() {
+        screenWidth = Gdx.graphics.getWidth();
+        screenHeight = Gdx.graphics.getHeight();
+
+        // Widths
+        marginWidth = screenWidth * 0.05f;
+
+        // Heights
+        logoHeight = screenHeight * 0.10f;
+        scoreHeight = screenHeight * 0.15f;
+        boardHeight = screenHeight * 0.50f;
+        pieceHolderHeight = screenHeight * 0.25f;
+    }
+
+    // Note that we're now using Y-up coordinates
+    void update(Board board) {
+        // We can't leave our area, so pick the minimum between available
+        // height and width to determine an appropriated cell size
+        float availableWidth = screenWidth - marginWidth * 2f;
+        float boardSize = Math.min(availableWidth, boardHeight);
+        board.cellSize = boardSize / board.cellCount;
+
+        // Now that we know the board size, we can center the board on the screen
+        board.pos.set(screenWidth * 0.5f - boardSize * 0.5f, pieceHolderHeight);
+    }
+
+    void update(PieceHolder holder) {
+        float availableWidth = screenWidth - marginWidth * 2f;
+        holder.area.set(
+                marginWidth, 0f,
+                availableWidth, pieceHolderHeight);
+    }
+}

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

@@ -4,6 +4,7 @@ import com.badlogic.gdx.Gdx;
 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.Rectangle;
 import com.badlogic.gdx.math.Vector2;
 import com.badlogic.gdx.utils.Array;
 
@@ -14,31 +15,31 @@ public class PieceHolder {
 
     int heldPiece;
 
-    final Vector2 pos;
+    final Rectangle area;
-    final int width, height;
 
-    public PieceHolder(int pieceCount, float x, float y, int holderWidth, int holderHeight) {
+    public PieceHolder(final GameLayout layout, final int pieceCount) {
         count = pieceCount;
         pieces = new Piece[count];
-
         heldPiece = -1;
-        pos = new Vector2(x, y);
-        width = holderWidth;
-        height = holderHeight;
 
+        area = new Rectangle();
+        layout.update(this);
+
+        // takeMore depends on the layout to be ready
+        // TODO So, how would pieces handle a layout update?
         takeMore();
     }
 
     void takeMore() {
-        int perPieceSize = width / 3;
+        float perPieceSize = area.width / count;
         for (int i = 0; i < count; i++) {
             pieces[i] = Piece.random();
 
-            // Set the local position and the cell cellSize
+            // Set the absolute position on screen and the cells' cellSize
-            pieces[i].pos.set(pos.x + i * perPieceSize, pos.y);
+            pieces[i].pos.set(area.x + i * perPieceSize, area.y);
             pieces[i].cellSize = Math.min(
                     perPieceSize / pieces[i].cellCols,
-                    height / pieces[i].cellRows);
+                    area.height / pieces[i].cellRows);
         }
     }
 

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

@@ -10,6 +10,7 @@ import com.badlogic.gdx.math.MathUtils;
 
 import io.github.lonamiwebs.klooni.Klooni;
 import io.github.lonamiwebs.klooni.game.Board;
+import io.github.lonamiwebs.klooni.game.GameLayout;
 import io.github.lonamiwebs.klooni.game.Piece;
 import io.github.lonamiwebs.klooni.game.PieceHolder;
 
@@ -19,6 +20,8 @@ public class GameScreen implements Screen, InputProcessor {
     private Board board;
     private PieceHolder holder;
 
+    private final GameLayout layout;
+
     private SpriteBatch batch;
 
     private final Color clearColor;
@@ -28,21 +31,13 @@ public class GameScreen implements Screen, InputProcessor {
         game = aGame;
         score = 0;
         clearColor = new Color(0.9f, 0.9f, 0.7f, 1f);
-
-        // Board(x, y, cell cellCount, cell size, center)
-        board = new Board(
-                Gdx.graphics.getWidth() / 2,
-                Gdx.graphics.getHeight() * 3 / 4,
-                10, 20, true);
-
-        // PieceHolder(pieces, x, y, w, h)
-        int holderWidth = Gdx.graphics.getWidth() / 2;
-        holder = new PieceHolder(3,
-                Gdx.graphics.getWidth() / 2 - holderWidth / 2, Gdx.graphics.getHeight() / 4,
-                Gdx.graphics.getWidth() / 2, 80);
-
         batch = new SpriteBatch();
 
+        layout = new GameLayout();
+
+        board = new Board(layout, 10);
+        holder = new PieceHolder(layout, 3);
+
         // Fill some random pieces
         for (int i = 0; i < 10; i++) {
             board.putPiece(Piece.random(), MathUtils.random(10), MathUtils.random(10));

desktop/src/io/github/lonamiwebs/klooni/desktop/DesktopLauncher.java

@@ -7,6 +7,8 @@ import io.github.lonamiwebs.klooni.Klooni;
 public class DesktopLauncher {
     public static void main (String[] arg) {
         LwjglApplicationConfiguration config = new LwjglApplicationConfiguration();
+        config.width = 408;
+        config.height = 680;
         new LwjglApplication(new Klooni(), config);
     }
 }

html/src/io/github/lonamiwebs/klooni/client/HtmlLauncher.java

@@ -9,7 +9,7 @@ public class HtmlLauncher extends GwtApplication {
 
     @Override
     public GwtApplicationConfiguration getConfig () {
-                return new GwtApplicationConfiguration(480, 320);
+        return new GwtApplicationConfiguration(408, 680);
     }
 
     @Override