From e614b7da6a22f555696f01d25b89910668649cd6 Mon Sep 17 00:00:00 2001
From: Bruno Perry <brunoperry@gmail.com>
Date: Mon, 17 Oct 2016 14:13:54 +0100
Subject: [PATCH] Added mobile touch support

---
 index.html   |  9 +++++++++
 paradise.css | 10 ++++++++++
 paradise.js  | 40 +++++++++++++++++++++++++++++++++++-----
 3 files changed, 54 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 0a66148..10dfaeb 100755
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <title>Paradise Café</title>
     <!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]-->
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
     <link href="paradise.css" media="screen" rel="stylesheet" type="text/css">
 
   </head>
@@ -18,6 +19,14 @@
         <li>b - oral</li>
       </ul>
     </div>
+    <div id="infoTouchDiv" class="center">
+      Ações:
+      <ul id="touch-elems">
+        <li id="67">anal</li>
+        <li id="70">vaginal</li>
+        <li id="66">oral</li>
+      </ul>
+    </div>
     <script type="text/javascript" src="paradise.js"></script>
     <script type="text/javascript">
        prepareCanvas(document.getElementById("canvasDiv"), 512, 272);
diff --git a/paradise.css b/paradise.css
index 3773825..fb25ac8 100755
--- a/paradise.css
+++ b/paradise.css
@@ -19,3 +19,13 @@ div.center {
     margin: 0 auto;
 }
 
+/*MOBILE STUFF*/
+#touch-elems li {
+
+    width: 100%;
+    height: 32px;
+    line-height: 32px;
+
+    cursor: pointer;
+}
+
diff --git a/paradise.js b/paradise.js
index 4e1f3b6..55991c3 100755
--- a/paradise.js
+++ b/paradise.js
@@ -15,10 +15,16 @@ function reset() {
     room();
 }
 
-function doKeyDown(e)
-{
-    if (selected == 0) {
-        switch(e.keyCode) {
+
+/**
+ * @author cc
+ * Unified func for keydown and touch events
+ */
+function doAction(actionID) {
+
+    if(selected === 0) {
+
+        switch(actionID) {
             case 70:
                 selected = 1;
                 context.drawImage(images["balloon_vaginal"], 0, 0);
@@ -54,7 +60,31 @@ function prepareCanvas(canvasDiv, canvasWidth, canvasHeight)
     // Note: The above code is a workaround for IE 8and lower. Otherwise we could have used:
     //     context = document.getElementById('canvas').getContext("2d");
     
-    window.addEventListener('keydown', doKeyDown, true);
+
+    /**
+     * @author: cc
+     * Do device validation, fix layout and assign their events
+     */
+    //Check device
+    if( navigator.userAgent.match(/Android/i) ||
+        navigator.userAgent.match(/iPhone|iPad|iPod/i) ||
+        navigator.userAgent.match(/IEMobile/i) ) {          //is mobile
+
+            document.getElementById("infoDiv").style.display = "none";
+            var elems = document.getElementById("touch-elems").getElementsByTagName("li");
+            for(var i = 0; i < elems.length; i++) {
+                elems[i].addEventListener("click", function(e) {
+
+                    doAction( parseInt(e.target.id) );
+                }, true);
+            }
+    } else {                                                //is desktop
+
+       document.getElementById("infoTouchDiv").style.display = "none";
+        window.addEventListener('keydown', function(e) {
+            doAction(e.keyCode);
+        }, true);
+    }
 
     var myImages = [
         "room", "whore", "hero", "balloon_choose",