Overhaul the replay sidebar.

2014-10-12 18:11:36 +13:00
parent 43f395b0c6
commit ad88378a0b
12 changed files with 660 additions and 276 deletions
--- a/OpenRA.Mods.RA/Widgets/Logic/GameTimerLogic.cs
+++ b/OpenRA.Mods.RA/Widgets/Logic/GameTimerLogic.cs
@@ -34,7 +34,7 @@ namespace OpenRA.Mods.RA.Widgets.Logic
 				if (world.Timestep == 1)
 					return "Max Speed";

-				return "{0:F1}x Speed".F(Game.Timestep * 1f / world.Timestep);
+				return "{0}% Speed".F(Game.Timestep * 100 / world.Timestep);
 			};

 			if (timer != null)
@@ -54,6 +54,16 @@ namespace OpenRA.Mods.RA.Widgets.Logic
 				status.IsVisible = shouldShowStatus;
 				status.GetText = statusText;
 			}
+
+			var percentage = widget.GetOrNull<LabelWidget>("GAME_TIMER_PERCENTAGE");
+			if (percentage != null)
+			{
+				var connection = orderManager.Connection as ReplayConnection;
+				if (connection != null && connection.TickCount != 0)
+					percentage.GetText = () => "({0}%)".F(orderManager.NetFrameNumber * 100 / connection.TickCount);
+				else
+					timer.Bounds.Width += percentage.Bounds.Width;
+			}
 		}
 	}
 }
--- a/OpenRA.Mods.RA/Widgets/Logic/ReplayControlBarLogic.cs
+++ b/OpenRA.Mods.RA/Widgets/Logic/ReplayControlBarLogic.cs
@@ -8,41 +8,88 @@
 */
 #endregion

