Skip to content

Commit

Permalink
Merge pull request #40 from milospi/fix-layout
Browse files Browse the repository at this point in the history 
fixed the layout with margins for the gameplay
  • Loading branch information
@mostafas
mostafas authored Apr 10, 2026
2 parents 6f0d2bd + 221a7f9 commit 491a6e1
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 22 deletions.
5 changes: 4 additions & 1 deletion core/src/main/java/group07/beatbattle/view/GameOverView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,12 @@ public GameOverView(BeatBattle game, LeaderboardController controller) {
);
stage.addActor(bgLogo);

float safeTop = Math.max(60f, Gdx.graphics.getSafeInsetTop() + 20f);
float safeBottom = Math.max(60f, Gdx.graphics.getSafeInsetBottom() + 10f);

Table root = new Table();
root.setFillParent(true);
root.pad(60f);
root.pad(safeTop, 60f, safeBottom, 60f);
root.top();

// Title
Expand Down
32 changes: 28 additions & 4 deletions core/src/main/java/group07/beatbattle/view/GameRoundView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import com.badlogic.gdx.graphics.GL20;
import com.badlogic.gdx.graphics.Pixmap;
import com.badlogic.gdx.graphics.Texture;
import com.badlogic.gdx.graphics.g2d.GlyphLayout;
import com.badlogic.gdx.graphics.g2d.TextureRegion;
import com.badlogic.gdx.scenes.scene2d.Actor;
import com.badlogic.gdx.scenes.scene2d.Stage;
Expand All @@ -31,8 +32,7 @@

