iPhone 6 support for the game, for now

7271f6f6 · Richard Torenvliet · ae1332b5 · 7271f6f6 · 7271f6f6 · 7271f6f6
Commit 7271f6f6 authored Jun 10, 2015 by Richard Torenvliet
31 changed files
--- a/src/app/app.js
+++ b/src/app/app.js
@@ -9,7 +9,7 @@ angular.module( 'Interactive', [
 ])

 .config(function ($stateProvider, $urlRouterProvider) {
-    $urlRouterProvider.otherwise( '/index' );
+    $urlRouterProvider.otherwise('/tapdance' );
 })

 .run( function run () {

--- a/src/app/game/index.tpl.html
+++ b/src/app/game/index.tpl.html
 <h1>Game index</h1>
-
 <a ui-sref="game-tapdance">tapdance</a>
--- a/src/app/game/tapdance/tapdance-how2play.js
+++ b/src/app/game/tapdance/tapdance-how2play.js
+angular.module('Interactive.game.tapdance.how2play', [
+    'ui.router',
+    'ui.bootstrap'
+])
+
+.config(function($stateProvider) {
+    $stateProvider
+        .state( 'game-tapdance-how2play', {
+            url: '/tapdance-how2-play',
+            views: {
+                'main': {
+                    controller: 'howCtrl',
+                    templateUrl: 'game/tapdance/tapdance-how2play.tpl.html'
+                }
+            },
+
+            data: { pageTitle: 'How to Play' }
+        }
+    );
+})
+
+.controller( 'howCtrl', function IndexController($scope, $modal) {
+    //$modal.open(
+    //    {
+    //        templateUrl:'game/tapdance/tapdance-play-modal.tpl.html'
+    //});
+})
+
+;
--- a/src/app/game/tapdance/tapdance-how2play.tpl.html
+++ b/src/app/game/tapdance/tapdance-how2play.tpl.html
+<div class="game-background">
+    <img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
+    <a ui-sref='game-tapdance-game'><img class="popup-image" src="/assets/how2play.png" alt='bg'/>
+    </a>
+</div>
--- a/src/app/game/tapdance/tapdance-index.js
+++ b/src/app/game/tapdance/tapdance-index.js
 angular.module('Interactive.game.tapdance', [
    'ui.router',
    'ui.bootstrap',
-    'Interactive.pixi'
+    'Interactive.game.tapdance.how2play'
 ])

 .config(function($stateProvider) {

--- a/src/app/game/tapdance/tapdance-index.tpl.html
+++ b/src/app/game/tapdance/tapdance-index.tpl.html
 <div class="game-background">
+    <img class="bg-image" src="/assets/bg.jpg" alt='bg'/>
    <div class="popup">
        <h1 class="text-center">TAP DANCE</h1>
        <p class="text-center">Help your conscience and save water</p>
-        <button class="btn btn-default center-block play-now">PLAY NOW</button>
+        <a ui-sref='game-tapdance-how2play' class="btn btn-default center-block play-now">PLAY NOW</a>
    </div>
 </div>
--- a/src/assets/how2play.png
+++ b/src/assets/how2play.png
--- a/src/assets/tapdance/Background_tapdance_realsize.ai
+++ b/src/assets/tapdance/Background_tapdance_realsize.ai
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance01.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance01.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance02.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance02.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance03.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance03.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance04.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance04.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance05.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance05.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance06.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance06.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance07.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance07.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance08.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance08.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance09.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance09.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance10.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance10.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance11.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance11.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance12.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance12.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance13.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance13.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance14.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance14.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance15.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance15.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance16.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance16.jpg
--- a/src/assets/tapdance/Backgrounds - JPG/Background_tapdance17.jpg
+++ b/src/assets/tapdance/Backgrounds - JPG/Background_tapdance17.jpg
--- a/src/assets/tapdance/Overlayers - PNG/Lose_overlayer.png
+++ b/src/assets/tapdance/Overlayers - PNG/Lose_overlayer.png
--- a/src/assets/tapdance/Overlayers - PNG/Win_overlayer.png
+++ b/src/assets/tapdance/Overlayers - PNG/Win_overlayer.png
--- a/src/assets/tapdance/Tap_dance_game.ai
+++ b/src/assets/tapdance/Tap_dance_game.ai
--- a/src/assets/tapdance/Tap_dance_game.pdf
+++ b/src/assets/tapdance/Tap_dance_game.pdf
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 <html ng-app="Interactive" ng-controller="AppCtrl">
  <head>
    <title ng-bind="pageTitle"></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, minimal-ui, initial-scale=1, maximum-scale=1, user-scalable=no">

    <!-- font awesome from BootstrapCDN -->
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
@@ -15,7 +15,6 @@
  </head>
  <body>
      <div class="container" ui-view="main">
-          test
      </div>
  </body>
 </html>
--- a/src/less/main.less
+++ b/src/less/main.less
@@ -22,8 +22,12 @@

 body {
    font-family: MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
+    width: 100%;
+    height: 100%;
+    overflow:hidden;
 }

+
 /**
 * Typography
 */
@@ -141,27 +145,39 @@ h2 {
 }

 .game-background {
-    background: url("/assets/bg.jpg");
-    background-position: 50% 50%;
-    background-size: auto 80%;
-    background-repeat: no-repeat;
-    padding: 0 !important;
-    height: 800px;
+    position: relative;
+}

+img.bg-image {
+    position: absolute;
+    top: -90px;
+    left: 0;
+    height: 667px;
+    width: auto;
+    z-index: 0;
+}
+
+.popup-image {
+    position: absolute;
+    width: 250px;
+    left: 20%;
+    margin-left: auto;
+    margin-right: auto;
 }

 .popup {
-    color: #d0b745;
-    background: white;
-    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
+    -webkit-border-radius: 30px;
+    background: white;
    border-radius: 30px;
-    position: absolute;
+    color: #d0b745;
+    left: 10%;
+    margin-left: auto;
+    margin-right: auto;
    padding: 3em;
-    left: 50%;
-    top: 10%;
-    transform: translateY(-50%);
-    transform: translateX(-50%);
+    position: absolute;
+    top: 40px;
+    width: 300px;
 }

 .popup h1 {
@@ -173,3 +189,9 @@ h2 {
    color: white;
    font-size: 3em;
 }
+
+
+@media only screen
+and (min-device-width : 375px)
+and (max-device-width : 667px)
+and (orientation : portrait) { /* STYLES GO HERE */ }