adjusting main menu size

index.html

@@ -108,7 +108,9 @@
   <div class="container">
 
     <div class="panel panel-primary">
+
       <div class="panel-heading">iFractions game :: by LInE</div>
+
       <div class="panel-body">
 
         <canvas id="iFractions-canvas"></canvas> <!-- iFractions game -->

js/globals.js

@@ -242,88 +242,106 @@ const colors = {
   yellow: '#ffef1f',
 };
 
+const fontSizes = {
+  h0: '56px',
+  h1: '40px',
+  h2: '32px',
+  h3: '30px',
+  h4: '28px',
+  p: '22px',
+  h1_old: '32px',
+  h2_old: '26px',
+  h3_old: '22px',
+  h4_old: '20px',
+  p_old: '14px',
+};
 /**
  * Preset text styles for game text.<br>
  * Contains: font, size, text color and text align.
  * @type {object}
  */
 const textStyles = {
+  h0_green: {
+    font: fontSizes.h0 + ' Arial,sans-serif',
+    fill: colors.green,
+    align: 'center',
+  }, // menu title
   h1_green: {
-    font: '32px Arial,sans-serif',
+    font: fontSizes.h1 + ' Arial,sans-serif',
     fill: colors.green,
     align: 'center',
   }, // Menu title
   h2_green: {
-    font: '26px Arial,sans-serif',
+    font: fontSizes.h2 + ' Arial,sans-serif',
     fill: colors.green,
     align: 'center',
   }, // Flag labels (langState)
 
   h1_white: {
-    font: '32px Arial,sans-serif',
+    font: fontSizes.h1 + ' Arial,sans-serif',
     fill: colors.white,
     align: 'center',
   }, // Ok button (nameState)
   h2_white: {
-    font: '26px Arial,sans-serif',
+    font: fontSizes.h2 + ' Arial,sans-serif',
     fill: colors.white,
     align: 'center',
   }, // Difficulty buttons (menuState)
   h3__white: {
-    font: '23px Arial,sans-serif',
+    font: fontSizes.h3 + ' Arial,sans-serif',
     fill: colors.white,
     align: 'center',
   }, // Difficulty numbers (menuState)
   h4_white: {
-    font: '20px Arial,sans-serif',
+    font: fontSizes.h4 + ' Arial,sans-serif',
     fill: colors.white,
     align: 'center',
   }, // Difficulty numbers (menuState)
   p_white: {
-    font: '14px Arial,sans-serif',
+    font: fontSizes.p + ' Arial,sans-serif',
     fill: colors.white,
     align: 'center',
   }, // Enter button (menuState)
 
   h2_brown: {
-    font: '26px Arial,sans-serif',
+    font: fontSizes.h2 + ' Arial,sans-serif',
     fill: colors.redDark,
     align: 'center',
   }, // Map difficulty label
   h4_brown: {
-    font: '20px Arial,sans-serif',
+    font: fontSizes.h4 + ' Arial,sans-serif',
     fill: colors.redDark,
     align: 'center',
   }, // Menu overtitle
   p_brown: {
-    font: '14px Arial,sans-serif',
+    font: fontSizes.p + ' Arial,sans-serif',
     fill: colors.redDark,
     align: 'center',
   }, // Map difficulty label
 
   h2_blue: {
-    font: '26px Arial,sans-serif',
+    font: fontSizes.h2 + ' Arial,sans-serif',
     fill: colors.blue,
     align: 'center',
   }, // Menu subtitle
   h4_blue: {
-    font: '20px Arial,sans-serif',
+    font: fontSizes.h4 + ' Arial,sans-serif',
     fill: colors.blue,
     align: 'center',
   }, // Menu subtitle
 
   h2_blueDark: {
-    font: '26px Arial,sans-serif',
+    font: fontSizes.h2 + ' Arial,sans-serif',
     fill: colors.blueDark,
     align: 'center',
   }, // Fractions
   h4_blueDark: {
-    font: '20px Arial,sans-serif',
+    font: fontSizes.h4 + ' Arial,sans-serif',
     fill: colors.blueDark,
     align: 'center',
   }, // Fractions
   p_blueDark: {
-    font: '14px Arial,sans-serif',
+    font: fontSizes.p + ' Arial,sans-serif',
     fill: colors.blueDark,
     align: 'center',
   }, // Fractions

js/menu.js

@@ -35,27 +35,27 @@ const menuState = {
       );
       // Floor
       for (let i = 0; i < context.canvas.width / 100; i++) {
-        game.add.image(i * 100, context.canvas.height - 100, 'floor');
+        game.add.image(i * 150, context.canvas.height - 150, 'floor', 1.5);
       }
 
       // Overtitle: Welcome, <player name>!
       game.add.text(
         context.canvas.width / 2,
-        40,
+        60,
         game.lang.welcome + ', ' + playerName + '!',
-        textStyles.h4_brown
+        textStyles.h2_brown
       );
       // Title : Select a game
       game.add.text(
         context.canvas.width / 2,
-        80,
+        120,
         game.lang.menu_title,
-        textStyles.h1_green
+        textStyles.h0_green
       );
       // Subtitle : <game mode>
       this.lbl_game = game.add.text(
         context.canvas.width / 2,
-        110,
+        160,
         '',
         textStyles.h2_blue
       );
@@ -80,7 +80,7 @@ const menuState = {
           x,
           context.canvas.height / 2 - 70,
           info.gameTypeUrl[i],
-          1
+          1.5
         );
         icon.anchor(0.5, 0.5);
 
@@ -92,11 +92,11 @@ const menuState = {
 
         // "more information" button
         infoIcon = game.add.image(
-          x + 70,
-          context.canvas.height / 2 - 70 - 80,
+          x + 110,
+          context.canvas.height / 2 - 100 - 80,
           'info',
-          0.6,
-          0.4
+          1.2,
+          1
         );
         infoIcon.anchor(0.5, 0.5);
         infoIcon.iconType = 'infoIcon';

js/preMenu.js

@@ -102,7 +102,7 @@ const langState = {
         context.canvas.width / 2 + this.langs.x[i],
         context.canvas.height / 2 + this.langs.y[i],
         this.langs.text[i],
-        textStyles.h2_green
+        textStyles.h1_green
       ).align = 'right';
 
       // Add icons for flags
@@ -117,6 +117,9 @@ const langState = {
 
     game.event.add('click', this.onInputDown);
     game.event.add('mousemove', this.onInputOver);
+
+    console.log('DEBUG');
+    this.setLang('pt_BR');
   },
 
   /**
@@ -247,10 +250,10 @@ const nameState = {
 
     // Set 'ok' button that gets player's information
     this.okBtn = game.add.geom.rect(
-      context.canvas.width / 2 - 84,
-      context.canvas.height / 2 + 70,
-      168,
-      60,
+      context.canvas.width / 2 - 104,
+      context.canvas.height / 2 + 62,
+      208, //168,
+      72, //60,
       undefined,
       0,
       colors.gray,
@@ -281,6 +284,10 @@ const nameState = {
 
     game.event.add('click', this.onInputDown);
     game.event.add('mousemove', this.onInputOver);
+
+    console.log('DEBUG');
+    document.getElementById('textbox-content').value = 'Laira';
+    this.saveName();
   },
 
   /**