{"id":47235,"date":"2019-11-25T03:02:31","date_gmt":"2019-11-24T17:02:31","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47235"},"modified":"2019-11-25T09:36:41","modified_gmt":"2019-11-24T23:36:41","slug":"mobile-swipe-gesture-name-game-share-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-share-tutorial\/","title":{"rendered":"Mobile Swipe Gesture Name Game Share Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Name Game Share Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game_share.gif\" title=\"Mobile Swipe Gesture Name Game Share Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Swipe Gesture Name Game Share Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Mobile Swipe Gesture Name Game Tutorial' href='#msgngt'>Mobile Swipe Gesture Name Game Tutorial<\/a> was collaborative in its Name Game functionality for &#8230;<\/p>\n<ul>\n<li>two players within calling distance and able to get to the same device ( &#128053; \/ &#128584; ) &#8230; and today we cover &#8230;<\/li>\n<li>two players not within calling distance and not able to get to the same device ( &#128053; &#128231; &#128053; )<\/li>\n<\/ul>\n<p> &#8230; and we think, considering this, that <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=KM2K7sV-K74'><strike>Shirley<\/strike>surely<\/a> this would just involve an email link, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=1RIHFL105XA'><strike>Shirley<\/strike>surely<\/a>?!   Yes, that would do it, but it would also give away (to a savvy user) the innards of the game, and yet, we were envisaging the game as a surprise for the second player.   But this conundrum is exactly where an <a target=_blank title='HTML Email information fromWikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/HTML_email'>Inline HTML Email<\/a> (via PHP <a target=_blank title='PHP mail method information' href='http:\/\/php.net\/manual\/en\/function.mail.php'>mail<\/a>) email can come in really handy because it is another level of savvy again for your user to see any of the &#8220;business logic&#8221; involved in the game when you present them with an Inline HTML Email button (actually an &#8220;a&#8221; link with <i>style=&#8221;text-decoration:none;&#8221;<\/i> &#8230;<\/p>\n<p><code><br \/>\n&lt;a target=_blank style='text-decoration: none; border:3px solid red; padding: 15px 15px 15px 15px; background-color: yellow; height: 60px; border-radius: 40px;' id=aclick href='\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm?name=&array='&gt;<i>Name Game for ~ Courtesy of `<\/i>&lt;\/a&gt;<br \/>\n<\/code><\/p>\n<p>) to click with some short <i>&#8220;does not give the game away&#8221;<\/i> text.  Why an &#8220;a&#8221; element here?  Well, as you would glean when reading our &#8220;early days&#8221; (for us) discussion on this, with <a target=_blank title='PDF Slideshow and Form Creation Helper Inline Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/pdf-slideshow-and-form-creation-helper-inline-email-tutorial\/'>PDF Slideshow and Form Creation Helper Inline Email Tutorial<\/a>, that the Javascript &#8220;onclick&#8221; logic of another approach would be rejected by Email Clients like <a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a>, as one example.  You will notice, though, from snippet of &#8220;Inline HTML Email&#8221; HTML above, that inline CSS of the &lt;body&gt; &lt;\/body&gt; section is fine.  Hence our ability to make an &#8220;a&#8221; tag resemble a &#8220;button&#8221;.<\/p>\n<p>And back at the supervisor we just add another HTML &#8220;button&#8221; element to allow for this.  This allows for an HTML form method=POST navigation to a PHP email helper (via an HTML iframe) be called into play.<\/p>\n<p>Why a <a target=_blank title='HTML button tag information from W3schools' \n href='https:\/\/www.w3schools.com\/tags\/tag_button.asp'>&#8220;button&#8221;<\/a> element, rather than an &#8220;input type=&#8217;button'&#8221; element?<\/p>\n<p><code><br \/>\n&lt;!--input onclick=\"genask('');\" type=button value=\"Two Player Game ... You Set It Up for Other Player who Turns Away Now\"&gt;&lt;\/input--&gt;<br \/>\n&lt;button style=\"height:90px;\" onclick=\"genask('');\"&gt;Two Player Name Game &amp;#128053; \/ &amp;#128584; ... &lt;br&gt;You &amp;#128053; Set It Up for Other &lt;br&gt;Player &amp;#128584; who Turns Away Now&lt;\/button&gt;&lt;br&gt;&lt;br&gt;<br \/>\n&lt;button style=\"height:90px;\" onclick=\"drest(); genask('');\"&gt;Two Player Name Email Game &amp;#128053; &amp;#128231; &amp;#128053; ... &lt;br&gt;You &amp;#128053; Set It Up for Other &lt;br&gt;Player &amp;#128053; via Email &amp;#128231;&lt;\/button&gt;<br \/>\n<\/code><\/p>\n<p>Well, at least for non-mobile platforms, a button with complex wording, we&#8217;d like to spread over a few lines of height (as a &#8220;button&#8221; element can, defining this wording via its innerHTML property which can contain &lt;br&gt; line feeds).  And what helps with mobile platforms that still only show the top line of the innerHTML property of a &#8220;button&#8221; element?   Well, we start to involve emojis, and a means of brevity for your more complex concepts you want explained in a web application.<\/p>\n<p>If you want to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html--GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html--GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">Two Player Name Game<\/a>, feel free!  Or try it below &#8230;<\/p>\n<p><iframe src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" style=\"width:100%;height:800px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-share-tutorial\/'>New Mobile Swipe Gesture Name Game Share Tutorial<\/a>.<\/p-->\n<hr>\n<p id='msgngt'>Previous relevant <a target=_blank title='Mobile Swipe Gesture Name Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-tutorial\/'>Mobile Swipe Gesture Name Game Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Name Game Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures_name_game.jpg\" title=\"Mobile Swipe Gesture Name Game Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Swipe Gesture Name Game Tutorial<\/p><\/div>\n<p>Today&#8217;s extension of mobile device &#8220;swipe gesture&#8221; event functionality onto yesterday&#8217;s <a title='Mobile Swipe Gesture Detection Primer Tutorial' href='#msgdpt'>Mobile Swipe Gesture Detection Primer Tutorial<\/a> is to turn the &#8220;proof of concept&#8221; feel into an optional Name Game for Two Players web application.<\/p>\n<p>In this Name Game a &#8230;<\/p>\n<ul>\n<li>first player asks the second player to turn away &#8230;<\/li>\n<li>first player starts up <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-GETME\" title=\"Click picture\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html-GETME\" title=\"mobile_gestures.htm\">mobile_gestures.htm<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.htm\" title=\"Click picture\">Two Player Name Game<\/a> &#8230;<\/li>\n<li>first player clicks the one button of the web application, and, in so doing &#8230;<\/li>\n<li>first player is prompted for a user entry such as &#8230;<br \/>\n<code><br \/>\n[1,2,3,4] Cate<br \/>\n<\/code><br \/>\n &#8230; as an example to have second player Cate be sent to [URL1, URL2, URL3, URL4] as Cate respectively swipes [Up, Down, Left, Right] &#8230; noting here that first player can define their own URL suggestions where any &#8220;~&#8221; character is replaced by the second player&#8217;s name &#8230; and then &#8230;<\/li>\n<li>first player calls in second player so that &#8230;<\/li>\n<li>second player swipes wherever they wish &#8230; and depending on swipe type &#8230;<\/li>\n<li>second player can see the first player&#8217;s (tailored) surprises as they play (and swipe)<\/li>\n<\/ul>\n<p>Pretty simple game, huh?!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-tutorial\/'>Mobile Swipe Gesture Name Game Tutorial<\/a>.<\/p-->\n<hr>\n<p id='msgdpt'>Previous relevant <a target=_blank title='Mobile Swipe Gesture Detection Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-detection-primer-tutorial\/'>Mobile Swipe Gesture Detection Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Mobile Swipe Gesture Detection Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.jpg\" title=\"Mobile Swipe Gesture Detection Primer Tutorial\"  style=\"float:left;\"   \/><\/a><p class=\"wp-caption-text\">Mobile Swipe Gesture Detection Primer Tutorial<\/p><\/div>\n<p>Have you ever been curious about &#8220;the behind the scenes&#8221; detection of &#8220;swipe&#8221; gestures on mobile platforms, whether that be&#8230;<\/p>\n<ul>\n<li>swipe right<\/li>\n<li>swipe left<\/li>\n<li>swipe down<\/li>\n<li>swipe up<\/li>\n<\/ul>\n<p>?  The answer for us is &#8220;yes&#8221;.  So we decided to start down a road of discovery largely with the help of <a target=_blank title='Swipe advice, thanks' href='https:\/\/stackoverflow.com\/questions\/2264072\/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android'>this useful link<\/a>, thanks.<\/p>\n<p>This research led us to write an &#8220;in all innocence&#8221; &#8220;proof of concept&#8221; &#8220;gesture playground&#8221; HTML and Javascript <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html_GETME\" title=\"mobile_gestures.html\">mobile_gestures.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_gestures.html\" title=\"Click picture\">live run<\/a> for you to swipe away, and be detected!  It may be all you need to dive into some mobile web application development!<\/p>\n<p><!--p>You can also see this play out at WordPressa 4.1.1's <a target=_blank title='Mobile Swipe Gesture Detection Primer Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-detection-primer-tutorial'>Mobile Swipe Gesture Detection Primer Tutorial<\/a>.<\/p-->\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47228' onclick='var dv=document.getElementById(\"d47228\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/swipe\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47228' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47232' onclick='var dv=document.getElementById(\"d47232\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/game\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47232' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d47235' onclick='var dv=document.getElementById(\"d47235\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47235' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s Mobile Swipe Gesture Name Game Tutorial was collaborative in its Name Game functionality for &#8230; two players within calling distance and able to get to the same device ( &#128053; \/ &#128584; ) &#8230; and today we cover &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/mobile-swipe-gesture-name-game-share-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[222,1604,281,380,385,400,476,485,503,576,2487,652,795,2505,2723,873,952,997,1133,1137,1209,1229,1294,1319],"class_list":["post-47235","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-collaborate","tag-collaboration","tag-css","tag-email","tag-emoji","tag-event","tag-game","tag-gesture","tag-gmail","tag-html","tag-inline","tag-javascript","tag-mobile","tag-name","tag-ontouchmove","tag-ontouchstart","tag-player","tag-programming","tag-share","tag-sharing","tag-style","tag-swipe","tag-touch","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47235"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=47235"}],"version-history":[{"count":20,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47235\/revisions"}],"predecessor-version":[{"id":47255,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47235\/revisions\/47255"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}