Commits

Pedro Ferreira committed 4d93471

- add some styling to the buttons
- move the code related to the game menu to its own file
- change the text of the start button when the game is running

  • Participants
  • Parent commits b375329

Comments (0)

Files changed (4)

+.button
+    {
+    cursor: pointer;
+    background-color: #c4edb8;
+    width: 200px;
+    text-align: center;
+    }
+
+.button:hover
+    {
+    background-color: #8aed7e;
+    }
+
     <script type="text/javascript" src="libraries/easeljs-0.7.1.min.js"></script>
 
     <script type="text/javascript" src="scripts/square.js"></script>
+    <script type="text/javascript" src="scripts/game_menu.js"></script>
     <script type="text/javascript" src="scripts/main.js"></script>
+
+    <link rel="stylesheet" href="css/style.css" />
 </head>
 <body>
 
     <canvas id="canvas"></canvas>
 
-    <div id="start">Start</div>
-    <div id="reset">Reset</div>
+    <div id="start" class="button">Start</div>
+    <div id="reset" class="button">Reset</div>
 
 </body>
 </html>

scripts/game_menu.js

+(function(window)
+{
+function GameMenu()
+{
+
+}
+
+var START = null;
+var START_TEXT = [ 'Working.', 'Working..', 'Working...' ];
+var START_POSITION = 0;
+
+GameMenu.init = function()
+{
+var start = document.querySelector( '#start' );
+
+start.onclick = function()
+    {
+    if ( G.INIT_PHASE )
+        {
+        startGame();
+        }
+    };
+
+var reset = document.querySelector( '#reset' );
+
+reset.onclick = function()
+    {
+    clearGame();
+    };
+
+
+START = start;
+};
+
+
+GameMenu.update = function( event )
+{
+START.innerHTML = START_TEXT[ START_POSITION ];
+
+START_POSITION++;
+
+if ( START_POSITION >= START_TEXT.length )
+    {
+    START_POSITION = 0;
+    }
+};
+
+GameMenu.reset = function()
+{
+START.innerHTML = 'Start';
+};
+
+
+window.GameMenu = GameMenu;
+
+}(window));
     COLUMNS: 20,
     LINES: 20,
     COUNT_TIME: 0,
-    UPDATE_TIME: 500,
+    UPDATE_TIME: 300,
     INIT_PHASE: true
 };
 
         }
     }
 
-
-var start = document.querySelector( '#start' );
-
-start.onclick = function()
-    {
-    if ( G.INIT_PHASE )
-        {
-        startGame();
-        }
-    };
-
-var reset = document.querySelector( '#reset' );
-
-reset.onclick = function()
-    {
-    clearGame();
-    };
-
-
+GameMenu.init();
 
 createjs.Ticker.on( 'tick', tick );
 };
         square.addClickEvent();
         }
     }
+
+GameMenu.reset();
 }
 
 
         {
         G.COUNT_TIME = 0;
 
+        GameMenu.update( event );
         updateGame();
         }
     }