Add localization support (Js strings only) and Spanish translations.

gamkedo-la · Nov 17, 2020 · 3892e66 · 3892e66
1 parent a4d573b
commit 3892e66
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -76,6 +76,7 @@
 		</div>
 		<div class='popup'onclick="showCredits()">Click to show Credits</div>
 	<canvas id='gameCanvas' width="320" height="240"></canvas>
+	<script src="js/i18n.js"></script>
 	<script src="js/Coin.js"></script>
 	<script src="js/images.js"></script>
 	<script src="js/Main.js"></script>

diff --git a/js/CharacterSelectScreen.js b/js/CharacterSelectScreen.js
@@ -65,8 +65,8 @@ function CharacterSelectScreen()
 					canvasContext.fillStyle = characterSelectScreen.arrayOfBoxColors[i];
 					canvasContext.fillRect(this.boxX,this.positionY,this.width,this.height);
 					canvasContext.font = '15px "Press Start 2P"';
-					let textWidth = canvasContext.measureText('Player ' + (i + 1)).width;
-					canvasContext.fillText('Player ' + (i + 1), characterSelectScreen.arrayOfBoxPositions[this.boxPositionArrayIndex] + this.width/2 - textWidth/2,
+					let textWidth = canvasContext.measureText(_('Player') + ' ' + (i + 1)).width;
+					canvasContext.fillText(_('Player') + ' ' + (i + 1), characterSelectScreen.arrayOfBoxPositions[this.boxPositionArrayIndex] + this.width/2 - textWidth/2,
 										this.positionY + this.height + 30);
 				},
 
@@ -158,7 +158,7 @@ function CharacterSelectScreen()
 		canvasContext.font = '35px "Press Start 2P"';
 		let playerCountText = ''
 		let playerCountTextWidth = canvasContext.measureText(playerCountText).width;
-		let pressEnterText = 'Press Enter to Start';
+		let pressEnterText = _('Press Enter to Start');
 		let pressEnterTextWidth = canvasContext.measureText(pressEnterText).width;
 		canvasContext.fillText(playerCountText, canvas.width/2 - playerCountTextWidth/2,canvas.height/2 - this.characterImageHeight/2 + this.characterImageHeight + 100);
 		canvasContext.fillText(pressEnterText, canvas.width/2 - pressEnterTextWidth/2,canvas.height/2 - this.characterImageHeight/2 + this.characterImageHeight + 150);
@@ -199,11 +199,11 @@ function CharacterSelectScreen()
 		if (!this.introFrames) {
 			this.introFrames = 0;
             this.introTXT = [
-                "DINO NEEDS DUCKETS",
-                "TO BUY SPACESHIP!",
+                _("DINO NEEDS DUCKETS"),
+                _("TO BUY SPACESHIP!"),
                 "",
-                "Fill ducket bucket",
-                "to escape meteor!"];
+                _("Fill ducket bucket"),
+                _("to escape meteor!")];
 			console.log("Starting intro cinematic story text...");
 		}
 

diff --git a/js/Game.js b/js/Game.js
@@ -207,7 +207,7 @@ function gameDraw(){
     canvasContext.fillStyle = 'white';
     canvasContext.font = '15px "Press Start 2P"';
     canvasContext.textAlign = 'center';
-    canvasContext.fillText("Deposit Coins Here!", canvas.width/2,(canvas.height/2) - (scaledbucketSize/2) - 15);
+      canvasContext.fillText(_("Deposit Coins Here!"), canvas.width/2,(canvas.height/2) - (scaledbucketSize/2) - 15);
     canvasContext.textAlign = 'start';
   }
 
@@ -223,7 +223,7 @@ function gameDraw(){
     canvasContext.fillStyle = 'white';
     canvasContext.font = '35px "Press Start 2P"';
     canvasContext.textAlign = 'center';
-    canvasContext.fillText("Collect and Deposit Coins!", canvas.width/2,canvas.height*0.33);
+      canvasContext.fillText(_("Collect and Deposit Coins!"), canvas.width/2,canvas.height*0.33);
     canvasContext.textAlign = 'start';
   }
 

