Improved appearance of tabs.

- Replaced 'selection-tab.png' with a new image (by @kouyang).
- Simulate osu! color scheme (tab color/font color changes instead of alpha changes for selected tab).
- Added Utils.drawTab() method to avoid code duplication for Option menu tabs.

Signed-off-by: Jeffrey Han <itdelatrisu@gmail.com>

src/itdelatrisu/opsu/SongSort.java

@@ -22,7 +22,6 @@ import java.util.Arrays;
 import java.util.Collections;
 import java.util.Comparator;
 
-import org.newdawn.slick.Color;
 import org.newdawn.slick.Image;
 
 /**
@@ -63,7 +62,7 @@ public enum SongSort {
 	/**
 	 * Array of SongSort objects in reverse order.
 	 */
-	private static final SongSort[] VALUES_REVERSED;
+	public static final SongSort[] VALUES_REVERSED;
 	static {
 		VALUES_REVERSED = SongSort.values();
 		Collections.reverse(Arrays.asList(VALUES_REVERSED));
@@ -86,20 +85,6 @@ public enum SongSort {
 	 */
 	public static void setSort(SongSort sort) { SongSort.currentSort = sort; }
 
-	/**
-	 * Draws all sort tabs.
-	 */
-	public static void drawAll() {
-		Image tabImage = currentSort.tab.getImage();
-		float tabTextY = currentSort.tab.getY() - (tabImage.getHeight() / 2f);
-		for (SongSort sort : VALUES_REVERSED) {
-			float tabTextX = sort.tab.getX() - (Utils.FONT_MEDIUM.getWidth(sort.name) / 2);
-			tabImage.setAlpha((sort == currentSort) ? 1.0f : 0.7f);
-			sort.tab.draw();
-			Utils.FONT_MEDIUM.drawString(tabTextX, tabTextY, sort.name, Color.white);
-		}
-	}
-
 	/**
 	 * Compares two OsuGroupNode objects by title.
 	 */
@@ -180,10 +165,15 @@ public enum SongSort {
 	 */
 	public void init(int width, int height) {
 		Image tab = GameImage.MENU_TAB.getImage();
-		float buttonX = width * 0.6f;
-		float tabOffset = (width - buttonX - tab.getWidth()) / (SIZE - 1);
+		int tabWidth = tab.getWidth();
+		float buttonX = width / 2f;
+		float tabOffset = (width - buttonX - tabWidth) / (SIZE - 1);
+		if (tabOffset > tabWidth) {  // prevent tabs from being spaced out
+			tabOffset = tabWidth;
+			buttonX = (width * 0.99f) - (tabWidth * SIZE);
+		}
 		this.tab = new MenuButton(tab,
-				(buttonX + (tab.getWidth() / 2f)) + (id * tabOffset),
+				(buttonX + (tabWidth / 2f)) + (id * tabOffset),
 				(height * 0.15f) - (tab.getHeight() / 2f) - 2f
 		);
 	}
@@ -201,4 +191,12 @@ public enum SongSort {
 	 * @return true if within bounds
 	 */
 	public boolean contains(float x, float y) { return tab.contains(x, y); }
+
+	/**
+	 * Draws the sort tab.
+	 * @param selected whether the tab is selected (white) or not (red)
+	 */
+	public void draw(boolean selected) {
+		Utils.drawTab(tab.getX(), tab.getY(), name, selected);
+	}
 }

src/itdelatrisu/opsu/Utils.java

@@ -211,6 +211,30 @@ public class Utils {
 	 */
 	public static MenuButton getBackButton() { return backButton; }
 
+	/**
+	 * Draws a tab image and text centered at a location.
+	 * @param x the center x coordinate
+	 * @param y the center y coordinate
+	 * @param text the text to draw inside the tab
+	 * @param selected whether the tab is selected (white) or not (red)
+	 */
+	public static void drawTab(float x, float y, String text, boolean selected) {
+		Image tabImage = GameImage.MENU_TAB.getImage();
+		float tabTextX = x - (Utils.FONT_MEDIUM.getWidth(text) / 2);
+		float tabTextY = y - (tabImage.getHeight() / 2f) +
+				Math.max((tabImage.getHeight() - Utils.FONT_MEDIUM.getLineHeight()) / 1.5f, 0);
+		Color filter, textColor;
+		if (selected) {
+			filter = Color.white;
+			textColor = Color.black;
+		} else {
+			filter = Color.red;
+			textColor = Color.white;
+		}
+		Utils.drawCentered(tabImage, x, y, filter);
+		Utils.FONT_MEDIUM.drawString(tabTextX, tabTextY, text, textColor);
+	}
+
 	/**
 	 * Draws an image based on its center with a color filter.
 	 * @param img the image to draw

src/itdelatrisu/opsu/states/Options.java

@@ -487,17 +487,14 @@ public class Options extends BasicGameState {
 		}
 
 		// option tabs
-		g.setColor(Color.white);
-		Image tab = optionTabs[0].getImage();
-		float tabTextY = optionTabs[0].getY() - (tab.getHeight() / 2f);
 		for (int i = optionTabs.length - 1; i >= 0; i--) {
-			tab.setAlpha((i == currentTab) ? 1.0f : 0.7f);
-			optionTabs[i].draw();
-			float tabTextX = optionTabs[i].getX() - (Utils.FONT_MEDIUM.getWidth(TAB_NAMES[i]) / 2);
-			Utils.FONT_MEDIUM.drawString(tabTextX, tabTextY, TAB_NAMES[i], Color.white);
+			if (i != currentTab)
+				Utils.drawTab(optionTabs[i].getX(), optionTabs[i].getY(), TAB_NAMES[i], false);
 		}
+		Utils.drawTab(optionTabs[currentTab].getX(), optionTabs[currentTab].getY(), TAB_NAMES[currentTab], true);
+		g.setColor(Color.white);
 		g.setLineWidth(2f);
-		float lineY = optionTabs[0].getY() + (tab.getHeight() / 2f);
+		float lineY = optionTabs[0].getY() + (GameImage.MENU_TAB.getImage().getHeight() / 2f);
 		g.drawLine(0, lineY, width, lineY);
 		g.resetLineWidth();
 

src/itdelatrisu/opsu/states/SongMenu.java

@@ -254,7 +254,12 @@ public class SongMenu extends BasicGameState {
 		optionsButton.draw();
 
 		// sorting tabs
-		SongSort.drawAll();
+		SongSort currentSort = SongSort.getSort();
+		for (SongSort sort : SongSort.VALUES_REVERSED) {
+			if (sort != currentSort)
+				sort.draw(false);
+		}
+		currentSort.draw(true);
 
 		// search
 		Image searchIcon = GameImage.MENU_SEARCH.getImage();