public class GameRoundView extends ScreenAdapter {

private static final float ANSWER_BUTTON_WIDTH = 550f;
private static final float ANSWER_BUTTON_HEIGHT = 160f;
private static final float ANSWER_BUTTON_HEIGHT = 200f;
private static final float ANSWER_SPACING = 30f;
private static final float RESULT_DISPLAY_DELAY = 1.5f;

Expand Down Expand Up @@ -92,8 +92,14 @@ public GameRoundView(BeatBattle game, RoundController controller) {
);
stage.addActor(bgLogo);

float safeTop = Math.max(40f, Gdx.graphics.getSafeInsetTop() + 20f);
float safeBottom = Math.max(40f, Gdx.graphics.getSafeInsetBottom() + 10f);
// Width each answer button gets in the 2-column grid
float answerButtonWidth = (Gdx.graphics.getWidth() - 80f - ANSWER_SPACING * 4f) / 2f;

Table root = new Table();
root.setFillParent(true);
root.pad(safeTop, 40f, safeBottom, 40f);

// --- Top bar: leave button + timer ---
Table topBar = new Table();
Expand Down Expand Up @@ -141,17 +147,34 @@ public void changed(ChangeEvent event, Actor actor) {
// --- Answer buttons 2x2 grid ---
Table grid = new Table();

GlyphLayout glyphLayout = new GlyphLayout();
float innerWidth = answerButtonWidth - 20f; // 10px margin each side
float innerHeight = ANSWER_BUTTON_HEIGHT - 20f; // 10px margin top/bottom

for (int i = 0; i < options.size(); i++) {
final String option = options.get(i);
final TextButton btn = makeButton(option, defaultTex);

// Find the largest scale (max 1.0) at which the wrapped text fits in the box
float fontScale = 1.0f;
while (fontScale >= 0.5f) {
game.getMontserratFont().getData().setScale(fontScale);
glyphLayout.setText(game.getMontserratFont(), option, Color.WHITE, innerWidth, Align.center, true);
game.getMontserratFont().getData().setScale(1f); // restore immediately
if (glyphLayout.height <= innerHeight) break;
fontScale -= 0.05f;
}
fontScale = Math.max(fontScale, 0.5f);
btn.getLabel().setFontScale(fontScale);

final float selectedScale = fontScale * 1.1f;
btn.addListener(new ChangeListener() {
@Override
public void changed(ChangeEvent event, Actor actor) {
if (answered) return;
answered = true;
btn.getStyle().up = new TextureRegionDrawable(new TextureRegion(selectedTex));
btn.getLabel().setFontScale(1.15f);
btn.getLabel().setFontScale(selectedScale);
for (TextButton other : optionButtons) {
if (other != btn) {
other.getStyle().up = new TextureRegionDrawable(new TextureRegion(disabledTex));
Expand All @@ -162,7 +185,7 @@ public void changed(ChangeEvent event, Actor actor) {
});

optionButtons.add(btn);
grid.add(btn).width(ANSWER_BUTTON_WIDTH).height(ANSWER_BUTTON_HEIGHT).pad(ANSWER_SPACING);
grid.add(btn).width(answerButtonWidth).height(ANSWER_BUTTON_HEIGHT).pad(ANSWER_SPACING);
if (i % 2 == 1) grid.row();
}

Expand Down Expand Up @@ -245,6 +268,7 @@ private TextButton makeButton(String text, Texture texture) {

TextButton btn = new TextButton(text, style);
btn.getLabel().setWrap(true);
btn.getLabel().setAlignment(Align.center);
return btn;
}

Expand Down
18 changes: 10 additions & 8 deletions core/src/main/java/group07/beatbattle/view/JoinCreateView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,8 @@

public class JoinCreateView extends ScreenAdapter {

private static final float FIELD_WIDTH = 800f;
private static final float FIELD_HEIGHT = 120f;
private static final float READY_BUTTON_WIDTH = 800f;
private static final float READY_BUTTON_HEIGHT = 150f;
private static final float BACK_BUTTON_WIDTH = 500f;
private static final float BACK_BUTTON_HEIGHT = 120f;

private final BeatBattle game;
Expand All @@ -55,6 +52,11 @@ public JoinCreateView(BeatBattle game, GameMode mode, LobbyController controller
this.stage = new Stage(new ScreenViewport());
this.lobbyService = new LobbyService(game.getFirebaseGateway());

float screenWidth = Gdx.graphics.getWidth();
float fieldWidth = Math.min(800f, screenWidth - 80f);
float readyButtonWidth = fieldWidth;
float backButtonWidth = Math.min(500f, fieldWidth * 0.65f);

Table root = new Table();
root.setFillParent(true);
root.center();
Expand Down Expand Up @@ -93,13 +95,13 @@ public void changed(ChangeEvent event, Actor actor) {
});

root.add(title).padBottom(80).row();
root.add(codeComponent).width(FIELD_WIDTH).height(FIELD_HEIGHT).padBottom(40).row();
root.add(playerNameField).width(FIELD_WIDTH).height(FIELD_HEIGHT).padBottom(50).row();
root.add(codeComponent).width(fieldWidth).height(FIELD_HEIGHT).padBottom(40).row();
root.add(playerNameField).width(fieldWidth).height(FIELD_HEIGHT).padBottom(50).row();
if (mode == GameMode.CREATE) {
root.add(roundSelector.getActor()).width(FIELD_WIDTH).padBottom(40).row();
root.add(roundSelector.getActor()).width(fieldWidth).padBottom(40).row();
}
root.add(readyButton).width(READY_BUTTON_WIDTH).height(READY_BUTTON_HEIGHT).padBottom(30).row();
root.add(backButton).width(BACK_BUTTON_WIDTH).height(BACK_BUTTON_HEIGHT);
root.add(readyButton).width(readyButtonWidth).height(READY_BUTTON_HEIGHT).padBottom(30).row();
root.add(backButton).width(backButtonWidth).height(BACK_BUTTON_HEIGHT);

stage.addActor(root);

Expand Down
5 changes: 4 additions & 1 deletion core/src/main/java/group07/beatbattle/view/LeaderboardView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,12 @@ public LeaderboardView(BeatBattle game, LeaderboardController controller) {
);
stage.addActor(bgLogo);

float safeTop = Math.max(60f, Gdx.graphics.getSafeInsetTop() + 20f);
float safeBottom = Math.max(60f, Gdx.graphics.getSafeInsetBottom() + 10f);

Table root = new Table();
root.setFillParent(true);
root.pad(60f);
root.pad(safeTop, 60f, safeBottom, 60f);
root.top();

// --- Title ---
Expand Down
21 changes: 13 additions & 8 deletions core/src/main/java/group07/beatbattle/view/LobbyView.java
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,11 +88,14 @@ public LobbyView(
Table root = new Table();
root.setFillParent(true);

float safeTop = Math.max(20f, Gdx.graphics.getSafeInsetTop() + 10f);
float safeBottom = Math.max(40f, Gdx.graphics.getSafeInsetBottom() + 10f);

root.top();
root.add(createHeader()).expandX().fillX().padTop(20).row();
root.add(createHeader()).expandX().fillX().padTop(safeTop).row();
root.add(createGameCodeSection()).expandX().top().padTop(60).row();
root.add(createPartySection()).expand().center().padBottom(60).row();
root.add(createFooter()).expandX().bottom().padBottom(40);
root.add(createFooter()).expandX().bottom().padBottom(safeBottom);

stage.addActor(root);

Expand Down Expand Up @@ -244,18 +247,19 @@ private Table createPartySection() {
Table table = new Table();
table.center();

int boxWidth = (int) Math.min(850f, Gdx.graphics.getWidth() - 60f);
int boxHeight = 620;

Label partyLabel = new Label(Strings.party(), infoStyle);
Table partyBox = createPartyBox();
Table partyBox = createPartyBox(boxWidth, boxHeight);

table.add(partyLabel).padBottom(20).row();
table.add(partyBox).width(850).height(620);
table.add(partyBox).width(boxWidth).height(boxHeight);

return table;
}

private Table createPartyBox() {
int boxWidth = 850;
int boxHeight = 620;
private Table createPartyBox(int boxWidth, int boxHeight) {
int radius = 60;

Table container = new Table();
Expand Down Expand Up @@ -344,7 +348,8 @@ public void changed(ChangeEvent event, Actor actor) {
}
});

footer.add(startButton).width(800).height(150);
float btnWidth = Math.min(800f, Gdx.graphics.getWidth() - 80f);
footer.add(startButton).width(btnWidth).height(150);
}

return footer;
Expand Down

0 comments on commit 491a6e1

Please sign in to comment.