Refactoring, auslagerung der Spielsets, dynamisches CSS

www/spielsets/spielset1/css/spielset.css

@@ -0,0 +1,174 @@
+/* Hingrundbild */
+.scroll-content {
+    background: url("../images/background.svg");
+    background-size: cover;
+    color: #333;
+    font: 100% Arial, Sans Serif;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+}
+
+/* Bildgrößen für Tierkarten */
+.imagesizebig{
+  width:128px;
+  height:128px;
+}
+
+.imagesizemedium{
+  width:96px;
+  height:96px;
+}
+
+/* Runder Rahmen für Tierkarten*/
+.myborder{
+    display: inline-block;
+    border-radius: 6px;
+    color: black;
+    border-style: solid;
+    border-color: black;
+    border-width: 2px;
+ }
+
+/* Rahmen für Elemente am unteren Rand, Mentorenhilfe, timer, Punkte */
+.statusbar{
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  width: 100%;
+  height: 64px;
+  overflow: hidden; 
+  text-align: center;
+}
+
+/* Neon Effekt für Spieltimer */
+ .neon {
+    font-family: sans-serif;
+    text-transform: uppercase;
+    font-size: 60px;
+    font-weight: bold;
+    font-style: italic;
+    letter-spacing: .1em;
+    color: white;
+    text-shadow: 0 0 5px white,
+                 0 0 10px white,
+                 0 0 20px yellow,
+                 0 0 40px yellow,
+                 0 0 60px yellow,
+                 0 0 90px yellow,
+                 0 0 120px yellow,
+                 0 0 160px yellow;
+}
+
+.spieltimer {
+    font-family: sans-serif;
+    text-transform: uppercase;
+    font-size: 40px;
+    font-weight: bold;
+    font-style: italic;
+    letter-spacing: .1em;
+    color: white;
+    text-shadow: 0 0 5px white,
+                 0 0 10px white,
+                 0 0 20px yellow,
+                 0 0 40px yellow,
+                 0 0 60px yellow,
+                 0 0 90px yellow,
+                 0 0 120px yellow,
+                 0 0 160px yellow;
+}
+
+
+.spieltimerdiv {
+  position: absolute;  
+  bottom:0px;
+  left:0px;  
+  width: 100%;
+  height: 50px;
+  overflow: hidden;
+}
+
+.punktestand {
+  position: absolute;  
+  bottom:-15px;
+  right:0px;  
+  width: 100%;
+  height: 50px;
+  font-family: sans-serif;
+  text-transform: uppercase;
+  font-size: 30px;
+  font-weight: bold;
+  font-style: italic;
+  letter-spacing: .1em;
+  color:white;
+  text-align: right;
+  overflow: hidden;
+}
+
+/* Roter Rahmen für Spielauflösung, noch ungenutzt */
+ .redborder{
+    display: inline-block;
+    border-radius: 6px;
+    color: black;
+    border-style: solid;
+    border-color: red;
+    border-width: 2px;
+ }
+
+
+/* Standbild-Mentor in Statusbar */
+.mentorhilfe {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 64px;
+  height: 64px;
+  overflow: hidden;
+  background:  url('../images/Mentor/mentorhelp_64px.png');
+}
+
+/* Animierter-Mentor in Statusbar */
+.mentorborder {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 64px;
+  height: 64px;
+  overflow: hidden;
+  background:  url('../images/Mentor/mentorhelp_64px.png');
+}
+
+.mentor {
+  width: 64px;
+  height: 640px;
+  background:  url('../images/Mentor/mentor_64px.png') left center;
+  -webkit-animation: mentorsprite 4s steps(10) infinite;
+}
+
+@-webkit-keyframes mentorsprite {
+    100% { background-position: 0 -640px; }
+}
+
+/* Grosser Mentor bei Erfolg */
+.mentorborderbravo {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  width: 256px;
+  height: 256px;
+  margin-left: -128px;
+  margin-top: -128px;
+  overflow: hidden;
+}
+
+.mentorbravo {
+  width: 256px;
+  height: 1024px;
+  background:  url('../images/Mentor/mentor_bravo.png') left center;
+  -webkit-animation: mentorspritebravo 2.8s steps(4) infinite;
+}
+
+@-webkit-keyframes mentorspritebravo {
+    100% { background-position: 0 -1024px; }
+}

www/spielsets/spielset1/images/background.svg

