Merge pull request #112 from Josso/startup-image
Merge pull request #112 from Josso/startup-image

Add startup-images for the iPhone

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -1,23 +1,24 @@
-## Contributing
+# Contributing
 Changes and improvements are more than welcome! Feel free to fork and open a pull request.
 
 Please follow the house rules to have a bigger chance of your contribution being merged.
 
-### House rules
+## House rules
 
-#### How to make changes
+### How to make changes
  - To make changes, create a new branch based on `master` (do not create one from `gh-pages` unless strictly necessary) and make them there, then create a Pull Request to master.  
  `gh-pages` is different from master in that it contains sharing features, analytics and other things that have no direct bearing with the game. `master` is the "pure" version of the game.
  - If you want to modify the CSS, please edit the SCSS files present in `style/`: `main.scss` and others. Don't edit the `main.css`, because it's supposed to be generated.  
- In order to compile your SCSS modifications, you need to use the `sass` gem (install it by running `gem install sass` once Ruby is installed). To run SASS, simply use the following command:  
+ In order to compile your SCSS modifications, you need to use the `sass` gem (install it by running `gem install sass` once Ruby is installed).  
+ To run SASS, simply use the following command:  
  `sass --watch style/main.scss`  
  SASS will automatically recompile your css when changed.
  - `Rakefile` contains some tasks that help during development. Feel free to add useful tasks if needed.
  - Please use 2-space indentation when editing the JavaScript. A `.jshintrc` file is present, which will help your code to follow the guidelines if you install and run `jshint`.
  - Please test your modification thouroughly before submitting your Pull Request.
 
-#### Changes that might not be accepted
-We have to be conservative in regards to the core game. This means that some modifications won't be merged, or will have to be evaluated carefully before doing being merged:
+### Changes that might not be accepted
+We have to be conservative with the core game. This means that some modifications won't be merged, or will have to be evaluated carefully before being merged:
 
  - Undo/redo features
  - Save/reload features
@@ -25,7 +26,7 @@
  - Changes to the layout
  - Changes to the grid size
 
-#### Changes that are welcome
+### Changes that are welcome
  - Bug fixes
  - Compatibility improvements
  - "Under the hood" enhancements

file:a/index.html -> file:b/index.html
--- a/index.html
+++ b/index.html
@@ -7,7 +7,10 @@
   <link href="style/main.css" rel="stylesheet" type="text/css">
   <link rel="shortcut icon" href="favicon.ico">
   <link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
+  <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
+  <link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png"  media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
   <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-mobile-web-app-status-bar-style" content="black">
 
   <meta name="HandheldFriendly" content="True">
   <meta name="MobileOptimized" content="320">

--- a/js/animframe_polyfill.js
+++ b/js/animframe_polyfill.js
@@ -1,17 +1,19 @@
-(function() {
+(function () {
   var lastTime = 0;
   var vendors = ['webkit', 'moz'];
-  for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
-    window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
-    window.cancelAnimationFrame =
-    window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
+  for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+    window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
+    window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
+      window[vendors[x] + 'CancelRequestAnimationFrame'];
   }
 
   if (!window.requestAnimationFrame) {
-    window.requestAnimationFrame = function(callback, element) {
+    window.requestAnimationFrame = function (callback) {
       var currTime = new Date().getTime();
       var timeToCall = Math.max(0, 16 - (currTime - lastTime));
-      var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+      var id = window.setTimeout(function () {
+        callback(currTime + timeToCall);
+      },
       timeToCall);
       lastTime = currTime + timeToCall;
       return id;
@@ -19,7 +21,7 @@
   }
 
   if (!window.cancelAnimationFrame) {
-    window.cancelAnimationFrame = function(id) {
+    window.cancelAnimationFrame = function (id) {
       clearTimeout(id);
     };
   }

 Binary files /dev/null and b/meta/apple-touch-startup-image-640x1096.png differ
 Binary files /dev/null and b/meta/apple-touch-startup-image-640x920.png differ
--- a/style/main.css
+++ b/style/main.css
@@ -143,14 +143,16 @@
   padding: 15px;
   cursor: default;
   -webkit-touch-callout: none;
+  -ms-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
+  -ms-touch-action: none;
+  touch-action: none;
   background: #bbada0;
   border-radius: 6px;
   width: 500px;
   height: 500px;
-  -ms-touch-action: none;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box; }
@@ -543,14 +545,16 @@
     padding: 10px;
     cursor: default;
     -webkit-touch-callout: none;
+    -ms-touch-callout: none;
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
+    -ms-touch-action: none;
+    touch-action: none;
     background: #bbada0;
     border-radius: 6px;
     width: 280px;
     height: 280px;
-    -ms-touch-action: none;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box; }

--- a/style/main.scss
+++ b/style/main.scss
@@ -176,15 +176,19 @@
 
     cursor: default;
     -webkit-touch-callout: none;
+    -ms-touch-callout: none;
+
     -webkit-user-select: none;
     -moz-user-select: none;
     -ms-user-select: none;
+
+    -ms-touch-action: none;
+    touch-action: none;
 
     background: $game-container-background;
     border-radius: $tile-border-radius * 2;
     width: $field-width;
     height: $field-width;
-    -ms-touch-action: none;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;

comments