Hextris · troskop · Sep 28, 2015 · Sep 28, 2015 · Oct 29, 2015
diff --git a/index.html b/index.html
@@ -2,6 +2,7 @@
 <html lang='en'>
 	<head>
 		<title>Hextris</title>
+		<meta charset="utf-8" comment="Support every language" />
 		<meta name="apple-itunes-app" content="app-id=903769553"/>
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui"/>
 		<meta property="og:url" content="http://hextris.github.io/hextris/"/>
@@ -35,6 +36,15 @@
 		<link href='http://fonts.googleapis.com/css?family=Exo+2' rel='stylesheet' type='text/css'>
 		<link rel="stylesheet" href="style/fa/css/font-awesome.min.css">
 		<link rel="stylesheet" type="text/css" href="style/style.css">
+
+<!--
+Files for the language service.
+-->
+	  <script type='text/javascript' src="js/languages/en-us.js"></script>
+		<script type='text/javascript' src="js/languages/de-de.js"></script>
+		<script type='text/javascript' src="js/languages/es-es.js"></script>
+	 	<script type='text/javascript' src="js/languages/language-server.js"></script>
+
 		<script type='text/javascript' src="vendor/hammer.min.js"></script>
 		<script type='text/javascript' src="vendor/js.cookie.js"></script>
 		<script type='text/javascript' src="vendor/jsonfn.min.js"></script>
@@ -69,17 +79,17 @@
 		<div class="faded overlay"></div>
 		<img id="pauseBtn" src="./images/btn_pause.svg"/>
 		<img id='restartBtn' src="./images/btn_restart.svg"/>
-		<div id='HIGHSCORE'>HIGH SCORE</div>
+		<div id='HIGHSCORE'><script>_SWrite("HighScore");</script></div>
 		<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-51272720-2', 'auto'); ga('send', 'pageview');
 		</script>
 		<div id='highScoreInGameText'>
-			<div id='highScoreInGameTextHeader'>HIGH SCORE</div><div id='currentHighScore'>10292</div>
+			<div id='highScoreInGameTextHeader'><script>_SWrite("HighScore");</script></div><div id='currentHighScore'>10292</div>
 		</div>
 		<div id="gameoverscreen">
 			<div id='container'>
-				<div id='gameOverBox' class='GOTitle'>GAME OVER</div>
+				<div id='gameOverBox' class='GOTitle'><script>_SWrite("GameOver");</script></div>
 				<div id='cScore'>1843</div>
-				<div id='highScoresTitle' class='GOTitle'>HIGH SCORES</div>
+				<div id='highScoresTitle' class='GOTitle'><script>_SWrite("HighScores");</script></div>
 				<div class='score'><span class='scoreNum'>1.</span> <div id="1place" style="display:inline;">0</div></div>
 				<div class='score'><span class='scoreNum'>2.</span> <div id="2place" style="display:inline;">0</div></div>
 				<div class='score'><span class='scoreNum'>3.</span> <div id="3place" style="display:inline;">0</div></div>
@@ -89,15 +99,15 @@
 				<div id='socialShare'>
 					<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 					<svg width="224.6377px" height="57px"  viewBox="0 0 255 65" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-						<title>Share button</title>
+						<title><script>_SWrite("ShareButtons");</script></title>
 						<defs>
 						</defs>
 						<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
 							<g id="Game-over-" sketch:type="MSArtboardGroup" transform="translate(-95.000000, -565.000000)">
 								<g id="Share-button" sketch:type="MSLayerGroup" transform="translate(95.000000, 565.000000)">
 								<a style="cursor:pointer;"class="popup" onclick="window.open('https://twitter.com/intent/tweet?text=Can you beat my score of '+ score +' points at&button_hashtag=hextris ? http://hextris.github.io/hextris @hextris','name','width=600,height=400')" ><polygon  id="Score-hex-2" fill="#3498DB" sketch:type="MSShapeGroup" transform="translate(127.661316, 32.500000) rotate(-90.000000) translate(-127.661316, -32.500000) " points="127.661316 -94.814636 160.137269 -76.064636 160.137269 141.064636 127.661317 159.814636 95.185364 141.064636 95.1853635 -76.064636 "></polygon></a>
 									<text style="cursor:pointer;"class="popup" onclick="window.open('https://twitter.com/intent/tweet?text=Can you beat my score of '+ score +' points at&button_hashtag=hextris ? http://hextris.github.io/hextris @hextris','name','width=600,height=400')" id="SHARE-MY-SCORE!" sketch:type="MSTextLayer" font-family="Exo" font-size="16" font-weight="420" fill="#FFFFFF">
