refactor font styles, add new font for button and add support to letterspacing in new font

src/js/gameMechanics.js

@@ -499,7 +499,9 @@ const game = {
       } else {
         const med = {
           typeOfMedia: 'text',
-          name: text,
+          name: style?.increaseLetterSpacing
+            ? text.split('').join(String.fromCharCode(8202))
+            : text,
 
           x: x || game.add.default.x,
           y: y || game.add.default.y,

src/js/globals/globals_debug.js

@@ -1,9 +1,9 @@
 const isDebugMode = true;
 
 const debugState = {
-  lang: { status: true, lang: 'fr_FR' },
+  lang: { status: true, lang: 'pt_BR' },
   name: { status: true, name: 'Username' },
-  menu: { status: true, id: 0 },
+  menu: { status: true, id: 2 },
   customMenu: {
     status: true,
     getData: () => {

src/js/globals/globals_tokens.js

@@ -34,16 +34,11 @@ const colors = {
   yellow: '#ffef1f',
 };
 
-const fontSizes = {
-  h1: '48px',
-  h2: '42px',
-  h3: '38px',
-  h4: '36px',
-  p: '30px',
+const font = {
+  sizes: { h1: '48px', h2: '42px', h3: '38px', h4: '36px', p: '30px' },
+  families: { default: 'Arial, sans-serif', btn: "'Bangers', serif" },
 };
 
-const fontFamily = 'Arial, sans-serif';
-
 /**
  * Preset text styles for game text.<br>
  * Contains: font, size, text color and text align.
@@ -51,30 +46,42 @@ const fontFamily = 'Arial, sans-serif';
  */
 const textStyles = {
   h1_: {
-    font: `${fontSizes.h1} ${fontFamily}`,
+    font: `${font.sizes.h1} ${font.families.default}`,
     align: 'center',
     fill: colors.blue,
   },
   h2_: {
-    font: `${fontSizes.h2} ${fontFamily}`,
+    font: `${font.sizes.h2} ${font.families.default}`,
     align: 'center',
     fill: colors.blue,
   },
   h3_: {
-    font: `${fontSizes.h3} ${fontFamily}`,
+    font: `${font.sizes.h3} ${font.families.default}`,
     align: 'center',
     fill: colors.blue,
   },
   h4_: {
-    font: `${fontSizes.h4} ${fontFamily}`,
+    font: `${font.sizes.h4} ${font.families.default}`,
     align: 'center',
     fill: colors.blue,
   },
   p_: {
-    font: `${fontSizes.p} ${fontFamily}`,
+    font: `${font.sizes.p} ${font.families.default}`,
     align: 'center',
     fill: colors.redDark,
   },
+  btn: {
+    font: `${font.sizes.h2} ${font.families.btn}`,
+    align: 'center',
+    fill: colors.white,
+    increaseLetterSpacing: true,
+  },
+  btnLg: {
+    font: `${font.sizes.h1} ${font.families.btn}`,
+    align: 'center',
+    fill: colors.white,
+    increaseLetterSpacing: true,
+  },
 };
 
 /**

src/js/menus/menu_custom.js

@@ -217,7 +217,8 @@ const customMenuState = {
           // If its in the same icon category
           if (cur == self.menuIcons[overIcon]) {
             // If its the icon the pointer is over
-            if (cur.iconType == 'enter') self.enterText.style = textStyles.h3_;
+            if (cur.iconType == 'enter')
+              self.enterText.style = textStyles.btnLg;
             cur.scale = cur.originalScale * 1.1;
           } else {
             cur.scale = cur.originalScale;
@@ -226,7 +227,7 @@ const customMenuState = {
       });
     } else {
       // If pointer is not over icon
-      if (self.enterText) self.enterText.style = textStyles.h4_;
+      if (self.enterText) self.enterText.style = textStyles.btn;
       self.menuIcons.forEach((cur) => {
         cur.scale = cur.originalScale;
       });
@@ -425,13 +426,13 @@ const customMenuState = {
       x = context.canvas.width - 150;
       y = context.canvas.height - 180;
 
-      const enterIcon = game.add.image(x, y, 'bush', 1.7);
+      const enterIcon = game.add.image(x, y, 'bush', 2);
       enterIcon.anchor(0.5, 0.5);
       enterIcon.iconType = 'enter';
 
       self.menuIcons.push(enterIcon);
 
-      self.enterText = game.add.text(x, y, game.lang.continue, textStyles.h4_);
+      self.enterText = game.add.text(x, y, game.lang.continue, textStyles.btn);
     }
   },
 

src/js/menus/preMenu_name.js

@@ -32,20 +32,20 @@ const nameState = {
       context.canvas.width / 2,
       context.canvas.height / 2 + 93 + 44,
       300,
-      93.5,
-      undefined,
+      100,
       undefined,
+      0,
       colors.green,
       1
     );
     this.okBtn.anchor(0.5, 0.5);
 
     // Set button Text
-    game.add.text(
+    this.okBtnText = game.add.text(
       context.canvas.width / 2,
       context.canvas.height / 2 + 152, //112,
       game.lang.ready,
-      { ...textStyles.h2_, fill: colors.white }
+      textStyles.btn
     );
 
     // Makes text field visible
@@ -137,10 +137,12 @@ const nameState = {
 
     if (game.math.isOverIcon(x, y, cur)) {
       document.body.style.cursor = 'pointer';
-      cur.alpha = 0.8;
+      cur.scale = 1.1;
+      self.okBtnText.style = textStyles.btnLg;
     } else {
       document.body.style.cursor = 'auto';
-      cur.alpha = 1;
+      cur.scale = 1;
+      self.okBtnText.style = textStyles.btn;
     }
 
     game.render.all();

src/js/screens/end.js

@@ -89,8 +89,8 @@ const endState = {
       500,
       100,
       undefined,
-      1,
-      colors.blueDark,
+      0,
+      colors.green,
       0
     );
     this.continueButton.anchor(0.5, 0.5);
@@ -104,8 +104,8 @@ const endState = {
     this.continueText = game.add.text(
       context.canvas.width / 2,
       context.canvas.height / 2 + 16,
-      'Go back to menu',
-      textStyles.h1_
+      'Go back to main menu',
+      textStyles.btn
     );
     this.continueText.alpha = 0;
 
@@ -206,10 +206,12 @@ const endState = {
       // If pointer is over icon
       document.body.style.cursor = 'pointer';
       self.continueButton.scale = self.continueButton.originalScale * 1.1;
+      self.continueText.style = textStyles.btnLg;
     } else {
       // If pointer is not over icon
       self.continueButton.scale = self.continueButton.originalScale * 1;
       document.body.style.cursor = 'auto';
+      self.continueText.style = textStyles.btn;
     }
   },
 };

src/js/screens/map.js

@@ -212,7 +212,7 @@ const mapState = {
       context.canvas.width / 2,
       context.canvas.height / 2 + 16,
       game.lang.continue,
-      { ...textStyles.h1_, fill: colors.white }
+      textStyles.btn
     );
     this.continueText.alpha = 0;
 
@@ -331,9 +331,11 @@ const mapState = {
       // If pointer is over icon
       document.body.style.cursor = 'pointer';
       self.continueButton.scale = self.continueButton.originalScale * 1.1;
+      self.continueText.style = textStyles.btnLg;
     } else {
       // If pointer is not over icon
       self.continueButton.scale = self.continueButton.originalScale * 1;
+      self.continueText.style = textStyles.btn;
       document.body.style.cursor = 'auto';
     }
 

src/style/IFractions.css

@@ -1,3 +1,6 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
+
 .ifr-canvas {
     width: 100%;
 }