Refactoring, auslagerung der Spielsets, dynamisches CSS

www/spielsets/minispielset1/css/minispiel.css

@@ -1,3 +1,15 @@
+/* Hintergrundbild */
+.scroll-content {
+    background: url("../images/background.png");
+    background-size: cover;
+    color: #333;
+    font: 100% Arial, Sans Serif;
+    height: 100vh;
+    margin: 0;
+    padding: 0;
+    overflow-x: hidden;
+}
+
 .teddy {
   position: fixed;
   top: 50%;

www/spielsets/minispielset1/js/minispiel1_controller.js

@@ -0,0 +1,202 @@
+appControllers.controller('Minispiel1', function($scope,  $rootScope, $ionicPlatform, $cordovaMedia, backgroundsounds_mediahandler, $state, $timeout,$q, $http) {
+
+
+/*
+* Initialisierung
+*/
+
+//Minispiel
+$scope.showteddybear=false;
+$scope.teddyback=false;
+$scope.bin_am_lachen=false;
+
+//Globale MediaVariable fure Soundeffekte
+var gamesound='';
+var lachensound='';
+
+
+$scope.$on("$ionicView.beforeEnter", function(event, data){
+  /*
+  * Hintergrundbild setzen 
+  */
+  //$rootScope.backgroundimage = "spielsets/minispielset1/images/background.png";
+});
+
+$ionicPlatform.ready(function() {
+ 
+  /*
+  * Sounds definieren
+  */
+
+  $scope.lachensounds=[];
+  $scope.gamesounds=[];
+
+
+  /*
+  * 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/minispielset1/systemsounds.json').success(function(data) {
+
+    for(var i = 0; i < data.length; i++) {
+          
+      if (data[i].type=='lachensound'){
+        $scope.lachensounds.push(data[i].sound);
+      }
+      else if (data[i].type=='gamesound'){
+        $scope.gamesounds.push(data[i].sound);
+
+        $timeout(function () {  
+          playsound('gamesound', $scope.gamesounds[0], minispielstart,'1.0');
+        }, 1000);
+      }
+      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=='lachensound'){
+
+      /*
+      * Nur durchführen wenn Bär nicht lacht
+      */
+      if ($scope.bin_am_lachen==false){
+
+        try{
+
+          lachensound.release();
+        
+        }
+        catch(e){
+
+          //Soundfile Objekt gabs nicht oder Freigabefehler
+          console.log("Sounddatei nicht da");
+        }
+      
+        lachensound = new Media(soundfile, callbackfunction ,null);
+        $scope.bin_am_lachen=true;
+        lachensound.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();
+
+    }
+
+  });
+
+} 
+
+/*
+* Bär lacht gerade, warte bis fertig
+*/
+function lachegerade(){
+  $scope.bin_am_lachen=false;
+}
+
+function minispielstart(){
+  $timeout(function () {  
+    $scope.showteddybear=true;
+    $scope.teddyback=true;
+  }, 10);
+  $timeout(function () {  
+    $scope.showteddybear=false;
+    $state.go('home');
+  }, 30000);
+
+}
+
+
+/*
+* MiniSpiel kitzel den Teddy
+*/
+$scope.teddyaction = function() {
+  $scope.teddyanimation=getRandomInt(1,4);
+  $scope.teddyback=false;
+  $scope.teddyani1=false;
+  $scope.teddyani2=false;
+  $scope.teddyani3=false;
+  $scope.teddyani4=false;
+
+  if ($scope.teddyanimation==1){
+    $scope.teddyani1=true;
+    playsound('lachensound', $scope.lachensounds[getRandomInt(0, $scope.lachensounds.length - 1)], lachegerade,'1.0');
+  }
+  if ($scope.teddyanimation==2){
+    $scope.teddyani2=true;
+    playsound('lachensound', $scope.lachensounds[getRandomInt(0, $scope.lachensounds.length - 1)], lachegerade,'1.0');
+  }
+   if ($scope.teddyanimation==3){
+    $scope.teddyani3=true;
+    playsound('lachensound', $scope.lachensounds[getRandomInt(0, $scope.lachensounds.length - 1)], lachegerade,'1.0');
+  }
+  if ($scope.teddyanimation==4){
+    $scope.teddyani4=true;
+    playsound('lachensound', $scope.lachensounds[getRandomInt(0, $scope.lachensounds.length - 1)], lachegerade,'1.0');
+  }
+
+
+}
+
+/*
+* 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;
+}
+
+});

www/spielsets/minispielset1/templates/minispiel1.html

@@ -0,0 +1,9 @@
+<ion-view view-title="Minispiel">
+  <ion-content class="padding">
+       
+    <div class="teddy" ng-class="{'teddybackground': teddyback}" ng-show="showteddybear" mn-touch tap="teddyaction()"  swipe-left="teddyaction()"  swipe-right="teddyaction()"  swipe-up="teddyaction()"  swipe-down="teddyaction()">
+        <div ng-class="{'teddyani1': teddyani1, 'teddyani2': teddyani2, 'teddyani3': teddyani3, 'teddyani4': teddyani4}"></div>
+    </div>
+
+  </ion-content>
+</ion-view>