CSS Media Screen angepasst, Minispiel mit Sounds und effekten versehen

README.md

@@ -12,6 +12,7 @@ Plugins
 ionic plugin add cordova-plugin-screen-orientation
 cordova plugin add cordova-plugin-media
 cordova plugin add https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.git
+cordova plugin add cordova-plugin-crosswalk-webview
 
 
 

www/css/style.css

@@ -3,23 +3,12 @@
     background-size: cover;
     color: #333;
     font: 100% Arial, Sans Serif;
-    height: 100vh;
+    height: 100%;
     margin: 0;
     padding: 0;
     overflow-x: hidden;
 }
 
-.baumhaus {
-  background: url("../img/Background/treehouse.svg");
-  background-size: cover;
-  position:fixed;
-  bottom:0;
-  left:-25px;  
-  width: 256px;
-  height: 256px;
-  overflow: hidden;
-}
-
 .farmhaus {
   background: url("../img/Background/Farmhaus.svg");
   background-size: cover;
@@ -36,7 +25,7 @@
   background-size: cover;
   position:fixed;
   bottom:65px;
-  Right:60px;  
+  Right:50px;  
   width: 60px;
   height: 80px;
   overflow: hidden;
@@ -45,11 +34,12 @@
 .kornspeicher {
   background: url("../img/Background/Kornspeicher.svg");
   background-size: cover;
+  background-position:bottom;
   position:fixed;
   bottom:40px;
   Left:275px;  
   width: 60px;
-  height: 80px;
+  height: 90px;
   overflow: hidden;
 }
 
@@ -62,6 +52,19 @@
   overflow: hidden;
 }
 
+.baumhaus {
+  background: url("../img/Background/treehouse.svg");
+  background-size: cover;
+  position:fixed;
+  bottom:0;
+  left:-25px;  
+  width: 256px;
+  height: 256px;
+  overflow: hidden;
+}
+
+
+
 /* Bild groessen */
 .suchspielbuttonsizebig{
   width:128px;
@@ -167,22 +170,23 @@
     -moz-transform: scale(0.3);
     transform: scale(0.3);
 }
-.x3 {
-    -webkit-animation: animateCloud 30s linear infinite;
-    -moz-animation: animateCloud 30s linear infinite;
-    animation: animateCloud 30s linear infinite;
+
+.ufox {
+    -webkit-animation: animateCloud 8s linear infinite;
+    -moz-animation: animateCloud 8s linear infinite;
+    animation: animateCloud 8s linear infinite;
     
-    -webkit-transform: scale(0.5);
-    -moz-transform: scale(0.5);
-    transform: scale(0.5);
+    -webkit-transform: scale(0.3);
+    -moz-transform: scale(0.3);
+    transform: scale(0.3);
 }
 
 .ufo {
     background:  url('../img/ufo.png');
+    background-size: cover;
+    height: 128px;
+    width: 128px;
     position: relative;
-    height: 64px;
-    position: relative;
-    width: 64px;
 }
 
 
@@ -236,4 +240,114 @@
     height: 180px;
     right: 50px;
     top: -90px;
+}
+
+
+
+/* ----------- Kindle Fire HD 7" ----------- */
+/* Landscape */
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 1280px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: landscape) {
+
+  .farmhaus {
+    background: url("../img/Background/Farmhaus.svg");
+    background-size: cover;
+    position:fixed;
+    bottom:130px;
+    right:20px;  
+    width: 60px;
+    height: 80px;
+    overflow: hidden;
+  }
+
+  .windrad {
+    background: url("../img/Background/Windrad.svg");
+    background-size: cover;
+    position:fixed;
+    bottom:130px;
+    right:130px;  
+    width: 120px;
+    height: 160px;
+    overflow: hidden;
+  }
+
+  .kornspeicher {
+    background: url("../img/Background/Kornspeicher.svg");
+    background-size: cover;
+    background-position:bottom;
+    position:fixed;
+    bottom:80px;
+    left:330px;  
+    width: 120px;
+    height: 180px;
+    overflow: hidden;
+  }
+
+  .suchspielbutton {
+    position: absolute;  
+    bottom:15px;
+    left:485px;  
+    width: 128px;
+    height: 128px;
+    overflow: hidden;
+  }
+
+}
+
+
+
+/* ----------- Galaxy S5 Mini----------- */
+/* Landscape */
+@media screen 
+  and (device-width: 640px) 
+  and (device-height: 360px) 
+  and (-webkit-device-pixel-ratio: 2) 
+  and (orientation: landscape) {
+
+.farmhaus {
+  background: url("../img/Background/Farmhaus.svg");
+  background-size: cover;
+  position:fixed;
+  bottom:40px;
+  right:10px;  
+  width: 30px;
+  height: 40px;
+  overflow: hidden;
+}
+
+.windrad {
+  background: url("../img/Background/Windrad.svg");
+  background-size: cover;
+  position:fixed;
+  bottom:45px;
+  right:50px;  
+  width: 60px;
+  height: 80px;
+  overflow: hidden;
+}
+
+.kornspeicher {
+  background: url("../img/Background/Kornspeicher.svg");
+  background-size: cover;
+  background-position:bottom;
+  position:fixed;
+  bottom:20px;
+  left:275px;  
+  width: 60px;
+  height: 90px;
+  overflow: hidden;
+}
+
+.suchspielbutton {
+  position: absolute;  
+  bottom:5px;
+  left:370px;  
+  width: 128px;
+  height: 128px;
+  overflow: hidden;
+}
+
 }

