Skip to content

fixed the layout with margins for the gameplay #40

Merged
merged 2 commits into from
Apr 10, 2026
+59 −22
Merged

fixed the layout with margins for the gameplay #40

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
603837f
fixed the layout with margins for the gameplay
kristwel Apr 10, 2026
221a7f9
made adjustments to the anwer boxes to make the text fit
kristwel Apr 10, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion core/src/main/java/group07/beatbattle/view/GameOverView.java
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading