Animate the court when the match view is displayed

resources-deu/strings.xml

@@ -55,6 +55,8 @@
 	<string id="settings_default_match_number_of_sets">Standardanzahl der Sätze</string>
 
 	<string id="settings_enable_sound">Töne einschalten</string>
+	<string id="settings_enable_animation">Animation aktivieren</string>
+
 	<string id="settings_display_time">Anzeige der Uhrzeit</string>
 	<string id="settings_display_heart_rate">Heartbeat-Anzeige aktivieren</string>
 

resources-fre/strings.xml

@@ -55,6 +55,8 @@
 	<string id="settings_default_match_number_of_sets">Nombre de sets par défaut</string>
 
 	<string id="settings_enable_sound">Activer les sons</string>
+	<string id="settings_enable_animation">Activer les animations</string>
+
 	<string id="settings_display_time">Afficher l'heure</string>
 	<string id="settings_display_heart_rate">Afficher la fréquence cardiaque</string>
 

resources/properties.xml

@@ -2,6 +2,7 @@
 	<property id="maximum_points" type="number">21</property>
 	<property id="absolute_maximum_points" type="number">30</property>
 	<property id="enable_sound" type="boolean">true</property>
+	<property id="enable_animation" type="boolean">true</property>
 	<property id="display_time" type="boolean">false</property>
 	<property id="display_heart_rate" type="boolean">true</property>
 	<property id="default_match_type" type="number">0</property>

resources/settings.xml

@@ -31,6 +31,10 @@
 		<settingConfig type="boolean" />
 	</setting>
 
+	<setting propertyKey="@Properties.enable_animation" title="@Strings.settings_enable_animation">
+		<settingConfig type="boolean" />
+	</setting>
+
 	<setting propertyKey="@Properties.display_time" title="@Strings.settings_display_time">
 		<settingConfig type="boolean" />
 	</setting>

resources/strings.xml

@@ -55,6 +55,8 @@
 	<string id="settings_default_match_number_of_sets">Default number of sets</string>
 
 	<string id="settings_enable_sound">Enable sound</string>
+	<string id="settings_enable_animation">Enable animation</string>
+
 	<string id="settings_display_time">Display time</string>
 	<string id="settings_display_heart_rate">Display heart rate</string>
 

source/views/MatchView.mc

