{"id":73102,"date":"2026-05-23T03:01:00","date_gmt":"2026-05-22T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=73102"},"modified":"2026-05-22T13:06:42","modified_gmt":"2026-05-22T03:06:42","slug":"clairvoyance-game-user-definitions-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-user-definitions-tutorial\/","title":{"rendered":"Clairvoyance Game User Definitions Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clairvoyance Game User Definitions Tutorial\" src=\"\/Games\/Clairvoyance\/clairvoyance_game_remembering.jpg\" title=\"Clairvoyance Game User Definition Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clairvoyance Game User Definitions Tutorial<\/p><\/div>\n<p>The day before yesterday&#8217;s <a title='Clairvoyance Game Image Map Tutorial' href='#cgimt'>Clairvoyance Game Image Map Tutorial<\/a> work gets incorporated into today&#8217;s work allowing a three type way, as per &#8230;<\/p>\n<ol>\n<li>Image Map HTML URL<\/li>\n<li>Emoji list of 5<\/li>\n<li>Image URL list of 5<\/li>\n<\/ol>\n<p> &#8230; means by which a user might design their own game to add to the dropdown list, and store in &#8230;<\/p>\n<p><code><br \/>\n  windows.<a target=\"_blank\" title='window.localStorage information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/prop_win_localstorage.asp' rel=\"noopener\">localStorage<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; within the realms of the web browser being used.  Then that newly created user defined game can be shared when invoking email or SMS invitations, and can get added to in that Game type dropdown, where another &#8220;Your Own &#8230;&#8221; suboption brings up the HTML form <font size=1>(and there, some textarea element double click logics might help with the filling out, and\/or &#8220;modelling the filling out&#8221; for you)<\/font> where the user can create and control these definitions.<\/p>\n<p>Feel free to try this all out within <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html------GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html------GETME\" rel=\"noopener\">seventh draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\">Clairvoyance<sup>++<\/sup> Game<\/a>.<\/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\/clairvoyance-game-user-definitions-tutorial\/' rel=\"noopener\">Clairvoyance Game User Definitions Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgimt'>Previous relevant <a target=\"_blank\" title='Clairvoyance Game Image Map Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-image-map-tutorial\/' rel=\"noopener\">Clairvoyance Game Image Map Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clairvoyance Game Image Map Tutorial\" src=\"\/Games\/Clairvoyance\/clairvoyance_game_imagemap.gif\" title=\"Clairvoyance Game Image Map Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clairvoyance Game Image Map Tutorial<\/p><\/div>\n<p>With our Clairvoyance<sup>++<\/sup> Game project of recent times, before yesterday&#8217;s <a title='Clairvoyance Game Waiting Tutorial' href='#cgwt'>Clairvoyance Game Waiting Tutorial<\/a> there was the day before yesterday&#8217;s <a title='Clairvoyance Game Sharing Scores Tutorial' href='#cgsst'>Clairvoyance Game Sharing Scores Tutorial<\/a>, where we &#8220;objectified&#8221; the project.   Today&#8217;s job is to add into that &#8220;objectify mix&#8221; &#8230;<\/p>\n<p><code><br \/>\n<a target=\"_blank\" title='Image Map information from W3schools' href='https:\/\/www.w3schools.com\/html\/html_images_imagemap.asp' rel=\"noopener\">Image Map<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; integration, where the &#8230;<\/p>\n<ul>\n<li>HTML containing the &#8230;<\/li>\n<li>Image img element&#8217;s &#8230;<\/li>\n<li>Map map element guillotining &#8230; via &#8230;\n<ol>\n<li>area element shape=&#8221;rect&#8221; &#8230; or &#8230;<\/li>\n<li>area element shape=&#8221;poly&#8221;<\/li>\n<\/ol>\n<p> subelements<\/li>\n<\/ul>\n<p> &#8230; can be referenced to fill in new Clairvoyance<sup>++<\/sup> Game looking incarnations as well as a means, via background image of a newly &#8220;top part of webpage&#8221; HTML div element, clicking means by which the original image map action item can be reopened, as well.<\/p>\n<p>We think, at this stage, that we want to offer the user some &#8220;own incarnation&#8221; functionality eventually, and we&#8217;d like to add this image map idea into the mix.  We&#8217;ll see about that later, but for now <font color=blue>we have the modelled<\/font> new dropdown options below &#8230;<\/p>\n<p><code><br \/>\n  var zener_cards=['\/circle_yellow.jpg#circle_yellow','\/cross_red.jpg#cross_red','\/waves_blue.jpg#waves_blue','\/square_black.jpg#square_black','\/star_green.jpg#star_green'];<br \/>\n<br \/>\n  var theword='Clairvoyance';<br \/>\n  var thenoun='Zener Card';<br \/>\n  var theelem=\"&lt;img style='object-fit:contain;' src=\";<br \/>\n  var thewords=['Clairvoyance', 'Fruit', 'Food', 'Animal', 'Bird', 'Carpentry', 'London', 'India', 'Australian Indigenous Language', 'Cell'];<br \/>\n  var theelems=[\"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\"];<br \/>\n  var theihs=[\"&gt;\", \"&gt;\", \"&gt;\", \"&gt;\", \"&gt;\", \"&gt;\", \"&gt;\", \"&gt;\", \"&gt;\", \"&gt;\"];<br \/>\n  var thenouns=['Zener Card', 'Fruit', 'Meal', 'Creature', 'Bird', 'Framework Feature', 'Day', 'State', 'Language Area', 'Cell Part'];<br \/>\n  var theiw=(document.URL.indexOf('itype=') != -1 ? eval(-1 + eval('' + document.URL.split('itype=')[1].split('&')[0].split('#'))) : 0);<br \/>\n<br \/>\n  if (theiw &gt; 0) {<br \/>\n    zcblurb='';<br \/>\n    document.title=document.title.replace('Clairvoyance ', thewords[theiw] + ' ');<br \/>\n    if (thewords[theiw] == 'Food') {<br \/>\n      theelems[theiw]='&lt;button style=font-size:100px; title=';<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+='|&amp;#x1f35b;';<br \/>\n      zener_cards[1]+='|&amp;#x1f371;';<br \/>\n      zener_cards[2]+='|&amp;#x1f358;';<br \/>\n      zener_cards[3]+='|&amp;#x1f359;';<br \/>\n      zener_cards[4]+='|&amp;#x1f363;';<br \/>\n    } else if (thewords[theiw] == 'Fruit') { \/\/ '127825', '127825', '127818', '127827', '127821'<br \/>\n      theelems[theiw]='&lt;button style=font-size:100px; title=';<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+='|&amp;#127817;';<br \/>\n      zener_cards[1]+='|&amp;#127825;';<br \/>\n      zener_cards[2]+='|&amp;#127818;';<br \/>\n      zener_cards[3]+='|&amp;#127827;';<br \/>\n      zener_cards[4]+='|&amp;#127821;';<br \/>\n    } else if (thewords[theiw] == 'Animal') {<br \/>\n      theelems[theiw]='&lt;button style=font-size:100px; title=';<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+='|&amp;#128018;';<br \/>\n      zener_cards[1]+='|&amp;#129421;';<br \/>\n      zener_cards[2]+='|&amp;#129447;';<br \/>\n      zener_cards[3]+='|&amp;#128054;';<br \/>\n      zener_cards[4]+='|&amp;#128021;';<br \/>\n    <font color=blue>} else if (thewords[theiw] == 'Bird') {<br \/>\n      delay=8000;<br \/>\n      randomize=true;<br \/>\n      if (document.URL.indexOf('rjmprogramming.com.au\/') != -1) {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/bird_quiz.htm\" style=\"object-fit:contain;\" src=\"';<br \/>\n      } else {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/bird_quiz.htm\" style=\"object-fit:contain;\" src=\"';<br \/>\n      }<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+=''; \/\/ |\/\/www.rjmprogramming.com.au\/HTMLCSS\/birdyquiz.jpeg#8,5,374,370';<br \/>\n      zener_cards[1]+=''; \/\/ |\/\/www.rjmprogramming.com.au\/HTMLCSS\/birdyquiz.jpeg#374,5,930,370';<br \/>\n      zener_cards[2]+=''; \/\/ |\/\/www.rjmprogramming.com.au\/HTMLCSS\/birdyquiz.jpeg#930,5,1164,370';<br \/>\n      zener_cards[3]+=''; \/\/ |\/\/www.rjmprogramming.com.au\/HTMLCSS\/birdyquiz.jpeg#1164,5,1500,370';<br \/>\n      zener_cards[4]+=''; \/\/ |\/\/www.rjmprogramming.com.au\/HTMLCSS\/birdyquiz.jpeg#5,680,374,1120';<br \/>\n    } else if (thewords[theiw] == 'Carpentry') {<br \/>\n      delay=8000;<br \/>\n      randomize=true;<br \/>\n      if (document.URL.indexOf('rjmprogramming.com.au\/') != -1) {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/floor_wall_roof_framing_members.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      } else {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/HTMLCSS\/floor_wall_roof_framing_members.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      }<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+='';<br \/>\n      zener_cards[1]+='';<br \/>\n      zener_cards[2]+='';<br \/>\n      zener_cards[3]+='';<br \/>\n      zener_cards[4]+='';<br \/>\n    } else if (thewords[theiw] == 'London') {<br \/>\n      delay=8000;<br \/>\n      if (document.URL.indexOf('rjmprogramming.com.au\/') != -1) {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/london_trip_via_map_element.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      } else {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/HTMLCSS\/london_trip_via_map_element.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      }<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+='';<br \/>\n      zener_cards[1]+='';<br \/>\n      zener_cards[2]+='';<br \/>\n      zener_cards[3]+='';<br \/>\n      zener_cards[4]+='';<br \/>\n    } else if (thewords[theiw] == 'India') {<br \/>\n      delay=8000;<br \/>\n      randomize=true;<br \/>\n      if (document.URL.indexOf('rjmprogramming.com.au\/') != -1) {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/india_map.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      } else {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/HTMLCSS\/india_map.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      }<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+='';<br \/>\n      zener_cards[1]+='';<br \/>\n      zener_cards[2]+='';<br \/>\n      zener_cards[3]+='';<br \/>\n      zener_cards[4]+='';<br \/>\n    } else if (thewords[theiw] == 'Australian Indigenous Language') {<br \/>\n      delay=8000;<br \/>\n      randomize=true;<br \/>\n      if (document.URL.indexOf('rjmprogramming.com.au\/') != -1) {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      } else {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/HTMLCSS\/ImageMap\/Languages\/aboriginal_language_regions.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      }<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+='';<br \/>\n      zener_cards[1]+='';<br \/>\n      zener_cards[2]+='';<br \/>\n      zener_cards[3]+='';<br \/>\n      zener_cards[4]+='';<br \/>\n    } else if (thewords[theiw] == 'Cell') {<br \/>\n      delay=8000;<br \/>\n      randomize=true;<br \/>\n      if (document.URL.indexOf('rjmprogramming.com.au\/') != -1) {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/the_cell.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      } else {<br \/>\n       theelems[theiw]='&lt;img data-url=\"\/HTMLCSS\/the_cell.html\" style=\"object-fit:Cover;\" src=\"';<br \/>\n      }<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+='';<br \/>\n      zener_cards[1]+='';<br \/>\n      zener_cards[2]+='';<br \/>\n      zener_cards[3]+='';<br \/>\n      zener_cards[4]+=''; <\/font><br \/>\n    }<br \/>\n  }<br \/>\n <br \/>\n  var sideas=['Awaiting Other Player Choosing a ' + thenouns[theiw] + ' to Guess','Select the ' + thenouns[theiw] + ' Your Player Partner Selected','Select a ' + thenouns[theiw] + ' You Are Asking Your Player Partner to Guess','Awaiting Guess from Your Player Partner','Awaiting a ' + thenouns[theiw] + ' Selection from Your Playing Partner'];<br \/>\n<\/code><\/p>\n<p> &#8230; working with the cropping and resizing smarts the HTML canvas element is capable of &#8230;<\/p>\n<p><code><br \/>\n  function imc(iois) {<br \/>\n<br \/>\n    var aconto=null, prefixing='', ipr=0, minx=0, miny=0, maxx=0, maxy=0, donesofar=',';<br \/>\n    if (iois.src.indexOf('\/About_Us.htm') == -1) {<br \/>\n    aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n    if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n       if (aconto.body != null) {<br \/>\n          \/\/alert('' + aconto.body.innerHTML.indexOf('&lt;area ') + '!' + aconto.body.innerHTML.split(' shape=\"rect\"').length + '?' + iois.src + ';' + aconto.body.innerHTML.split('&lt;map ')[0].split('&lt;img ')[eval(-1 + aconto.body.innerHTML.split('&lt;map ')[0].split('&lt;img ').length)] + ':' + aconto.body.innerHTML);<br \/>\n          if (eval('' + aconto.body.innerHTML.indexOf('&lt;map ')) &gt; eval('' + aconto.body.innerHTML.indexOf('&lt;img ')) && aconto.body.innerHTML.indexOf('&lt;map ') != -1 && aconto.body.innerHTML.indexOf('&lt;img ') != -1 && aconto.body.innerHTML.indexOf('&lt;area ') != -1 && aconto.body.innerHTML.replace(\/shape\\=\\\"poly\\\"\/g,'shape=\"rect\"').indexOf('shape=\"rect\"') != -1) {<br \/>\n              \/\/alert('000:' + '');<br \/>\n              if (aconto.body.innerHTML.indexOf('shape=\"rect\"') == -1) {<br \/>\n                prefixing=' ';<br \/>\n               \/\/if (document.URL.indexOf('&debug=') != -1) { alert('yes');  }<br \/>\n              }<br \/>\n              wourl=iois.src;<br \/>\n              coordsarr=aconto.body.innerHTML.replace(\/shape\\=\\\"poly\\\"\/g,'shape=\"rect\"').split('shape=\"rect\"');<br \/>\n              \/\/alert('0000:' + coordsarr.length);<br \/>\n              if (eval('' + coordsarr.length) &gt; 5) {<br \/>\n              \/\/alert('00:' + '');<br \/>\n                imname=aconto.body.innerHTML.split('&lt;map ')[0].split('&lt;img ')[eval(-1 + aconto.body.innerHTML.split('&lt;map ')[0].split('&lt;img ').length)];<br \/>\n              \/\/alert('0:' + imname);<br \/>\n                imname=imname.split('src=\"')[1];<br \/>\n              \/\/alert('1:' + imname);<br \/>\n                imname=imname.split('\"')[0];<br \/>\n              \/\/alert('2:' + imname);<br \/>\n                if ((imname + 'x').indexOf('\/\/') != -1 || (imname + 'x').indexOf('data:') == 0) { \/\/ || (imname + 'x').substring(0,1) == '\/') {<br \/>\n                  if ((imname + 'x').indexOf('data:') == 0) {<br \/>\n                    imname=imname;<br \/>\n                  } else {<br \/>\n                    imname='\/\/' + imname.split('\/\/')[1];<br \/>\n                  }<br \/>\n                } else if ((imname + 'x').substring(0,1) == '\/') {<br \/>\n                  if (iois.src.indexOf('\/\/') != -1) {<br \/>\n                    imname='\/\/' + iois.src.split('\/\/')[1].split('\/')[0] + '\/' + imname.substring(1);<br \/>\n                  } else {<br \/>\n                    imname='\/\/www.rjmprogramming.com.au\/' + imname.substring(1);<br \/>\n                  }<br \/>\n                } else if ((imname + 'xxxxxxxxx').substring(0,12) == '..\/..\/..\/..\/') {<br \/>\n                  imname=iois.src.replace(iois.src.split('\/')[eval(-5 + iois.src.split('\/').length)], imname.substring(12) + '#');<br \/>\n                } else if ((imname + 'xxxxxxxxx').substring(0,9) == '..\/..\/..\/') {<br \/>\n                  imname=iois.src.replace(iois.src.split('\/')[eval(-4 + iois.src.split('\/').length)], imname.substring(9) + '#');<br \/>\n                } else if ((imname + 'xxxxxx').substring(0,6) == '..\/..\/') {<br \/>\n                  imname=iois.src.replace(iois.src.split('\/')[eval(-3 + iois.src.split('\/').length)], imname.substring(6) + '#');<br \/>\n                } else if ((imname + 'xxx').substring(0,3) == '..\/') {<br \/>\n                  imname=iois.src.replace(iois.src.split('\/')[eval(-2 + iois.src.split('\/').length)], imname.substring(3) + '#');<br \/>\n                } else if ((imname + 'xx').substring(0,1) == '.\/') {<br \/>\n                  imname=iois.src.replace(iois.src.split('\/')[eval(-1 + iois.src.split('\/').length)], imname.substring(2));<br \/>\n                } else {<br \/>\n                  imname=iois.src.replace(iois.src.split('\/')[eval(-1 + iois.src.split('\/').length)], imname.substring(0));<br \/>\n                }<br \/>\n              }<br \/>\n              <br \/>\n              \/\/alert(imname.split(' ')[0] + ' ' + coordsarr[1]);<br \/>\n              imlist=document.getElementsByTagName('img');<br \/>\n              tds=document.getElementsByTagName('td');<br \/>\n              squaredim=eval('' + tds[0].getBoundingClientRect().width);<br \/>\n              document.getElementById('dtop').style.background='linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)),url(' + imname.split(' ')[0] + ')';<br \/>\n              document.getElementById('dtop').style.backgroundRepeat='no-repeat';<br \/>\n              document.getElementById('dtop').style.backgroundSize='contain';<br \/>\n              document.getElementById('dtop').style.backgroundPosition='right top';<br \/>\n              document.getElementById('dtop').onclick=function(event){ event.stopPropagation();   window.open(wourl,'_blank','top=50,left=50,width=600,height=600');  };<br \/>\n              <br \/>\n              var imgis=new Image();<br \/>\n              imgis.onload = function(){<br \/>\n               var ict=1, jct=1;<br \/>\n    var zcanvas = document.createElement('canvas');<br \/>\n    zcanvas.width = squaredim; \/\/imgis.width;<br \/>\n    zcanvas.height = squaredim; \/\/imgis.height;<br \/>\n    var zctx = zcanvas.getContext('2d');<br \/>\n               if (!randomize) {<br \/>\n                 while (coordsarr[ict].indexOf(' coords=\"') == -1) {<br \/>\n                   ict++;<br \/>\n                 }<br \/>\n               }<br \/>\n               if (randomize) {<br \/>\n                ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));<br \/>\n                \/\/alert('first ict=' + ict + ' ... ' + donesofar);<br \/>\n                while (ict == 0 || (donesofar + ',').indexOf(',' + ict + ',') != -1) {<br \/>\n                  ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));<br \/>\n                  if (coordsarr[ict].indexOf(' coords=\"') == -1) {<br \/>\n                   if (donesofar != ',') {<br \/>\n                   ict=eval('' + donesofar.substring(1).split(',')[0]);<br \/>\n                   } else {<br \/>\n                   ict++;<br \/>\n                   }<br \/>\n                 }<br \/>\n               }<br \/>\n                donesofar+='' + ict + ',';<br \/>\n               }<br \/>\n               \/\/for (ict=1; ict&lt;=5; ict++) {<br \/>\n               while (jct &lt;= 5) {<br \/>\n               \/\/if (document.URL.indexOf('&debug=') != -1) { alert(coordsarr[ict]);  }<br \/>\n               coordsarr[ict]=coordsarr[ict].split(' coords=\"')[1].split('\"')[0];<br \/>\n               if (randomize || prefixing != '' || (eval(eval(coordsarr[ict].split(',')[2].split('\"')[0]) - eval(coordsarr[ict].split(',')[0].split('\"')[0])) &gt; 10 && eval(eval(coordsarr[ict].split(',')[3].split('\"')[0]) - eval(coordsarr[ict].split(',')[1].split('\"')[0])) &gt; 10)) {<br \/>\n              \/\/alert('zctx.drawImage(\"' + imname.split(' ')[0] + '\",' + eval(coordsarr[ict].split(',')[0].split('\"')[0]) + ',' + eval(coordsarr[ict].split(',')[1].split('\"')[0]) + ',' + eval(eval(coordsarr[ict].split(',')[2].split('\"')[0]) - eval(coordsarr[ict].split(',')[0].split('\"')[0])) + ',' + eval(eval(coordsarr[ict].split(',')[3].split('\"')[0]) - eval(coordsarr[ict].split(',')[1].split('\"')[0])) + ',0,0' + ',' + tds[eval(-1 + ict)].getBoundingClientRect().width + ',' + tds[eval(-1 + ict)].getBoundingClientRect().width + ')');<br \/>\n    if (prefixing != '') {<br \/>\n               \/\/if (document.URL.indexOf('&debug=') != -1) { alert('YES');  }<br \/>\n      minx=0;<br \/>\n      miny=0;<br \/>\n      maxx=0;<br \/>\n      maxy=0;<br \/>\n      for (ipr=0; ipr&lt;coordsarr[ict].split(',').length; ipr+=2) {<br \/>\n        if (ipr == 0) {<br \/>\n           minx=eval(coordsarr[ict].split(',')[ipr].split('\"')[0]);<br \/>\n           maxx=eval(coordsarr[ict].split(',')[ipr].split('\"')[0]);<br \/>\n           miny=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('\"')[0]);<br \/>\n           maxy=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('\"')[0]);<br \/>\n        } else {<br \/>\n           if (eval(coordsarr[ict].split(',')[ipr].split('\"')[0]) &lt; minx) {  minx=eval(coordsarr[ict].split(',')[ipr].split('\"')[0]);  }<br \/>\n           if (eval(coordsarr[ict].split(',')[ipr].split('\"')[0]) &gt; maxx) {  maxx=eval(coordsarr[ict].split(',')[ipr].split('\"')[0]);  }<br \/>\n           if (eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('\"')[0]) &lt; miny) {  miny=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('\"')[0]);  }<br \/>\n           if (eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('\"')[0]) &gt; maxy) {  maxy=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('\"')[0]);  }<br \/>\n        }<br \/>\n      }<br \/>\n      prefixing='' + minx + ',' + miny + ',' + maxx + ',' + maxy;<br \/>\n                \/\/if (document.URL.indexOf('&debug=') != -1) { alert('prefixing=' + prefixing);  }<br \/>\n     coordsarr[ict]=prefixing.trim(); \/\/ + ',' + coordsarr[ict];<br \/>\n    }<br \/>\n    if (theelems[theiw].indexOf('object-fit:none') != -1 || theelems[theiw].indexOf('object-fit:Cover') != -1) {<br \/>\n               \/\/if (document.URL.indexOf('&debug=') != -1) { alert('Yes');  }<br \/>\n    zcanvas.width = eval(eval(coordsarr[ict].split(',')[2].split('\"')[0]) - eval(coordsarr[ict].split(',')[0].split('\"')[0])); \/\/imgis.width;<br \/>\n               \/\/if (document.URL.indexOf('&debug=') != -1) { alert('YeS');  }<br \/>\n    zcanvas.height = eval(eval(coordsarr[ict].split(',')[3].split('\"')[0]) - eval(coordsarr[ict].split(',')[1].split('\"')[0])); \/\/imgis.height;<br \/>\n               \/\/if (document.URL.indexOf('&debug=') != -1) { alert('YEs');  }<br \/>\n    zctx.drawImage(imgis, eval(coordsarr[ict].split(',')[0].split('\"')[0]), eval(coordsarr[ict].split(',')[1].split('\"')[0]), eval(eval(coordsarr[ict].split(',')[2].split('\"')[0]) - eval(coordsarr[ict].split(',')[0].split('\"')[0])), eval(eval(coordsarr[ict].split(',')[3].split('\"')[0]) - eval(coordsarr[ict].split(',')[1].split('\"')[0])),0,0,eval(eval(coordsarr[ict].split(',')[2].split('\"')[0]) - eval(coordsarr[ict].split(',')[0].split('\"')[0])), eval(eval(coordsarr[ict].split(',')[3].split('\"')[0]) - eval(coordsarr[ict].split(',')[1].split('\"')[0])));<br \/>\n               \/\/if (document.URL.indexOf('&debug=') != -1) { alert('yeS');  }<br \/>\n    } else {<br \/>\n    zctx.drawImage(imgis, eval(coordsarr[ict].split(',')[0].split('\"')[0]), eval(coordsarr[ict].split(',')[1].split('\"')[0]), eval(eval(coordsarr[ict].split(',')[2].split('\"')[0]) - eval(coordsarr[ict].split(',')[0].split('\"')[0])), eval(eval(coordsarr[ict].split(',')[3].split('\"')[0]) - eval(coordsarr[ict].split(',')[1].split('\"')[0])),0,0,squaredim,squaredim);<br \/>\n    }<br \/>\n    xaltdu=zcanvas.toDataURL(\"image\/jpeg\", 0.1);<br \/>\n    \/\/alert(xaltdu);<br \/>\n                \/\/alert(imlist[eval(-1 + ict)].outerHTML);<br \/>\n               \/\/if (document.URL.indexOf('&debug=') != -1) { alert(xaltdu);  }<br \/>\n                imlist[eval(-1 + jct)].src=xaltdu;<br \/>\n                \/\/zener_cards[eval(-1 + jct)]+='' + xaltdu;<br \/>\n                if (jct &lt; 5) {<br \/>\n    zcanvas.width = squaredim; \/\/imgis.width;<br \/>\n    zcanvas.height = squaredim; \/\/imgis.height;<br \/>\n    if (prefixing != '') { prefixing=' '; } else { prefixing=''; }<br \/>\n                }<br \/>\n                jct++;<br \/>\n                \/\/} else {<br \/>\n                \/\/alert(coordsarr[ict]);<br \/>\n                }<br \/>\n                if (!randomize) {<br \/>\n                ict++;<br \/>\n               if (document.URL.indexOf('&debug=') != -1) { alert('ict=' + ict + ' and jct=' + jct);  }<br \/>\n                } else {<br \/>\n                ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));<br \/>\n                \/\/alert('first ict=' + ict + ' ... ' + donesofar);<br \/>\n                while (ict == 0 || (donesofar + ',').indexOf(',' + ict + ',') != -1) {<br \/>\n                  ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));<br \/>\n                  if (coordsarr[ict].indexOf(' coords=\"') == -1) {<br \/>\n                   if (donesofar != ',') {<br \/>\n                   ict=eval('' + donesofar.substring(1).split(',')[0]);<br \/>\n                   } else {<br \/>\n                   ict++;<br \/>\n                   }<br \/>\n                 }<br \/>\n                }<br \/>\n                donesofar+='' + ict + ',';<br \/>\n                }<br \/>\n                }<br \/>\n              };<br \/>\n              <br \/>\n              imgis.src=imname.split(' ')[0];<br \/>\n              <br \/>\n          }<br \/>\n       }<br \/>\n    }<br \/>\n    }<br \/>\n  }<br \/>\n  <br \/>\n  function imagemapcheck() {<br \/>\n     if (theelems[theiw].indexOf(' data-url=\"') != -1 && theelems[theiw].indexOf(' data-url=\"\"') == -1 && zener_cards[0].replace('#circle_yellow','').indexOf('#') == -1) {<br \/>\n           if (theelems[theiw].split(' data-url=\"')[1].split('\"')[0].indexOf('#') == -1) {<br \/>\n             if (theelems[theiw].split(' data-url=\"')[1].split('\"')[0].slice(-5).indexOf('.') == -1 && theelems[theiw].split(' data-url=\"')[1].split('\"')[0].slice(-1) != '\/') {<br \/>\n               document.getElementById('ifimc').src=theelems[theiw].split(' data-url=\"')[1].split('\"')[0] + '\/#';<br \/>\n             } else {<br \/>\n               document.getElementById('ifimc').src=theelems[theiw].split(' data-url=\"')[1].split('\"')[0] + '#';<br \/>\n             }<br \/>\n           } else {<br \/>\n             if (theelems[theiw].split(' data-url=\"')[1].split('\"')[0].split('#')[0].slice(-5).indexOf('.') == -1 && theelems[theiw].split(' data-url=\"')[1].split('\"')[0].split('#')[0].slice(-1) != '\/') {<br \/>\n              document.getElementById('ifimc').src=theelems[theiw].split(' data-url=\"')[1].split('\"')[0].replace('#','\/#');<br \/>\n             } else {<br \/>\n              document.getElementById('ifimc').src=theelems[theiw].split(' data-url=\"')[1].split('\"')[0];<br \/>\n             }<br \/>\n           }<br \/>\n     }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html-----GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html-----GETME\" rel=\"noopener\">sixth draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\">Clairvoyance<sup>++<\/sup> Game<\/a>.<\/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\/clairvoyance-game-image-map-tutorial\/' rel=\"noopener\">Clairvoyance Game Image Map Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgwt'>Previous relevant <a target=\"_blank\" title='Clairvoyance Game Waiting Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-waiting-tutorial\/' rel=\"noopener\">Clairvoyance Game Waiting Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clairvoyance Game Waiting Tutorial\" src=\"\/Games\/Clairvoyance\/clairvoyance_game_waiting.jpg\" title=\"Clairvoyance Game Waiting Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clairvoyance Game Waiting Tutorial<\/p><\/div>\n<p>The recent <a title='Clairvoyance Game Objectify Tutorial' href='#cgot'>Clairvoyance Game Objectify Tutorial<\/a> work is revisited today, with the news that we&#8217;ve introduced &#8230;<\/p>\n<blockquote><p>\nimplied invitations\n<\/p><\/blockquote>\n<p> &#8230; when the user enters a &#8220;player name&#8221; (looking a lot like an IP address) from that list of &#8220;potential players online&#8221; that is not any form of their own IP address player name.  It will be apparent to regular readers that this methodology was intended to be the &#8220;usual methodology&#8221; at the beginning of our project, and so &#8220;we&#8217;ll allow a leave pass&#8221; for you to ask &#8230;<\/p>\n<blockquote><p>\nHow come this took so long?\n<\/p><\/blockquote>\n<p>And then we&#8217;d say &#8230;<\/p>\n<blockquote><p>\n<a title=? style=cursor:pointer;text-decoration:underline; onclick=\"window.open('\/HTMLCSS\/luna_car.jpg','_blank','top=100,left=100,width=600,height=600');\">Huh?!<\/a>\n<\/p><\/blockquote>\n<p>And there you go!  Just <a target=\"_blank\" title=\"?\" rel=\"noopener\" href=\"https:\/\/www.youtube.com\/watch?v=cHqEgPu36OI\">&#8220;keep those cards and letters&#8221;<\/a> flowing in!<\/p>\n<p>So what do we mean by &#8220;implied invitations&#8221;?  Well, in between a user &#8220;Wait&#8221; answer and the next, any other user can ask to play that waiting user, and the next time out of the prompt window they may find they&#8217;re in the midst of a game of some sort, invited by another player.  We hope this does not offend?!<\/p>\n<p>The concept of a &#8220;formal invitation&#8221; still exists for the email or SMS collaboration conduits, we <a target=\"_blank\" title=\"?\" href='https:\/\/www.reddit.com\/r\/PrideandPrejudice\/comments\/1je45gu\/even_now_mrs_collins_even_now_they_are_hard_upon\/' rel=\"noopener\">hasten to add<\/a>.<\/p>\n<p>And so &#8220;day ?<sup>whatevvvvvvvvvvveeeeerrrrrrrr<\/sup>&#8221; got us to &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html----GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html----GETME\" rel=\"noopener\">fifth draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\">Clairvoyance<sup>++<\/sup> Game<\/a> helped out by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.php----GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.php----GETME\" rel=\"noopener\">PHP fifth draft interlocutor<\/a><\/li>\n<\/ul>\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\/clairvoyance-game-waiting-tutorial\/' rel=\"noopener\">Clairvoyance Game Waiting Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgot'>Previous relevant <a target=\"_blank\" title='Clairvoyance Game Objectify Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-objectify-tutorial\/' rel=\"noopener\">Clairvoyance Game Objectify Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clairvoyance Game Objectify Tutorial\" src=\"\/Games\/Clairvoyance\/clairvoyance_game_objectify.jpg\" title=\"Clairvoyance Game Objectify Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clairvoyance Game Objectify Tutorial<\/p><\/div>\n<p>Extending yesterday&#8217;s <a title='Clairvoyance Game Sharing Scores Tutorial' href='#cgsst'>Clairvoyance Game Sharing Scores Tutorial<\/a>, it&#8217;s not exactly OOP (<a target=\"_blank\" title='OOP information from Wikipedia ... thanks' href='http:\/\/en.wikipedia.org\/wiki\/Object-oriented_programming' rel=\"noopener\">Object Oriented Programming<\/a>) we are doing, but what we&#8217;d describe as &#8220;objectify&#8221; the proceedings we&#8217;re attending to today.  Take a look at the following Javascript initialization code (now <font color=blue>versus before<\/font>) &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>var zener_cards=['\/circle_yellow.jpg#circle_yellow','\/cross_red.jpg#cross_red','\/waves_blue.jpg#waves_blue','\/square_black.jpg#square_black','\/star_green.jpg#star_green'];<\/font><br \/>\n<br \/>\n  var theword='Clairvoyance';<br \/>\n  var thenoun='Zener Card';<br \/>\n  var theelem=\"&lt;img style='object-fit:contain;' src=\";<br \/>\n  var thewords=['Clairvoyance', 'Fruit', 'Food'];<br \/>\n  var theelems=[\"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\", \"&lt;img style='object-fit:contain;' src=\"];<br \/>\n  var theihs=[\"&gt;\", \"&gt;\", \"&gt;\"];<br \/>\n  var thenouns=['Zener Card', 'Fruit', 'Food'];<br \/>\n  var theiw=(document.URL.indexOf('itype=') != -1 ? eval(-1 + eval('' + document.URL.split('itype=')[1].split('&')[0].split('#'))) : 0);<br \/>\n<br \/>\n  var ppsuff='';<br \/>\n  var youare='';<br \/>\n  var otheris='';<br \/>\n  var score=0, goes=0;<br \/>\n  var woois=null;<br \/>\n  var pick=-1, awaiting=false, holdon=false;<br \/>\n  var bihnull=true;<br \/>\n  var anchor=null;<br \/>\n  var initval='';<br \/>\n  var lastafterscore='';<br \/>\n  var wherewrong=false;<br \/>\n  var sharemyscore=false, allowsdone=false;<br \/>\n  var zcblurb=' You can enter ? to find out more about the history of Zener Cards. ';<br \/>\n<br \/>\n  if (theiw &gt; 0) {<br \/>\n    zcblurb='';<br \/>\n    document.title=document.title.replace('Clairvoyance ', thewords[theiw] + ' ');<br \/>\n    if (thenouns[theiw] == 'Food') {<br \/>\n      theelems[theiw]='&lt;button style=font-size:100px; title=';<br \/>\n      theihs[theiw]='&gt;';<br \/>\n      zener_cards[0]+='|&amp;#x1f35b;';<br \/>\n      zener_cards[1]+='|&amp;#x1f371;';<br \/>\n      zener_cards[2]+='|&amp;#x1f358;';<br \/>\n      zener_cards[3]+='|&amp;#x1f359;';<br \/>\n      zener_cards[4]+='|&amp;#x1f363;';<br \/>\n    } else if (thenouns[theiw] == 'Fruit') { \/\/ '127825', '127825', '127818', '127827', '127821'<br \/>\n      theelems[theiw]='&amp;lt;button style=font-size:100px; title=';<br \/>\n      theihs[theiw]='&amp;gt;';<br \/>\n      zener_cards[0]+='|&amp;#127817;';<br \/>\n      zener_cards[1]+='|&amp;#127825;';<br \/>\n      zener_cards[2]+='|&amp;#127818;';<br \/>\n      zener_cards[3]+='|&amp;#127827;';<br \/>\n      zener_cards[4]+='|&amp;#127821;';<br \/>\n    }<br \/>\n  }<br \/>\n<br \/> <br \/>\n  <font color=blue>var sideas=['Awaiting Other Player Choosing a <\/font>' + thenouns[theiw] + '<font color=blue> to Guess','Select the <\/font>' + thenouns[theiw] + '<font color=blue> Your Player Partner Selected','Select a <\/font>' + thenouns[theiw] + '<font color=blue> You Are Asking Your Player Partner to Guess','Awaiting Guess from Your Player Partner','Awaiting a <\/font>' + thenouns[theiw] + '<font color=blue> Selection from Your Playing Partner'];<\/font><br \/>\n<\/code><\/p>\n<p> &#8230; helping build up HTML for a new dropdown (versus <font color=blue>what was there before<\/font>) &#8230;<\/p>\n<p><code><br \/>\n  function multimaybe() {<br \/>\n    var selbit='', jsel=0;<br \/>\n    if (eval('' + thenouns.length) &gt; 1) {<br \/>\n      selbit=\"&lt;sup&gt;&lt;select style=width:30px; onchange=\\\"if (eval('' + this.value) != eval(1 + eval('' + theiw))) { location.href=document.URL.split('?')[0].split('#')[0] + '?itype=' + this.value; }\\\"&gt;&lt;option value=\" + eval(1 + theiw) + \"&gt;?&lt;\/option&gt;&lt;\/select&gt; &lt;\/sup&gt; \";<br \/>\n      for (jsel=0; jsel&lt;thenouns.length; jsel++) {<br \/>\n        selbit=selbit.replace('&lt;\/select&gt;', '&lt;option value=' + eval(1 + jsel) + '&gt;' + thewords[jsel] + ' Game&lt;\/option&gt;&lt;\/select&gt;');<br \/>\n      }<br \/>\n    }<br \/>\n    return selbit;<br \/>\n  }<br \/>\n<br \/>\n<\/code><\/p>\n<p> &#8230; and then later within the HTML &lt;body&gt; section &#8230;<\/p>\n<p><code><br \/>\n&lt;script type=text\/javascript&gt;<br \/>\n document.write(\"<font color=blue>&lt;h1 id=muh1&gt;<\/font>\" + thewords[theiw] + \"<font color=blue> Game <\/font>\" + multimaybe() + \"<font color=blue>&lt;input type=checkbox id=allows style=display:none; onchange=chscal(this);&gt;&lt;font size=1 id=fshare style=display:none;&gt;Share Score&lt;\/font&gt;&lt;\/input&gt; &lt;input type=checkbox id=allowstwo style=display:none; onchange=chscaltwo(this);&gt;&lt;font size=1 id=fsharetwo style=display:none;&gt;Be Told Where You Went Wrong&lt;\/font&gt;&lt;\/input&gt;&lt;\/h1&gt;<\/font>\");<br \/>\n&lt;\/script&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; and am sure you can see where an initial &#8220;Clairvoyance&#8221; <i>noun<\/i> &#8220;hardcoding&#8221; feel of logic gets expanded to an &#8220;array of nouns&#8221; (where lots of programmers will immediately shout &#8220;objects&#8221;), as an alternative way of thinking to the ways our Javascript functions are like &#8220;verbs&#8221;.  If you &#8220;abstract&#8221; the &#8220;what was a hardcoding&#8221; into &#8220;a dynamically selectable list of nouns&#8221; this objectifying process can be quite useful.<\/p>\n<p>And so &#8220;day six&#8221; got us to &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html---GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html---GETME\" rel=\"noopener\">fourth draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\">Clairvoyance Game<\/a> helped out by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.php---GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.php---GETME\" rel=\"noopener\">PHP fourth draft interlocutor<\/a><\/li>\n<\/ul>\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\/clairvoyance-game-objectify-tutorial\/' rel=\"noopener\">Clairvoyance Game Objectify Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgsst'>Previous relevant <a target=\"_blank\" title='Clairvoyance Game Sharing Scores Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-sharing-scores-tutorial\/' rel=\"noopener\">Clairvoyance Game Sharing Scores Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clairvoyance Game Sharing Scores Tutorial\" src=\"\/Games\/Clairvoyance\/clairvoyance_game_sharing_score.jpg\" title=\"Clairvoyance Game Sharing Scores Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clairvoyance Game Sharing Scores Tutorial<\/p><\/div>\n<p>Onto the day before yesterday&#8217;s <font size=1>(yes, another two day<sup>er!<\/sup>)<\/font> <a title='Clairvoyance Game Invitations Tutorial' href='#cgit'>Clairvoyance Game Invitations Tutorial<\/a> primarily we have a checkbox part regarding &#8230;<\/p>\n<ul>\n<li>Be Told Where You Went Wrong &#8230; guessing within our two player Clairvoyance Game &#8230; easy peasy &#8230; but &#8230;<\/li>\n<li>Share Your Score &#8230; was really difficult &#8230; go figure &#8230;<\/li>\n<\/ul>\n<p> &#8230; though the latter did ask a lot regarding timing and the sleep patterns of the PHP interlocutor &#8230; <a target=\"_blank\" title='?' href='https:\/\/www.google.com\/search?gs_ssp=eJzj4tLP1TdIycmpqCgxYPTiKU_MTlUoLVDISk1LAwByAgif&#038;q=wake+up+jeff&#038;rlz=1C5OZZY_en&#038;oq=wake+up&#038;gs_lcrp=EgZjaHJvbWUqBwgHEC4YgAQyDAgAEEUYORixAxiABDIKCAEQLhixAxiABDIZCAIQLhivARjHARiABBiOBRiYBRicBRieBTIWCAMQLhivARjHARiABBiYBRicBRieBTIHCAQQABiABDIHCAUQABiABDIHCAYQABiABDIHCAcQLhiABDIHCAgQABiABDIHCAkQABiPAtIBCDY3NzJqMGo0qAIAsAIB&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">?<\/a><\/p>\n<p>Let&#8217;s just &#8220;move on&#8221; &#8230; shall we?!<\/p>\n<p>Also on the agenda was some colour coding &#8230; and who doesn&#8217;t like a bit of colour coding!  We purloined CSS into play, with &#8220;the kind of kludgy \/ kind of cute <sup>(well, you had to be there)<\/sup>&#8221; introduction of a title attribute to the status wording element and then apply that CSS &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n  #tdstatus[title^='Awaiting Other '] {<br \/>\n    border: 3px solid red;<br \/>\n  }<br \/>\n  <br \/>\n  #tdstatus[title^='Awaiting a '] {<br \/>\n    border: 3px solid rgb(127,0,0);<br \/>\n  }<br \/>\n  <br \/> <br \/>\n  #tdstatus[title^='Awaiting Guess '] {<br \/>\n    border: 3px solid orange;<br \/>\n  }<br \/>\n  <br \/>\n  #tdstatus[title^='Select the '] {<br \/>\n    border: 6px solid lightgreen;<br \/>\n  }<br \/>\n  <br \/>\n  #tdstatus[title^='Select a '] {<br \/>\n    border: 6px solid green;<br \/>\n  }<br \/>\n  <br \/>\n  $tdstatus { padding: 5 5 5 5; }<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p>We often find it the way, when it comes to colour coding, we borrow from &#8220;the traffic light creed&#8221; regarding the colours used, where a reddish colour means &#8220;hang on&#8221; and a greenish colour is an invitation to the user.  One could also think of &#8220;beeps&#8221; or &#8220;notifications&#8221; here, but not with us here, as of yet.<\/p>\n<p>And so &#8220;day four&#8221; and &#8220;day five&#8221; saw &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html--GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html--GETME\" rel=\"noopener\">third draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\">Clairvoyance Game<\/a> helped out by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.php--GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.php--GETME\" rel=\"noopener\">PHP third draft interlocutor<\/a><\/li>\n<\/ul>\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\/clairvoyance-game-sharing-scores-tutorial\/' rel=\"noopener\">Clairvoyance Game Sharing Scores Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgit'>Previous relevant <a target=\"_blank\" title='Clairvoyance Game Invitations Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-invitations-tutorial\/' rel=\"noopener\">Clairvoyance Game Invitations Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clairvoyance Game Invitations Tutorial\" src=\"\/Games\/Clairvoyance\/clairvoyance_game.gif\" title=\"Clairvoyance Game Invitations Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clairvoyance Game Invitations Tutorial<\/p><\/div>\n<p>In yesterday&#8217;s <a title='Clairvoyance Game Tutorial' href='#cgt'>Clairvoyance Game Tutorial<\/a>, with our Clairvoyance Game, really a game for two, downplayed invitations to the end of the blog posting blurb.  But really, invitations are the &#8220;be all and end all&#8221; for a two player game shared over the Internet and just using a &#8220;PHP and HTML\/Javascript&#8221; level of sophistication.<\/p>\n<p>And, of course, two days later <font size=1>(when we think it should have only been &#8220;one day later&#8221;)<\/font>, it might be me, but making this work for email or SMS invitations was not trivial, partly because &#8230;<\/p>\n<ul>\n<li>we launched into this &#8220;phase two public invitational sharing&#8221; on a false premise &#8230; our &#8220;phase one window.open and window.opener&#8221; Javascript logics were flawed <font size=1>(further into the logic than the first foray, shall we say)<\/font> &#8230; bad news &#8230; we reckon one out of two days &#8220;getting there&#8221; would have to be put down to the lack of testing on day one &#8230; whereas &#8230;<\/li>\n<li>our thought that &#8220;phase two&#8221; is <i>just<\/i> phase one window.open and window.opener transfers to <i>PHP writes Javascript<\/i> equivalents was &#8220;more or less&#8221; true, but we all know &#8220;programming life&#8221; throws up unexpected roadblocks<\/li>\n<\/ul>\n<p> &#8230; and that is the excuse today, which we are sticking to <font size=1>&#8230; so there, ngaaahhhh!<\/font><\/p>\n<p>This calls into play the importance, often, of &#8220;project planning&#8221;, and the compartmentalizing of testing, including really tight unit testing, especially if your software plan has so much dependency in &#8220;day two&#8221; on the &#8220;day one&#8221; quality.  As far as that goes, in our defence, regarding a networking web application, that this Clairvoyance Game &#8220;more or less is&#8221; <font size=1>(though yesterday&#8217;s work simplistically pared that down so that we never needed more than our local MAMP Apache\/PHP web server involved)<\/font> sometimes you find it is hard to recognize &#8220;units&#8221; within the big picture.<\/p>\n<p>And so &#8220;day two&#8221; and &#8220;day three&#8221; were all about &#8220;online invitation&#8221; logic for email or SMS invitations in &#8230;<\/p>\n<ul>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html-GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html-GETME\" rel=\"noopener\">second draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\">Clairvoyance Game<\/a> helped out by &#8230;<\/li>\n<li><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.php-GETME\" rel=\"noopener\">a changed<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.php-GETME\" rel=\"noopener\">PHP second draft interlocutor<\/a><\/li>\n<\/ul>\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\/clairvoyance-game-invitations-tutorial\/' rel=\"noopener\">Clairvoyance Game Invitations Tutorial<\/a>.<\/p-->\n<hr>\n<p id='cgt'>Previous relevant <a target=\"_blank\" title='Clairvoyance Game Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-tutorial\/' rel=\"noopener\">Clairvoyance 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\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Clairvoyance Game Tutorial\" src=\"\/Games\/Clairvoyance\/clairvoyance_game.jpg\" title=\"Clairvoyance Game Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Clairvoyance Game Tutorial<\/p><\/div>\n<p>Are you sixth sensical?  Can you read tea leaves?  If it&#8217;s one out of two, that will do.<\/p>\n<p>We&#8217;re starting down the road to a new &#8230;<\/p>\n<blockquote><p>\nClairvoyance Game\n<\/p><\/blockquote>\n<p> &#8230; today, that on today&#8217;s first draft, as a design for two players &#8230;<\/p>\n<ul>\n<li>starts you playing yourself, or a nearby other player willing to share windows on your one common web browser incarnation &#8230;<\/li>\n<li>kind of ludicrous on this day one but the building blocks are there, they being &#8230;\n<ol>\n<li>HTML and Javascript parent &#8230; talking to &#8230;<\/li>\n<li>PHP interlocutor<\/li>\n<\/ol>\n<p> &#8230; which we&#8217;re going to extend, on day two, simulating what a window.open and window.opener (just on client) can do, just with a few more calls, and sleep<sup>ing<\/sup>\n<\/ul>\n<p>Two players take it in turns &#8230;<\/p>\n<ol>\n<li>selecting a <a target=\"_blank\" title='Zener card information from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Zener_cards' rel=\"noopener\">Zener Card<\/a> the other player is asked to guess<\/li>\n<li>other player trying to guess that <a target=\"_blank\" title='Zener card information from Wikipedia' href='https:\/\/en.wikipedia.org\/wiki\/Zener_cards' rel=\"noopener\">Zener Card<\/a> selected<\/li>\n<\/ol>\n<p> &#8230; to score, or not, in this <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html_GETME\" rel=\"noopener\">first draft<\/a> <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.html\" rel=\"noopener\">Clairvoyance Game<\/a> helped out by <a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Clairvoyance\/clairvoyance_game.php_GETME\" rel=\"noopener\">PHP first draft interlocutor<\/a>.<\/p>\n<p>In days to come, we think we&#8217;ll also be coding for email or SMS invitations to play, as well.  This will be old news to some of you telepathic genii.<\/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='#d73047' onclick='var dv=document.getElementById(\"d73047\"); 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='d73047' 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='#d73053' onclick='var dv=document.getElementById(\"d73053\"); 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='d73053' 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='#d73058' onclick='var dv=document.getElementById(\"d73058\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/checkbox\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d73058' 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='#d73063' onclick='var dv=document.getElementById(\"d73063\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/object\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d73063' 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='#d73083' onclick='var dv=document.getElementById(\"d73083\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/wait\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d73083' 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='#d73092' onclick='var dv=document.getElementById(\"d73092\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/image-map\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d73092' 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='#d73102' onclick='var dv=document.getElementById(\"d73102\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/form\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d73102' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>The day before yesterday&#8217;s Clairvoyance Game Image Map Tutorial work gets incorporated into today&#8217;s work allowing a three type way, as per &#8230; Image Map HTML URL Emoji list of 5 Image URL list of 5 &#8230; means by which &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-user-definitions-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,15,37],"tags":[2458,103,184,202,5506,5505,1604,224,3374,1857,2901,281,1654,318,359,367,380,428,5510,452,476,477,554,576,587,590,592,614,625,629,652,1807,2415,2011,849,875,932,2643,952,3908,997,999,5511,3274,5298,1059,5232,2319,1866,1133,1137,2359,1159,1167,2334,5504,1253,1262,1675,5512,5508,1319,5507,1337,1865,4525,1404,1411,5509,3551,1433,3010],"class_list":["post-73102","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-abstraction","tag-array","tag-canvas","tag-checkbox","tag-clairvoyancy","tag-clairvoyant","tag-collaboration","tag-colour","tag-colour-coding","tag-crop","tag-cropping","tag-css","tag-data-uri","tag-design","tag-double-click","tag-dropdown","tag-email","tag-files","tag-flat-files","tag-form","tag-game","tag-games-2","tag-hardcopy","tag-html","tag-iframe","tag-image","tag-image-map","tag-integration","tag-invitation","tag-ip-address","tag-javascript","tag-link","tag-localstorage","tag-noun","tag-object","tag-oop","tag-php","tag-placeholder","tag-player","tag-players","tag-programming","tag-project","tag-project-planning","tag-recall","tag-remember","tag-resize","tag-resizing","tag-score","tag-select","tag-share","tag-sharing","tag-sleep","tag-sms","tag-software-design","tag-submit","tag-telepathic","tag-testing","tag-textarea","tag-textbox","tag-traffic-lights","tag-turns","tag-tutorial","tag-two-players","tag-unit-testing","tag-verb","tag-wait","tag-web-browser","tag-web-server","tag-web-server-flat-files","tag-window-localstorage","tag-window-open","tag-window-opener"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73102"}],"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=73102"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73102\/revisions"}],"predecessor-version":[{"id":73111,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73102\/revisions\/73111"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=73102"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=73102"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=73102"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}