Refactoring and Code CleanUp, CSS added

www/index.html

@@ -19,6 +19,8 @@
     <link href="lib/ionic/css/ionic.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
     <link href="css/animate.css" rel="stylesheet">
+    <link href="css/animations.css" rel="stylesheet">
+    <link href="css/magic.css" rel="stylesheet">
 
     <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
     <link href="css/ionic.app.css" rel="stylesheet">

www/js/app.js

@@ -6,7 +6,9 @@
 angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable', 'kinderspiel.controllers', 'kinderspiel.services'])
 
 .run(function($ionicPlatform, $state, backgroundsounds_mediahandler) {
+
   $ionicPlatform.ready(function() {
+    
     if(window.cordova && window.cordova.plugins.Keyboard) {
       // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
       // for form inputs)
@@ -17,6 +19,7 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
       // a much nicer keyboard experience.
       cordova.plugins.Keyboard.disableScroll(true);
     }
+
     if(window.StatusBar) {
       StatusBar.styleDefault();
     }
@@ -27,7 +30,7 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
     screen.lockOrientation('landscape');
     
     /*
-    * Bildschirm aktiv halten
+    * Bildschirm aktiv halten einschalten
     */
     window.plugins.insomnia.keepAwake();
     /*
@@ -43,7 +46,7 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
       setTimeout(function() {
             backgroundsounds_mediahandler.setbackgroundstate(false);
             backgroundsounds_mediahandler.playbackgroundmusic();
-            console.log("The application is resuming from the background" + backgroundsounds_mediahandler.getbackgroundstate());
+            //console.log("The application is resuming from the background" + backgroundsounds_mediahandler.getbackgroundstate());
       }, 0);
     }
 
@@ -52,16 +55,23 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
       setTimeout(function() {
             backgroundsounds_mediahandler.setbackgroundstate(true);
             backgroundsounds_mediahandler.stopbackgroundmusic();
-            console.log("The application is going to the background" + backgroundsounds_mediahandler.getbackgroundstate());
+            //console.log("The application is going to the background" + backgroundsounds_mediahandler.getbackgroundstate());
       }, 0);
     }
+
     /*
     * Backbutton Handling
     */
     $ionicPlatform.registerBackButtonAction(function (event) {
+      /*
+      * Startseite
+      */
       if($state.current.name=="home"){
         backgroundsounds_mediahandler.stopbackgroundmusic();
-        navigator.app.exitApp(); //<-- remove this line to disable the exit
+        /*
+        * App-Beenden
+        */
+        navigator.app.exitApp(); 
       }
       else {
         navigator.app.backHistory();
@@ -80,7 +90,9 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
   // Each state's controller can be found in controllers.js
   $stateProvider
 
-  // setup an abstract state for the tabs directive
+  /*
+  * Routen setzen
+  */
   .state('home', {
     url: '/home',
     abstract: false,
@@ -94,7 +106,9 @@ angular.module('kinderspiel', ['ionic', 'ngCordova','ngAnimate', 'ngDraggable',
   })
 
 
-  // if none of the above states are matched, use this as the fallback
+  /*
+  * Standard-Route setzen
+  */
   $urlRouterProvider.otherwise('/home');
 
 });

www/js/home_controller.js

@@ -1,19 +1,31 @@
 appControllers.controller('home', function($scope, $ionicPlatform, $cordovaMedia, $state, backgroundsounds_mediahandler ) {
 
+  /*
+  * Mentor-Anitmation ausschalten
+  */
   $scope.showmentor=false;
 
+    /*
+    * Hintergrundmusik laden und starten
+    */
     $ionicPlatform.ready(function() {
       var mediastartesuchspiel = new Media('/android_asset/www/sounds/suchspiel.mp3', suchspiel_intro_finish,null);
       $scope.mediastartesuchspiel=mediastartesuchspiel;
       backgroundsounds_mediahandler.playbackgroundmusic();
     });
 
+    /*
+    * Suchspiel wurde angeklickt, Sound abspielen, Mentor-Animation starten
+    */
     $scope.suchspiel_intro = function(){
       $scope.showmentor=true;
       $scope.mediastartesuchspiel.play();
       $scope.mediastartesuchspiel.setVolume('1.0');
     }
 
+    /*
+    * Suchspiel Sound ist beendet, Mentor-Animation ausschalten, Suchspiel starten
+    */
     function suchspiel_intro_finish() {
       $scope.mediastartesuchspiel.release();
       $scope.showmentor=false;

www/js/services.js

@@ -44,14 +44,4 @@ 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,24 +1,31 @@
 appControllers.controller('Suchspiel', function($scope,  $ionicPlatform, $cordovaMedia, $state, $timeout,$q) {
 
 
+/*
+* Initialisierung
+*/
+
+//Mentor-Animation ausschalten
 $scope.showmentor=false;
 $scope.showmentorbravo=false;
+
+//Kartenarray + ListenAnsichtArray
 $scope.spiele=[];
 $scope.spielelistensort=[];
 
-$scope.spieleview=[];
+//Zufallsgenerator ID = TierindexID
-$scope.tierfinden='';
 $scope.randomid=0;
-$scope.error = false;
 $scope.spielrunden=0;
 $scope.falscheantwort=0;
+
+//Karten-Index zum geben / nehmen
 $scope.cardindex=0;
 
-$scope.errorcode=99;
+//CSS-Steuerung (alias für addClass)
-$scope.tierindex=99;
+$scope.CSSErrorCode=99;
-$scope.spielfertig=-1;
+$scope.CSSAusblendung=-1;
-$scope.spielneu=-1;
+$scope.CSSEinblendung=-1;
-
+$scope.CSSFalscheAntwort = false;
 
 $ionicPlatform.ready(function() {
  
@@ -26,9 +33,10 @@ $ionicPlatform.ready(function() {
   * Sounds definieren
   */
   $scope.sounds=[];
-  //$scope.sounds.push('');
-
 
+  /*
+  * Sounds laden
+  */
   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);
   var tiersound3 =  new Media('/android_asset/www/sounds/finde_hahn.mp3', mentorausblenden,null);
@@ -43,6 +51,10 @@ $ionicPlatform.ready(function() {
 
   var kartegebensound =  new Media('/android_asset/www/sounds/karte.mp3', kartegeben,null);
 
+
+  /*
+  * Sounds in $Scope referenzieren
+  */
   $scope.bravosound=bravosound;
   $scope.falschsound=falschsound;
   $scope.kartegebensound=kartegebensound;
@@ -175,7 +187,7 @@ $scope.hilfe = function() {
 
 
 /*
-* Mentor ausblenden
+* Mentor ausblenden, nach Soundausgabe
 */
 function mentorausblenden(){
   $timeout(function () { $scope.showmentor=false; $scope.cardindex=-1}, 10);
@@ -186,51 +198,54 @@ function mentorausblenden(){
 /*
 * Antwort prüfen
 */
-$scope.answer = function(src) {
+$scope.PlayerAnswer = function(src) {
 
+  /*
+  * Antwort ist richtig
+  */
   if (src==$scope.randomid){
     $timeout(function () { $scope.showmentorbravo=true;$scope.cardindex=0; }, 0);
     $scope.bravosound.play();
   }
   else{
     
-    //$scope.spiele[$scope.randomid].errorcode=true;
+    /*
+    * Antwort war dreimal falsch
+    */
     if ($scope.falscheantwort==2){
-      $scope.errorcode=$scope.randomid;
+      $scope.CSSErrorCode=$scope.randomid;
-      $scope.error = false;
+      $scope.CSSFalscheAntwort= false;
       $timeout(function () {
-        $scope.errorcode=99;
+        $scope.CSSErrorCode=99;
         $timeout(function () {
-          $scope.errorcode=$scope.randomid;
+          $scope.CSSErrorCode=$scope.randomid;
           $timeout(function () { $scope.cardindex=0;karteausblenden(); }, 2400);
         }, 1400);
       }, 700);
 
     }
     else {
+    /*
+    * Antwort ist falsch
+    */
       $scope.falschsound.play();
-      $scope.error = true;
+      $scope.CSSFalscheAntwort = true;
       $timeout(function () {
-        $scope.error = false;
+        $scope.CSSFalscheAntwort = false;
         $scope.falscheantwort=$scope.falscheantwort + 1
       }, 1000);
-
-
-
     }
-
   }
-
 }
 
 
 /*
-* Neues Spiel
+* Neues Spiel starten
 */
 function goto_newspiel(){
-  $scope.errorcode=99;
+  $scope.CSSErrorCode=99;
   $scope.falscheantwort=0;
-  $scope.spielneu=0;
+  $scope.CSSEinblendung=0;
   $scope.cardindex=-1;
 
   kartenmischen();
@@ -239,9 +254,10 @@ function goto_newspiel(){
 }
 
 
+/*
+* Karten austeilen
+*/
 function kartegeben(){
-
-
   $timeout(function () { 
     $scope.cardindex=$scope.cardindex + 1;
     $scope.spielelistensort[$scope.cardindex].display=true;
@@ -249,28 +265,30 @@ function kartegeben(){
     for(var i = 0; i < $scope.spiele.length; i++) {
       var data= $scope.spiele[i];
       if (data.id==$scope.spielelistensort[$scope.cardindex].id){
-        $scope.spielneu=data.einblendecssid;
+        $scope.CSSEinblendung=data.einblendecssid;
       }
     }
 
   }, 0);
   
-  
+  /*
+  * Interner Zähler bis alle Karten gegeben wurden
+  */
   if ($scope.cardindex < 6 ){
     $scope.kartegebensound.play();
   }
   else{
-    $scope.spielneu='';
+    $scope.CSSEinblendung='';
     $scope.randomid=getRandomInt(0, 7);
     $scope.showmentor=true;
     $scope.sounds[$scope.randomid].play();
   }
   
-  
-  
 }
 
-
+/*
+* Karten wieder einsammeln, runde beendet
+*/
 function karteausblenden(){
   $timeout(function () {  $scope.showmentorbravo=false; }, 0);
 
@@ -279,7 +297,7 @@ function karteausblenden(){
     for(var i = 0; i < $scope.spiele.length; i++) {
       var data= $scope.spiele[i];
       if (data.id==$scope.spielelistensort[$scope.cardindex].id){
-        $scope.spielfertig=data.ausblendecssid;
+        $scope.CSSAusblendung=data.ausblendecssid;
       }
     }
     $timeout(function () { 
@@ -290,7 +308,7 @@ function karteausblenden(){
     }, 500);
   }
   else{
-   $scope.spielfertig='';
+   $scope.CSSAusblendung='';
    goto_newspiel(); 
   }
   
@@ -312,15 +330,12 @@ function kartenmischen(){
     data.sortid=i;
     $scope.spielelistensort.push(data);
   }
-  $scope.tierindex=$scope.spiele.length + " - " + $scope.spielelistensort.length;
   $scope.chunkedData = chunk($scope.spielelistensort, 4);
 }
 
 
-
-
 /*
-* Per Zufall neue Aufgabe definieren
+* Zufallsgenerator um per Zufall neue Aufgabe definieren
 */
 function getRandomInt(min, max) {
   var tmpInt=0;
@@ -335,12 +350,11 @@ function getRandomInt(min, max) {
   if (tmpInt < min){
     tmpInt=min;
   }
-
   return tmpInt;
 }
 
 /*
-* TierArray per Zufall mischen
+* Karten per Zufall mischen
 */
 var shuffleArray = function(array) {
   var m = array.length, t, i;
@@ -371,15 +385,15 @@ function chunk(arr, size) {
 }
 //$scope.chunkedData = chunk($scope.spiele, 4);
 
+
 /*
-* Initial - Neues Spiel starten
+* Initial - Neues Spiel starten (erste runde) von 3 runter zählen
 */
 $scope.inittimercounter=3;
 $scope.showinittimer=true;
 $timeout(function () { inittimer(); }, 1000);
 
 function inittimer(){  
-  
   if ($scope.inittimercounter > 0){
 
     $timeout(function () {  

www/templates/suchspiel.html

@@ -9,13 +9,12 @@
 
     <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':error, 'rubberBand': errorcode == '{{item.id}}', 'bounceOut': spielfertig == '{{item.ausblendecssid}}', 'tada': spielneu == '{{item.einblendecssid}}'}" class="myborder animated" src="img/{{ item.bild }}"width="96" height="96" alig="center" ng-click="answer(item.id)" ng-show="item.display">{{item.sortid}}
+                <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">
                 <br>
             </div>
     </div>
 
     <div class="statusbar">
-        {{ tierindex }} - {{cardindex}}
         <div class="mentorhilfe" ng-click="hilfe()">
         <div class="mentorborder" ng-show="showmentor">
             <div class="mentor"></div>