Init-Timer angepasst, SpielTimer eingebaut, Klickfix eingebaut, Belohung vorbereitet

www/css/style.css

@@ -91,13 +91,6 @@ to {background-position: -2000px 0;}
     border-width: 2px;
  }
 
-.myborder:active {
-  background-color: #3e8e41;
-  box-shadow: 0 5px #666;
-  transform: translateY(4px);
-}
-
-
 
 .mentorhilfe {
   position: absolute;

www/js/app.js

@@ -74,6 +74,7 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
         navigator.app.exitApp(); 
       }
       else {
+        
         navigator.app.backHistory();
       }
     }, 100);

www/js/home_controller.js

@@ -4,7 +4,7 @@ appControllers.controller('home', function($scope, $ionicPlatform, $cordovaMedia
   * Mentor-Anitmation ausschalten
   */
   $scope.showmentor=false;
-
+  $scope.CSSKlickSuchspiel=false;
     /*
     * Hintergrundmusik laden und starten
     */
@@ -18,6 +18,7 @@ appControllers.controller('home', function($scope, $ionicPlatform, $cordovaMedia
     * Suchspiel wurde angeklickt, Sound abspielen, Mentor-Animation starten
     */
     $scope.suchspiel_intro = function(){
+       $scope.CSSKlickSuchspiel=true;
       $scope.showmentor=true;
       $scope.mediastartesuchspiel.play();
       $scope.mediastartesuchspiel.setVolume('1.0');
@@ -27,6 +28,7 @@ appControllers.controller('home', function($scope, $ionicPlatform, $cordovaMedia
     * Suchspiel Sound ist beendet, Mentor-Animation ausschalten, Suchspiel starten
     */
     function suchspiel_intro_finish() {
+      $scope.CSSKlickSuchspiel=false;
       $scope.mediastartesuchspiel.release();
       $scope.showmentor=false;
       $state.go('suchspiel');

www/js/suchspiel_controller.js

@@ -23,9 +23,20 @@ $scope.cardindex=0;
 
 //CSS-Steuerung (alias für addClass)
 $scope.CSSErrorCode=99;
-$scope.CSSAusblendung=-1;
+$scope.CSSAusblendung='';
-$scope.CSSEinblendung=-1;
+$scope.CSSEinblendung='';
 $scope.CSSFalscheAntwort = false;
+$scope.CCSInittimer = false;
+
+//SpieleTimer
+$scope.Spielzeit = 180;
+$scope.showgametimer = false;
+
+//Spielzeit vorbei
+$scope.spielvorbei=false;
+$scope.beantwortet=false;
+
+
 
 $ionicPlatform.ready(function() {
  
@@ -52,6 +63,7 @@ $ionicPlatform.ready(function() {
   var kartegebensound =  new Media('/android_asset/www/sounds/karte.mp3', kartegeben,null);
 
 
+
   /*
   * Sounds in $Scope referenzieren
   */
@@ -190,7 +202,7 @@ $scope.hilfe = function() {
 * Mentor ausblenden, nach Soundausgabe
 */
 function mentorausblenden(){
-  $timeout(function () { $scope.showmentor=false; $scope.cardindex=-1}, 10);
+  $timeout(function () { $scope.showmentor=false; $scope.cardindex=0}, 10);
 
 }
 
@@ -199,42 +211,61 @@ function mentorausblenden(){
 * Antwort prüfen
 */
 $scope.PlayerAnswer = function(src) {
-
   /*
-  * Antwort ist richtig
+  * Einblende-effekte zurücksetzen
   */
-  if (src==$scope.randomid){
+
-    $timeout(function () { $scope.showmentorbravo=true;$scope.cardindex=0; }, 0);
+  $scope.CSSEinblendung='';
-    $scope.bravosound.play();
+
-  }
+  if ($scope.beantwortet==false){
-  else{
 
     /*
-    * Antwort war dreimal falsch
+    * Antwort ist richtig
     */
-    if ($scope.falscheantwort==2){
+    $scope.beantwortet=true;
-      $scope.CSSErrorCode=$scope.randomid;
+    if (src==$scope.randomid){
-      $scope.CSSFalscheAntwort= false;
       $timeout(function () { 
-        $scope.CSSErrorCode=99;
+        $scope.showmentorbravo=true;
+        $scope.cardindex=0; 
+      }, 0);
+      $scope.bravosound.play();
+    }
+    else{
+    
+      /*
+      * Antwort war dreimal falsch
+      */
+      if ($scope.falscheantwort==2){
+
+        /*
+        * Richtige Karte pulsieren lassen
+        */
+        $scope.CSSErrorCode=$scope.randomid;
+        $scope.CSSFalscheAntwort= false;
+        /*
+        * Nach 3 sekunden Fehler zurücksetzen und Karten neu vergeben
+        */
         $timeout(function () { 
-          $scope.CSSErrorCode=$scope.randomid;
+          $scope.CSSErrorCode=99;
-          $timeout(function () { $scope.cardindex=0;karteausblenden(); }, 2400);
+          $scope.cardindex=0;
-        }, 1400);
+          karteausblenden(); 
-      }, 700);
+        }, 3000);
       
+      }
+      else {
+        /*
+        * Antwort ist falsch
+        */
+        $scope.falschsound.play();
+        $scope.CSSFalscheAntwort = true;
+        $timeout(function () {
+          $scope.CSSFalscheAntwort = false;
+          $scope.beantwortet=false;
+          $scope.falscheantwort=$scope.falscheantwort + 1
+        }, 1000);
+      }
     }
-    else {
+
-    /*
-    * Antwort ist falsch
-    */
-      $scope.falschsound.play();
-      $scope.CSSFalscheAntwort = true;
-      $timeout(function () {
-        $scope.CSSFalscheAntwort = false;
-        $scope.falscheantwort=$scope.falscheantwort + 1
-      }, 1000);
-    }
   }
 }
 
@@ -245,12 +276,13 @@ $scope.PlayerAnswer = function(src) {
 function goto_newspiel(){
   $scope.CSSErrorCode=99;
   $scope.falscheantwort=0;
-  $scope.CSSEinblendung=0;
+  $scope.CSSEinblendung='';
-  $scope.cardindex=-1;
+  $scope.cardindex=0;
 
   kartenmischen();
   
-  $timeout(function () {  $scope.kartegebensound.play(); }, 2000);
+  //$timeout(function () {  $scope.kartegebensound.play(); }, 2000);
+  kartegeben();
 }
 
 
@@ -259,31 +291,41 @@ function goto_newspiel(){
 */
 function kartegeben(){
   $timeout(function () { 
-    $scope.cardindex=$scope.cardindex + 1;
     $scope.spielelistensort[$scope.cardindex].display=true;
    
     for(var i = 0; i < $scope.spiele.length; i++) {
       var data= $scope.spiele[i];
       if (data.id==$scope.spielelistensort[$scope.cardindex].id){
         $scope.CSSEinblendung=data.einblendecssid;
+        console.log("Einblende Schleife ID: " + $scope.CSSEinblendung);
       }
     }
-
+    $scope.cardindex=$scope.cardindex + 1;
   }, 0);
-  
   /*
   * Interner Zähler bis alle Karten gegeben wurden
   */
-  if ($scope.cardindex < 6 ){
+  if ($scope.cardindex < 7 ){
     $scope.kartegebensound.play();
   }
   else{
     $scope.CSSEinblendung='';
+    /*
+    * Zufallszahl 3x mal generieren lassen, zufälliger
+    */    
     $scope.randomid=getRandomInt(0, 7);
+    $scope.randomid=getRandomInt(0, 7);
+    $scope.randomid=getRandomInt(0, 7);
+    
+    /*
+    * Mentor anzeigen und Sound wiedergeben
+    */
     $scope.showmentor=true;
     $scope.sounds[$scope.randomid].play();
+    console.log("ELSE-Zweig Einblende -ID: " + $scope.CSSEinblendung);
+    console.log("CardIndex: " + $scope.cardindex);
   }
-  
+  console.log("Einblende funktion ID: " + $scope.CSSEinblendung);
 }
 
 /*
@@ -292,30 +334,58 @@ function kartegeben(){
 function karteausblenden(){
   $timeout(function () {  $scope.showmentorbravo=false; }, 0);
 
-  if ($scope.cardindex < 8 ){
+  if ($scope.spielvorbei==false){
 
-    for(var i = 0; i < $scope.spiele.length; i++) {
+    if ($scope.cardindex < 8 ){
-      var data= $scope.spiele[i];
+
-      if (data.id==$scope.spielelistensort[$scope.cardindex].id){
+      for(var i = 0; i < $scope.spiele.length; i++) {
-        $scope.CSSAusblendung=data.ausblendecssid;
+        var data= $scope.spiele[i];
+        if (data.id==$scope.spielelistensort[$scope.cardindex].id){
+          $scope.CSSAusblendung=data.ausblendecssid;
+        }
       }
+      $timeout(function () { 
+        $scope.spielelistensort[$scope.cardindex].display=false; 
+        $scope.chunkedData = chunk($scope.spielelistensort, 4);
+        $scope.cardindex=$scope.cardindex + 1;
+        karteausblenden(); 
+      }, 500);
     }
-    $timeout(function () { 
+    else{
-      $scope.spielelistensort[$scope.cardindex].display=false; 
+      $scope.beantwortet=false;
-      $scope.chunkedData = chunk($scope.spielelistensort, 4);
+      $scope.CSSAusblendung='';
-      $scope.cardindex=$scope.cardindex + 1;
+      goto_newspiel(); 
-      karteausblenden(); 
+    }
-    }, 500);
+  
   }
   else{
-   $scope.CSSAusblendung='';
+    //Belohnung hier rein
-   goto_newspiel(); 
+    $state.go('home');
   }
   
+}
+
+
+/*
+* SpieleTimer Funktion
+*/
+function SpieleTimer(){
+  if ($scope.Spielzeit > 0){
+
+    $scope.Spielzeit=$scope.Spielzeit - 1;
+    $timeout(function () {  
+      SpieleTimer();
+    }, 1000);
+
+  }
+  else{
+    $scope.spielvorbei=true;
+  }
   
 
 }
 
+
 /*
 * Drei mal mischen :)
 */
@@ -391,20 +461,34 @@ function chunk(arr, size) {
 */
 $scope.inittimercounter=3;
 $scope.showinittimer=true;
-$timeout(function () { inittimer(); }, 1000);
+$scope.CCSInittimer=true;
+
+$timeout(function () { 
+  $scope.CCSInittimer=false;
+  inittimer();
+}, 1500);
+
+
 
 function inittimer(){  
+  $scope.CCSInittimer=true;
   if ($scope.inittimercounter > 0){
+    $scope.inittimercounter=$scope.inittimercounter - 1;
 
     $timeout(function () { 
-      $scope.inittimercounter=$scope.inittimercounter - 1;
+      $scope.CCSInittimer=false;
       inittimer();
     }, 1000);
 
   }
   else{
-    $scope.showinittimer=false;
+    $scope.inittimercounter='Los gehts!';
-    goto_newspiel();
+    $timeout(function () { 
+      $scope.showinittimer=false;
+      $scope.showgametimer = true;
+      SpieleTimer();
+      goto_newspiel();
+    }, 1500);
   }
 }
 

www/templates/home.html

@@ -3,7 +3,7 @@
  
      <div class="row">
       <div style="width: 100%;  text-align: center;" class="col">
-        <img class="myborder" src="img/elefant.jpg" height="128" width="128" ng-click="suchspiel_intro()">
+          <img ng-class="{'expandOpen': CSSKlickSuchspiel}" class="myborder" src="img/elefant.jpg" height="128" width="128" ng-click="suchspiel_intro()">
       </div>
     </div>
     <div class="baumhaus">        

www/templates/suchspiel.html

@@ -3,13 +3,15 @@
        
     <div class="row" style="font-size: 12px;padding-top:55px;" ng-show="showinittimer">
             <div style="width: 100%;  text-align: center;" class="col">
+                <div ng-class="{'slideUp': CCSInittimer}">
                 <span class="neon">{{inittimercounter}}</span>
+                </div>
             </div>
     </div>
 
     <div class="row" style="font-size: 12px;padding-top:35px;" ng-repeat="rows in chunkedData">
             <div style="width: 100%;  text-align: center;" class="col" ng-repeat="item in rows">
-                <img ng-class="{'shake': CSSFalscheAntwort, 'rubberBand': CSSErrorCode == '{{item.id}}', 'bounceOut': CSSAusblendung == '{{item.ausblendecssid}}', 'tada': CSSEinblendung == '{{item.einblendecssid}}'}" class="myborder animated" src="img/{{ item.bild }}"width="96" height="96" alig="center" ng-click="PlayerAnswer(item.id)" ng-show="item.display">
+                <img ng-class="{'shake': CSSFalscheAntwort, 'pulse': CSSErrorCode == '{{item.id}}', 'bounceOut': CSSAusblendung == '{{item.ausblendecssid}}', 'tada': CSSEinblendung == '{{item.einblendecssid}}'}" class="myborder animated" src="img/{{ item.bild }}"width="96" height="96" alig="center" ng-click="PlayerAnswer(item.id)" ng-show="item.display">
                 <br>
             </div>
     </div>
@@ -20,6 +22,9 @@
             <div class="mentor"></div>
         </div>
         </div>
+        <div ng-show="showgametimer">
+            <span class="neon pulse">{{ Spielzeit }}</span>
+        </div>
     <div>