{"id":73092,"date":"2026-05-21T03:01:00","date_gmt":"2026-05-20T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=73092"},"modified":"2026-05-20T19:43:34","modified_gmt":"2026-05-20T09:43:34","slug":"clairvoyance-game-image-map-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-image-map-tutorial\/","title":{"rendered":"Clairvoyance Game Image Map 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 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","protected":false},"excerpt":{"rendered":"<p>With our Clairvoyance++ Game project of recent times, before yesterday&#8217;s Clairvoyance Game Waiting Tutorial there was the day before yesterday&#8217;s Clairvoyance Game Sharing Scores Tutorial, where we &#8220;objectified&#8221; the project. Today&#8217;s job is to add into that &#8220;objectify mix&#8221; &#8230; &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/clairvoyance-game-image-map-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,281,1654,318,380,428,5510,476,477,554,576,587,590,592,614,625,629,652,1807,2011,849,875,932,952,3908,997,999,5511,2319,1133,1137,2359,1159,1167,5504,1253,5512,5508,1319,5507,1337,1865,4525,1404,1411,5509,1433,3010],"class_list":["post-73092","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-css","tag-data-uri","tag-design","tag-email","tag-files","tag-flat-files","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-noun","tag-object","tag-oop","tag-php","tag-player","tag-players","tag-programming","tag-project","tag-project-planning","tag-score","tag-share","tag-sharing","tag-sleep","tag-sms","tag-software-design","tag-telepathic","tag-testing","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-open","tag-window-opener"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73092"}],"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=73092"}],"version-history":[{"count":4,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73092\/revisions"}],"predecessor-version":[{"id":73096,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/73092\/revisions\/73096"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=73092"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=73092"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=73092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}