+using System.Collections.Generic;
+using OpenRA.Network;
 using OpenRA.Widgets;

 namespace OpenRA.Mods.RA.Widgets.Logic
 {
 	public class ReplayControlBarLogic
 	{
+		enum PlaybackSpeed { Regular, Slow, Fast, Maximum }
+
+		readonly Dictionary<PlaybackSpeed, int> timesteps = new Dictionary<PlaybackSpeed, int>()
+		{
+			{ PlaybackSpeed.Regular, Game.Timestep },
+			{ PlaybackSpeed.Slow, Game.Timestep * 2 },
+			{ PlaybackSpeed.Fast, Game.Timestep / 2 },
+			{ PlaybackSpeed.Maximum, 1 },
+		};

 		[ObjectCreator.UseCtor]
-		public ReplayControlBarLogic(Widget widget, World world)
+		public ReplayControlBarLogic(Widget widget, World world, OrderManager orderManager)
 		{
 			if (world.IsReplay)
 			{
 				var container = widget.Get("REPLAY_PLAYER");
+				var connection = (ReplayConnection)orderManager.Connection;
+				var replayNetTicks = connection.TickCount;

 				var background = widget.Parent.GetOrNull("OBSERVER_CONTROL_BG");
 				if (background != null)
 					background.Bounds.Height += container.Bounds.Height;

 				container.Visible = true;
+				var speed = PlaybackSpeed.Regular;

 				var pauseButton = widget.Get<ButtonWidget>("BUTTON_PAUSE");
-				pauseButton.IsHighlighted = () => world.Timestep == 0;
+				pauseButton.IsVisible = () => world.Timestep != 0 && orderManager.NetFrameNumber < replayNetTicks;
 				pauseButton.OnClick = () => world.Timestep = 0;

+				var playButton = widget.Get<ButtonWidget>("BUTTON_PLAY");
+				playButton.IsVisible = () => world.Timestep == 0 || orderManager.NetFrameNumber >= replayNetTicks;
+				playButton.OnClick = () => world.Timestep = timesteps[speed];
+				playButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+
 				var slowButton = widget.Get<ButtonWidget>("BUTTON_SLOW");
-				slowButton.IsHighlighted = () => world.Timestep > Game.Timestep;
-				slowButton.OnClick = () => world.Timestep = Game.Timestep * 2;
+				slowButton.IsHighlighted = () => speed == PlaybackSpeed.Slow;
+				slowButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+				slowButton.OnClick = () =>
+				{
+					speed = PlaybackSpeed.Slow;
+					if (world.Timestep != 0)
+						world.Timestep = timesteps[speed];
+				};

-				var normalSpeedButton = widget.Get<ButtonWidget>("BUTTON_NORMALSPEED");
-				normalSpeedButton.IsHighlighted = () => world.Timestep == Game.Timestep;
-				normalSpeedButton.OnClick = () => world.Timestep = Game.Timestep;
+				var normalSpeedButton = widget.Get<ButtonWidget>("BUTTON_REGULAR");
+				normalSpeedButton.IsHighlighted = () => speed == PlaybackSpeed.Regular;
+				normalSpeedButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+				normalSpeedButton.OnClick = () =>
+				{
+					speed = PlaybackSpeed.Regular;
+					if (world.Timestep != 0)
+						world.Timestep = timesteps[speed];
+				};

-				var fastforwardButton = widget.Get<ButtonWidget>("BUTTON_FASTFORWARD");
-				fastforwardButton.IsHighlighted = () => world.Timestep == 1;
-				fastforwardButton.OnClick = () => world.Timestep = 1;
+				var fastButton = widget.Get<ButtonWidget>("BUTTON_FAST");
+				fastButton.IsHighlighted = () => speed == PlaybackSpeed.Fast;
+				fastButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+				fastButton.OnClick = () =>
+				{
+					speed = PlaybackSpeed.Fast;
+					if (world.Timestep != 0)
+						world.Timestep = timesteps[speed];
+				};
+
+				var maximumButton = widget.Get<ButtonWidget>("BUTTON_MAXIMUM");
+				maximumButton.IsHighlighted = () => speed == PlaybackSpeed.Maximum;
+				maximumButton.IsDisabled = () => orderManager.NetFrameNumber >= replayNetTicks;
+				maximumButton.OnClick = () =>
+				{
+					speed = PlaybackSpeed.Maximum;
+					if (world.Timestep != 0)
+						world.Timestep = timesteps[speed];
+				};
 			}
 		}
 	}
--- a/artsrc/ra/chrome.psd
+++ b/artsrc/ra/chrome.psd
--- a/mods/cnc/chrome/ingame.yaml
+++ b/mods/cnc/chrome/ingame.yaml
@@ -65,7 +65,7 @@ Container@OBSERVER_WIDGETS:
 		MenuButton@OPTIONS_BUTTON:
 			Logic: OrderButtonsChromeLogic
 			Key: escape
-			X: WINDOW_RIGHT-202
+			X: WINDOW_RIGHT-260-WIDTH
 			Y: 5
 			Width: 30
 			Height: 25
@@ -79,10 +79,10 @@ Container@OBSERVER_WIDGETS:
 					ImageCollection: order-icons
 					ImageName: options
 		Background@RADAR:
-			X: WINDOW_RIGHT-173
+			X: WINDOW_RIGHT-WIDTH-5
 			Y: 5
-			Width: 168
-			Height: 168
+			Width: 256
+			Height: 256
 			Background: panel-gray
 			Children:
 				Radar:
@@ -92,15 +92,15 @@ Container@OBSERVER_WIDGETS:
 					Height: PARENT_BOTTOM-2
 		Background@REPLAY_PLAYER:
 			Logic: ReplayControlBarLogic
-			X: WINDOW_RIGHT-173
-			Y: 195
-			Width: 168
+			X: WINDOW_RIGHT-WIDTH-5
+			Y: 283
+			Width: 256
 			Height: 46
 			Background: panel-black
 			Visible: false
 			Children:
 				Button@BUTTON_PAUSE:
-					X: 14
+					X: 16
 					Y: 10
 					Width: 26
 					Height: 26
@@ -113,22 +113,8 @@ Container@OBSERVER_WIDGETS:
 							Height: 16
 							ImageCollection: music
 							ImageName: pause
-				Button@BUTTON_SLOW:
-					X: 14 + 38
-					Y: 10
-					Width: 26
-					Height: 26
-					IgnoreChildMouseOver: true
-					Children:
-						Image@IMAGE_SLOW:
-							X: 5
-							Y: 5
-							Width: 16
-							Height: 16
-							ImageCollection: music
-							ImageName: slowmo
-				Button@BUTTON_NORMALSPEED:
-					X: 14 + 38*2
+				Button@BUTTON_PLAY:
+					X: 16
 					Y: 10
 					Width: 26
 					Height: 26
@@ -141,25 +127,55 @@ Container@OBSERVER_WIDGETS:
 							Height: 16
 							ImageCollection: music
 							ImageName: play
-				Button@BUTTON_FASTFORWARD:
-					X: 14 + 38*3
-					Y: 10
-					Width: 26
-					Height: 26
-					IgnoreChildMouseOver: true
-					Children:
-						Image@IMAGE_FASTFORWARD:
-							X: 5
-							Y: 5
-							Width: 16
-							Height: 16
-							ImageCollection: music
-							ImageName: fastforward
+				Button@BUTTON_SLOW:
+					X: 57
+					Y: 13
+					Width: 36
+					Height: 20
+					BaseLine: 1
+					TooltipText: Slow speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 50%
+					Font: TinyBold
+				Button@BUTTON_REGULAR:
+					X: 57 + 48
+					Y: 13
+					Width: 38
+					Height: 20
+					BaseLine: 1
+					TooltipText: Regular speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 100%
+					Font: TinyBold
+				Button@BUTTON_FAST:
+					X: 57 + 48*2
+					Y: 13
+					Width: 38
+					Height: 20
+					BaseLine: 1
+					TooltipText: Fast speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 200%
+					Font: TinyBold
+				Button@BUTTON_MAXIMUM:
+					X: 57 + 48*3
+					Y: 13
+					Width: 38
+					Height: 20
+					BaseLine: 1
+					TooltipText: Maximum speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: MAX
+					Font: TinyBold
 		DropDownButton@SHROUD_SELECTOR:
 			Logic: ObserverShroudSelectorLogic
-			X: WINDOW_RIGHT-173
-			Y: 172
-			Width: 168
+			X: WINDOW_RIGHT-WIDTH-5
+			Y: 260
+			Width:256
 			Height: 25
 			Font: Bold
 			Children:
--- a/mods/d2k/chrome/ingame-observer.yaml
+++ b/mods/d2k/chrome/ingame-observer.yaml
@@ -63,66 +63,77 @@ Container@OBSERVER_WIDGETS:
 							Height: 25
 				Container@REPLAY_PLAYER:
 					Logic: ReplayControlBarLogic
-					X: PARENT_RIGHT/2 - 80
-					Y: 35
+					Y: 39
 					Width: 160
 					Height: 35
 					Visible: false
 					Children:
 						Button@BUTTON_PAUSE:
 							X: 15
-							Y: 15
-							Width: 25
-							Height: 25
+							Y: 10
+							Width: 26
+							Height: 26
 							IgnoreChildMouseOver: true
 							Children:
 								Image@IMAGE_PAUSE:
-									X: 0
-									Y: 0
+									Y: 1
 									Width: 25
 									Height: 25
 									ImageCollection: music
 									ImageName: pause
-						Button@BUTTON_SLOW:
-							X: 50
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_SLOW:
-									X: 4
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: slowmo
-						Button@BUTTON_NORMALSPEED:
-							X: 85
-							Y: 15
-							Width: 25
-							Height: 25
+						Button@BUTTON_PLAY:
+							X: 15
+							Y: 10
+							Width: 26
+							Height: 26
 							IgnoreChildMouseOver: true
 							Children:
 								Image@IMAGE_PLAY:
-									X: 0
-									Y: 0
 									Width: 25
 									Height: 25
 									ImageCollection: music
 									ImageName: play
-						Button@BUTTON_FASTFORWARD:
-							X: 120
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_FASTFORWARD:
-									X: 4
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: fastforward
-
+						Button@BUTTON_SLOW:
+							X: 55
+							Y: 13
+							Width: 36
+							Height: 20
+							BaseLine: 1
+							TooltipText: Slow speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 50%
+							Font: TinyBold
+						Button@BUTTON_REGULAR:
+							X: 55 + 45
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Regular speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 100%
+							Font: TinyBold
+						Button@BUTTON_FAST:
+							X: 55 + 45*2
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Fast speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 200%
+							Font: TinyBold
+						Button@BUTTON_MAXIMUM:
+							X: 55 + 45*3
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Maximum speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: MAX
+							Font: TinyBold
--- a/mods/ra/chrome.yaml
+++ b/mods/ra/chrome.yaml
@@ -17,9 +17,9 @@ sidebar-button-allies-highlighted-hover: chrome.png
 sidebar-button-allies-highlighted-pressed: chrome.png
 	background: 84,28,28,28
 sidebar-button-allies-disabled: chrome.png
-	background: 112,0,28,28
+	background: 168,0,28,28
 sidebar-button-allies-highlighted-disabled: chrome.png
-	background: 112,0,28,28
+	background: 168,0,28,28

 sidebar-soviet: chrome.png
 	background-top: 274,167,238,290
@@ -40,9 +40,9 @@ sidebar-button-soviet-highlighted-hover: chrome.png
 sidebar-button-soviet-highlighted-pressed: chrome.png
 	background: 28,28,28,28
 sidebar-button-soviet-disabled: chrome.png
-	background: 112,0,28,28
+	background: 168,0,28,28
 sidebar-button-soviet-highlighted-disabled: chrome.png
-	background: 112,0,28,28
+	background: 168,0,28,28

 sidebar-bits: chrome.png
 	production-tooltip-time: 416, 80, 16, 16
@@ -94,6 +94,171 @@ order-icons: chrome.png
 	power-disabled: 480,64,16,16
 	power-active: 480,80,16,16

+sidebar-observer: chrome.png
+	background: 512,167,238,287
+	replay-bottom: 512,454,238,40
+	observer-bottom: 512,495,238,8
+
+sidebar-button-observershroud: chrome.png
+
+sidebar-button-observer: chrome.png
+	background: 117,33,18,18
+	border-r: 135,33,5,18
+	border-l: 112,33,5,18
+	border-b: 117,51,18,5
+	border-t: 117,28,18,5
+	corner-tl: 112,28,5,5
+	corner-tr: 135,28,5,5
+	corner-bl: 112,51,5,5
+	corner-br: 135,51,5,5
+sidebar-button-observer-hover: chrome.png
+	background: 117,5,18,18
+	border-r: 135,5,5,18
+	border-l: 112,5,5,18
+	border-b: 117,23,18,5
+	border-t: 117,0,18,5
+	corner-tl: 112,0,5,5
+	corner-tr: 135,0,5,5
+	corner-bl: 112,23,5,5
+	corner-br: 135,23,5,5
+sidebar-button-observer-pressed: chrome.png
+	background: 117,33,18,18
+	border-r: 135,33,5,18
+	border-l: 112,33,5,18
+	border-b: 117,51,18,5
+	border-t: 117,28,18,5
+	corner-tl: 112,28,5,5
+	corner-tr: 135,28,5,5
+	corner-bl: 112,51,5,5
+	corner-br: 135,51,5,5
+sidebar-button-observer-highlighted: chrome.png
+	background: 145,33,18,18
+	border-r: 163,33,5,18
+	border-l: 140,33,5,18
+	border-b: 145,51,18,5
+	border-t: 145,28,18,5
+	corner-tl: 140,28,5,5
+	corner-tr: 163,28,5,5
+	corner-bl: 140,51,5,5
+	corner-br: 163,51,5,5
+sidebar-button-observer-highlighted-hover: chrome.png
+	background: 145,5,18,18
+	border-r: 163,5,5,18
+	border-l: 140,5,5,18
+	border-b: 145,23,18,5
+	border-t: 145,0,18,5
+	corner-tl: 140,0,5,5
+	corner-tr: 163,0,5,5
+	corner-bl: 140,23,5,5
+	corner-br: 163,23,5,5
+sidebar-button-observer-highlighted-pressed: chrome.png
+	background: 33,33,18,18
+	border-r: 51,33,5,18
+	border-l: 28,33,5,18
+	border-b: 33,51,18,5
+	border-t: 33,28,18,5
+	corner-tl: 28,28,5,5
+	corner-tr: 51,28,5,5
+	corner-bl: 28,51,5,5
+	corner-br: 51,51,5,5
+sidebar-button-observer-disabled: chrome.png
+	background: 173,5,18,18
+	border-r: 191,5,5,18
+	border-l: 168,5,5,18
+	border-b: 173,23,18,5
+	border-t: 173,0,18,5
+	corner-tl: 168,0,5,5
+	corner-tr: 191,0,5,5
+	corner-bl: 168,23,5,5
+	corner-br: 191,23,5,5
+sidebar-button-observer-highlighted-disabled: chrome.png
+	background: 173,5,18,18
+	border-r: 191,5,5,18
+	border-l: 168,5,5,18
+	border-b: 173,23,18,5
+	border-t: 173,0,18,5
+	corner-tl: 168,0,5,5
+	corner-tr: 191,0,5,5
+	corner-bl: 168,23,5,5
+	corner-br: 191,23,5,5
+
+observer-scrollpanel-button: dialog.png
+	background: 769,257,126,126
+	border-r: 895,257,1,126
+	border-l: 768,257,1,126
+	border-b: 769,383,126,1
+	border-t: 769,256,126,1
+	corner-tl: 768,256,1,1
+	corner-tr: 895,256,1,1
+	corner-bl: 768,383,1,1
+	corner-br: 895,383,1,1
+
+observer-scrollpanel-button-hover: dialog.png
+	background: 769,257,126,126
+	border-r: 895,257,1,126
+	border-l: 768,257,1,126
+	border-b: 769,383,126,1
+	border-t: 769,256,126,1
+	corner-tl: 768,256,1,1
+	corner-tr: 895,256,1,1
+	corner-bl: 768,383,1,1
+	corner-br: 895,383,1,1
+
+observer-scrollpanel-button-pressed: dialog.png
+	background: 897,257,126,126
+	border-r: 1023,257,1,126
+	border-l: 896,257,1,126
+	border-b: 897,383,126,1
+	border-t: 897,256,126,1
+	corner-tl: 896,256,1,1
+	corner-tr: 1023,256,1,1
+	corner-bl: 896,383,1,1
+	corner-br: 1023,383,1,1
+
+observer-scrollpanel-button-disabled: dialog.png
+	background: 769,385,126,126
+	border-r: 895,385,1,126
+	border-l: 768,385,1,126
+	border-b: 769,511,126,1
+	border-t: 769,384,126,1
+	corner-tl: 768,384,1,1
+	corner-tr: 895,384,1,1
+	corner-bl: 768,511,1,1
+	corner-br: 895,511,1,1
+
+observer-scrollheader-selected: dialog.png
+	background: 769,385,126,126
+	border-r: 895,385,1,126
+	border-l: 768,385,1,126
+	border-b: 769,511,126,1
+	border-t: 769,384,126,1
+	corner-tl: 768,384,1,1
+	corner-tr: 895,384,1,1
+	corner-bl: 768,511,1,1
+	corner-br: 895,511,1,1
+
+observer-scrollitem-selected: dialog.png
+	background: 897,257,126,126
+	border-r: 1023,257,1,126
+	border-l: 896,257,1,126
+	border-b: 897,383,126,1
+	border-t: 897,256,126,1
+	corner-tl: 896,256,1,1
+	corner-tr: 1023,256,1,1
+	corner-bl: 896,383,1,1
+	corner-br: 1023,383,1,1
+
+observer-scrollitem-hover: dialog.png
+	background: 769,257,126,126
+	border-r: 895,257,1,126
+	border-l: 768,257,1,126
+	border-b: 769,383,126,1
+	border-t: 769,256,126,1
+	corner-tl: 768,256,1,1
+	corner-tr: 895,256,1,1
+	corner-bl: 768,383,1,1
+	corner-br: 895,383,1,1
+
 # Used for the main menu frame
 dialog: dialog.png
 	background: 0,0,480,480
@@ -375,54 +540,6 @@ newsbutton-pressed: dialog.png
 	corner-bl: 640,127,1,1
 	corner-br: 767,127,1,1

-# A copy of dialog2 (normal button)
-scrollthumb: dialog.png
-	background: 513,1,126,126
-	border-r: 639,1,1,126
-	border-l: 512,1,1,126
-	border-b: 513,127,126,1
-	border-t: 513,0,126,1
-	corner-tl: 512,0,1,1
-	corner-tr: 639,0,1,1
-	corner-bl: 512,127,1,1
-	corner-br: 639,127,1,1
-
-# A copy of button-hover
-scrollthumb-hover: dialog.png
-	background: 513,129,126,126
-	border-r: 639,129,1,126
-	border-l: 512,129,1,126
-	border-b: 513,255,126,1
-	border-t: 513,128,126,1
-	corner-tl: 512,128,1,1
-	corner-tr: 639,128,1,1
-	corner-bl: 512,255,1,1
-	corner-br: 639,255,1,1	
-	
-# A copy of dialog3 (pressed button)
-scrollthumb-pressed: dialog.png
-	background: 641,1,126,126
-	border-r: 767,1,1,126
-	border-l: 640,1,1,126
-	border-b: 641,127,126,1
-	border-t: 641,0,126,1
-	corner-tl: 640,0,1,1
-	corner-tr: 767,0,1,1
-	corner-bl: 640,127,1,1
-	corner-br: 767,127,1,1
-
-# A copy of dialog2 (normal button)
-scrollthumb-disabled: dialog.png
-	background: 513,1,126,126
-	border-r: 639,1,1,126
-	border-l: 512,1,1,126
-	border-b: 513,127,126,1
-	border-t: 513,0,126,1
-	corner-tl: 512,0,1,1
-	corner-tr: 639,0,1,1
-	corner-bl: 512,127,1,1
-	corner-br: 639,127,1,1
-
 # A copy of dialog3 (pressed button)
 textfield: dialog.png
 	background: 641,1,126,126
--- a/mods/ra/chrome/dropdowns.yaml
+++ b/mods/ra/chrome/dropdowns.yaml
@@ -60,9 +60,11 @@ ScrollPanel@SPAWN_DROPDOWN_TEMPLATE:

 ScrollPanel@SPECTATOR_DROPDOWN_TEMPLATE:
 	Width: DROPDOWN_WIDTH
+	Background: observer-scrollpanel-button-pressed
+	Button: observer-scrollpanel-button
 	Children:
 		ScrollItem@HEADER:
-			BaseName: scrollheader
+			BaseName: observer-scrollheader
 			Width: PARENT_RIGHT-27
 			Height: 13
 			X: 2
@@ -75,6 +77,7 @@ ScrollPanel@SPECTATOR_DROPDOWN_TEMPLATE:
 					Height: 10
 					Align: Center
 		ScrollItem@TEMPLATE:
+			BaseName: observer-scrollitem
 			Width: PARENT_RIGHT-27
 			Height: 25
 			X: 2
@@ -83,7 +86,7 @@ ScrollPanel@SPECTATOR_DROPDOWN_TEMPLATE:
 			Children:
 				Image@FLAG:
 					X: 4
-					Y: 4
+					Y: 6
 					Width: 32
 					Height: 16
 				Label@LABEL:
--- a/mods/ra/chrome/ingame-observer.yaml
+++ b/mods/ra/chrome/ingame-observer.yaml
@@ -1,77 +1,95 @@
 Container@OBSERVER_WIDGETS:
-	Logic: OrderButtonsChromeLogic
 	Children:
-		Container@GAME_TIMER_BLOCK:
-			Logic: GameTimerLogic
-			X: WINDOW_RIGHT/2 - WIDTH
-			Width: 100
-			Height: 55
+		Image@SIDEBAR_BACKGROUND_TOP:
+			X: WINDOW_RIGHT - 250
+			Y: 10
+			Width: 238
+			Height: 287
+			ImageCollection: sidebar-observer
+			ImageName: background
+			ClickThrough: false
 			Children:
-				Label@GAME_TIMER:
-					Width: PARENT_RIGHT
-					Height: 15
-					Align: Center
-					Font: Title
-					Contrast: true
-				Label@GAME_TIMER_STATUS:
-					Y: 35
-					Width: PARENT_RIGHT
-					Height: 15
-					Align: Center
-					Font: Bold
-					Contrast: true
-		MenuButton@OPTIONS_BUTTON:
-			MenuContainer: INGAME_MENU
-			HideIngameUI: true
-			Pause: false
-			X: 0
-			Y: 0
-			Width: 160
-			Height: 25
-			Text: Options (Esc)
-			Font: Bold
-			Key: escape
-		MenuButton@OBSERVER_STATS_BUTTON:
-			MenuContainer: INGAME_OBSERVERSTATS_BG
-			HideIngameUI: false
-			Pause: false
-			X: 162
-			Y: 0
-			Width: 160
-			Height: 25
-			Text: Statistics (F1)
-			Font: Bold
-			Key: f1
-		Background@RADAR_BG:
-			X: WINDOW_RIGHT-255
-			Y: 5
-			Width: 250
-			Height: 250
-			Children:
-				Radar@INGAME_RADAR:
-					X: 10
+				Background@GAME_TIMER_BLOCK:
+					Logic: GameTimerLogic
+					X: 26
 					Y: 10
-					Width: PARENT_RIGHT-19
-					Height: PARENT_BOTTOM-19
-					WorldInteractionController: INTERACTION_CONTROLLER
-		Background@OBSERVER_CONTROL_BG:
-			X: WINDOW_RIGHT-255
-			Y: 260
-			Width: 250
-			Height: 55
-			Children:
+					Width: 120
+					Height: 22
+					Background: sidebar-button-observer
+					Children:
+						Label@GAME_TIMER:
+							Y: 0-1
+							Width: PARENT_RIGHT - 30
+							Height: PARENT_BOTTOM
+							Align: Center
+							Font: TinyBold
+						Label@GAME_TIMER_PERCENTAGE:
+							X: PARENT_RIGHT - 40
+							Y: 0-1
+							Width: 30
+							Height: PARENT_BOTTOM
+							Align: Right
+							Font: TinyBold
+				Container@TOP_BUTTONS:
+					Logic: OrderButtonsChromeLogic
+					X: 9
+					Y: 7
+					Children:
+						MenuButton@OBSERVER_STATS_BUTTON:
+							MenuContainer: INGAME_OBSERVERSTATS_BG
+							HideIngameUI: false
+							Pause: false
+							Key: F1
+							X: 160
+							Width: 28
+							Height: 28
+							Background: sidebar-button-observer
+							TooltipText: Statistics
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Children:
+								Image@ICON:
+									X: 6
+									Y: 6
+									ImageCollection: order-icons
+									ImageName: diplomacy
+						MenuButton@OPTIONS_BUTTON:
+							Key: escape
+							X: 192
+							Width: 28
+							Height: 28
+							Background: sidebar-button-observer
+							TooltipText: Options
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Children:
+								Image@ICON:
+									X: 6
+									Y: 6
+									ImageCollection: order-icons
+									ImageName: options
+				Container@RADAR:
+					Children:
+						Radar@INGAME_RADAR:
+							WorldInteractionController: INTERACTION_CONTROLLER
+							X: 9
+							Y: 41
+							Width: 220
+							Height: 220
 				DropDownButton@SHROUD_SELECTOR:
 					Logic: ObserverShroudSelectorLogic
-					X: 15
-					Y: 15
-					Width: 220
+					X: 6
+					Y: 262
+					Width: 226
 					Height: 25
 					Font: Bold
+					VisualHeight: 0
+					Background: sidebar-button-observershroud
 					Children:
 						LogicKeyListener@SHROUD_KEYHANDLER:
 						Image@FLAG:
 							X: 4
-							Y: 4
+							Y: 6
 							Width: 32
 							Height: 16
 						Label@LABEL:
@@ -82,68 +100,100 @@ Container@OBSERVER_WIDGETS:
 							X: 5
 							Width: PARENT_RIGHT
 							Height: 25
-				Container@REPLAY_PLAYER:
-					Logic: ReplayControlBarLogic
-					X: PARENT_RIGHT/2 - 80
-					Y: 35
-					Width: 160
-					Height: 35
-					Visible: false
+		Image@SIDEBAR_BACKGROUND_BOTTOM:
+			X: WINDOW_RIGHT - 250
+			Y: 297
+			Width: 238
+			Height: 8
+			ImageCollection: sidebar-observer
+			ImageName: observer-bottom
+		Image@REPLAY_PLAYER:
+			Logic: ReplayControlBarLogic
+			X: WINDOW_RIGHT - 250
+			Y: 297
+			Width: 238
+			Height: 40
+			Visible: false
+			ImageCollection: sidebar-observer
+			ImageName: replay-bottom
+			ClickThrough: false
+			Visible: false
+			Children:
+				Button@BUTTON_PAUSE:
+					X: 9
+					Y: 5
+					Width: 28
+					Height: 28
+					Background: sidebar-button-observer
+					TooltipText: Pause
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
 					Children:
-						Button@BUTTON_PAUSE:
-							X: 15
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_PAUSE:
-									X: 0
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: pause
-						Button@BUTTON_SLOW:
-							X: 50
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_SLOW:
-									X: 4
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: slowmo
-						Button@BUTTON_NORMALSPEED:
-							X: 85
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_PLAY:
-									X: 0
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: play
-						Button@BUTTON_FASTFORWARD:
-							X: 120
-							Y: 15
-							Width: 25
-							Height: 25
-							IgnoreChildMouseOver: true
-							Children:
-								Image@IMAGE_FASTFORWARD:
-									X: 4
-									Y: 0
-									Width: 25
-									Height: 25
-									ImageCollection: music
-									ImageName: fastforward
-
+						Image@IMAGE_PAUSE:
+							X: 2
+							Y: 2
+							ImageCollection: music
+							ImageName: pause
+				Button@BUTTON_PLAY:
+					X: 9
+					Y: 5
+					Width: 28
+					Height: 28
+					Background: sidebar-button-observer
+					TooltipText: Play
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Children:
+						Image@IMAGE_PLAY:
+							X: 2
+							Y: 1
+							ImageCollection: music
+							ImageName: play
+				Button@BUTTON_SLOW:
+					X: 49
+					Y: 8
+					Width: 42
+					Height: 22
+					BaseLine: 1
+					Background: sidebar-button-observer
+					TooltipText: Slow speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 50%
+					Font: TinyBold
+				Button@BUTTON_REGULAR:
+					X: 95
+					Y: 8
+					Width: 42
+					Height: 22
+					BaseLine: 1
+					Background: sidebar-button-observer
+					TooltipText: Regular speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 100%
+					Font: TinyBold
+				Button@BUTTON_FAST:
+					X: 141
+					Y: 8
+					Width: 42
+					Height: 22
+					BaseLine: 1
+					Background: sidebar-button-observer
+					TooltipText: Fast speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: 200%
+					Font: TinyBold
+				Button@BUTTON_MAXIMUM:
+					X: 187
+					Y: 8
+					Width: 42
+					Height: 22
+					BaseLine: 1
+					Background: sidebar-button-observer
+					TooltipText: Maximum speed
+					TooltipContainer: TOOLTIP_CONTAINER
+					VisualHeight: 0
+					Text: MAX
+					Font: TinyBold
--- a/mods/ra/uibits/chrome.png
+++ b/mods/ra/uibits/chrome.png
--- a/mods/ra/uibits/dialog.png
+++ b/mods/ra/uibits/dialog.png
--- a/mods/ts/chrome/ingame-observer.yaml
+++ b/mods/ts/chrome/ingame-observer.yaml
@@ -0,0 +1,130 @@
+Container@OBSERVER_WIDGETS:
+	Children:
+		MenuButton@OBSERVER_STATS_BUTTON:
+			Logic: OrderButtonsChromeLogic
+			MenuContainer: INGAME_OBSERVERSTATS_BG
+			HideIngameUI: False
+			Pause: False
+			X: 162
+			Y: 0
+			Width: 160
+			Height: 25
+			Text: Statistics (F1)
+			Font: Bold
+			Key: f1
+		Background@RADAR_BG:
+			X: WINDOW_RIGHT-255
+			Y: 5
+			Width: 250
+			Height: 250
+			Children:
+				Radar@INGAME_RADAR:
+					X: 10
+					Y: 10
+					Width: PARENT_RIGHT-19
+					Height: PARENT_BOTTOM-19
+					WorldInteractionController: INTERACTION_CONTROLLER
+		Background@OBSERVER_CONTROL_BG:
+			X: WINDOW_RIGHT-255
+			Y: 260
+			Width: 250
+			Height: 55
+			Children:
+				DropDownButton@SHROUD_SELECTOR:
+					Logic: ObserverShroudSelectorLogic
+					X: 15
+					Y: 15
+					Width: 220
+					Height: 25
+					Font: Bold
+					Children:
+						LogicKeyListener@SHROUD_KEYHANDLER:
+						Image@FLAG:
+							X: 4
+							Y: 4
+							Width: 32
+							Height: 16
+						Label@LABEL:
+							X: 40
+							Width: 60
+							Height: 25
+						Label@NOFLAG_LABEL:
+							X: 5
+							Width: PARENT_RIGHT
+							Height: 25
+				Container@REPLAY_PLAYER:
+					Logic: ReplayControlBarLogic
+					Y: 39
+					Width: 160
+					Height: 35
+					Visible: false
+					Children:
+						Button@BUTTON_PAUSE:
+							X: 15
+							Y: 10
+							Width: 26
+							Height: 26
+							IgnoreChildMouseOver: true
+							Children:
+								Image@IMAGE_PAUSE:
+									Y: 1
+									Width: 25
+									Height: 25
+									ImageCollection: music
+									ImageName: pause
+						Button@BUTTON_PLAY:
+							X: 15
+							Y: 10
+							Width: 26
+							Height: 26
+							IgnoreChildMouseOver: true
+							Children:
+								Image@IMAGE_PLAY:
+									Width: 25
+									Height: 25
+									ImageCollection: music
+									ImageName: play
+						Button@BUTTON_SLOW:
+							X: 55
+							Y: 13
+							Width: 36
+							Height: 20
+							BaseLine: 1
+							TooltipText: Slow speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 50%
+							Font: TinyBold
+						Button@BUTTON_REGULAR:
+							X: 55 + 45
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Regular speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 100%
+							Font: TinyBold
+						Button@BUTTON_FAST:
+							X: 55 + 45*2
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Fast speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: 200%
+							Font: TinyBold
+						Button@BUTTON_MAXIMUM:
+							X: 55 + 45*3
+							Y: 13
+							Width: 38
+							Height: 20
+							BaseLine: 1
+							TooltipText: Maximum speed
+							TooltipContainer: TOOLTIP_CONTAINER
+							VisualHeight: 0
+							Text: MAX
+							Font: TinyBold
--- a/mods/ts/mod.yaml
+++ b/mods/ts/mod.yaml
@@ -110,7 +110,7 @@ ChromeLayout:
 	./mods/ra/chrome/ingame-infobriefing.yaml
 	./mods/ra/chrome/ingame-infoobjectives.yaml
 	./mods/ra/chrome/ingame-infostats.yaml
-	./mods/ra/chrome/ingame-observer.yaml
+	./mods/ts/chrome/ingame-observer.yaml
 	./mods/ra/chrome/ingame-observerstats.yaml
 	./mods/ts/chrome/ingame-player.yaml
 	./mods/ra/chrome/ingame-debug.yaml