Animationen angepasst

www/css/style.css

@@ -60,7 +60,16 @@ to {background-position: -2000px 0;}
     border-radius: 6px;
     color: black;
     border-style: solid;
-    border-color:black;
+    border-color: black;
+    border-width: 2px;
+ }
+
+ .redborder{
+    display: inline-block;
+    border-radius: 6px;
+    color: black;
+    border-style: solid;
+    border-color: red;
     border-width: 2px;
  }
 

www/js/services.js

@@ -44,4 +44,14 @@ angular.module('kinderspiel.services', [])
             return inbackground;
         }
     };
-})
+})
+
+.factory("kcSleep", function($timeout) {
+  return function(ms) {
+    return function(value) {
+      return $timeout(function() {
+        return value;
+      }, ms);
+    };
+  };
+});

www/js/suchspiel_controller.js

@@ -1,4 +1,4 @@
-appControllers.controller('Suchspiel', function($scope,  $ionicPlatform, $cordovaMedia, $state, $timeout) {
+appControllers.controller('Suchspiel', function($scope,  $ionicPlatform, $cordovaMedia, $state, $timeout,$q) {
 
 
 $scope.showmentor=false;
@@ -8,6 +8,13 @@ $scope.spieleview=[];
 $scope.tierfinden='';
 $scope.randomid=0;
 $scope.error = false;
+$scope.spielrunden=0
+$scope.falscheantwort=0
+$scope.errorcode=99;
+$scope.tierindex=99;
+$scope.spielfertig=-1;
+$scope.spielneu=-1;
+
 
 
 $ionicPlatform.ready(function() {
@@ -16,7 +23,8 @@ $ionicPlatform.ready(function() {
   * Sounds definieren
   */
   $scope.sounds=[];
-  $scope.sounds.push('');
+  //$scope.sounds.push('');
+
 
   var tiersound1 =  new Media('/android_asset/www/sounds/finde_elefant.mp3', mentorausblenden,null);
   var tiersound2 =  new Media('/android_asset/www/sounds/finde_esel.mp3', mentorausblenden,null);
@@ -27,7 +35,7 @@ $ionicPlatform.ready(function() {
   var tiersound7 =  new Media('/android_asset/www/sounds/finde_maus.mp3', mentorausblenden,null);
   var tiersound8 =  new Media('/android_asset/www/sounds/finde_schaf.mp3', mentorausblenden,null);
 
-  var bravosound = new Media('/android_asset/www/sounds/bravo.mp3', goto_newspiel,null);
+  var bravosound = new Media('/android_asset/www/sounds/bravo.mp3', animateoldgame,null);
   var falschsound = new Media('/android_asset/www/sounds/falsch.mp3', null,null);
 
   $scope.bravosound=bravosound;
@@ -49,73 +57,81 @@ $ionicPlatform.ready(function() {
 * Tiere definieren
 */
 var tier = {
-  id: 1,
+  id: 0,
   bild: 'elefant.jpg',
   sound1: 'sound_elefant.mp3',
-  antwort: ''
+  antwort: '',
+  display: false
 };
 $scope.spiele.push(tier);
 
 
 var tier1 = {
-  id: 2,
+  id: 1,
   bild: 'esel.jpg',
   sound1: 'sound_esel.mp3',
-  antwort: ''
+  antwort: '',
+  display: false
 };
 $scope.spiele.push(tier1);
 
 
 var tier2 = {
-  id: 3,
+  id: 2,
   bild: 'hahn.jpg',
   sound1: 'sound_hahn.mp3',
-  antwort: ''
+  antwort: '',
+  display: false
 };
 $scope.spiele.push(tier2);
 
 
 var tier3 = {
-  id: 4,
+  id: 3,
   bild: 'hund.jpg',
   sound1: 'sound_hund.mp3',
-  sound2: ''
+  sound2: '',
+  display: false
 };
 $scope.spiele.push(tier3);
 
 
 var tier4 = {
-  id: 5,
+  id: 4,
   bild: 'katze.jpg',
   sound1: 'sound_katze.mp3',
-  sound2: ''
+  sound2: '',
+  display: false
 };
 $scope.spiele.push(tier4);
 
 
 var tier5 = {
-  id: 6,
+  id: 5,
   bild: 'kuh.jpg',
   sound1: 'sound_kuh.mp3',
-  sound2: ''
+  sound2: '',
+  display: false
 };
 $scope.spiele.push(tier5);
 
 
 var tier6 = {
-  id: 7,
+  id: 6,
   bild: 'maus.jpg',
   sound1: 'sound_maus.mp3',
-  sound2: ''
+  sound2: '',
+  display: false
 };
 $scope.spiele.push(tier6);
 
 
 var tier7 = {
-  id: 8,
+  id: 7,
   bild: 'schaf.jpg',
   sound1: 'sound_schaf.mp3',
-  sound2: ''
+  sound2: '',
+  display: false
 };
 $scope.spiele.push(tier7);
 
@@ -142,8 +158,210 @@ function mentorausblenden(){
 $scope.answer = function(src) {
 
   if (src==$scope.randomid){
+    $timeout(function () { $scope.showmentorbravo=true; }, 0);
+    $scope.bravosound.play();
+  }
+  else{
     
-    $timeout(function () {
+    //$scope.spiele[$scope.randomid].errorcode=true;
+    if ($scope.falscheantwort==2){
+      $scope.errorcode=$scope.randomid;
+      $scope.error = false;
+      $timeout(function () {
+        $scope.errorcode=99;
+        $timeout(function () {
+          $scope.errorcode=$scope.randomid;
+
+          animateoldgame();
+
+        }, 500);
+      }, 500);
+
+    }
+    else {
+
+      $scope.falschsound.play();
+      $scope.error = true;
+      $timeout(function () {
+        $scope.error = false;
+        $scope.falscheantwort=$scope.falscheantwort + 1
+      }, 1000);
+
+
+
+    }
+
+  }
+
+}
+
+
+
+
+  //$timeout(pushA, 5000).then(pushB());
+
+  function showTier0() {
+    $scope.spielneu=0;
+    $scope.spiele[0].display=true;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+  function showTier1() {
+    $scope.spielneu=1;
+    $scope.spiele[1].display=true;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function showTier2() {
+    $scope.spielneu=2;
+    $scope.spiele[2].display=true;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function showTier3() {
+  $scope.spielneu=3;
+  $scope.spiele[3].display=true;
+  $scope.chunkedData = chunk($scope.spiele, 4);
+ }
+
+function showTier4() {
+    $scope.spielneu=4;
+    $scope.spiele[4].display=true;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function showTier5() {
+    $scope.spielneu=5;
+    $scope.spiele[5].display=true;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function showTier6() {
+    $scope.spielneu=6;
+    $scope.spiele[6].display=true;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function showTier7() {
+    $scope.spielneu=7;
+    $scope.spiele[7].display=true;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+}
+
+  function hideTier0() {
+    $scope.spielfertig=0;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+  function hideTier1() {
+    $scope.spielfertig=1;
+    $scope.spiele[0].display=false;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function hideTier2() {
+   $scope.spielfertig=2;
+   $scope.spiele[1].display=false;
+   $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function hideTier3() {
+  $scope.spielfertig=3;
+  $scope.spiele[2].display=false;
+  $scope.chunkedData = chunk($scope.spiele, 4);
+ }
+
+function hideTier4() {
+    $scope.spielfertig=4;
+    $scope.spiele[3].display=false;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function hideTier5() {
+    $scope.spielfertig=5;
+    $scope.spiele[4].display=false;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function hideTier6() {
+    $scope.spielfertig=6;
+    $scope.spiele[5].display=false;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+  }
+
+function hideTier7() {
+    $scope.spielfertig=7;
+    $scope.spiele[6].display=false;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+}
+
+function ResetGame() {
+    $scope.spiele[7].display=false;
+    $scope.spielfertig=-1;
+    $scope.chunkedData = chunk($scope.spiele, 4);
+    kartenmischen();
+    $timeout(goto_newspiel, 2000);
+}
+
+
+function SetNewGame() {
+    $scope.spielrunden=$scope.spielrunden + 1;
+    $scope.randomid = getRandomInt(0, 7);
+    $scope.tierindex = $scope.randomid;
+    $scope.sounds[$scope.randomid].play();
+}
+
+
+/*
+* Neues Spiel
+*/
+function goto_newspiel(){
+
+
+  $scope.errorcode=99;
+  $scope.falscheantwort=0;
+  animatenewgame();
+}
+
+
+function animatenewgame(){
+  $timeout(showTier0, 700).then($timeout(showTier1, 1400));
+  $timeout(showTier2, 2100).then($timeout(showTier3, 2800));
+  $timeout(showTier4, 3500).then($timeout(showTier5, 4200));
+  $timeout(showTier6, 4900).then($timeout(showTier7, 5600));
+  $timeout(SetNewGame, 6300);
+  
+}
+
+
+
+
+//$scope.spielfertig=99;
+//$scope.spielneu=99;
+
+function animateoldgame(){
+
+  $timeout(function () {
+    $scope.showmentor=true;
+    $scope.showmentorbravo=false;
+  },0);
+
+  $timeout(hideTier0, 600).then($timeout(hideTier1, 1200));
+  $timeout(hideTier2, 1800).then($timeout(hideTier3, 2400));
+  $timeout(hideTier4, 3000).then($timeout(hideTier5, 3600));
+  $timeout(hideTier6, 4200).then($timeout(hideTier7, 4800));
+  $timeout(ResetGame, 5400);
+}
+
+
+/*
+*
+*/
+function kartenmischen(){
+                $scope.spiele=shuffleArray($scope.spiele);
+                $scope.chunkedData = chunk($scope.spiele, 4);
+  /*
+      $timeout(function () {
             $scope.spiele=shuffleArray($scope.spiele);
             $scope.chunkedData = chunk($scope.spiele, 4);
             $timeout(function () {
@@ -155,35 +373,10 @@ $scope.answer = function(src) {
               }, 500);
             }, 500);
     }, 500);
-    $timeout(function () { $scope.showmentorbravo=true; }, 0);
-    $scope.bravosound.play();
-  }
-  else{
-    $scope.falschsound.play();
-    $scope.error = true;
-    $timeout(function () {
-      $scope.error = false;
-    }, 1000);
-
-
-  }
-
-}
-
-
-/*
-* Neues Spiel
 */
-function goto_newspiel(){
-  
-  $timeout(function () {
-      $scope.showmentor=true;
-      $scope.showmentorbravo=false;
-    },0);
-  $scope.randomid = getRandomInt(1, 8);
-  $scope.sounds[$scope.randomid].play();
 }
 
+
 /*
 * Per Zufall neue Aufgabe definieren
 */

www/templates/spiel1.html

@@ -4,12 +4,13 @@
 
     <div class="row" style="font-size: 12px;" ng-repeat="rows in chunkedData">
             <div style="width: 100%;  text-align: center;" class="col" ng-repeat="item in rows">
-                <img ng-class="{'shake':error}" class="myborder animated" src="img/{{ item.bild }}"width="96" height="96" alig="center" ng-click="answer(item.id)">
+                <img ng-class="{'shake':error, 'rubberBand': errorcode == '{{item.id}}', 'fadeOut': spielfertig == '{{item.id}}', 'fadeIn': spielneu == '{{item.id}}'}" class="myborder animated" src="img/{{ item.bild }}"width="96" height="96" alig="center" ng-click="answer(item.id)" ng-show="item.display">
                 <br>
             </div>
     </div>
 
     <div class="statusbar">
+        {{ tierindex }}
         <div class="mentorhilfe" ng-click="hilfe()">
         <div class="mentorborder" ng-show="showmentor">
             <div class="mentor"></div>