@@ -109,7 +109,7 @@ class MatchBoundaries {
 
 	public var hrCoordinates as Dictionary<String, Array or Number>;
 
-	function initialize(match as Match, device as DeviceSettings) {
+	function initialize(match as Match, device as DeviceSettings, elapsed_time as Number?) {
 		//calculate margins
 		marginHeight = device.screenHeight * (device.screenShape == System.SCREEN_SHAPE_RECTANGLE ? 0.04 : 0.09);
 		var margin_width = device.screenWidth * 0.09;
@@ -123,7 +123,6 @@ class MatchBoundaries {
 			yBack += TIME_HEIGHT;
 		}
 		yFront = device.screenHeight - marginHeight - TIME_HEIGHT;
-		yMiddle = BetterMath.mean(yFront, yBack);
 
 		var back_width, front_width;
 
@@ -149,6 +148,36 @@ class MatchBoundaries {
 			}
 		}
 
+		if(elapsed_time != null) {
+			var half_time = MatchView.ANIMATION_TIME / 2;
+			if(elapsed_time < half_time) {
+				var width = BetterMath.mean(front_width, back_width);
+				var zoom = 0.7 + (0.3 * elapsed_time / half_time);
+				front_width = width * zoom;
+				back_width = width * zoom;
+
+				//adjust back and front positions
+				yBack = (yBack - 25 + 15 - 15 * elapsed_time / half_time);
+				yFront = (yFront + 25 - 15 + 15 * elapsed_time / half_time);
+			}
+			else if(elapsed_time < MatchView.ANIMATION_TIME) {
+				var time = elapsed_time - half_time;
+				var width = BetterMath.mean(front_width, back_width);
+				var width_offset = (front_width - width) * time / half_time;
+				front_width = width + width_offset;
+				back_width = width - width_offset;
+
+				//adjust back and front positions
+				var offset = 25 * time / half_time;
+				yBack = yBack - 25 + offset;
+				yFront = yFront + 25 - offset;
+				//yBack = Math.sqrt(Math.pow(radius, 2) - Math.pow(back_width / 2, 2));
+				//yFront = Math.sqrt(Math.pow(radius, 2) - Math.pow(front_width / 2, 2));
+			}
+		}
+
+		yMiddle = BetterMath.mean(yFront, yBack);
+
 		//perspective is defined by its two side vanishing lines
 		perspective = new Perspective(
 			[xCenter - front_width, yFront] as Array<Float>, [xCenter - back_width, yBack] as Array<Float>,
@@ -212,45 +241,70 @@ class MatchView extends WatchUi.View {
 	const SCORE_PLAYER_1_FONT = Graphics.FONT_LARGE;
 	const SCORE_PLAYER_2_FONT = Graphics.FONT_MEDIUM;
 
+	const REFRESH_TIME_ANIMATION = 50;
+	const REFRESH_TIME_STANDARD = 1000;
+	const ANIMATION_TIME = 800;
+
 	public var boundaries as MatchBoundaries?;
 
 	private var clock24Hour as Boolean;
 	private var timeAMLabel as String;
 	private var timePMLabel as String;
 
+	private var startTime as Number;
+	private var refreshTime = null as Number?;
+	private var inAnimation = false;
 	private var refreshTimer as Timer.Timer;
 
 	function initialize() {
 		View.initialize();
 		clock24Hour = System.getDeviceSettings().is24Hour;
 		timeAMLabel = WatchUi.loadResource(Rez.Strings.time_am) as String;
 		timePMLabel = WatchUi.loadResource(Rez.Strings.time_pm) as String;
-		calculateBoundaries();
+
+		startTime = System.getTimer();
 		refreshTimer = new Timer.Timer();
 	}
 
-	function calculateBoundaries() as Void {
+	function calculateBoundaries(elapsed_time as Number?) as Void {
 		var match = (Application.getApp() as BadmintonApp).getMatch();
-		boundaries = new MatchBoundaries(match, System.getDeviceSettings());
+		var device = System.getDeviceSettings();
+		boundaries = new MatchBoundaries(match, device, elapsed_time);
 	}
 
-	function onShow() {
-		refreshTimer.start(method(:refresh), 1000, true);
+	function onShow() as Void {
 		(Application.getApp() as BadmintonApp).getBus().register(self);
+		inAnimation = Properties.getValue("enable_animation");
+		var refresh_time = inAnimation ? REFRESH_TIME_ANIMATION : REFRESH_TIME_STANDARD;
+		setRefreshTime(refresh_time);
 	}
 
 	function onHide() as Void {
 		refreshTimer.stop();
 		(Application.getApp() as BadmintonApp).getBus().unregister(self);
 	}
 
+	function getElapsedTime() as Number {
+		return System.getTimer() - startTime;
+	}
+
 	function refresh() as Void {
 		WatchUi.requestUpdate();
 	}
 
+	function setRefreshTime(time as Number) as Void {
+		if(refreshTime != time) {
+			refreshTime = time;
+			refreshTimer.stop();
+			refreshTimer.start(method(:refresh), refreshTime, true);
+			System.println("set refresh time to " + time);
+		}
+	}
+
 	function onUpdateSettings() as Void {
 		//recalculate boundaries as they may change if "display time" setting is updated
-		calculateBoundaries();
+		//calculate the boundaries as they should be after the animation has ended
+		calculateBoundaries(ANIMATION_TIME);
 		WatchUi.requestUpdate();
 	}
 
@@ -424,21 +478,36 @@ class MatchView extends WatchUi.View {
 		var app = (Application.getApp() as BadmintonApp);
 		var match = app.getMatch();
 
+		if(inAnimation) {
+			var elapsed_time = getElapsedTime();
+			if(elapsed_time > ANIMATION_TIME) {
+				inAnimation = false;
+				setRefreshTime(REFRESH_TIME_STANDARD);
+			}
+			calculateBoundaries(elapsed_time);
+		}
+		else if(boundaries == null) {
+			calculateBoundaries(null);
+		}
+
 		drawCourt(dc, match);
-		drawScores(dc, match);
-		drawSets(dc, match);
-		drawTimer(dc, match);
 
-		if(Properties.getValue("display_time")) {
-			drawTime(dc);
-		}
+		if(!inAnimation) {
+			drawScores(dc, match);
+			drawSets(dc, match);
+			drawTimer(dc, match);
 
-		if(Properties.getValue("display_heart_rate")) {
-			//disable anti aliasing to draw a pixel perfect icon
-			if(dc has :setAntiAlias) {
-				dc.setAntiAlias(false);
+			if(Properties.getValue("display_time")) {
+				drawTime(dc);
+			}
+
+			if(Properties.getValue("display_heart_rate")) {
+				//disable anti aliasing to draw a pixel perfect icon
+				if(dc has :setAntiAlias) {
+					dc.setAntiAlias(false);
+				}
+				drawHeartRate(dc);
 			}
-			drawHeartRate(dc);
 		}
 	}
 }