refactor: fix TheBallGame

Author: rubjorper

TheBallGame.html

@@ -5,7 +5,7 @@
   <title>Jogo da Bolinha</title>
 	<link rel="icon" href="resources/Bolinha_icon.ico"/>
 	<meta charset="UTF-8"/>
-	<style> <!-- collapseit -->
+	<!-- collapseit --> <style>
 	  body {
 	    margin: 0px;
 		  width: 100%;
@@ -61,17 +61,13 @@
 	  </select>
 	</div>
 	<div name="background-FullSize" id="background"></div>
-	<script name="Define Language">setLanguage(getCookie("language"))</script>
+	<script name="Define Language"></script>
 	<script name="Initialization"> /* collapseit */
-	  
 	</script>
   <script name="Events">
-    
   </script>
   <script name="Classes">
-    
-    
-    </script>
+  </script>
   <script name="Real Code"> /*collapseit*/
 
 	</script>

resources/languages/TheBallGame.ts

@@ -1,14 +1,6 @@
 import { element } from "../../src/JSTools";
 import { canvas } from "../../src/TheBallGame/Initialization";
 
-let livesText_lang: string,
-  scoreText_lang: string,
-  playGameOption_lang: string,
-  optionsOption_lang: string,
-  downloadOption_lang: string,
-  optionsSoon_lang: string,
-  backToMenu_lang: string,
-  exitOptionsButton_lang: string;
 function setLanguage(language: "en" | "pt") {
   switch (language) {
   case "en":
@@ -18,14 +10,14 @@ function setLanguage(language: "en" | "pt") {
     element("backToIndex")!.innerHTML = "Back";
     element("reloadButton")!.innerHTML = "Reload";
     element("downloadGame")!.innerHTML = "Download Game (Portuguese only)";
-    livesText_lang = "Lives";
-    scoreText_lang = "Score";
-    playGameOption_lang = "Play";
-    optionsOption_lang = "Options";
-    downloadOption_lang = "Download";
-    optionsSoon_lang = "Soon";
-    backToMenu_lang = "Exit";
-    exitOptionsButton_lang = "Back to Main Menu";
+    (window as any).globals.livesText_lang = "Lives";
+    (window as any).globals.scoreText_lang = "Score";
+    (window as any).globals.playGameOption_lang = "Play";
+    (window as any).globals.optionsOption_lang = "Options";
+    (window as any).globals.downloadOption_lang = "Download";
+    (window as any).globals.optionsSoon_lang = "Soon";
+    (window as any).globals.backToMenu_lang = "Exit";
+    (window as any).globals.exitOptionsButton_lang = "Back to Main Menu";
     break;
   default:
     localStorage.removeItem("language");
@@ -35,26 +27,16 @@ function setLanguage(language: "en" | "pt") {
     element("backToIndex")!.innerHTML = "Voltar";
     element("reloadButton")!.innerHTML = "Recarregar";
     element("downloadGame")!.innerHTML = "Descarregar Jogo";
-    livesText_lang = "Vidas";
-    scoreText_lang = "Pontuação";
-    playGameOption_lang = "Jogar";
-    optionsOption_lang = "Opções";
-    downloadOption_lang = "Descarregar";
-    optionsSoon_lang = "Brevemente";
-    backToMenu_lang = "Sair";
-    exitOptionsButton_lang = "Voltar para o Menu Principal";
+    (window as any).globals.livesText_lang = "Vidas";
+    (window as any).globals.scoreText_lang = "Pontuação";
+    (window as any).globals.playGameOption_lang = "Jogar";
+    (window as any).globals.optionsOption_lang = "Opções";
+    (window as any).globals.downloadOption_lang = "Descarregar";
+    (window as any).globals.optionsSoon_lang = "Brevemente";
+    (window as any).globals.backToMenu_lang = "Sair";
+    (window as any).globals.exitOptionsButton_lang = "Voltar para o Menu Principal";
     break;
   }
 }
 
-export {
-  setLanguage,
-  livesText_lang,
-  scoreText_lang,
-  playGameOption_lang,
-  optionsOption_lang,
-  downloadOption_lang,
-  optionsSoon_lang,
-  backToMenu_lang,
-  exitOptionsButton_lang,
-};
+export { setLanguage };

src/JSTools.ts

@@ -282,27 +282,31 @@ class Rectangle extends Control {
   };
 }
 /*--------------------------------------Function-19-----------------------------------------------------------------*/
-function Circle(x: number, y: number, radius: number) {
-  Control.call(this, x, y); //Inherit from Control
-  this.radius = radius;
-}
-Circle.prototype = Object.create(Control.prototype);
-Circle.prototype.constructor = Circle;
-Circle.prototype.draw = function () {
-  if (this.visible) {
-    ctx.beginPath();
-    ctx.fillStyle = this.color;
-    ctx.strokeStyle = this.outlineColor;
-    ctx.lineWidth = this.outlineWidth;
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
-    ctx.fill();
-    ctx.stroke();
+class Circle extends Control {
+  radius: number;
+
+  constructor(x: number, y: number, radius: number) {
+    super(x, y); // Inherit from Control
+    this.radius = radius;
+  }
+
+  draw() {
+    if (this.visible) {
+      ctx.beginPath();
+      ctx.fillStyle = this.color;
+      ctx.strokeStyle = this.outlineColor;
+      ctx.lineWidth = this.outlineWidth;
+      ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.stroke();
+    }
+  }
+
+  goTo(newX: number, newY: number) {
+    this.x = newX + this.radius;
+    this.y = newY + this.radius;
   }
 }
-Circle.prototype.goTo = function (newX: number, newY: number) {
-  this.x = newX + this.radius;
-  this.y = newY + this.radius;
-};
 /*--------------------------------------Function-20-----------------------------------------------------------------*/
 class Label extends Control {
   text: string;