Update Play / Spectating button styling

- Decrease button & font sizes to give ready / start buttons more prominence
- Use i18n lib for tooltips
- Change tooltip depending on button state

- Add `SetButtonStatePlaying()` and `SetButtonStateSpectating()` to avoid duplication of constants throughout the code.
- Tooltip/caption values set after button init with `SetButtonStatePlaying()`

-  Move `button_highlight` style colours to mirror `option_button` colours

- Makes use of `suppressButtonReaction` to remove hints that the play/spectating buttons are pressable when they aren't (This won't work until Spring-Chobby/Chobby#547 is merged, due to a typo in the source.)

LuaMenu/widgets/chili/skins/Evolved/skin.lua

@@ -66,9 +66,9 @@ skin.button_highlight = {
   tiles = {32, 32, 32, 32}, --// tile widths: left,top,right,bottom
   padding = {20, 20, 20, 20},
 
-  backgroundColor = {0.2, 0.2, 0.2, 0.7},
-  focusColor  = {0.375, 0.375, 0.375, 0.5},
-  borderColor = {1,1,1,0},
+  backgroundColor = {0.70, 0.70, 0.75, 0.65},
+  focusColor  = {0.72, 0.72, 0.80, 0.9},
+  borderColor = {0.40, 0.40, 0.50, 0.15},
 
   DrawControl = DrawButton,
 }

LuaMenu/widgets/chobby/i18n/chililobby.lua

