add game instructions

css/pexeso.css

@@ -101,8 +101,8 @@ BODY, HTML {
 
 .levelButton {
     font-size: 1.2em;
-    background: #111;
-    border: 1px solid lightgray;
+    background: gray;
+    border: 1px solid gray;
     padding: 0.5em;
     margin: 1em;
     cursor: pointer;
@@ -112,3 +112,18 @@ BODY, HTML {
 	border: 1px solid yellow;
 	color: yellow;
 }
+
+.startLevelInstructions {
+	color: white;
+	position: absolute;
+	z-index: 1000;
+	width: 100%;
+	height: 100%;
+	font-size: 2.5em;
+	text-align: center;
+	background: rgba(0,0,0,0.7);
+}
+
+.instructionSymbols {
+	padding-top: 2em;
+}

index.html

@@ -57,7 +57,16 @@
         <div id="levelTitle"><span id="levelWord">Level </span>{{currentLevel.levelName}}</div>
     </div>
 
-    <div id="mainContent" ng-style="containerStyle">
+    <!-- Start level instructions -->
+    <div class="startLevelInstructions" ng-show="isStartConfirmation">
+        <div class="instructionSymbols">
+            <span ng-repeat="icon in instructions track by $index"> <i class="fa" ng-class="icon"></i></span>
+        </div>
+        <div id="startLevel" class="levelButton" ng-click="playLevel()" >
+                <i class="fa fa-flag-checkered"></i> Start</div>
+    </div>
+    
+    <div id="mainContent" ng-style="containerStyle" ng-hide="isStartConfirmatioxn">
     
         <flippy ng-repeat="card in board" 
         class="fancy"

js/pexeso-controller.js

@@ -3,6 +3,11 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
     
     $scope.isLevelVisible = false;
     
+    // Is start information with confirmation visible
+    $scope.isStartConfirmation = true;
+    
+    $scope.instructions = [];
+    
     $scope.levelIndex = 0;
     
     // How many cards must be found as the same.
@@ -35,6 +40,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
     $scope.levels = [
         {
             levelName: "01: 2 Pictures",
+            instructions: ['fa-picture-o', 'fa-plus', 'fa-picture-o'],
             totalCards: 2*2,
             cardsPerRow: 2,
             chainLength: 2,
@@ -43,6 +49,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
         }, 
         {
             levelName: "02: 3 Pictures",
+            instructions: ['fa-picture-o', 'fa-plus', 'fa-picture-o', 'fa-plus', 'fa-picture-o'],
             totalCards: 3*3,
             cardsPerRow: 3,
             chainLength: 3,
@@ -51,6 +58,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
         },
         {
             levelName: "03: 4 Pictures",
+            instructions: ['fa-picture-o', 'fa-plus', 'fa-picture-o', 'fa-plus', 'fa-picture-o', 'fa-plus', 'fa-picture-o'],
             totalCards: 4*4,
             cardsPerRow: 4,
             chainLength: 4,
@@ -58,6 +66,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
             cardTypes: ['picture', 'picture', 'picture', 'picture'] 
         }, {
             levelName: "04: Math",
+            instructions: ['fa-circle-o', 'fa-plus', 'fa-calculator'],
             totalCards: 4*4,
             cardsPerRow: 4,
             chainLength: 2,
@@ -65,6 +74,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
             cardTypes: ['arabic', 'math']
         }, {
             levelName: "05: Roman",
+            instructions: ['fa-circle-o', 'fa-plus', 'fa-file-excel-o'],
             totalCards: 4*4,
             cardsPerRow: 4, 
             chainLength: 2,
@@ -72,6 +82,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
             cardTypes: ['arabic', 'roman']
         }, {
             levelName: "06: Japanese",
+            instructions: ['fa-circle-o', 'fa-plus', 'fa-jpy'],
             totalCards: 4*4,
             cardsPerRow: 4,
             chainLength: 2,
@@ -79,6 +90,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
             cardTypes: ['arabic', 'japanese']
         }, {
             levelName: "07: 4x MIX",
+            instructions: ['fa-circle-o', 'fa-plus', 'fa-calculator', 'fa-plus', 'fa-file-excel-o', 'fa-plus', 'fa-jpy'],
             totalCards: 4*4,
             cardsPerRow: 4,
             chainLength: 4,
@@ -86,6 +98,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
             cardTypes: ['arabic', 'math', 'roman', 'japanese']
         },{
             levelName: "08: Morse",
+            instructions: ['fa-font', 'fa-plus', 'fa-circle', 'fa-minus'],
             totalCards: 4*4,
             cardsPerRow: 4,
             chainLength: 2,
@@ -93,6 +106,7 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
             cardTypes: ['key', 'morse']
         }, {
             levelName: "Finale",
+            instructions: ['fa-smile-o'],
             totalCards: 7*1,
             cardsPerRow: 7,
             chainLength: 7,
@@ -314,14 +328,20 @@ angular.module('app', ['angular-flippy', 'level-selector', 'level-complete'])
         $scope.levelIndex = args.levelIndex;
         $scope.currentLevel = $scope.levels[$scope.levelIndex];
         $scope.currentCardTypes = $scope.currentLevel.cardTypes;
+        $scope.instructions = $scope.currentLevel.instructions;
         $scope.chainLength = $scope.currentLevel.chainLength;
         
         $scope.computeCardSize($scope.currentLevel.cardsPerRow);
         $scope.generateBoard($scope.currentLevel.totalCards);
         
         $scope.isLevelVisible = true;
+        $scope.isStartConfirmation= true;
     };
     
+    $scope.playLevel = function() {
+        $scope.isStartConfirmation = false;
+    }
+    
     /**
      * Level complete - display level outro screen.
      */