@@ -0,0 +1,128 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="210mm"
+   height="297mm"
+   viewBox="0 0 744.09448819 1052.3622047"
+   id="svg4021"
+   version="1.1"
+   inkscape:version="0.91 r13725"
+   sodipodi:docname="background.svg">
+  <defs
+     id="defs4023">
+    <linearGradient
+       gradientTransform="matrix(3.8032858,0,0,0.77174164,-155.41265,-12.679476)"
+       gradientUnits="userSpaceOnUse"
+       y2="636.91669"
+       x2="621.36121"
+       y1="-122.33332"
+       x1="334.75"
+       id="linearGradient4046"
+       xlink:href="#linearGradient4040"
+       inkscape:collect="always" />
+    <linearGradient
+       id="linearGradient4040"
+       inkscape:collect="always">
+      <stop
+         id="stop4042"
+         offset="0"
+         style="stop-color:#aad8e9;stop-opacity:1" />
+      <stop
+         id="stop4044"
+         offset="1"
+         style="stop-color:#ffffff;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="0.35"
+     inkscape:cx="375"
+     inkscape:cy="520"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     inkscape:window-width="1920"
+     inkscape:window-height="1137"
+     inkscape:window-x="-8"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata4026">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Ebene 1"
+     inkscape:groupmode="layer"
+     id="layer1">
+    <rect
+       style="fill:url(#linearGradient4046);fill-opacity:1;fill-rule:evenodd;stroke:none"
+       id="rect4558"
+       width="2367.9683"
+       height="487.22635"
+       x="-155.41281"
+       y="-12.679498"
+       inkscape:export-xdpi="58.214043"
+       inkscape:export-ydpi="58.214043"
+       inkscape:export-filename="/home/katie/Desktop/p.png" />
+    <path
+       style="fill:#677645;fill-opacity:1;fill-rule:evenodd;stroke:none"
+       d="m 2222.75,354.07773 -628.259,8.03436 c -26.1403,-22.74649 -121.7031,-61.15076 -147.8431,-54.26537 -230.9826,22.15345 -184.6424,-5.85696 -274.4721,-9.23602 L 907.14704,338.51711 706.36879,328.94567 C 557.70297,330.65354 402.43976,370.4726 270.29712,365.99832 69.660116,363.86404 -106.4784,310.87517 -182.74999,354.07773 l 0,112.03601 2405.49999,0 z"
+       id="rect4558-3"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ccccccccccc" />
+    <g
+       id="g4067"
+       transform="translate(-682.85714,-537.14286)">
+      <g
+         id="g4088"
+         transform="matrix(1.9664511,0,0,1,-258.34973,-580)">
+        <rect
+           y="1495.0988"
+           x="1229.488"
+           height="100.69444"
+           width="504.16669"
+           id="use3271"
+           style="fill:#608e13;fill-opacity:1;fill-rule:evenodd;stroke:none" />
+        <path
+           style="fill:#608e13;fill-opacity:1;fill-rule:evenodd"
+           d="m 1303.7659,1444.0601 c 46.7067,12.2502 90.5176,41.1373 135.3792,63.1422 15.6583,12.2847 25.0443,54.0822 6.4693,69.2049 -55.4562,27.6211 -114.6874,26.2085 -172.345,30.9185 -61.1747,4.7099 -122.6055,3.4347 -183.4185,-8.4438 -37.2042,-6.5888 -74.24,-15.3518 -111.11645,-25.2452 -26.63954,-14.1277 -8.21459,-63.3717 10.74343,-73.7973 32.41822,-30.0365 71.61202,-31.9255 106.74272,-51.2066 46.0755,-21.0942 94.8281,-36.2878 142.9223,-23.2028 21.7211,4.6808 43.1039,12.2602 64.623,18.6301 z"
+           id="path3-8-5"
+           inkscape:connector-curvature="0" />
+        <path
+           style="fill:#608e13;fill-opacity:1;fill-rule:evenodd"
+           d="m 1009.352,1466.9908 c 45.794,10.2347 88.7488,34.3689 132.7337,52.7532 15.3524,10.2635 24.555,45.1838 6.343,57.8183 -54.3726,23.0765 -112.4464,21.8963 -168.97735,25.8313 -59.97932,3.935 -120.20966,2.8696 -179.83433,-7.0544 -36.47723,-5.5048 -72.78935,-12.826 -108.94524,-21.0915 -26.11898,-11.8032 -8.05407,-52.9449 10.5335,-61.6552 31.78479,-25.0944 70.21268,-26.6726 104.65693,-42.7813 45.17515,-17.6234 92.97508,-30.3172 140.12948,-19.3851 21.2967,3.9106 42.2617,10.2429 63.36031,15.5647 z"
+           id="path3-8"
+           inkscape:connector-curvature="0" />
+        <rect
+           style="fill:#608e13;fill-opacity:1;fill-rule:evenodd;stroke:none"
+           id="rect3276"
+           width="504.16669"
+           height="100.69444"
+           x="323.4881"
+           y="1495.0988" />
+      </g>
+    </g>
+  </g>
+</svg>