diff --git a/js/GameOver.js b/js/GameOver.js
@@ -26,19 +26,19 @@ function gameOverDraw(){
     canvasContext.fillStyle = '#FFF';
     canvasContext.font = '72px "Press Start 2P"';
     canvasContext.textAlign = 'center';
-	canvasContext.fillText('SCORE: '+ currentScore, canvas.width/2,canvas.height/4);
+	canvasContext.fillText(_('SCORE') + ': '+ currentScore, canvas.width/2,canvas.height/4);
 
 	canvasContext.fillStyle = 'black';
 	canvasContext.textAlign = 'start';
-    canvasContext.fillText('GAME OVER!', canvas.width/6,canvas.height/2);
+    canvasContext.fillText(_('GAME OVER!'), canvas.width/6,canvas.height/2);
 
     canvasContext.font = '24px "Press Start 2P"'
-	canvasContext.fillText('PRESS R TO TRY AGAIN!', canvas.width/4,canvas.height/1.5);	
-	canvasContext.fillText('PRESS ESC TO GO BACK TO MAIN MENU!', canvas.width/9,canvas.height/1.6);	
+	canvasContext.fillText(_('PRESS R TO TRY AGAIN!'), canvas.width/4,canvas.height/1.5);	
+	canvasContext.fillText(_('PRESS ESC TO GO BACK TO MAIN MENU!'), canvas.width/9,canvas.height/1.6);	
 
     /// draw High Score List 
     canvasContext.textAlign = 'center';
-    canvasContext.fillText('HIGH SCORES', canvas.width/2,canvas.height - 160);
+    canvasContext.fillText(_('HIGH SCORES'), canvas.width/2,canvas.height - 160);
     canvasContext.fillText(sortedHighScoreList[0], canvas.width/2,canvas.height - 130);
     if(sortedHighScoreList.length > 1){
 	  canvasContext.fillText(sortedHighScoreList[1], canvas.width/2,canvas.height - 100);

diff --git a/js/LoadingAndInputToLaunchScreen.js b/js/LoadingAndInputToLaunchScreen.js
@@ -17,7 +17,7 @@ function LoadingAndInputToLaunchScreen()
 		canvasContext.fillRect(this.x,this.y, this.width,this.height);
 
 		canvasContext.fillStyle = '#FE4101';
-		let loadingText = 'Loading...';
+		let loadingText = _('Loading...');
 		canvasContext.font = '25px "Press Start 2P"';
 		let loadingTextWidth = canvasContext.measureText(loadingText).width;
 		canvasContext.fillText(loadingText, canvas.width/2 - loadingTextWidth/2,canvas.height/2 - 50);
@@ -28,7 +28,7 @@ function LoadingAndInputToLaunchScreen()
 	{
 		//canvasContext.fillStyle = '#CDC29E';
 		canvasContext.fillStyle = 'rgb(254,60,1.0,'+this.opacity%1.0+')';
-		let inputToLaunchText = 'Click or Press Enter to Start';
+		let inputToLaunchText = _('Click or Press Enter to Start');
 		canvasContext.font = '25px "Press Start 2P"';
 		let inputToLaunchTextWidth = canvasContext.measureText(inputToLaunchText).width;
 		canvasContext.fillText(inputToLaunchText, canvas.width/2 - inputToLaunchTextWidth/2,canvas.height - 50);		
@@ -57,4 +57,4 @@ function LoadingAndInputToLaunchScreen()
 		this.drawInputToLaunch();
 	}
 
-}
+}
diff --git a/js/i18n.js b/js/i18n.js
@@ -0,0 +1,31 @@
+const catalog = {
+	'es': {
+		'Loading...': 'Cargando...',
+		'Player': 'Jugador',
+		'Click or Press Enter to Start': 'Click o Enter para empezar',
+		'DINO NEEDS DUCKETS': '¡DINO NECESITA MONEDAS',
+        'TO BUY SPACESHIP!': 'PARA COMPRAR SU NAVE!',
+        'Fill ducket bucket': '¡Llena el monedero',
+        'to escape meteor!': 'para escapar del meteoro!',
+		'Press Enter to Start': 'Pulsa Enter para Empezar',
+		'Collect and Deposit Coins!': '¡Recolecta y Deposita Monedas!',
+		'Deposit Coins Here!': '¡Deposita las Monedas Aquí!',
+		'SCORE': 'PUNTAJE',
+		'GAME OVER!': '¡FIN DEL JUEGO!',
+		'PRESS R TO TRY AGAIN!': '¡PULSA R PARA REINTENTAR!',
+		'PRESS ESC TO GO BACK TO MAIN MENU!': '¡PULSA ESC PARA VOLVER AL MENU!',
+		'HIGH SCORES': 'MAXIMOS PUNTAJES',
+	},
+};
+
+function gettext(str) {
+	const lang = navigator.language.split('-')[0];
+	if (catalog.hasOwnProperty(lang)) {
+		if (catalog[lang].hasOwnProperty(str)) {
+			return catalog[lang][str];
+		}
+	}
+	return str;
+}
+
+const _ = gettext;