-										<tspan x="67" y="39">SHARE MY SCORE!</tspan>
+										<tspan x="67" y="39"><script>_SWrite("ShareMyScore");</script></tspan>
 									</text>
 								</g>
 							</g>

diff --git a/js/languages/Language.md b/js/languages/Language.md
@@ -0,0 +1,23 @@
+
+*How to: Add a Language*
+============================
+
+Adding more languages to "hextris" is very simple and fast.
+You just need to follow these steps:
+
+1) Copy the "en-US.js" file and rename it to your languages name.
+e.g. if your are translating to chinese, just use "zh-CN". And please use always the language code with 5 chars!
+See here for a full list of languages: [http://www.lingoes.net/en/translator/langcode.htm]
+
+2) Replace the "____LanguageServerResourcesEN_US" to your language, e.g. "____LanguageServerResourcesZH_CN".
+
+3) Translate the content
+
+4) Add a reference to the language in "Language-server.js" and in the "index.html" file.
+
+
+If you need help, you can ask me.
+
+______________________
+Version 29.10.2015 // TRoskop
+
diff --git a/js/languages/de-de.js b/js/languages/de-de.js
@@ -0,0 +1,35 @@
+/*
+	Language Server for hextris.
+	Allows to load languagre resources at runtime.
+
+  Language: DE-DE (Germany's german) @Übersetzung von: Thomas Roskop
+*/
+
+
+
+____LanguageServerResourcesDE_DE = {
+  "AppName": "Hextris",
+  "AppDescription": "Ein süchtig machendes Spiel von Tetris inspiriert.",
+  "GameOver": "VERLOREN",
+  "HighScore": "BESTE BEWERTUNG",
+  "HighScores": "BESTE BEWERTUNGEN",
+  "ShareMyScore": "MEINE PUNKTZAHL TEILEN",
+  "ShareButtons": "TEILEN",
+
+  'paused': "<div class='centeredHeader unselectable'>Spiel pausiert</div>",
+  'pausedAndroid': "<div class='centeredHeader unselectable'>Spiel pausiert.</div><div class='unselectable centeredSubHeader' style='position:absolute;margin-left:-150px;left:50%;margin-top:20px;width:300px;font-size:16px;'><a href = 'https://play.google.com/store/apps/details?id=com.hextris.hextrisadfree' target='_blank'>Du möchtest den Entwickler unterstützen? Du magst keine Werbung? Tippe hier für die werbefreie Version!</a></div>",
+  'pausediOS': "<div class='centeredHeader unselectable'>Spiel pausiert</div><div class='unselectable centeredSubHeader' style='position:absolute;margin-left:-150px;left:50%;margin-top:20px;width:300px;font-size:16px;'><a href = 'https://itunes.apple.com/us/app/hextris-ad-free/id912895524?mt=8' target='_blank'>Du möchtest den Entwickler unterstützen? Du magst keine Werbung? Tippe hier für die werbefreie Version!</a></div>",
+  'pausedOther': "<div class='centeredHeader unselectable'>Spiel pausiert</div><div class='unselectable centeredSubHeader' style='margin-top:10px;position:absolute;left:50%;margin-left:-190px;max-width:380px;font-size:18px;'><a href = 'http://hextris.github.io/' target='_blank'>Du möchtest den Entwickler unterstützen? Du magst keine Werbung? Tippe hier für die werbefreie Version!</a></div>",
+  'start': "<div class='centeredHeader unselectable' style='line-height:80px;'>Drücke die Eingabetaste zum weitermachen.</div>",
+
+  "input_text": "Drücke die rechte und linke Pfeiltaste",
+  "action_text": "um das Hexagon zu drehen.",
+  "score_text": "Verbinde 3+ gleichfarbige Blöcke um Punkte zu sammeln.",
+  /* Mobile version */
+  "input_textM": "Drücke auf die rechte und linke Seite",
+  "action_textM": "um das Hexagon zu drehen.",
+  "score_textM": "Verbinde 3+ gleichfarbige Blöcke um Punkte zu sammeln.",
+
+  /* Only access this with "_SEval()" */
+  "Instructions": "<div id = 'instructions_head'>HINWEISE ZUM SPIEL!</div><p>Ziel des Spieles ist es zu verhindern, dass die farbigen Balken den grauen Bereich verlassen.</p><p>\" + (settings.platform != 'mobile' ? 'Drücke dazu die rechte und linke Pfeiltaste' : 'Tippe auf die linke oder rechte Seite des Bildschirms') + \" um das Hexagon zu bewegen.</p><p>Die Blöcke verschwinden, wenn drei oder mehr der gleichn Farbe sich dirket berühren.</p><p>Die Zeit, bis deine Mehrfachattacke zuende ist, wird durch <span style='color:#f1c40f;'>die</span> <span style='color:#e74c3c'>bunten</span> <span style='color:#3498db'>Linien</span> <span style='color:#2ecc71'>an der Seite</span> des Hexagons angezeigt.</p> <hr> <p id = 'afterhr'></p> Von <a href='http://loganengstrom.com' target='_blank'>Logan Engstrom</a> & <a href='http://github.com/garrettdreyfus' target='_blank'>Garrett Finucane</a><br>Besuche Hextris auf <a href = 'https://itunes.apple.com/us/app/id903769553?mt=8' target='_blank'>iOS</a> & <a href ='https://play.google.com/store/apps/details?id=com.hextris.hextris' target='_blank'>Android</a><br><a href ='http://hextris.github.io/' target='_blank'>Hextris auf Github!</a>"
+};
diff --git a/js/languages/en-us.js b/js/languages/en-us.js
@@ -0,0 +1,34 @@
+/*
+	Language Server for hextris.
+	Allows to load languagre resources at runtime.
+
+  Language: EN-US (American English)
+*/
+
+
+
+____LanguageServerResourcesEN_US = {
+  "AppName": "Hextris",
+  "AppDescription": "Ein süchtig machendes Spiel in",
+  "GameOver": "GAME OVER",
+  "HighScore": "HIGH SCORE",
+  "HighScores": "HIGH SCORES",
+  "ShareMyScore": "SHARE MY SCORE",
+  "ShareButtons": "Share buttons",
+
+  'paused': "<div class='centeredHeader unselectable'>Game Paused</div>",
+  'pausedAndroid': "<div class='centeredHeader unselectable'>Game Paused</div><div class='unselectable centeredSubHeader' style='position:absolute;margin-left:-150px;left:50%;margin-top:20px;width:300px;font-size:16px;'><a href = 'https://play.google.com/store/apps/details?id=com.hextris.hextrisadfree' target='_blank'Want to support the developers? Don't like ads? Tap for Hextris ad-free!</a></div>",
+  'pausediOS': "<div class='centeredHeader unselectable'>Game Paused</div><div class='unselectable centeredSubHeader' style='position:absolute;margin-left:-150px;left:50%;margin-top:20px;width:300px;font-size:16px;'><a href = 'https://itunes.apple.com/us/app/hextris-ad-free/id912895524?mt=8' target='_blank'>Want to support the developers? Don't like ads? Tap for Hextris ad-free!</a></div>",
+  'pausedOther': "<div class='centeredHeader unselectable'>Game Paused</div><div class='unselectable centeredSubHeader' style='margin-top:10px;position:absolute;left:50%;margin-left:-190px;max-width:380px;font-size:18px;'><a href = 'http://hextris.github.io/' target='_blank'>Want to support the developers? Click here to buy one of the ad-free mobile versions!</a></div>",
+  'start': "<div class='centeredHeader unselectable' style='line-height:80px;'>Press enter to start</div>",
+
+  "input_text": "Use the right and left arrow keys",
+  "action_text": "to rotate the hexagon",
+  "score_text": "Match 3+ blocks to score!",
+  /* Mobile version */
+  "input_textM": "Tap the screen\'s left and ride",
+  "action_textM": "sides to rotate the hexagon",
+  "score_textM": "Match 3+ blocks to score!",
+
+  "Instructions": "<div id = 'instructions_head'>HOW TO PLAY</div><p>The goal of Hextris is to stop blocks from leaving the inside of the outer gray hexagon.</p><p>\" + (settings.platform != 'mobile' ? 'Press the right and left arrow keys' : 'Tap the left and right sides of the screen') + \" to rotate the Hexagon</p><p>Clear blocks and get points by making 3 or more blocks of the same color touch.</p><p>Time left before your combo streak disappears is indicated by <span style='color:#f1c40f;'>the</span> <span style='color:#e74c3c'>colored</span> <span style='color:#3498db'>lines</span> <span style='color:#2ecc71'>on</span> the outer hexagon</p> <hr> <p id = 'afterhr'></p> By <a href='http://loganengstrom.com' target='_blank'>Logan Engstrom</a> & <a href='http://github.com/garrettdreyfus' target='_blank'>Garrett Finucane</a><br>Find Hextris on <a href = 'https://itunes.apple.com/us/app/id903769553?mt=8' target='_blank'>iOS</a> & <a href ='https://play.google.com/store/apps/details?id=com.hextris.hextris' target='_blank'>Android</a><br>More @ the <a href ='http://hextris.github.io/' target='_blank'>Hextris Website</a>"
+};
diff --git a/js/languages/es-es.js b/js/languages/es-es.js
@@ -0,0 +1,33 @@
+/*
+	Language Server for hextris.
+	Allows to load language resources at runtime.
+  Language: ES (Spanish)
+*/
+
+
+
+____LanguageServerResourcesES_ES = {
+  "AppName": "Hextris",
+  "AppDescription": "Hextris es una inspiracion del juego más conocido: Tetris",
+  "GameOver": "FIN DEL JUEGO",
+  "HighScore": "PUNTUACION MAS ALTA",
+  "HighScores": "PUNTAJES ALTOS",
+  "ShareMyScore": "COMPARTIR MI PUNTAJE",
+  "ShareButtons": "BOTONES PARA COMPARTIR",
+
+  'paused': "<div class='centeredHeader unselectable'>Juego Pausado</div>",
+  'pausedAndroid': "<div class='centeredHeader unselectable'>Juego Pausado</div><div class='unselectable centeredSubHeader' style='position:absolute;margin-left:-150px;left:50%;margin-top:20px;width:300px;font-size:16px;'><a href = 'https://play.google.com/store/apps/details?id=com.hextris.hextrisadfree' target='_blank'>Quieres apoyar a los desarrolladores? Comparte,¿No te gusta los anuncios? Haga click para Hextris libre de publicidad!</a></div>",
+  'pausediOS': "<div class='centeredHeader unselectable'>Juego Pausado</div><div class='unselectable centeredSubHeader' style='position:absolute;margin-left:-150px;left:50%;margin-top:20px;width:300px;font-size:16px;'><a href = 'https://itunes.apple.com/us/app/hextris-ad-free/id912895524?mt=8' target='_blank'>Quieres apoyar a los desarrolladores? Comparte,¿No te gusta los anuncios? Haga click para Hextris libre de publicidad!</a></div>",
+  'pausedOther': "<div class='centeredHeader unselectable'>Juego Pausado</div><div class='unselectable centeredSubHeader' style='margin-top:10px;position:absolute;left:50%;margin-left:-190px;max-width:380px;font-size:18px;'><a href = 'http://hextris.github.io/' target='_blank'>Quieres apoyar a los desarrolladores? Haga clic aquí para comprar una de las versiones libres de publicidad móviles!</a></div>",
+  'start': "<div class='centeredHeader unselectable' style='line-height:80px;'>Presione ENTER para comenzar</div>",
+
+  "input_text": "Utilice las teclas flecha derecha y flecha izquierda del teclado",
+  "action_text": "Para girar el hexágono",
+  "score_text": "Una 3 o + bloques para sumar puntos!",
+  /* Mobile version */
+  "input_textM": "Toque la pantalla del lado izquierdo o derecho",
+  "action_textM": "para girar el hexágono",
+  "score_textM": "Una 3 o + bloques para sumar puntos!",
+
+  "Instructions": "<div id = 'instructions_head'>Como jugar?</div><p>El objetivo de Hextris es no permitir que los bloques salgan del hexágono gris más grande.</p><p>\" + (settings.platform != 'mobile' ? 'Presione las teclas fecha izquierda y derecha del teclado' : 'Toque en los lados izquierdo y derecho de la pantalla') + \" Para girar el hexagono</p><p>Para limpiar los Bloques y obtener puntos, debe juntar 3 o más bloques del mismo color.</p><p> El tiempo restante antes de que su racha de combo, se indica mediante <span style='color:#f1c40f;'>Las</span> <span style='color:#e74c3c'>lineas</span> <span style='color:#3498db'>de colores</span> <span style='color:#2ecc71'>sobre</span> nuestro hexagono</p> <hr> <p id = 'afterhr'></p> Creado por <a href='http://loganengstrom.com' target='_blank'>Logan Engstrom</a> & <a href='http://github.com/garrettdreyfus' target='_blank'>Garrett Finucane</a><br>Encuentra el juego Hextris en <a href = 'https://itunes.apple.com/us/app/id903769553?mt=8' target='_blank'>iOS</a> & <a href ='https://play.google.com/store/apps/details?id=com.hextris.hextris' target='_blank'>Android</a><br>Mas @ en el <a href ='http://hextris.github.io/' target='_blank'>sitio web Hextris</a>"
+};
diff --git a/js/languages/language-server.js b/js/languages/language-server.js
@@ -0,0 +1,75 @@
+/*
+	Language Server for hextris.
+	Allows to load languagre resources at runtime.
+
+	From Thomas Roskop (Github: TRoskop).
+
+	We have to ad every language (currently) to the index.html file to support the language.
+	Moreover, we load only those variables we realy need.
+*/
+
+var ____LanguageServerResources = {};
+
+/*
+	This is a list of all the languages this app does currently support.
+	If the user uses a language we do not support, load fallback language en-US.
+*/
+var ____LanguageServerLocales = [
+	"en-US",
+	"de-DE",
+  "es-ES"
+];
+
+(function _LanguageServerInit() {
+	var lang = navigator.language || navigator.userLanguage; /* form: "en-US" */
+	var lngFound = false;
+	for (var i = 0; i < ____LanguageServerLocales.length; i++) {
+		if(____LanguageServerLocales[i] == lang) {
+			lngFound = true; /* We found the language in the list so we support it. */
+		}
+	}
+
+	// If we found no perfect match, let's look for a unexact match.
+  // This means that we only compare the first two chars as they only indicate the language without the region.
+  if(!lngFound) {
+		for (var i = 0; i < ____LanguageServerLocales.length; i++) {
+			var l1 = ____LanguageServerLocales[i].substring(0, 2); // e.g.: en
+      if( lang.indexOf(l1) > -1 ) { // e.g.: if "en-es" contains "en" we have a match.
+				lngFound = true; /* We found the language in the list so we support it. */
+				lang = l1;
+      }      
+		}
+  }
+
+	if(!lngFound) lang = "en-US"; /* Use fallback language because no language was found! */
+
+  // lang = "es-es"; // For development test, should uncomment this line AND use your (valid!) language!
+
+	lang = lang.replace("-", "_").toUpperCase();
+
+	console.log("language: " + lang);
+
+  eval("____LanguageServerResources = ____LanguageServerResources" + lang + ";");
+	/* Looks like: ____LanguageServerResources = ____LanguageServerResourcesEN_US; */
+})();
+
+/*
+	Gets the string matching the key.
+	If there is no string, simply return the key in brackets: '{key}'
+*/
+function _S(key) {
+	return ____LanguageServerResources[key] || "{" + key + "}";
+}
+
+function _SEval(key) {
+	return eval(_S(key));
+}
+
+function _SText(key, elementID) {
+	var d = document.getElementById(elementID);
+	if(d != null) { d.textContent = _S(key); }
+}
+
+function _SWrite(key) {
+	document.write(_S(key));
+}
diff --git a/js/main.js b/js/main.js
@@ -360,7 +360,7 @@ function showHelp() {
 		}
 	}
 