www/spielsets/spielset1/js/suchspiel_controller.js

@@ -0,0 +1,613 @@
+appControllers.controller('Suchspiel', function($scope, $rootScope, $ionicPlatform, $cordovaMedia, backgroundsounds_mediahandler, $state, $timeout,$q, $http) {
+
+
+/*
+* Initialisierung
+*/
+
+//Mentor-Animation ausschalten
+$scope.showmentor=false;
+$scope.showmentorbravo=false;
+
+//Kartenarray + ListenAnsichtArray
+$scope.spiele=[];
+$scope.spielealletiere=[];
+$scope.spielelistensort=[];
+
+//Zufallsgenerator ID = TierindexID
+$scope.randomid=0;
+$scope.spielrunden=0;
+$scope.falscheantwort=0;
+
+//Karten-Index zum geben / nehmen
+$scope.cardindex=0;
+
+//CSS-Steuerung (alias für addClass)
+$scope.CSSErrorCode=99;
+$scope.CSSAusblendung='';
+$scope.CSSEinblendung='';
+$scope.CSSFalscheAntwort = false;
+$scope.CCSInittimer = false;
+$scope.CSSKlickedItem = 99;
+
+//SpieleTimer
+$scope.Spielzeit = 90;
+$scope.SpielzeitTimerWait=false;
+$scope.showgametimer = false;
+
+//Spielzeit vorbei
+$scope.spielvorbei=false;
+$scope.beantwortet=false;
+
+//Mentor Zufallseinblendung
+$scope.randomMentor=0;
+
+$scope.punkte=0;
+$scope.punktebonus=0;
+
+
+//Spiele sperren bis alle Karten ausgegeben sind
+$scope.gamelock=true;
+
+//Zeitmessung für PunkteBonus
+$scope.rundenstart = '';
+$scope.rundenende =  '';
+
+$scope.$on("$ionicView.beforeEnter", function(event, data){
+  /*
+  * Hintergrundbild setzen 
+  */
+  //$rootScope.backgroundimage = "img/Background/background.svg";
+});
+
+$ionicPlatform.ready(function() {
+ 
+  /*
+  * Sounds definieren
+  */
+  //Globale MediaVariable fure Soundeffekte
+  var gamesound='';
+  var bravosound='';
+  var falschsound='';
+
+  $scope.bravosounds=[];
+  $scope.falschsounds=[];
+  $scope.aufloesung='';
+
+  /*
+  * Spielset laden
+  */
+  $http.get('spielsets/spielset1/spielset.json').success(function(data) {
+    //console.log(data);
+    $scope.spielealletiere = data;
+  });
+
+
+
+  /*
+  * Spiele IntroSounds laden
+  * Typen: successsound -> Bravo, super, tollgemacht Sounds
+  * Typen: failuresound -> Leider daneben, versuchs nochmal
+  * Typen: cardsound -> Kartenlegegeräusch
+  * Typen: solutionsound -> Auflösungsgeräusch, das wäre das Tier gewesen
+  * Typen: gameoversound -> Spielzu ende Zeit für minispiel etc.
+  * Typen: backgroundmusic -> Hintergrundmusik
+  */
+  $http.get('spielsets/spielset1/systemsounds.json').success(function(data) {
+
+    for(var i = 0; i < data.length; i++) {
+          
+      if (data[i].type=='successsound'){
+        $scope.bravosounds.push(data[i].sound);
+      }
+      else if (data[i].type=='failuresound'){
+        $scope.falschsounds.push(data[i].sound);
+      }
+      else if (data[i].type=='cardsound'){
+        $scope.kartegebensound=data[i].sound;
+      }
+      else if (data[i].type=='solutionsound'){
+        $scope.aufloesung=data[i].sound;
+      }
+      else if (data[i].type=='gameoversound'){
+        $scope.spielendesound=data[i].sound;
+      }
+      else if (data[i].type=='backgroundmusic'){
+        backgroundsounds_mediahandler.setbackgroundsoundfile(data[i].sound);
+        backgroundsounds_mediahandler.playbackgroundmusic();
+      }
+
+    }//for-Schleife
+
+  });//$http
+
+
+});
+
+/*
+* Play-Sound
+* playtype-> Bravo,Falsch oder Gamesound
+* soundfile-> Pfad zur sounddatei
+* callbackfunction-> Funktion die nach erfolgreichem abspielen gestarte wird
+* volume-> Lautstärke z.B. 1.0
+*/
+function playsound(playtype, soundfile, callbackfunction, volume){
+
+  $ionicPlatform.ready(function() {
+
+    if (playtype=='bravosound'){
+
+      try{
+
+        //versuchen Soundfile freizugeben
+        bravosound.release();
+
+      }
+      catch(e){
+
+        //Soundfile Objekt gabs nicht oder Freigabefehler
+        console.log("Sounddatei nicht da");
+      }
+
+      bravosound = new Media(soundfile, callbackfunction ,null);
+      bravosound.play();
+
+    }
+    else if (playtype=='falschsound'){
+
+      try{
+
+        //versuchen Soundfile freizugeben
+        falschsound.release();
+
+      }
+      catch(e){
+
+        //Soundfile Objekt gabs nicht oder Freigabefehler
+        console.log("Sounddatei nicht da");
+      }
+
+      falschsound = new Media(soundfile, callbackfunction ,null);
+      falschsound.play();
+    
+
+    }
+    else if (playtype=='gamesound'){
+      
+      try{
+
+        //versuchen Soundfile freizugeben
+        gamesound.release();
+
+      }
+      catch(e){
+
+        //Soundfile Objekt gabs nicht oder Freigabefehler
+        console.log("Sounddatei nicht da");
+      }
+
+      gamesound = new Media(soundfile, callbackfunction ,null);
+      gamesound.play();
+
+    }
+
+  });
+
+} 
+
+
+/*
+* Wiederholung der Aufgabe
+*/
+$scope.hilfe = function() {
+  console.log("Hilfe geklickt");
+  $scope.showmentor=true;
+  playsound('gamesound', $scope.spiele[$scope.randomid].sound, mentorausblenden,'1.0');
+}
+
+
+/*
+* Mentor ausblenden, nach Soundausgabe
+*/
+function mentorausblenden(){
+  $timeout(function () { $scope.showmentor=false; $scope.cardindex=0}, 10);
+}
+
+
+/*
+* Antwort prüfen
+*/
+$scope.PlayerAnswer = function(src) {
+
+
+  if ($scope.gamelock==false){
+
+    /*
+    * Item wurde geklickt, hüpfen lassen
+    */
+    $scope.CSSKlickedItem = src;
+
+    /*
+    * Item wurde geklickt, zurücksetzen
+    */
+    $timeout(function () {
+      $scope.CSSKlickedItem = 99;
+    }, 1000);
+
+    /*
+    * Einblende-effekte zurücksetzen
+    */
+    $scope.CSSEinblendung='';
+    
+
+    /*
+    * Prüfen ob schon einmal geklickt wurde
+    */
+    if ($scope.beantwortet==false){
+
+      /*
+      * Antwort ist richtig
+      */
+      $scope.beantwortet=true;
+        if (src==$scope.randomid){
+          
+          $timeout(function () { 
+            $scope.punkte=$scope.punkte + 1000;
+            $scope.rundenende = new Date().getTime();
+            
+            //Zeitbonus
+            $scope.punktebonus=1000 / (($scope.rundenende - $scope.rundenstart)/1000);
+            console.log($scope.rundenende - $scope.rundenstart + " Start:" + $scope.rundenstart + " Ende:" + $scope.rundenende);
+            $scope.punktebonus=Math.round($scope.punktebonus);
+
+            $scope.punkte = $scope.punkte + $scope.punktebonus;
+
+            $scope.randomMentor=getRandomInt(1, 2);
+        
+            if ($scope.randomMentor==2){
+              $scope.showmentorbravo=true;
+            }
+            else{
+              $scope.showmentor=true; 
+            }
+        
+            $scope.cardindex=0; 
+
+          }, 0);//$timeoutfunction
+
+          /*
+          * Zufällig einen Bravosound wiedergeben lassen aus Bravosound-Array
+          */
+          playsound('bravosound', $scope.bravosounds[getRandomInt(0, $scope.bravosounds.length - 1)], karteausblenden,'1.0');
+
+        }//If Abfrage ob antowrt richtig
+        else{
+    
+          /*
+          * Antwort war dreimal falsch
+          */
+          if ($scope.falscheantwort==2){
+
+            /*
+            * Richtige Karte pulsieren lassen
+            */
+            $scope.CSSErrorCode=$scope.randomid;
+            $scope.CSSFalscheAntwort= false;
+            $scope.showmentor=true;
+
+            //Auflösungssound wiedergeben
+            playsound('gamesound', $scope.aufloesung, aufloesung, '1.0');
+          }//If Abfrage ob antowrt 3x falsch war
+          else {
+            /*
+            * Antwort ist falsch
+            */
+            $scope.showmentor=true;
+        
+            /*
+            * Zufällig einen Falschsound wiedergeben lassen aus Falschsound-Array
+            */
+            playsound('falschsound', $scope.falschsounds[getRandomInt(0, $scope.falschsounds.length - 1)], mentorausblenden,'1.0');
+        
+            $scope.CSSFalscheAntwort = true;
+            
+            $timeout(function () {
+              $scope.CSSFalscheAntwort = false;
+              $scope.beantwortet=false;
+              $scope.falscheantwort=$scope.falscheantwort + 1
+            }, 1000); //$timeoutfunction
+          }//Else Abfrage ob antowrt 3x falsch war
+        }//Else Abfrage ob antowrt richtig
+    }//IFAbfrage ob Frage beantwortet wurde
+  }//Ifabfrage obSpielsperre aktiv ist
+}
+
+
+/*
+* Neues Spiel starten
+*/
+function goto_newspiel(){
+  $scope.gamelock=true;
+  $scope.CSSErrorCode=99;
+  $scope.falscheantwort=0;
+  $scope.CSSEinblendung='';
+  $scope.cardindex=0;
+
+  kartenmischen();
+
+  kartegeben();
+}
+
+
+/*
+* Karten austeilen
+*/
+function kartegeben(){
+  
+  $timeout(function () { 
+    $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 < 7 ){
+    //Spielzeit anhalten
+    $timeout(function () {  $scope.SpielzeitTimerWait = true; }, 0);
+    playsound('gamesound', $scope.kartegebensound, kartegeben,'1.0');
+  }
+  else{
+    $scope.CSSEinblendung='';
+    /*
+    * Zufallszahl generieren lassen
+    */    
+    $scope.randomid=getRandomInt(0, 7);
+
+    //Spiel-Eingabesperre entfernen
+    $scope.gamelock=false;
+    //Zeit messen
+    $scope.rundenstart = new Date().getTime();
+
+    //Spielzeit laufen lassen
+    $timeout(function () {  $scope.SpielzeitTimerWait=false; }, 0);
+
+    /*
+    * Mentor anzeigen und Sound wiedergeben
+    */
+    $scope.showmentor=true;
+
+    playsound('gamesound', $scope.spiele[$scope.randomid].sound, mentorausblenden,'1.0');
+    
+    console.log("ELSE-Zweig Einblende -ID: " + $scope.CSSEinblendung);
+    console.log("CardIndex: " + $scope.cardindex);
+    console.log("Zufallsid: " + $scope.randomid);
+    console.log("Tiersuchen: " + $scope.spiele[$scope.randomid].bild);
+    console.log("SpieleTimerWait: " + $scope.SpielzeitTimerWait)
+
+  }
+  console.log("Einblende funktion ID: " + $scope.CSSEinblendung);
+}
+
+/*
+* Karten wieder einsammeln, runde beendet
+*/
+function karteausblenden(){
+
+  $timeout(function () {  $scope.showmentorbravo=false; $scope.showmentor=false;}, 0);
+  
+  //Spielzeit anhalten
+  $scope.SpielzeitTimerWait=true;
+  
+  if ($scope.spielvorbei==false){
+
+    if ($scope.cardindex < 8 ){
+
+      for(var i = 0; i < $scope.spiele.length; i++) {
+        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);
+    }
+    else{
+      $scope.beantwortet=false;
+      $scope.CSSAusblendung='';
+      goto_newspiel(); 
+    }
+  
+  }
+  else{
+    spielende();
+  }
+  
+}
+
+
+/*
+* Spielende
+*/
+function spielende(){
+  
+  //Belohnung hier rein
+  //$state.go('home');
+  
+  $timeout(function () {  
+    $scope.showmentorbravo=true;    
+    //$scope.spielendesound.play();
+    playsound('gamesound', $scope.spielendesound, minispielintro,'1.0');
+  }, 10);
+  
+
+}
+
+function minispielintro(){
+  $state.go('minispiel1');
+}
+
+
+
+/*
+* SpieleTimer Funktion
+*/
+function SpieleTimer(){
+  if ($scope.Spielzeit > 0){
+
+
+    if ($scope.SpielzeitTimerWait == false){
+
+      $scope.Spielzeit=$scope.Spielzeit - 1;
+      
+    }
+      $timeout(function () {  
+        SpieleTimer();
+      }, 1000);
+
+
+
+  }
+  else{
+    $scope.spielvorbei=true;
+  }
+}
+
+function aufloesung(){
+
+  $scope.CSSErrorCode=99;
+  $scope.cardindex=0;
+  karteausblenden(); 
+
+}
+
+
+/*
+* Drei mal mischen :)
+*/
+function kartenmischen(){
+  $scope.spielealletiere=shuffleArray($scope.spielealletiere);
+  $scope.spielealletiere=shuffleArray($scope.spielealletiere);
+  $scope.spielealletiere=shuffleArray($scope.spielealletiere);
+
+  $scope.spiele=[];
+  for(var i = 0; i < 8; i++) {
+    var data= $scope.spielealletiere[i];
+    data.id=i;
+    $scope.spiele.push(data);
+  }
+
+
+  $scope.spielelistensort=[];
+  //for(var i = 0; i < $scope.spiele.length; i++) {
+  for(var i = 0; i < 8; i++) {
+    var data= $scope.spiele[i];
+    data.sortid=i;
+    $scope.spielelistensort.push(data);
+  }
+  $scope.chunkedData = chunk($scope.spielelistensort, 4);
+}
+
+
+/*
+* Zufallsgenerator um per Zufall neue Aufgabe definieren
+*/
+function getRandomInt(min, max) {
+  var tmpInt=0;
+  min = Math.ceil(min);
+  max = Math.floor(max);
+  tmpInt = Math.floor(Math.random() * (max - min + 1)) + min; 
+
+  if (tmpInt > max){
+    tmpInt=max;
+  }
+
+  if (tmpInt < min){
+    tmpInt=min;
+  }
+  return tmpInt;
+}
+
+/*
+* Karten per Zufall mischen
+*/
+var shuffleArray = function(array) {
+  var m = array.length, t, i;
+
+  // While there remain elements to shuffle
+  while (m) {
+    // Pick a remaining element…
+    i = Math.floor(Math.random() * m--);
+
+    // And swap it with the current element.
+    t = array[m];
+    array[m] = array[i];
+    array[i] = t;
+  }
+
+  return array;
+}
+
+/*
+* TierArray nach x Spalten Aufteilen (Darstellung)
+*/
+function chunk(arr, size) {
+  var newArr = [];
+  for (var i=0; i<arr.length; i+=size) {
+    newArr.push(arr.slice(i, i+size));
+  }
+  return newArr;
+}
+//$scope.chunkedData = chunk($scope.spiele, 4);
+
+
+/*
+* Initial - Neues Spiel starten (erste runde) von 3 runter zählen
+*/
+$scope.inittimercounter=3;
+$scope.showinittimer=true;
+$scope.CCSInittimer=true;
+
+$timeout(function () { 
+  $scope.CCSInittimer=false;
+  inittimer();
+}, 1500);
+
+
+
+function inittimer(){  
+  $scope.CCSInittimer=true;
+  if ($scope.inittimercounter > 1){
+    $scope.inittimercounter=$scope.inittimercounter - 1;
+
+    $timeout(function () { 
+      $scope.CCSInittimer=false;
+      inittimer();
+    }, 1000);
+
+  }
+  else{
+    $scope.inittimercounter='Los gehts!';
+    $timeout(function () { 
+      $scope.showinittimer=false;
+      $scope.showgametimer = true;
+      SpieleTimer();
+      goto_newspiel();
+    }, 1000);
+  }
+}
+
+
+});

www/spielsets/spielset1/spielset.json

@@ -1,18 +1,18 @@
 [
-	{"id": 0, "bild": "spielsets/spielset1/images/Affe.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_affe.mp3", "display": false, "einblendecssid": "card1ein", "ausblendecssid": "card1aus", "sortid": 0},
-	{"id": 1, "bild": "spielsets/spielset1/images/Esel.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_esel.mp3", "display": false, "einblendecssid": "card2ein", "ausblendecssid": "card2aus", "sortid": 0},
-	{"id": 2, "bild": "spielsets/spielset1/images/Hase.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hase.mp3", "display": false, "einblendecssid": "card3ein", "ausblendecssid": "card3aus", "sortid": 0},
-	{"id": 3, "bild": "spielsets/spielset1/images/Hund.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hund.mp3", "display": false, "einblendecssid": "card4ein", "ausblendecssid": "card4aus", "sortid": 0},
-	{"id": 4, "bild": "spielsets/spielset1/images/Kamel.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_kamel.mp3", "display": false, "einblendecssid": "card5ein", "ausblendecssid": "card5aus", "sortid": 0},
-	{"id": 5, "bild": "spielsets/spielset1/images/Katze.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_katze.mp3", "display": false, "einblendecssid": "card6ein", "ausblendecssid": "card6aus", "sortid": 0},
-	{"id": 6, "bild": "spielsets/spielset1/images/Krokodil.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_krokodil.mp3", "display": false, "einblendecssid": "card7ein", "ausblendecssid": "card7aus", "sortid": 0},
-	{"id": 7, "bild": "spielsets/spielset1/images/Kuh.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_kuh.mp3", "display": false, "einblendecssid": "card8ein", "ausblendecssid": "card8aus", "sortid": 0},
-	{"id": 8, "bild": "spielsets/spielset1/images/Loewe.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_loewe.mp3", "display": false, "einblendecssid": "card9ein", "ausblendecssid": "card9aus", "sortid": 0},
-	{"id": 9, "bild": "spielsets/spielset1/images/Maus.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_maus.mp3", "display": false, "einblendecssid": "card10ein", "ausblendecssid": "card10aus", "sortid": 0},
-	{"id": 10, "bild": "spielsets/spielset1/images/Nashorn.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_nashorn.mp3", "display": false, "einblendecssid": "card11ein", "ausblendecssid": "card11aus", "sortid": 0},
-	{"id": 11, "bild": "spielsets/spielset1/images/Nilpferd.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_nilpferd.mp3", "display": false, "einblendecssid": "card12ein", "ausblendecssid": "card12aus", "sortid": 0},
-	{"id": 12, "bild": "spielsets/spielset1/images/Schaf.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_schaf.mp3", "display": false, "einblendecssid": "card13ein", "ausblendecssid": "card13aus", "sortid": 0},
-	{"id": 13, "bild": "spielsets/spielset1/images/Schildkroete.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_schildkroete.mp3", "display": false, "einblendecssid": "card14ein", "ausblendecssid": "card14aus", "sortid": 0},
-	{"id": 14, "bild": "spielsets/spielset1/images/Schwein.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_schwein.mp3", "display": false, "einblendecssid": "card15ein", "ausblendecssid": "card15aus", "sortid": 0},
-	{"id": 15, "bild": "spielsets/spielset1/images/Stier.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_stier.mp3", "display": false, "einblendecssid": "card16ein", "ausblendecssid": "card16aus", "sortid": 0}
+	{"id": 0, "bild": "spielsets/spielset1/images/Tiere/Affe.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_affe.mp3", "display": false, "einblendecssid": "card1ein", "ausblendecssid": "card1aus", "sortid": 0},
+	{"id": 1, "bild": "spielsets/spielset1/images/Tiere/Esel.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_esel.mp3", "display": false, "einblendecssid": "card2ein", "ausblendecssid": "card2aus", "sortid": 0},
+	{"id": 2, "bild": "spielsets/spielset1/images/Tiere/Hase.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hase.mp3", "display": false, "einblendecssid": "card3ein", "ausblendecssid": "card3aus", "sortid": 0},
+	{"id": 3, "bild": "spielsets/spielset1/images/Tiere/Hund.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hund.mp3", "display": false, "einblendecssid": "card4ein", "ausblendecssid": "card4aus", "sortid": 0},
+	{"id": 4, "bild": "spielsets/spielset1/images/Tiere/Kamel.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_kamel.mp3", "display": false, "einblendecssid": "card5ein", "ausblendecssid": "card5aus", "sortid": 0},
+	{"id": 5, "bild": "spielsets/spielset1/images/Tiere/Katze.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_katze.mp3", "display": false, "einblendecssid": "card6ein", "ausblendecssid": "card6aus", "sortid": 0},
+	{"id": 6, "bild": "spielsets/spielset1/images/Tiere/Krokodil.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_krokodil.mp3", "display": false, "einblendecssid": "card7ein", "ausblendecssid": "card7aus", "sortid": 0},
+	{"id": 7, "bild": "spielsets/spielset1/images/Tiere/Kuh.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_kuh.mp3", "display": false, "einblendecssid": "card8ein", "ausblendecssid": "card8aus", "sortid": 0},
+	{"id": 8, "bild": "spielsets/spielset1/images/Tiere/Loewe.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_loewe.mp3", "display": false, "einblendecssid": "card9ein", "ausblendecssid": "card9aus", "sortid": 0},
+	{"id": 9, "bild": "spielsets/spielset1/images/Tiere/Maus.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_maus.mp3", "display": false, "einblendecssid": "card10ein", "ausblendecssid": "card10aus", "sortid": 0},
+	{"id": 10, "bild": "spielsets/spielset1/images/Tiere/Nashorn.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_nashorn.mp3", "display": false, "einblendecssid": "card11ein", "ausblendecssid": "card11aus", "sortid": 0},
+	{"id": 11, "bild": "spielsets/spielset1/images/Tiere/Nilpferd.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_nilpferd.mp3", "display": false, "einblendecssid": "card12ein", "ausblendecssid": "card12aus", "sortid": 0},
+	{"id": 12, "bild": "spielsets/spielset1/images/Tiere/Schaf.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_schaf.mp3", "display": false, "einblendecssid": "card13ein", "ausblendecssid": "card13aus", "sortid": 0},
+	{"id": 13, "bild": "spielsets/spielset1/images/Tiere/Schildkroete.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_schildkroete.mp3", "display": false, "einblendecssid": "card14ein", "ausblendecssid": "card14aus", "sortid": 0},
+	{"id": 14, "bild": "spielsets/spielset1/images/Tiere/Schwein.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_schwein.mp3", "display": false, "einblendecssid": "card15ein", "ausblendecssid": "card15aus", "sortid": 0},
+	{"id": 15, "bild": "spielsets/spielset1/images/Tiere/Stier.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_stier.mp3", "display": false, "einblendecssid": "card16ein", "ausblendecssid": "card16aus", "sortid": 0}
 	]

www/spielsets/spielset1/templates/suchspiel.html

@@ -0,0 +1,42 @@
+<ion-view view-title="Wo ist das Tier">
+  <ion-content class="padding">
+       
+    <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, 'pulse': CSSErrorCode == '{{item.id}}', 'bounceOut': CSSAusblendung == '{{item.ausblendecssid}}', 'tada': CSSEinblendung == '{{item.einblendecssid}}', 'expandOpen': CSSKlickedItem == '{{item.id}}'}" class="myborder animated imagesizemedium" src="{{ item.bild }}"  align="center" ng-click="PlayerAnswer(item.id)" ng-show="item.display">
+                <br>
+            </div>
+    </div>
+
+    <div class="statusbar">
+        <div ng-show="showgametimer">
+            <div class="spieltimerdiv">
+                <span class="spieltimer pulse">{{ Spielzeit }} </span>
+            </div>
+        </div>
+        <div class="punktestand">
+            <span>{{punkte}}</span>
+        </div>
+        <div class="mentorhilfe" ng-click="hilfe()">
+        <div class="mentorborder" ng-show="showmentor">
+            <div class="mentor"></div>
+        </div>
+        </div>
+    <div>
+
+
+    <div class="mentorborderbravo" ng-show="showmentorbravo">
+        <div class="mentorbravo"></div>
+    </div>
+
+
+  </ion-content>
+</ion-view>