<!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,#03001e,#7303c0,#ec38bc,#fdeff9) !important; }
.s8 { background:linear-gradient(90deg,#ada996,#f2f2f2,#dbdbdb,#eaeaea) !important; }
</style>
<script type='text/javascript'>
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,'').split(',')[0].replace('1','//www.behindthename.com/name/~').replace('2','//thenamegame-generator.com/lyrics/~.html').replace('3','//en.geneanet.org/first-name/~').replace('4','//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,'').split(',')[1].replace('1','//www.behindthename.com/name/~').replace('2','//thenamegame-generator.com/lyrics/~.html').replace('3','//en.geneanet.org/first-name/~').replace('4','//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,'').split(',')[2].replace('1','//www.behindthename.com/name/~').replace('2','//thenamegame-generator.com/lyrics/~.html').replace('3','//en.geneanet.org/first-name/~').replace('4','//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,'').split(',')[3].replace('1','//www.behindthename.com/name/~').replace('2','//thenamegame-generator.com/lyrics/~.html').replace('3','//en.geneanet.org/first-name/~').replace('4','//word.tips/words-for/~/?dictionary=wwf') : '//word.tips/words-for/~/?dictionary=wwf';

var xDown = null;
var yDown = null;
var wasone = -1;

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="";
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]", "[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?", "");
if (wans == null) { location.href=document.URL.split('?')[0].split('#')[0]; wans=' '; }
}
}
if (wans.trim() !='') { location.href=document.URL.split('?')[0].split('#')[0] + '?name=' + encodeURIComponent(wans) + '&array=' + encodeURIComponent(xans); }
}
}

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>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 Game ... <br>You Set It Up for Other <br>Player who Turns Away Now</button>");
document.getElementById('mydiv').style.paddingLeft='10px';
document.getElementById('mydiv').style.border='2px solid orange';
} 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>
<script type='text/javascript'>
</script>
</body>
</html>