www/js/home_controller.js

@@ -8,6 +8,7 @@ appControllers.controller('home', function($scope, $rootScope, $ionicPlatform, $
   $scope.CSSFarmhaus=false;
   $scope.CSSWindrad=false;
   $scope.CSSKornspeicher=false;
+  $scope.CSSufo=false;
   $scope.baumhauszufallaction=99;
 
 
@@ -16,11 +17,13 @@ appControllers.controller('home', function($scope, $rootScope, $ionicPlatform, $
   var farmhaussound='';
   var windradsound='';
   var kornspeichersound='';
+  var ufosound='';
 
   var mentor_is_speakting=false;
   var farmhaus_is_sounding=false;
   var windrad_is_sounding=false;
   var kornspeicher_is_sounding=false;
+  var ufo_is_sounding=false;
 
   $scope.$on("$ionicView.beforeEnter", function(event, data){
     /*
@@ -91,6 +94,14 @@ appControllers.controller('home', function($scope, $rootScope, $ionicPlatform, $
       //$state.go('minispiel2');
     }
 
+    /*
+    * DEVELOPMENT TEST
+    */
+    $scope.devtest = function(){
+      $state.go('minispiel2');
+    }
+
+
     $scope.animate_farmhaus=function(){
       $scope.CSSFarmhaus=true;
       playsound('farmhaussound', $scope.boingsound_action[getRandomInt(0, $scope.boingsound_action.length - 1)], farmhaussound_stop,'1.0');
@@ -108,6 +119,12 @@ appControllers.controller('home', function($scope, $rootScope, $ionicPlatform, $
       playsound('kornspeichersound', $scope.boingsound_action[getRandomInt(0, $scope.boingsound_action.length - 1)], kornspeichersound_stop,'1.0');
     }
 
+
+    $scope.animate_ufo=function(){
+      $scope.CSSufo=true;
+      playsound('ufosound', $scope.boingsound_action[getRandomInt(0, $scope.boingsound_action.length - 1)], ufosound_stop,'1.0');
+    }
+
     $scope.baumhaus_actiondo=function(){
 
       $scope.baumhauszufallaction=getRandomInt(1,2);
@@ -191,6 +208,28 @@ appControllers.controller('home', function($scope, $rootScope, $ionicPlatform, $
           kornspeicher_is_sounding=true;
         }
       }
+      else if (playtype=='ufosound'){
+
+
+        if (ufo_is_sounding==false){
+
+          try{
+
+            //versuchen Soundfile freizugeben
+            ufosound.release();
+          }
+          catch(e){
+
+            //Soundfile Objekt gabs nicht oder Freigabefehler
+            console.log("Sounddatei nicht da");
+          }
+
+          ufosound = new Media(soundfile, callbackfunction ,null);
+          ufosound.play();
+          ufosound.setVolume(volume);
+          ufo_is_sounding=true;
+        }
+      }
       else if (playtype=='mentorsound'){
 
         if (mentor_is_speakting==false){
@@ -234,6 +273,14 @@ appControllers.controller('home', function($scope, $rootScope, $ionicPlatform, $
 
     }
 
+    function ufosound_stop(){
+
+        $timeout(function () { $scope.CSSufo=false; }, 0);
+        ufosound.release();
+        ufo_is_sounding=false;
+
+    }
+
     function farmhaussound_stop(){
       
         $timeout(function () { $scope.CSSFarmhaus=false; }, 0);

www/spielsets/minispielset2/css/minispiel.css

@@ -18,4 +18,35 @@
 .dropzone{
   height:96px;
   width: 128px;
+}
+
+
+.rotate {
+    -webkit-animation:spin 4s linear;
+    -moz-animation:spin 4s linear;
+    animation:spin 4s linear;
+}
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+
+
+/* ----------- Kindle Fire HD 7" ----------- */
+/* Landscape */
+@media only screen 
+  and (min-device-width: 800px) 
+  and (max-device-width: 1280px) 
+  and (-webkit-min-device-pixel-ratio: 1.5) 
+  and (orientation: landscape) {
+
+  .dragzone{
+    height:100px;
+    width: 128px;
+  }
+
+  .dropzone{
+    height:200px;
+    width: 256px;
+  }
+
 }

www/spielsets/minispielset2/js/minispiel_controller.js

@@ -10,6 +10,8 @@ $scope.chunkedDataBilderMask = [];
 
 $scope.spielendecounter=4;
 
+$scope.complete=false;
+
 
 /*
 * Spielset laden
@@ -32,8 +34,11 @@ $ionicPlatform.ready(function() {
   * Sounds definieren
   */
 
-  $scope.lachensounds=[];
-  $scope.gamesounds=[];
+  var completesound='';
+  var failsound='';
+  var setsound='';
+  var rotatesound='';
+
 
 
   /*
@@ -45,19 +50,21 @@ $ionicPlatform.ready(function() {
   * Typen: gameoversound -> Spielzu ende Zeit für minispiel etc.
   * Typen: backgroundmusic -> Hintergrundmusik
   */
-  $http.get('spielsets/minispielset1/systemsounds.json').success(function(data) {
+  $http.get('spielsets/minispielset2/systemsounds.json').success(function(data) {
 
     for(var i = 0; i < data.length; i++) {
           
-      if (data[i].type=='lachensound'){
-        $scope.lachensounds.push(data[i].sound);
+      if (data[i].type=='setsound'){
+        $scope.setsound=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=='failsound'){
+        $scope.failsound=data[i].sound;
+      }
+      else if (data[i].type=='completesound'){
+        $scope.completesound=data[i].sound;
+      }
+      else if (data[i].type=='rotatesound'){
+        $scope.rotatesound=data[i].sound;
       }
       else if (data[i].type=='backgroundmusic'){
         //backgroundsounds_mediahandler.setbackgroundsoundfile(data[i].sound);
@@ -106,16 +113,11 @@ 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){
+    if (playtype=='setsound'){
 
         try{
 
-          lachensound.release();
+          setsound.release();
         
         }
         catch(e){
@@ -124,19 +126,17 @@ function playsound(playtype, soundfile, callbackfunction, volume){
           console.log("Sounddatei nicht da");
         }
       
-        lachensound = new Media(soundfile, callbackfunction ,null);
-        $scope.bin_am_lachen=true;
-        lachensound.play();
+        setsound = new Media(soundfile, callbackfunction ,null);
+        setsound.play();
 
-      }
 
     }
-    else if (playtype=='gamesound'){
+    else if (playtype=='failsound'){
       
       try{
 
         //versuchen Soundfile freizugeben
-        gamesound.release();
+        failsound.release();
 
       }
       catch(e){
@@ -145,15 +145,81 @@ function playsound(playtype, soundfile, callbackfunction, volume){
         console.log("Sounddatei nicht da");
       }
 
-      gamesound = new Media(soundfile, callbackfunction ,null);
-      gamesound.play();
+      failsound = new Media(soundfile, callbackfunction ,null);
+      failsound.play();
 
     }
+    else if (playtype=='rotatesound'){
+      
+      try{
 
+        //versuchen Soundfile freizugeben
+        rotatesound.release();
+
+      }
+      catch(e){
+
+        //Soundfile Objekt gabs nicht oder Freigabefehler
+        console.log("Sounddatei nicht da");
+      }
+
+      rotatesound = new Media(soundfile, callbackfunction ,null);
+      rotatesound.play();
+
+    }
+    else if (playtype=='completesound'){
+      
+      try{
+
+        //versuchen Soundfile freizugeben
+        completesound.release();
+
+      }
+      catch(e){
+
+        //Soundfile Objekt gabs nicht oder Freigabefehler
+        console.log("Sounddatei nicht da");
+      }
+
+      completesound = new Media(soundfile, callbackfunction ,null);
+      completesound.play();
+
+    }
   });
 
 } 
 
+$scope.rotateitem=function(id){
+
+  if($scope.complete==true){
+
+    for(var i = 0; i < $scope.spiele.length; i++) {
+
+      if (id==$scope.spiele[i].id){
+        $scope.spiele[i].rotate=true;
+        playsound('rotatesound', $scope.rotatesound, null, '1.0');
+        $timeout(function () { resetrotate(id); }, 4100);
+      }
+      
+    }
+
+  }
+
+}
+
+
+function resetrotate(id){
+  
+  for(var i = 0; i < $scope.spiele.length; i++) {
+
+    if (id==$scope.spiele[i].id){
+      $scope.spiele[i].rotate=false;
+    }
+      
+  }
+
+}
+
 $scope.onDragComplete=function(data,evt){
 
   for(var i = 0; i < $scope.spiele.length; i++) {
@@ -177,7 +243,7 @@ $scope.onDragStart=function(data,evt){
 }
 
 $scope.onDragStop=function(data,evt){
-
+  playsound('failsound', $scope.failsound, null, '1.0');
   for(var i = 0; i < $scope.spiele.length; i++) {
 
     if (data.id==$scope.spiele[i].id){
@@ -193,6 +259,7 @@ $scope.onDropComplete=function(data,evt,dropid){
 
   //richtige form erwischt
   if (data.id==dropid){
+    playsound('setsound', $scope.setsound, null, '1.0');
     for(var i = 0; i < $scope.spiele.length; i++) {
 
       if (data.id==$scope.spiele[i].id){
@@ -207,8 +274,9 @@ $scope.onDropComplete=function(data,evt,dropid){
   console.log("dropid: " + dropid +  " drop success, data:", data);
 
   if ($scope.spielendecounter==0){
-    
-    $timeout(function () { $state.go('home'); }, 5000);
+    $scope.complete=true;
+    playsound('completesound', $scope.completesound, null, '1.0');
+    $timeout(function () { $state.go('home'); }, 15000);
 
   }
 }

www/spielsets/minispielset2/spielset.json

@@ -1,6 +1,6 @@
 [
-	{"id": 0, "bild": "spielsets/minispielset2/images/blaues_auto.png", "bildmaske": "spielsets/minispielset2/images/blaues_auto_maske.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_affe.mp3", "display": 1, "dragged":0 },
-	{"id": 1, "bild": "spielsets/minispielset2/images/rotes_auto.png", "bildmaske": "spielsets/minispielset2/images/rotes_auto_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_esel.mp3", "display": 1, "dragged":0 },
-	{"id": 2, "bild": "spielsets/minispielset2/images/schneemann.png", "bildmaske": "spielsets/minispielset2/images/schneemann_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hase.mp3", "display": 1, "dragged":0 },
-	{"id": 3, "bild": "spielsets/minispielset2/images/teddy.png", "bildmaske": "spielsets/minispielset2/images/teddy_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hund.mp3", "display": 1, "dragged":0 }
+	{"id": 0, "bild": "spielsets/minispielset2/images/blaues_auto.png", "bildmaske": "spielsets/minispielset2/images/blaues_auto_maske.png", "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_affe.mp3", "rotate":0, "display": 1, "dragged":0 },
+	{"id": 1, "bild": "spielsets/minispielset2/images/rotes_auto.png", "bildmaske": "spielsets/minispielset2/images/rotes_auto_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_esel.mp3", "rotate":0, "display": 1, "dragged":0 },
+	{"id": 2, "bild": "spielsets/minispielset2/images/schneemann.png", "bildmaske": "spielsets/minispielset2/images/schneemann_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hase.mp3", "rotate":0, "display": 1, "dragged":0 },
+	{"id": 3, "bild": "spielsets/minispielset2/images/teddy.png", "bildmaske": "spielsets/minispielset2/images/teddy_maske.png",  "sound": "/android_asset/www/spielsets/spielset1/sounds/finde_hund.mp3", "rotate":0, "display": 1, "dragged":0 }
 	]

www/spielsets/minispielset2/systemsounds.json

@@ -1,5 +1,7 @@
 [
-	{"id": 0, "type": "gamesound", "sound": "/android_asset/www/spielsets/minispielset1/sound/kitzeldenbaeren.mp3"},
-	{"id": 1, "type": "lachensound", "sound": "/android_asset/www/spielsets/minispielset1/sound/lachen1.mp3"},
-	{"id": 2, "type": "lachensound", "sound": "/android_asset/www/spielsets/minispielset1/sound/lachen2.mp3"}
+	{"id": 0, "type": "gamesound", "sound": "/android_asset/www/spielsets/minispielset2/sound/kitzeldenbaeren.mp3"},
+	{"id": 1, "type": "setsound", "sound": "/android_asset/www/spielsets/minispielset2/sound/setzen.mp3"},
+	{"id": 2, "type": "failsound", "sound": "/android_asset/www/spielsets/minispielset2/sound/fail.mp3"},
+	{"id": 3, "type": "completesound", "sound": "/android_asset/www/spielsets/minispielset2/sound/applaus.mp3"},
+	{"id": 4, "type": "rotatesound", "sound": "/android_asset/www/spielsets/minispielset2/sound/rotate.mp3"}
 ]

www/spielsets/minispielset2/templates/minispiel.html

@@ -12,7 +12,7 @@
         <div class="col col-75">
         	<div class="row" style="font-size: 12px;" ng-repeat="rows in chunkedDataBilderMask">
             	<div style="width: 100%;  text-align: center;" class="col" ng-repeat="item in rows">
-                	<div class="dropzone" style="background: url('{{ item.bildmaske }}');background-size: cover;" ng-drop="true" ng-drop-success="onDropComplete($data,$event,item.id )" ></div>
+                	<div class="dropzone" style="background: url('{{ item.bildmaske }}');background-size: cover;" ng-drop="true" ng-drop-success="onDropComplete($data,$event,item.id )" ng-class="{'rotate': item.rotate}" ng-click="rotateitem(item.id)"></div>
                 	<br>
               	</div>
     		</div>

www/templates/home.html

@@ -6,7 +6,7 @@
       </div>
 
 
-    <div class="farmhaus" ng-class="{'floating': CSSFarmhaus}" ng-click="animate_farmhaus()"></div>
+    <div class="farmhaus" ng-class="{'bounce': CSSFarmhaus}" ng-click="animate_farmhaus()"></div>
 
     <div class="kornspeicher" ng-class="{'bounce': CSSKornspeicher}" ng-click="animate_kornspeicher()"></div>
 
@@ -21,18 +21,21 @@
         </div>
 
     </div>
-<div id="background-wrap">
-    <div class="x1">
-        <div class="cloud"></div>
+
+    <div class="ufox">
+        <div class="ufo" ng-class="{'magictime vanishOut': CSSufo}" ng-click="animate_ufo()"></div>
     </div>
+    <div id="background-wrap">
 
-    <div class="x2">
-        <div class="cloud"></div>
+      <div class="x1">
+          <div class="cloud" ng-click="devtest()"></div>
+      </div>
+
+      <div class="x2">
+          <div class="cloud"></div>
+      </div>
     </div>
 
 
-</div>
-
-
   </ion-content>
 </ion-view>