Skip to content

UI mobile redesign #10877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
j4n7 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

UI mobile redesign #10877

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2d0127
WIP UI redesign
j4n7 Jun 4, 2026
1ba0ddf
Add new battlefield backgrounds for UI redesign
j4n7 Jun 4, 2026
76c2a7f
Add image
j4n7 Jun 4, 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
11 changes: 8 additions & 3 deletions forge-gui-mobile/src/forge/menu/FMenuBar.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.Input;
import forge.Forge;
import forge.Graphics;
import forge.assets.FSkinColor;
import forge.screens.FScreen.Header;
import forge.screens.match.MatchController;

Expand Down Expand Up @@ -74,9 +75,13 @@ protected void doLayout(float width, float height) {

@Override
protected void drawBackground(Graphics g) {
float w = getWidth();
float h = getHeight();
g.fillRect(getBackColor(), 0, 0, w, h);
g.fillRect(
FSkinColor.getStandardColor(38, 43, 48),
0,
0,
getWidth(),
getHeight()
);
}

@Override
Expand Down
51 changes: 21 additions & 30 deletions forge-gui-mobile/src/forge/menu/FMenuTab.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
import forge.Graphics;
import forge.assets.FImage;
import forge.assets.FSkinColor;
import forge.assets.FSkinColor.Colors;
import forge.assets.FSkinFont;
import forge.assets.FSkinImage;
import forge.toolbox.FDisplayObject;
Expand All @@ -19,23 +18,23 @@ public class FMenuTab extends FDisplayObject {
boolean iconOnly = false;
boolean active = false;
private static FSkinColor getSelBackColor() {
if (Forge.isMobileAdventureMode)
return FSkinColor.get(Colors.ADV_CLR_ACTIVE);
return FSkinColor.get(Colors.CLR_ACTIVE);
return FSkinColor.getStandardColor(52, 58, 64);
}

private static FSkinColor getSelBorderColor() {
return FDropDown.getBorderColor();
return FSkinColor.getStandardColor(78, 86, 94);
}

private static FSkinColor getSelForeColor() {
if (Forge.isMobileAdventureMode)
return FSkinColor.get(Colors.ADV_CLR_TEXT);
return FSkinColor.get(Colors.CLR_TEXT);
return FSkinColor.getStandardColor(235, 238, 240);
}

private static FSkinColor getForeColor() {
return getSelForeColor().alphaColor(0.5f);
return FSkinColor.getStandardColor(170, 176, 182);
}

private static FSkinColor getSeparatorColor() {
return getSelForeColor().alphaColor(0.3f);
return FSkinColor.getStandardColor(0, 0, 0).alphaColor(0f);
}
public static final float PADDING = Utils.scale(2);
private static final float SEPARATOR_WIDTH = Utils.scale(1);
Expand Down Expand Up @@ -144,41 +143,35 @@ public void draw(Graphics g) {

FSkinColor foreColor;
if (dropDown.isVisible()) {
x = PADDING; //round so lines show up reliably
x = PADDING;
y = PADDING;
w = getWidth() - 2 * x + 1;
h = getHeight() - y + 1;

g.startClip(x, y, w, h);
g.fillRect(getSelBackColor(), x, y, w, h);
g.drawRect(2, getSelBorderColor(), x, y, w, h);
g.fillRect(FSkinColor.getStandardColor(52, 58, 64), x, y, w, h);
g.endClip();

foreColor = getSelForeColor();
}
else {
foreColor = getForeColor();
foreColor = FSkinColor.getStandardColor(235, 238, 240);
}

//draw right separator
if (index < menuBar.getTabCount() - 1) {
x = getWidth();
y = getHeight() / 4;
g.drawLine(SEPARATOR_WIDTH, getSeparatorColor(), x, y, x, getHeight() - y);
else {
foreColor = FSkinColor.getStandardColor(170, 176, 182);
}

x = PADDING;
y = PADDING;
w = getWidth() - 2 * PADDING;
h = getHeight() - 2 * PADDING;
if (isHovered())
g.fillRect(getSelBackColor().brighter(), x, y, w, h);

//flash overlay while a recent unread message highlights the tab
if (isHovered()) {
g.fillRect(FSkinColor.getStandardColor(66, 72, 78), x, y, w, h);
foreColor = FSkinColor.getStandardColor(235, 238, 240);
}

if (flashStartMs > 0) {
long elapsed = System.currentTimeMillis() - flashStartMs;
if (elapsed < FLASH_DURATION_MS) {
float alpha = 0.55f * (1f - (float) elapsed / FLASH_DURATION_MS);
float alpha = 0.45f * (1f - (float) elapsed / FLASH_DURATION_MS);
g.fillRect(BADGE_COLOR.alphaColor(alpha), x, y, w, h);
Gdx.graphics.requestRendering();
} else {
Expand All @@ -187,15 +180,13 @@ public void draw(Graphics g) {
}

if (iconOnly) {
float mod = w * 0.75f;
FImage icon = active ? FSkinImage.SEE : FSkinImage.UNSEE;
float scaleW = w * 0.8f;
float scaleW = w * 0.76f;
float scaleH = scaleW * 0.6f;
g.drawImage(icon, x + w/2 - scaleW/2, y + h/2 - scaleH/2, scaleW, scaleH);
} else
g.drawText(text, FONT, foreColor, x, y, w, h, false, Align.center, true);

//unread badge in the top-right corner
if (unreadCount > 0) {
String label = unreadCount > 99 ? "99+" : Integer.toString(unreadCount);
float textW = BADGE_FONT.getBounds(label).width;
Expand Down
42 changes: 21 additions & 21 deletions forge-gui-mobile/src/forge/screens/match/MatchScreen.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1061,27 +1061,27 @@ public void drawOverlay(Graphics g) {
float w = getWidth();

//field separator lines
if (!Forge.isLandscapeMode()) {
for (VPlayerPanel playerPanel : playerPanelsList) {
midField = playerPanel.getTop();
y = midField - playerPanel.getField().getHeight();
if (playerPanel.getSelectedTab() == null) {
y++;
}
g.drawLine(1, getBorderColor(), x, y, w, y);
}
}

for (VPlayerPanel playerPanel : playerPanelsList) {
midField = playerPanel.getTop();
y = midField - 0.5f;
g.drawLine(1, getBorderColor(), x, y, w, y);
}

if (!Forge.isLandscapeMode()) {
y = bottomPlayerPanel.getTop() + bottomPlayerPanel.getField().getHeight();
g.drawLine(1, getBorderColor(), x, y, w, y);
}
// if (!Forge.isLandscapeMode()) {
// for (VPlayerPanel playerPanel : playerPanelsList) {
// midField = playerPanel.getTop();
// y = midField - playerPanel.getField().getHeight();
// if (playerPanel.getSelectedTab() == null) {
// y++;
// }
// g.drawLine(1, getBorderColor(), x, y, w, y);
// }
// }

// for (VPlayerPanel playerPanel : playerPanelsList) {
// midField = playerPanel.getTop();
// y = midField - 0.5f;
// g.drawLine(1, getBorderColor(), x, y, w, y);
// }

// if (!Forge.isLandscapeMode()) {
// y = bottomPlayerPanel.getTop() + bottomPlayerPanel.getField().getHeight();
// g.drawLine(1, getBorderColor(), x, y, w, y);
// }
}

protected ScrollBounds layoutAndGetScrollBounds(float visibleWidth, float visibleHeight) {
Expand Down
62 changes: 40 additions & 22 deletions forge-gui-mobile/src/forge/screens/match/views/VPhaseIndicator.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,8 @@
import com.badlogic.gdx.graphics.Color;
import com.badlogic.gdx.utils.Align;

import forge.Forge;
import forge.Graphics;
import forge.assets.FSkinColor;
import forge.assets.FSkinColor.Colors;
import forge.assets.FSkinFont;
import forge.game.phase.PhaseType;
import forge.toolbox.FContainer;
Expand Down Expand Up @@ -179,31 +177,51 @@ public boolean longPress(float x, float y) {
@Override
public void draw(final Graphics g) {
float x = PADDING_X;
float y = Utils.scale(1);
float w = getWidth() - 2 * PADDING_X;
float h = getHeight();
float h = getHeight() - 2 * Utils.scale(1);
float radius = Math.min(w, h) * 0.22f;

//determine back color according to skip or active state of label
if (yieldMarked) {
g.fillRect(YIELD_MARKER_COLOR, x, 0, w, h);
FSkinColor markerColor = FSkinColor.getStandardColor(120, 85, 150);

g.fillRoundRect(markerColor, x, y, w, h, radius);
drawChevron(g, x, w, h);
// Skip the caption when marked — chevron replaces the phase abbreviation.
} else {
FSkinColor backColor;
if (active && stopAtPhase) {
backColor = Forge.isMobileAdventureMode ? FSkinColor.get(Colors.ADV_CLR_PHASE_ACTIVE_ENABLED) : FSkinColor.get(Colors.CLR_PHASE_ACTIVE_ENABLED);
}
else if (!active && stopAtPhase) {
backColor = Forge.isMobileAdventureMode ? FSkinColor.get(Colors.ADV_CLR_PHASE_INACTIVE_ENABLED) : FSkinColor.get(Colors.CLR_PHASE_INACTIVE_ENABLED);
}
else if (active && !stopAtPhase) {
backColor = Forge.isMobileAdventureMode ? FSkinColor.get(Colors.ADV_CLR_PHASE_ACTIVE_DISABLED) : FSkinColor.get(Colors.CLR_PHASE_ACTIVE_DISABLED);
}
else {
backColor = Forge.isMobileAdventureMode ? FSkinColor.get(Colors.ADV_CLR_PHASE_INACTIVE_DISABLED) : FSkinColor.get(Colors.CLR_PHASE_INACTIVE_DISABLED);
}
g.fillRect(isHovered() ? backColor.brighter() : backColor, x, 0, w, h);
g.drawText(caption, isHovered() && font.canIncrease() ? font.increase() : font, Color.BLACK, x, 0, w, h, false, Align.center, true);
return;
}

FSkinColor backColor;
if (active && stopAtPhase) {
backColor = FSkinColor.getStandardColor(80, 210, 200);
}
else if (!active && stopAtPhase) {
backColor = FSkinColor.getStandardColor(54, 94, 91);
}
else if (active && !stopAtPhase) {
backColor = FSkinColor.getStandardColor(255, 150, 70);
}
else {
backColor = FSkinColor.getStandardColor(105, 54, 45);
}

if (isHovered()) {
backColor = backColor.brighter();
}

g.fillRoundRect(backColor, x, y, w, h, radius);

g.drawText(
caption,
isHovered() && font.canIncrease() ? font.increase() : font,
FSkinColor.getStandardColor(235, 238, 240),
x,
y,
w,
h,
false,
Align.center,
true
);
}

private void drawChevron(final Graphics g, float x, float w, float h) {
Expand Down
64 changes: 27 additions & 37 deletions forge-gui-mobile/src/forge/screens/match/views/VPlayerPanel.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -504,41 +504,17 @@ protected void drawOverlay(Graphics g) {
@Override
public void drawBackground(Graphics g) {
float y;
InfoTab infoTab = selectedTab;
float pad = Forge.isHorizontalTabLayout() ? avatarWidth / 16f : 0f;
if (infoTab != null) { //draw background and border for selected zone if needed
VDisplayArea selectedDisplayArea = infoTab.getDisplayArea();
float x = selectedDisplayArea == null ? 0 : selectedDisplayArea.getLeft();
float w = selectedDisplayArea == null ? 0 : selectedDisplayArea.getWidth();
float top = selectedDisplayArea == null ? 0 : selectedDisplayArea.getTop();
float h = selectedDisplayArea == null ? 0 : selectedDisplayArea.getHeight();
float bottom = selectedDisplayArea == null ? 0 : selectedDisplayArea.getBottom();
g.fillRect(Forge.isHorizontalTabLayout() ? getAltDisplayAreaBackColor() : getDisplayAreaBackColor(), x - pad, top, w + pad, h + pad);
if (Forge.isHorizontalTabLayout())
g.drawLine(1, MatchScreen.getBorderColor(), x, isFlipped() ? bottom : top, x + w, isFlipped() ? bottom : top);

if (Forge.isLandscapeMode()) {
g.drawLine(1, MatchScreen.getBorderColor(), x, top, x, bottom);
} else {
y = isFlipped() ? top + 1 : bottom;
//don't know why infotab gets null here, either way don't crash the gui..
float left = infoTab == null ? 0 : infoTab.getLeft();
float right = infoTab == null ? 0 : infoTab.getRight();
//leave gap at selected zone tab
g.drawLine(1, MatchScreen.getBorderColor(), x, y, left, y);
g.drawLine(1, MatchScreen.getBorderColor(), right, y, w, y);
}
}
if (commandZone != null && commandZone.isVisible()) { //draw border for command zone if needed
float x = commandZone.getLeft();
y = commandZone.getTop();
g.drawLine(1, MatchScreen.getBorderColor(), x, y, x, y + commandZone.getHeight());
/*if (Forge.isHorizontalTabLayout())
g.fillRect(getAltDisplayAreaBackColor(), x - pad, y, commandZoneWidth + pad, commandZone.getHeight() + pad);*/
if (isFlipped()) {
y += commandZone.getHeight();
}
g.drawLine(1, MatchScreen.getBorderColor(), x, y, x + commandZone.getWidth(), y);

if (Forge.isLandscapeMode()) {
float leftPanelWidth = avatar.getWidth() + phaseIndicator.getWidth();

g.fillRect(
FSkinColor.getStandardColor(38, 43, 48),
0,
0,
leftPanelWidth,
getHeight()
);
}
}

Expand Down Expand Up @@ -600,6 +576,14 @@ public boolean tap(float x, float y, int count) {

@Override
public void draw(Graphics g) {
g.fillRect(
FSkinColor.getStandardColor(38, 43, 48),
0,
0,
getWidth(),
getHeight()
);

adjustHeight = 1;
float divider = Gdx.app.getGraphics().getHeight() > 900 ? 1.2f : 2f;
if (Forge.altPlayerLayout && !Forge.altZoneTabs && Forge.isLandscapeMode()) {
Expand Down Expand Up @@ -722,8 +706,14 @@ public void draw(Graphics g) {
float x, y, w, h;
boolean drawOverlay = MatchController.getView().selectedPlayerPanel().getPlayer() == player && Forge.hasGamepad();
if (Forge.altZoneTabs && this.isAlignedRightForAltDisplay()) {
//draw extra
g.fillRect(FSkinColor.get(Forge.isMobileAdventureMode ? Colors.ADV_CLR_THEME2 : Colors.CLR_THEME2), 0, 0, getWidth(), getHeight());
// Dark Slate background
g.fillRect(
FSkinColor.getStandardColor(38, 43, 48),
0,
0,
getWidth(),
getHeight()
);
if (isSelected()) {
if (drawOverlay)
g.fillRect(FSkinColor.getStandardColor(50, 200, 150).alphaColor(0.3f), 0, isFlipped() ? INFO_TAB_PADDING_Y : 0, getWidth(), getHeight() - INFO_TAB_PADDING_Y);
Expand Down
20 changes: 14 additions & 6 deletions forge-gui-mobile/src/forge/screens/match/views/VPrompt.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
import forge.util.Utils;

public class VPrompt extends FContainer {
public static final float HEIGHT = Utils.AVG_FINGER_HEIGHT;
public static final float HEIGHT = Utils.AVG_FINGER_HEIGHT * 1.15f;
public static final float BTN_WIDTH = HEIGHT * 1.5f;
public static final float PADDING = Utils.scale(2);
public static final FSkinFont FONT = FSkinFont.get(14);
Expand Down Expand Up @@ -101,7 +101,13 @@ protected void doLayout(float width, float height) {

@Override
protected void drawBackground(Graphics g) {
g.fillRect(getBackColor(), 0, 0, getWidth(), getHeight());
g.fillRect(
FSkinColor.getStandardColor(38, 43, 48),
0,
0,
getWidth(),
getHeight()
);
}

private class MessageLabel extends FDisplayObject {
Expand Down Expand Up @@ -138,10 +144,12 @@ public boolean longPress(float x, float y) {
@Override
public void draw(Graphics g) {
if (!StringUtils.isEmpty(message)) {
float x = PADDING;
float y = PADDING;
float w = getWidth() - 2 * PADDING;
float h = getHeight() - 2 * PADDING;
float paddingX = Utils.scale(8);
float paddingY = Utils.scale(8);
float x = paddingX;
float y = paddingY;
float w = getWidth() - 2 * paddingX;
float h = getHeight() - 2 * paddingY;
renderer.drawText(g, message, FONT, getForeColor(), x, y, w, h, y, h, true, Align.center, true);
}
}
Expand Down
Loading