Fix screenshot onSwitchClick is taken before the game had time to rerender

Author: Jannled

app/gameConfig.py

@@ -43,6 +43,10 @@
 	"researchInfo": REVERSIM_STATIC_URL + "/researchInfo/researchInfo.html"
 }
 
+# Used by the screenshot tool to decide which format to decode
+BASE64_PREAMBLE = 'data:image/png;base64,'
+SCREENSHOT_EXTENSION = '.png'
+
 class GroupNotFound(Exception):
 	"""Raised when a group is requested, which is not in the config"""
 	pass

app/router/routerGame.py

@@ -8,7 +8,7 @@
 from werkzeug import Response
 from markupsafe import escape
 
-from app.gameConfig import BACK_ONLINE_THRESHOLD_S, LOGFILE_VERSION, GroupNotFound
+from app.gameConfig import BACK_ONLINE_THRESHOLD_S, BASE64_PREAMBLE, LOGFILE_VERSION, GroupNotFound
 from app.model.Participant import Participant
 
 import app.config as gameConfig
@@ -228,15 +228,18 @@ def saveCanvasImage():
 	The Request params must contain the pseudonym of the player. The request body shall contain the Base64 encoded PNG snapshot of the players canvas. 
 	The pictures are stored under "statistics/<ui>/<phase>/<picNmbr>.png" for most phases and "statistics/<ui>/<phase>/<levelName>/<picNmbr>.png" for the quali and competition phase
 	"""
-	imgstring = escape(request.form['canvasImage'])
-	imgstring = imgstring.replace('data:image/png;base64,', '')
-	imgdata = base64.b64decode(imgstring)
 
 	pseudonym = sanitizeString(request.form['pseudonym'])
-
 	if not participantsDict.exists(pseudonym):
 		return 'Invalid pseudonym', 400
 
+	imgstring = escape(request.form['canvasImage'])
+	if not imgstring.startswith(BASE64_PREAMBLE):
+		return 'Invalid Image', 400
+	
+	imgstring = imgstring.removeprefix(BASE64_PREAMBLE)
+	imgdata = base64.b64decode(imgstring)
+
 	participant = participantsDict.get(pseudonym)
 	phase = participant.getPhase()
 	path = ScreenshotWriter.getPath(

app/storage/participantScreenshots.py

@@ -2,6 +2,7 @@
 import os
 from typing import Optional
 
+from app.gameConfig import SCREENSHOT_EXTENSION
 from app.utilsGame import safe_join
 
 class ScreenshotWriter:
@@ -40,7 +41,7 @@ def writeScreenshot(cls, screenshotFolder: str, picNmbr: int, imgData: bytes):
 		imagePath: Optional[str] = None
 
 		for i in range(0, 99):
-			imagePath = safe_join(screenshotFolder, str(picNmbr + i) + '.png')
+			imagePath = safe_join(screenshotFolder, str(picNmbr + i) + SCREENSHOT_EXTENSION)
 
 			# If filename already exists, continue to increment
 			if os.path.exists(imagePath):

static/src/createLogs/LogData.js

@@ -29,23 +29,31 @@ class LogData
 
 	/**
 	 * Take a screenshot of the current canvas (this will not include any HTML overlays) and send it to the server.
+	 * @param {Phaser.Scene} scene 
 	 */
-	static sendCanvasPNG()
+	static sendCanvasPNG(scene)
 	{
+		const IMAGE_FORMAT = 'image/png';
+		const IMAGE_QUALITY = 0.8; // Only relevant for jpeg
+
 		if(!gamerules.enableLogging)
 			return "Logging is disabled"
 
 		// get canvas as image
-		var htmlCollection = document.getElementsByTagName('canvas');
-		var canvas = htmlCollection[0];
-		var imgData = canvas.toDataURL("image/png", 1.0);
-
-		let data = {
-			canvasImage: imgData,
-			'pseudonym': pseudonym,
-			'timeStamp': Rq.now()
-		};
+		scene.renderer.snapshot((snapshot) => {
+			if(!(snapshot instanceof HTMLImageElement))
+			{
+				console.error('snapshot was not of type HTMLImageElement');
+				return;
+			}
+			
+			let data = {
+				canvasImage: snapshot.src,
+				'pseudonym': pseudonym,
+				'timeStamp': Rq.now()
+			};
 
-		Rq.post('/canvasImage', () => {}, data, "application/x-www-form-urlencoded; charset=UTF-8");
+			Rq.post('/canvasImage', () => {}, data, "application/x-www-form-urlencoded; charset=UTF-8");
+		}, IMAGE_FORMAT, IMAGE_QUALITY);
 	}
-}
+}

static/src/extras/CanvasDrawing.js

@@ -87,19 +87,19 @@ class CanvasDrawing
 			if(this.justPaintedSomething == true)
 			{
 				//alert('dude, you painted something');
-				LogData.sendCanvasPNG();
+				LogData.sendCanvasPNG(this.scene);
 				JsonRPC.send("draw", {"tool": "pen", "info": this.drawLine.fillColor})
 				this.justPaintedSomething = false;
 			} else if(this.erasedSomething == true)
 			{
 				//alert('you erased something');
-				LogData.sendCanvasPNG();
+				LogData.sendCanvasPNG(this.scene);
 				JsonRPC.send("draw", {"tool": "eraser"})
 				this.erasedSomething = false;
 			} else if(this.deletedEverything == true)
 			{
 				//alert('you deleted everything')
-				LogData.sendCanvasPNG();
+				LogData.sendCanvasPNG(this.scene);
 				JsonRPC.send("draw", {"tool": "purge"})
 				this.deletedEverything = false;
 			}

static/src/scenes/GameScene.js

@@ -558,7 +558,7 @@ class GameScene extends BaseScene
 		JsonRPC.send("switch", levelState);
 
 		// send screenshot
-		LogData.sendCanvasPNG();
+		LogData.sendCanvasPNG(this);
 
 		// Update the scoreboard
 		this.updateScore('switchClick');