@@ -138,13 +138,20 @@ return {
 		skip_tutorial = "Skip Tutorial",
 		rejoin = "Rejoin",
 		abandon = "Abandon",
+
+		tooltip_is_spectator = "You will spectate this game",
+		tooltip_become_spectator = "Press to watch the game as a spectator",
 		spectate = "Spectate",
 		spectating = "Spectating",
+
+		tooltip_is_player = "You will play in this game",
+		tooltip_become_player = "Press to play in this game",
 		play = "Play",
+		playing = "Playing",
+
 		watch = "Watch",
 		matchmaking = "Matchmaking",
 		customGames = "Custom Games",
-		playing = "Playing",
 		pick_map = "Change Map",
 		add_team = "Add Team",
 		players = "Players",

LuaMenu/widgets/gui_battle_room_window.lua

@@ -760,41 +760,67 @@ local function SetupInfoButtonsPanel(leftInfo, rightInfo, battle, battleID, myUs
 	}
 
 	local btnPlay
-	local btnSpectate = Button:New {
+	local btnSpectate
+
+	local function SetButtonStatePlaying()
+		ButtonUtilities.SetButtonDeselected(btnSpectate)
+		ButtonUtilities.SetCaption(btnSpectate, i18n("spectate"))
+		ButtonUtilities.SetButtonSelected(btnPlay)
+		ButtonUtilities.SetCaption(btnPlay, i18n("playing"))
+
+		btnPlay.suppressButtonReaction = true
+		btnSpectate.suppressButtonReaction = false
+
+		btnPlay.tooltip = i18n("tooltip_is_player")
+		btnSpectate.tooltip = i18n("tooltip_become_spectator")
+
+	end
+	local function SetButtonStateSpectating()
+		ButtonUtilities.SetButtonDeselected(btnPlay)
+		ButtonUtilities.SetCaption(btnPlay, i18n("play"))
+		ButtonUtilities.SetButtonSelected(btnSpectate)
+
+		btnSpectate.suppressButtonReaction = true
+		btnPlay.suppressButtonReaction = false
+
+		btnSpectate.tooltip = i18n("tooltip_is_spectator")
+		btnPlay.tooltip = i18n("tooltip_become_player")
+
+		ButtonUtilities.SetCaption(btnSpectate, i18n("spectating"))
+	end
+
+	btnSpectate = Button:New { -- Some properties set by SetButtonStatePlaying() after both buttons are initialised.
 		x = "50.5%",
 		right = 0,
 		bottom = 51,
-		height = 48,
+		height = 32,
 		classname = "button_highlight",
-		caption = "\255\66\138\201" .. i18n("spectator") .. "\b",
-		font = config:GetFont(3),
-		tooltip = "Watch the game as a spectator",
+		caption = "",
+		font = config:GetFont(2),
 		OnClick = {
 			function(obj)
 				battleLobby:SetBattleStatus({
 					isSpectator = true,
 					isReady = false
 				})
-				ButtonUtilities.SetButtonDeselected(btnPlay)
-				ButtonUtilities.SetCaption(btnPlay, i18n("play"))
-				ButtonUtilities.SetButtonSelected(obj)
-				ButtonUtilities.SetCaption(obj, i18n("spectating"))
+
+				SetButtonStateSpectating()
+
 				WG.Analytics.SendOnetimeEvent("lobby:multiplayer:custom:spectate")
 				WG.Chobby.Configuration:SetConfigValue("lastGameSpectatorState", true)
 			end
 		},
 		parent = rightInfo,
 	}
 
-	btnPlay = Button:New {
+	btnPlay = Button:New { -- Some properties set by SetButtonStatePlaying() after both buttons are initialised.
 		x = 0,
 		right = "50.5%",
 		bottom = 51,
-		height = 48,
+		height = 32,
 		classname = "button_highlight",
-		caption = "\255\66\138\201" .. i18n("player") .. "\b",
-		font = config:GetFont(3),
-		tooltip = "Become a player in this game",
+		caption = "",
+		font = config:GetFont(2),
 		OnClick = {
 			function(obj)
 				local unusedTeamID = battleLobby:GetUnusedTeamID()
@@ -804,17 +830,18 @@ local function SetupInfoButtonsPanel(leftInfo, rightInfo, battle, battleID, myUs
 					isReady = false,
 					side = (WG.Chobby.Configuration.lastFactionChoice or 0),
 					teamNumber = unusedTeamID})
-				ButtonUtilities.SetButtonDeselected(btnSpectate)
-				ButtonUtilities.SetCaption(btnSpectate, i18n("spectate"))
-				ButtonUtilities.SetButtonSelected(obj)
-				ButtonUtilities.SetCaption(obj, i18n("playing"))
+
+				SetButtonStatePlaying()
+
 				WG.Analytics.SendOnetimeEvent("lobby:multiplayer:custom:play")
 				WG.Chobby.Configuration:SetConfigValue("lastGameSpectatorState", false)
 			end
 		},
 		parent = rightInfo,
 	}
 
+	SetButtonStatePlaying()
+
 	rightInfo.OnResize = {
 		function (obj, xSize, ySize)
 			if xSize + minimapBottomClearance < ySize then
@@ -1065,17 +1092,11 @@ local function SetupInfoButtonsPanel(leftInfo, rightInfo, battle, battleID, myUs
 	function externalFunctions.UpdateUserTeamStatus(userName, allyNumber, isSpectator)
 		if userName == myUserName then
 			if isSpectator then
-				ButtonUtilities.SetButtonDeselected(btnPlay)
-				ButtonUtilities.SetCaption(btnPlay, i18n("play"))
-				ButtonUtilities.SetButtonSelected(btnSpectate)
-				ButtonUtilities.SetCaption(btnSpectate, i18n("spectating"))
+				SetButtonStateSpectating()
 				startBoxPanel:Hide()
 				minimapPanel.disableChildrenHitTest = true --omg this is amazing
 			else
-				ButtonUtilities.SetButtonDeselected(btnSpectate)
-				ButtonUtilities.SetCaption(btnSpectate, i18n("spectate"))
-				ButtonUtilities.SetButtonSelected(btnPlay)
-				ButtonUtilities.SetCaption(btnPlay, i18n("playing"))
+				SetButtonStatePlaying()
 				startBoxPanel:Show()
 				minimapPanel.disableChildrenHitTest = false
 			end