-	$("#inst_main_body").html("<div id = 'instructions_head'>HOW TO PLAY</div><p>The goal of Hextris is to stop blocks from leaving the inside of the outer gray hexagon.</p><p>" + (settings.platform != 'mobile' ? 'Press the right and left arrow keys' : 'Tap the left and right sides of the screen') + " to rotate the Hexagon</p><p>Clear blocks and get points by making 3 or more blocks of the same color touch.</p><p>Time left before your combo streak disappears is indicated by <span style='color:#f1c40f;'>the</span> <span style='color:#e74c3c'>colored</span> <span style='color:#3498db'>lines</span> <span style='color:#2ecc71'>on</span> the outer hexagon</p> <hr> <p id = 'afterhr'></p> By <a href='http://loganengstrom.com' target='_blank'>Logan Engstrom</a> & <a href='http://github.com/garrettdreyfus' target='_blank'>Garrett Finucane</a><br>Find Hextris on <a href = 'https://itunes.apple.com/us/app/id903769553?mt=8' target='_blank'>iOS</a> & <a href ='https://play.google.com/store/apps/details?id=com.hextris.hextris' target='_blank'>Android</a><br>More @ the <a href ='http://hextris.github.io/' target='_blank'>Hextris Website</a>");
+	$("#inst_main_body").html(_SEval("Instructions"));
 	if (gameState == 1) {
 		pause();
 	}