<!doctype html>
<html>
<head>
<title>Mobile gestures - RJM Programming - November, 2019</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.s0 { background:linear-gradient(90deg,#d3cbb8,#6d6027) !important; }
.s1 { background:linear-gradient(90deg,#74ebd5,#acb6e5) !important; }
.s2 { background:linear-gradient(90deg,#f7b733,#fc4a1a) !important; }
.s3 { background:linear-gradient(90deg,#00f260,#0575e6) !important; }
.s4 { background:linear-gradient(90deg,#ffc0cb,#800080) !important; }
.s5 { background:linear-gradient(90deg,#f3f9a7,#cac531) !important; }
.s6 { background:linear-gradient(90deg,#605c3c,#3c3b3f) !important; }
.s7 { background:linear-gradient(90deg,#fdeff9,#ec38bc,#7303c0,#03001e) !important; }
.s8 { background:linear-gradient(90deg,#ada996,#f2f2f2,#dbdbdb,#eaeaea) !important; }

button { border-radius: 60px; border: 3px solid blue; padding: 8px 8px 8px 8px; background-color: #f0f0f0; }
</style>
<script type='text/javascript'>
// 🐵 then 🙈
var ideas=['#d3cbb8,#6d6027', '#74ebd5,#acb6e5', '#f7b733,#fc4a1a', '#00f260,#0575e6', '#ffc0cb,#800080', '#f3f9a7,#cac531', '#605c3c,#3c3b3f', '#fffbd5,#b20a2c', '#03001e,#7303c0,#ec38bc,#fdeff9', '#ada996,#f2f2f2,#dbdbdb,#eaeaea'];
var aname = '';
var urlprefixes = ['//www.behindthename.com/name/~', '//thenamegame-generator.com/lyrics/~.html', '//en.geneanet.org/first-name/~', '//word.tips/words-for/~/?dictionary=wwf'];
var asked = location.search.split('=')[1] ? true : false;
var oname = location.search.split('name=')[1] ? decodeURIComponent(location.search.split('name=')[1].split('&')[0]) : '';
urlprefixes[0] = location.search.split('array=')[1] ? (decodeURIComponent(location.search.split('array=')[1].split('&')[0]) + "//www.behindthename.com/name/~,//thenamegame-generator.com/lyrics/~.html,//en.geneanet.org/first-name/~,//word.tips/words-for/~/?dictionary=wwf").replace(/\[/g,'').replace(/\]/g,',').replace(/\"/g,'').replace(/\'/g,'').replace(/\ /g,'').split(',')[0].replace(/^1$/g,'//www.behindthename.com/name/~').replace(/^2$/g,'//thenamegame-generator.com/lyrics/~.html').replace(/^3$/g,'//en.geneanet.org/first-name/~').replace(/^4$/g,'//word.tips/words-for/~/?dictionary=wwf') : '//www.behindthename.com/name/~';
urlprefixes[1] = location.search.split('array=')[1] ? (decodeURIComponent(location.search.split('array=')[1].split('&')[0]) + "//www.behindthename.com/name/~,//thenamegame-generator.com/lyrics/~.html,//en.geneanet.org/first-name/~,//word.tips/words-for/~/?dictionary=wwf").replace(/\[/g,'').replace(/\]/g,',').replace(/\"/g,'').replace(/\'/g,'').replace(/\ /g,'').split(',')[1].replace(/^1$/g,'//www.behindthename.com/name/~').replace(/^2$/g,'//thenamegame-generator.com/lyrics/~.html').replace(/^3$/g,'//en.geneanet.org/first-name/~').replace(/^4$/g,'//word.tips/words-for/~/?dictionary=wwf') : '//thenamegame-generator.com/lyrics/~.html';
urlprefixes[2] = location.search.split('array=')[1] ? (decodeURIComponent(location.search.split('array=')[1].split('&')[0]) + "//www.behindthename.com/name/~,//thenamegame-generator.com/lyrics/~.html,//en.geneanet.org/first-name/~,//word.tips/words-for/~/?dictionary=wwf").replace(/\[/g,'').replace(/\]/g,',').replace(/\"/g,'').replace(/\'/g,'').replace(/\ /g,'').split(',')[2].replace(/^1$/g,'//www.behindthename.com/name/~').replace(/^2$/g,'//thenamegame-generator.com/lyrics/~.html').replace(/^3$/g,'//en.geneanet.org/first-name/~').replace(/^4$/g,'//word.tips/words-for/~/?dictionary=wwf') : '//en.geneanet.org/first-name/~';
urlprefixes[3] = location.search.split('array=')[1] ? (decodeURIComponent(location.search.split('array=')[1].split('&')[0]) + "//www.behindthename.com/name/~,//thenamegame-generator.com/lyrics/~.html,//en.geneanet.org/first-name/~,//word.tips/words-for/~/?dictionary=wwf").replace(/\[/g,'').replace(/\]/g,',').replace(/\"/g,'').replace(/\'/g,'').replace(/\ /g,'').split(',')[3].replace(/^1$/g,'//www.behindthename.com/name/~').replace(/^2$/g,'//thenamegame-generator.com/lyrics/~.html').replace(/^3$/g,'//en.geneanet.org/first-name/~').replace(/^4$/g,'//word.tips/words-for/~/?dictionary=wwf') : '//word.tips/words-for/~/?dictionary=wwf';

var xDown = null;
var yDown = null;
var wasone = -1;
var arest = "";
var wrest="(who should turn away now)";
var ifemailih = '';
var isok = true;

function drest() {
arest = " Optionally suffix (via blank delimiters) by Email To. Then optionally Email CC (which could be your email address). Then optionally Your Name (for the purposes of email wording).";
wrest = "(via email)";
}

function randgrad() {
if (wasone < 0) {
wasone=Math.floor(Math.random() * ideas.length);
document.getElementById('mydiv').className='s' + wasone;
wasone=-1;
}
setTimeout(randgrad,5000);
}

function genask(msg) {
var huhs=["1","2","3","4"];
var wans="";
var xans="";
if (isok) {
var ans=prompt(msg + " If you want to play the Name Game for your friend (who should turn away now), answer with Their First Name preceded by Swipe [Up, Down, Left, Right] URL ideas as per ['//www.behindthename.com/name/~', '//thenamegame-generator.com/lyrics/~.html', '//en.geneanet.org/first-name/~', '//word.tips/words-for/~/?dictionary=wwf'] is [1,2,3,4]".replace('(who should turn away now)', wrest) + arest, "[1,2,3,4] ");
if (ans == null) { ans=""; }
if (ans.indexOf('[') != -1 && ans.indexOf('] ') != -1) {
if (ans.indexOf('[') != 0) { wans=ans.split('[')[0]; }
xans='[' + ans.split('] ')[0].split('[')[eval(-1 + ans.split('] ')[0].split('[').length)] + "]";
var xsd=ans.split('] ')[1];
if (xsd.length > 1) {
wans+=ans.split('] ')[1];
} else {
while (wans == '') {
wans=prompt("What is your friend's first name?" + arest, "");
if (wans == null) {
location.href=document.URL.split('?')[0].split('#')[0]; wans=' ';
}
}
}
if (wans.trim().indexOf('@') != '' && arest != '') {
var blankers=wans.trim().split(' ');
var zrest='';
wans='';
for (var ibl=0; ibl<blankers.length; ibl++) {
if (blankers[ibl].indexOf('@') != -1) {
if (document.getElementById('tdto').value == '') {
document.getElementById('tdto').value=blankers[ibl];
} else if (document.getElementById('tdcc').value == '') {
document.getElementById('tdcc').value=blankers[ibl];
} else {
document.getElementById('tdbcc').value=blankers[ibl];
}
} else if (wans == '') {
wans=blankers[ibl];
} else if (document.getElementById('tdto').value == '') {
wans+=' ' + blankers[ibl];
} else if (zrest == '') {
zrest=blankers[ibl];
} else {
zrest+=' ' + blankers[ibl];
}
}
if (zrest == '') {
document.getElementById('tdhuhta').value=document.getElementById('tdhuhta').value.replace(/ourtesy\ of\ \`/g, '');
} else {
document.getElementById('tdhuhta').value=document.getElementById('tdhuhta').value.replace(/ourtesy\ of\ \`/g, 'ourtesy of ' + zrest);
}
if (wans == '') {
document.getElementById('tdhuhta').value=document.getElementById('tdhuhta').value.replace(/\~/g, wans).replace('?name=&array=', '?name=' + encodeURIComponent(wans) + '&array=' + encodeURIComponent(xans));
} else {
document.getElementById('tdhuhta').value=document.getElementById('tdhuhta').value.replace(/\~/g, wans).replace('?name=&array=', '?name=' + encodeURIComponent(wans) + '&array=' + encodeURIComponent(xans));
}
if (document.getElementById('tdto').value.indexOf('@') != -1) {
if (document.getElementById('tdcc').value != '') { document.getElementById('tdsubj').value+=' ... My Email Address is CC'; }
document.getElementById('fsubm').click();
document.getElementById('myh3').innerHTML='RJM Programming - November, 2019 ... Emailed ' + document.getElementById('tdto').value + " Name Game link button.";
isok = false;
setTimeout(atn, 5000);
}
} else {
if (wans.trim() != '') { location.href=document.URL.split('?')[0].split('#')[0] + '?name=' + encodeURIComponent(wans) + '&array=' + encodeURIComponent(xans); }
}
}
if (arest != "") { arest=""; }
}
}

function atn() {
document.getElementById('ifemail').innerHTML=ifemailih;
isok = true;
}

function doup(msg) {
if (!asked && oname == '') {
genask(msg);
} else if (oname != '' && urlprefixes[0].indexOf('~') != -1) {
document.title=msg;
window.open(urlprefixes[0].replace('~', encodeURIComponent(oname)), '_blank', 'top=100,left=100,width=600,height=600');
} else {
alert(msg);
}
}

function dodown(msg) {
if (!asked && oname == '') {
genask(msg);
} else if (oname != '' && urlprefixes[1].indexOf('~') != -1) {
document.title=msg;
window.open(urlprefixes[1].replace('~', encodeURIComponent(oname)), '_blank', 'top=100,left=100,width=600,height=600');
} else {
alert(msg);
}
}

function doleft(msg) {
if (!asked && oname == '') {
genask(msg);
} else if (oname != '' && urlprefixes[2].indexOf('~') != -1) {
document.title=msg;
window.open(urlprefixes[2].replace('~', encodeURIComponent(oname)), '_blank', 'top=100,left=100,width=600,height=600');
} else {
alert(msg);
}
}

function doright(msg) {
if (!asked && oname == '') {
genask(msg);
} else if (oname != '' && urlprefixes[3].indexOf('~') != -1) {
document.title=msg;
window.open(urlprefixes[3].replace('~', encodeURIComponent(oname)), '_blank', 'top=100,left=100,width=600,height=600');
} else {
alert(msg);
}
}

function getTouches(evt) {
return evt.touches || // browser API
evt.originalEvent.touches; // jQuery
}

function handleTouchStart(evt) {
const firstTouch = getTouches(evt)[0];
xDown = firstTouch.clientX;
yDown = firstTouch.clientY;
};

function handleMouseStart(evt) {
if ( ! xDown || ! yDown ) {
if (evt.clientX) {
xDown=evt.clientX;
yDown=evt.clientY;
} else {
xDown=evt.pageX;
yDown=evt.pageY;
}
//document.title='startx=' + xDown;
}
};

function handleTouchMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}

var xUp = evt.touches[0].clientX;
var yUp = evt.touches[0].clientY;

var xDiff = xDown - xUp;
var yDiff = yDown - yUp;

if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
doleft('You swiped left.'); // alert('You swiped left');
} else {
/* right swipe */
doright('You swiped right.'); // alert('You swiped right');
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
doup('You swiped up.'); // alert('You swiped up');
} else {
/* down swipe */
dodown('You swiped down.'); // alert('You swiped down');
}
}
/* reset values */
//document.title+=',';
xDown = null;
yDown = null;
};

function handleMouseMove(evt) {
if ( ! xDown || ! yDown ) {
return;
}

var xUp = 0;
var yUp = 0;
if (evt.clientX) {
xUp=evt.clientX;
yUp=evt.clientY;
} else {
xUp=evt.pageX;
yUp=evt.pageY;
}

var xDiff = xDown - xUp;
var yDiff = yDown - yUp;

if (Math.abs( xDiff ) > 15 || Math.abs( yDiff ) > 15) {

if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
if ( xDiff > 0 ) {
/* left swipe */
doleft('You moved mouse left.'); // alert('You moved mouse left');
} else {
/* right swipe */
doright('You moved mouse right.'); // alert('You moved mouse right');
}
} else {
if ( yDiff > 0 ) {
/* up swipe */
doup('You moved mouse up.'); // alert('You moved mouse up');
} else {
/* down swipe */
dodown('You moved mouse down.'); // alert('You moved mouse down');
}
}
/* reset values */
xDown = null;
yDown = null;
}
};

function onl() {
if (!asked && oname == '') {
document.getElementById('mydiv').innerHTML=("<h1>Swipe Gesture 👉 Playground</h1><h3 id=myh3>RJM Programming - November, 2019</h3><h4>Try swipe gestures below, and we'll detect which type of swipe gesture.</h4><button style=\"height:90px;\" onclick=\"genask('');\">Two Player Name Game 🐵 / 🙈 ... <br>You 🐵 Set It Up for Other <br>Player 🙈 who Turns Away Now</button><br><br><button style=\"height:90px;\" onclick=\"drest(); genask('');\">Two Player Name Email Game 🐵 📧 🐵 ... <br>You 🐵 Set It Up for Other <br>Player 🐵 via Email 📧</button>");
document.getElementById('mydiv').style.paddingLeft='10px';
document.getElementById('mydiv').style.border='2px solid orange';
document.getElementById('tdhuhta').innerHTML=("<h1>Swipe Gesture <a target=_blank href='" + document.URL.split('?')[0].split('#')[0] + "'>👉</a> Game for ~ ... Welcome!</h1><h3>RJM Programming - November, 2019</h3><h4>~, try swipe gestures 👉 below by clicking button courtesy of `!.</h4><br><br><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='" + document.URL.split('?')[0].split('#')[0] + "?name=&array='>Name Game for ~ Courtesy of `</a><br><br><br>");
document.getElementById('tdsubj').value+=" - " + document.URL.split('?')[0].split('#')[0];
ifemailih = document.getElementById('ifemail').innerHTML;
} else {
document.getElementById('mydiv').innerHTML=("<h1>Swipe Gesture 👉 Game for " + oname + " ... Welcome!</h1><h3>RJM Programming - November, 2019</h3><h4>" + oname + ", try swipe gestures 👉 below to surprise yourself!.</h4>");
document.getElementById('mydiv').className='s7'; //.style.background='linear-gradient(90deg,#03001e,#7303c0,#ec38bc,#fdeff9) !important;';
document.getElementById('mydiv').style.paddingLeft='10px';
document.getElementById('mydiv').style.border='2px solid orange';
setTimeout(randgrad,5000);
}
// Thanks to https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
document.addEventListener('touchstart', handleTouchStart, false);
document.addEventListener('touchmove', handleTouchMove, false);
//document.getElementById('mydiv').addEventListener('click', handleMouseStart, false);
document.addEventListener('mousedown', handleMouseStart, false);
document.addEventListener('mousemove', handleMouseMove, false);
}
</script>
</head>
<body onload="onl();">
<div id=mydiv title='Pointing place' style='position:fixed;top:0px;left:0px;width:100%;height:100vh;background-color:yellow;'>

</div>
<form id=ifemail target="iemail" style="display:none;" action="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php" method="POST">
<input type=hidden style=display:none; name=inline value=""></input>
<input type=hidden style=display:none; name=to id=tdto value=""></input>
<input type=hidden style=display:none; name=subj id=tdsubj value="Name Game - RJM Programming"></input>
<textarea name=hcont style=display:none; value="" id=tdhuhta cols=160 rows=4></textarea>
<input type=hidden style=display:none; name=cc id=tdcc value=""></input>
<input type=hidden style=display:none; name=bcc id=tdbcc value=""></input>
<input style=display:none; type=submit id=fsubm value="Email"></input>
</form>
<iframe style=display:none; name=iemail id=iemail src=></iframe>
</body>
</html>