{"id":48610,"date":"2020-04-17T03:01:52","date_gmt":"2020-04-16T17:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=48610"},"modified":"2020-04-15T12:08:53","modified_gmt":"2020-04-15T02:08:53","slug":"tic-tac-toe-two-players-via-sms-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-two-players-via-sms-tutorial\/","title":{"rendered":"Tic-Tac-Toe Two Players via SMS Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Tic-Tac-Toe Two Players via SMS Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttt_sms.jpg\" title=\"Tic-Tac-Toe Two Players via SMS Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Tic-Tac-Toe Two Players via SMS Tutorial<\/p><\/div>\n<p>We found it fortuitous with the work of today because of the recent &#8230;<\/p>\n<ul>\n<li><a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/mind-map-and-flowchart-and-venn-diagram-collaborator-tutorial\/' title='Mind Map and Flowchart and Venn Diagram Collaborator Tutorial'>Mind Map and Flowchart and Venn Diagram Collaborator Tutorial<\/a>&#8216;s progress, because it taught me that <i>[SMS-url]# Text SMS message words<\/i> was possible &#8230; on top of &#8230;<\/li>\n<li>the recent collaboration communication functionality improved by the recent <a title='Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial' href='#t-t-ttepihtmlebt'>Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial<\/a>&#8216;s progress<\/li>\n<\/ul>\n<p> &#8230; but the doubt in my mind was there that <i>Text SMS message words# [SMS-url]<\/i> could also work, so rather than committing this into a big code source straight away we wrote a small proof of concept HTML as per &#8230;<\/p>\n<p><code><br \/>\n&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;script type='text\/javascript'&gt;<br \/>\n var suffix=\"xo \" + String.fromCharCode(10) + \" oo\" + String.fromCharCode(10) + \"x x\" + String.fromCharCode(10) + String.fromCharCode(10) + \"Append to link below square you want as 1 to 9 where 1 is top left ... then click resultant link to send game message \" + String.fromCharCode(10) + String.fromCharCode(10) + \"# http:\/\/www.rjmprogramming.com.au\/?ss=\";<br \/>\n function onl() {<br \/>\n   document.getElementById('ais').href+=encodeURIComponent(suffix);<br \/>\n   document.getElementById('ais').click();<br \/>\n }<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body onload=onl();&gt;<br \/>\n&lt;a target=_blank style='display:none;' id=ais href='sms:0402050258&body='&gt;SMS&lt;\/a&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; the bottom line being that this can work.<\/p>\n<p>Implementing this &#8220;proof of concept&#8221; the easiest (perhaps should read &#8220;laziest&#8221;) integration approach we tweaked to was arrived at via &#8230;<\/p>\n<blockquote><p>\nCan we merge in with Email navigation functionality?\n<\/p><\/blockquote>\n<p>We agreed with ourselves &#8230; surprisingly &#8230; &#8220;yes&#8221;.<\/p>\n<blockquote><p>\nWhat distinguishes Email navigation HTML arrangements?\n<\/p><\/blockquote>\n<p>Teacher, teacher &#8230; HTML form usage.<\/p>\n<blockquote><p>\nTrue, but SMS needs &#8220;a&#8221; &#8220;sms:&#8221; tag, so how can you easily intervene at this same Email juncture of knowledge?\n<\/p><\/blockquote>\n<p>Teacher, teacher, teacher &#8230; HTML form <i>onsubmit<\/i> event logic.<\/p>\n<p>Yes, make all the HTML form elements get an <i>onsubmit<\/i> event logic <font color=blue>called via<\/font> &#8230;<\/p>\n<p><code><br \/>\n var eform = '&lt;form<font color=blue> onsubmit=\"return fget(this);\"<\/font> id=ifemail target=\"iemail\" style=\"display:none;\" action=\"\/\/www.rjmprogramming.com.au\/HTMLCSS\/emailhtml.php\" method=\"POST\"&gt;&lt;input type=hidden style=display:none; name=inline value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden style=display:none; name=to id=tdto value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden style=display:none; name=subj id=tdsubj value=\"Tic Tac Toe - Invitation to Play ( ' + document.URL.split('#')[0].split('?')[0] + ' ) - RJM Programming\"&gt;&lt;\/input&gt;&lt;textarea name=hcont style=display:none; value=\"\" id=tdhuhta cols=160 rows=4&gt;&lt;\/textarea&gt;&lt;input type=hidden style=display:none; name=cc id=tdcc value=\"\"&gt;&lt;\/input&gt;&lt;input type=hidden style=display:none; name=bcc id=tdbcc value=\"\"&gt;&lt;\/input&gt;&lt;input style=display:none; type=submit id=fsubm value=\"Email\"&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;iframe style=display:none; name=iemail id=iemail src=&gt;&lt;\/iframe&gt;';<br \/>\n<\/code><\/p>\n<p> &#8230; pointing at new &#8230;<\/p>\n<p><code><br \/>\nvar esuffix=\"!!!\" + String.fromCharCode(10) + \"!!!\" + String.fromCharCode(10) + \"!!!\" + String.fromCharCode(10) + \"Append link below your square move as 1 to 9 where 1 is top left ... then click return then resultant link to send Tic-Tac-Toe move. \" + String.fromCharCode(10) + \"# \";<br \/>\nvar origsuffix=esuffix;<br \/>\nvar oemail=location.search.split('oemail=')[1] ? possc(decodeURIComponent(location.search.split('oemail=')[1].split('&')[0])) : '';<br \/>\nvar preotherclicks='';<br \/>\nvar otherclicks=location.search.split('otherclicks=')[1] ? decodeURIComponent(location.search.split('otherclicks=')[1].split('&')[0]) : '';<br \/>\nif (otherclicks.length &lt;= 1 && document.URL.indexOf('otherpreclicks=') != -1) {<br \/>\n  preotherclicks=location.search.split('otherpreclicks=')[1] ? decodeURIComponent(location.search.split('otherpreclicks=')[1].split('&')[0]) : '';<br \/>\n  if (otherclicks.length == 0) { otherclicks=prompt('Please enter square number move from 1 to 9 (that has not already been chosen) where top left is 1', ''); if (otherclicks == null) { otherclicks='';  } else { if (otherclicks.length &gt; 1) {  otherclicks='';   } else if (otherclicks &lt; '1' || otherclicks &gt; '9') {  otherclicks='';    } } if (otherclicks == '') {  location.href=document.URL.split('&otherclicks=')[0] + '&otherclicks=';  }  }<br \/>\n  if (preotherclicks != '') { preotherclicks+=','; }<br \/>\n  otherclicks=otherclicks.replace('1','11').replace('2','12').replace('3','13').replace('9','33').replace('8','32').replace('7','31').replace('6','23').replace('5','22').replace('4','21');<br \/>\n  if ((',' + preotherclicks + ',').indexOf((',' + otherclicks + ',')) == -1 && otherclicks.length == 2) {<br \/>\n  otherclicks=preotherclicks + otherclicks;<br \/>\n  } else {<br \/>\n  location.href=document.URL.split('&otherclicks=')[0] + '&otherclicks=';<br \/>\n  }<br \/>\n}<br \/>\nvar xorigc=otherclicks;<br \/>\nvar viajunk=location.search.split('junk=')[1] ? decodeURIComponent(location.search.split('junk=')[1].split('&')[0]) : '';<br \/>\nvar xviajunk='';<br \/>\n<br \/>\nfunction fget(oform) {<br \/>\n  var tfval=true;<br \/>\n  if ((oemail + viajunk).indexOf(',') != -1 && (oemail + viajunk).indexOf('@') == -1) {<br \/>\n     document.getElementById('asms').href='sms:' + document.getElementById('tdto').value + '&body=' + encodeURIComponent(esuffix.replace(\/\\!\/g,String.fromCodePoint(917536)).replace('Append ', document.getElementById('tdsubj').value.split(' via ')[0].replace('%E2%9D%8C',String.fromCodePoint(10060)).replace('%E2%9D%8C',String.fromCodePoint(10060)).replace('%E2%9D%8C',String.fromCodePoint(10060)).replace('%E2%AD%95',String.fromCodePoint(11093)).replace('%E2%AD%95',String.fromCodePoint(11093)).replace('%E2%AD%95',String.fromCodePoint(11093)).replace('versus ','vs ') + ' )' + '.  Append ')) + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?oemail=' + document.getElementById('tdhuhta').value.split(' value=\"')[1].split('\"')[0] + '&otherpreclicks=' + xorigc + '&otherclicks=');<br \/>\n     document.getElementById('asms').click();<br \/>\n     esuffix=origsuffix;<br \/>\n     return false;<br \/>\n  }<br \/>\n  return tfval;<br \/>\n}<br \/>\n<\/code><\/p>\n<p> &#8230; to get lots of the URL argument needed via the (textarea contained) Inline HTML Email Form contents, as the means by which we fulfill the desire to <i>merge in with Email navigation functionality<\/i> idea above.<\/p>\n<p>Here is <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js------GETME' title=\"tictactoe.js\">the changed external Javascript<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js------GETME' title=\"tictactoe.js\">tictactoe.js<\/a> necessary to improve the unchanged HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\" title=\"Click picture\">live run Tic Tac Toe game<\/a> link where you can play away, perhaps involving SMS.<\/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\/tic-tac-toe-two-players-via-sms-tutorial\/'>Tic-Tac-Toe Two Players via SMS Tutorial<\/a>.<\/p-->\n<hr>\n<p id='t-t-ttepihtmlebt'>Previous relevant <a target=_blank title='Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-two-email-players-via-inline-html-email-bugs-tutorial\/'>Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs 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\/Noughtsandcrosses\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttt_more_bugs.gif\" title=\"Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial<\/p><\/div>\n<p>Retesting the Tic Tac Toe &#8220;play via Inline Email Form between two players&#8221; functionality of the recent <a title='Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial' href='#t-t-ttepihtmlet'>Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial<\/a> we were saddened by two aspects to it, those being &#8230;<\/p>\n<ul>\n<li>the table cells on the emails could become very small as the Tic Tac Toe game progressed &#8230; and &#8230;<\/li>\n<li>sometimes the Tic Tac Toe game would not know to hang around for a real person&#8217;s move (ie. the navigation failed to flag to the web application that it came from an Inline Email Form game email button press move)<\/li>\n<\/ul>\n<p> &#8230; galling indeed!  But we are onto that here today, and would seek this opportunity to go over some debugging tools at your disposal here.<\/p>\n<ul>\n<li><a target=_blank title='Gmail' href='https:\/\/gmail.com'>Gmail<\/a> webmail email client has a great feature to the right top of an opened email with the (ol&#8217;) three (vertical) dots menu and its &#8220;Show original&#8221; option, that in our Inline Email Form option (down the report) shows the HTML our web application &#8220;got through&#8221; to the Gmail client email application &#8230; noting that &#8220;got through&#8221; is not always the same as &#8220;meant to get through&#8221; &#8230; the upshot of that being you can &#8230;<\/li>\n<li>Copy\/Paste that HTML of above via a text editor (our macOS favourite being <a target=_blank href='http:\/\/www.macupdate.com\/app\/mac\/11009\/textwrangler' title='Mac TextWrangler text editor'><i>TextWrangler<\/i><\/a>) to a local *.html file and test it on (a local web server product such as) <a target=_blank title='MAMP for Apache\/PHP\/MySql on Mac OS X local web server' href='http:\/\/www.mamp.info'><i>MAMP<\/i><\/a> &#8230; perhaps finding, like lucky me, that the same &#8220;too small&#8221; symptoms occur, in which case, a break could be in order, because that is most of the debugging issue, that being a unit testing environment (changing a *.htm version, in our case) you can trust and work with until you get it right, and can be more sure on deploying that, that things will start working &#8230; often good for &#8220;looks&#8221; issues, but navigation issues &#8230;<\/li>\n<li>as far as &#8220;navigation&#8221; issues go, it is not always as straightforward an approach as &#8220;looks&#8221; issues, but there in text editors you get the chance to change single line HTML &#8220;productions&#8221; into separate lines, and that way gradually see what&#8217;s going on &#8230; at least that was our way today &#8230; discovering we&#8217;d failed to populate the &#8220;email details&#8221; textbox in certain scenarios, as the mechanism whereby the web application can tell it is in the midst of an Inline Email Form game of Tic Tac Toe between two players (perhaps <a target=_blank title='?' href='https:\/\/www.motherjones.com\/politics\/2009\/11\/5-reasons-were-going-rouge-instead-going-rogue-when-shopping-gifts-season\/'>going &#8220;remote&#8221;<\/a>)<\/li>\n<\/ul>\n<p>We&#8217;ve gathered together some of all this to show you with today&#8217;s >animated GIF<\/a> presentation that reflects <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js-----GETME' title=\"tictactoe.js\">the changed external Javascript<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js-----GETME' title=\"tictactoe.js\">tictactoe.js<\/a> necessary to improve the unchanged HTML <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\" title=\"Click picture\">live run Tic Tac Toe game<\/a> link where you can play away.<\/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\/new-tic-tac-toe-two-email-players-via-inline-html-email-tutorial\/'>Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial<\/a>.<\/p-->\n<hr>\n<p id='t-t-ttepihtmlet'>Previous relevant <a target=_blank title='Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-two-email-players-via-inline-html-email-tutorial\/'>Tic-Tac-Toe Two Email Players via Inline HTML Email 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\/Noughtsandcrosses\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttt_more.jpg\" title=\"Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='You say Tic-Tac-Toe, i say Noughts &amp; Crosses via Inline HTML Email Tutorial' href='#You-say-Tic-Tac-Toe-i-say-Noughts'>You say Tic-Tac-Toe, i say Noughts &amp; Crosses via Inline HTML Email Tutorial<\/a>&#8216;s part one of &#8230;<\/p>\n<blockquote cite='you-say-tic-tac-toe-i-say-noughts-crosses-via-inline-html-email-tutorial\/'>\n<ul>\n<li>via Inline HTML Email invite a remote email user to play the web application &#8220;computer player&#8221; &#8230; today&#8217;s work &#8230; and then, later &#8230;<\/li>\n<li>via Inline HTML Email invite a remote email user to play &#8220;another email player&#8221;<\/li>\n<\/ul>\n<\/blockquote>\n<p> &#8230; and so today, it is &#8220;later&#8221;.  Today&#8217;s job reminds us of &#8220;Correspondence Chess&#8221; carried on between two players not within reach of the same chess board.   Of course, Tic-Tac-Toe is no comparison to Chess for complexity, but a lot of the principles of building a two real player Chess Correspondence web application are there.   Two of these principles are &#8230;<\/p>\n<ul>\n<li>at the Inline HTML Email Form display, use emojis to display the Game objects &#8230; in Tic-Tac-Toe that amounts to &#11093; (&amp;#11093;) and &#10060; (&amp;#10060;) &#8230;<\/li>\n<li>Inline HTML Email Form submit buttons via the same &#8220;name&#8221; property but differing &#8220;value&#8221; properties, sent back to the web address, and back out again to an Inline HTML Email Form<\/li>\n<\/ul>\n<p>What needed to change to allow for this, with the web application?  <font color=blue>Not a lot, as per the user interaction before the first email invitation.<\/font><\/p>\n<p><code><br \/>\n var hcont = '&lt;h1 align=\"center\"&gt;You say Tic Tac Toe ' + threedots + ' I say Noughts and Crosses, &lt;br&gt;Optionally for Emailee<font color=blue>(s)<\/font> &lt;form style=inline-block; method=GET action=\"' + document.URL.split('#')[0].split('?')[0] + '\"&gt;&lt;input style=inline-block; type=hidden name=otherclicks value=\"\"&gt;&lt;\/input&gt;&lt;input onblur=\"if (this.value.indexOf(String.fromCharCode(64)) != -1) { <font color=blue>this.value=brackets(this.value); var cls=this.value.replace(String.fromCharCode(32),String.fromCharCode(44)).split(String.fromCharCode(44)); if (cls.length == 2) { if (cls[1].length == 0) { if (this.value.indexOf(String.fromCharCode(44)) == -1) { this.value=cls[0] + String.fromCharCode(44) + cls[0];  } else {   this.value=cls[0] + String.fromCharCode(44) + cls[0];  }  }  } <\/font> document.getElementById(' + \"'semail'\" + ').click();  }\" style=inline-block;<font color=blue>width:580px; placeholder=\"Comma separated results in playerX@1,playerO@2 Noughts and Crosses game via email correspondence\" title=\"Can use normal rmetcalfe15@gmail.com email format or one such as Robert Metcalfe [rmetcalfe15@gmail.com]\"<\/font> name=oemail type=text value=\"\"&gt;&lt;\/input&gt;&lt;input id=semail type=submit value=Email style=display:none;&gt;&lt;\/input&gt;&lt;\/form&gt;&lt;\/h1&gt;';<br \/>\n<\/code> <\/p>\n<p>Regarding the rest of the workings, please refer to <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js----GETME' title=\"tictactoe.js\">the changed external Javascript<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js----GETME' title=\"tictactoe.js\">tictactoe.js<\/a> used by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\">the live run game<\/a> link, with its new optionally filled in Emailee<b>(s)<\/b> textbox, the setting of a comma separated pair of email addresses calling into play a Two Player Remote Tic-Tac-Toe Game via Inline HTML Email Form.<\/p>\n<p><b><i>Stop Press<\/i><\/b><\/p>\n<p>Yes, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=QcO2UlIMkpo'>bugs happen!<\/a>  But did they just hover around <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=A2o3QWwwQLI'>Black Rock?!<\/a>  We see some problems with <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=h8NrKjJPAuw'>looks<\/a> and <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=e8TUwHTfOOU'>navigation<\/a> as we update this project on 4\/4\/2020 with <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-two-email-players-via-inline-html-email-bugs-tutorial\/'>Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial<\/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\/tic-tac-toe-two-email-players-via-inline-html-email-tutorial\/'>Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial<\/a>.<\/p-->\n<hr>\n<p id='You-say-Tic-Tac-Toe-i-say-Noughts'>Previous relevant <a target=_blank title='You say Tic-Tac-Toe, i say Noughts &amp; Crosses via Inline HTML Email Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/you-say-tic-tac-toe-i-say-noughts-crosses-via-inline-html-email-tutorial\/\/'>You say Tic-Tac-Toe, i say Noughts &amp; Crosses via Inline HTML Email 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\/Noughtsandcrosses\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"You say Tic-Tac-Toe, i say Noughts &amp; Crosses via Inline HTML Email Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/email_invitation.jpg\" title=\"You say Tic-Tac-Toe, i say Noughts &amp; Crosses via Inline HTML Email Tutorial\"   \/><\/a><p class=\"wp-caption-text\">You say Tic-Tac-Toe, i say Noughts &amp; Crosses via Inline HTML Email Tutorial<\/p><\/div>\n<p>Revisiting <a title='Javascript in Your WordPress Post Primer Tutorial' href='#jywpppt'>You say Tic-Tac-Toe, i say Noughts &amp; Crosses<\/a> we see an improved bit of functionality could be &#8230;<\/p>\n<ul>\n<li>via Inline HTML Email invite a remote email user to play the web application &#8220;computer player&#8221; &#8230; today&#8217;s work &#8230; and then, later &#8230;<\/li>\n<li>via Inline HTML Email invite a remote email user to play &#8220;another email player&#8221;<\/li>\n<\/ul>\n<p> &#8230; via <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js---GETME' title=\"tictactoe.js\">the changed external Javascript<\/a> <a target=_blank href='http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/tictactoe.js---GETME' title=\"tictactoe.js\">tictactoe.js<\/a> used by <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\">the live run game<\/a> link, with its new optionally filled in Email To textbox.<\/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\/you-say-tic-tac-toe-i-say-noughts-crosses-via-inline-html-email-tutorial\/'>You say Tic-Tac-Toe, i say Noughts &amp; Crosses via Inline HTML Email Tutorial<\/a>.<\/p-->\n<hr>\n<p id='jywpppt'>Previous relevant <a target=_blank title='You say Tic-Tac-Toe, i say Noughts and Crosses' href='\/\/www.rjmprogramming.com.au\/ITblog\/you-say-tic-tac-toe-i-say-noughts-crosses\/'>You say Tic-Tac-Toe, i say Noughts &amp; Crosses<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"You say Tic-Tac-Toe, i say Noughts and Crosses\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/show.jpg\" title=\"You say Tic-Tac-Toe, i say Noughts and Crosses\"   \/><\/a><p class=\"wp-caption-text\">You say Tic-Tac-Toe, i say Noughts &amp; Crosses<\/p><\/div>\n<table title='Click a box to make your move in Noughts and Crosses game against Computer' ondblclick='window.open(\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/\",\"_blank\");'>\n<tbody style=\"background-color:pink;\">\n<tr>\n<td style=\"border-right: 2px solid red;border-bottom: 2px solid red;\" id=\"t11\"><img decoding=\"async\" id=\"11\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttnone.png\" onclick=\"doit(this);\" \/><\/td>\n<td style=\"border-bottom: 2px solid red;\" id=\"t12\"><img decoding=\"async\" id=\"12\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttnone.png\" onclick=\"doit(this);\" \/><\/td>\n<td style=\"border-left: 2px solid red;border-bottom: 2px solid red;\" id=\"t13\"><img decoding=\"async\" id=\"13\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttnone.png\" onclick=\"doit(this);\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"border-right: 2px solid red;\" id=\"t21\"><img decoding=\"async\" id=\"21\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttnone.png\" onclick=\"doit(this);\" \/><\/td>\n<td id=\"t22\"><img decoding=\"async\" id=\"22\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttnone.png\" onclick=\"doit(this);\" \/><\/td>\n<td style=\"border-left: 2px solid red;\" id=\"t23\"><img decoding=\"async\" id=\"23\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttnone.png\" onclick=\"doit(this);\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"border-right: 2px solid red;border-top: 2px solid red;\" id=\"t31\"><img decoding=\"async\" id=\"31\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttnone.png\" onclick=\"doit(this);\" \/><\/td>\n<td style=\"border-top: 2px solid red;\" id=\"t32\"><img decoding=\"async\" id=\"32\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttnone.png\" onclick=\"doit(this);\" \/><\/td>\n<td style=\"border-left: 2px solid red;border-top: 2px solid red;\" id=\"t33\"><img decoding=\"async\" id=\"33\" src=\"http:\/\/www.rjmprogramming.com.au\/Games\/Noughtsandcrosses\/ttnone.png\" onclick=\"doit(this);\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><a href=\"#post-454\" title=\"Coward's way out?\" onclick=\"newgame();\">New game<\/a><\/p>\n<p>Here is a great movie&nbsp;<a target=_blank title='War Games (Matthew Broderick)' href='http:\/\/www.youtube.com\/watch?v=NHWjlCaIrQo'>scene<\/a>&nbsp;that springs to mind.<\/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='#d454' onclick='var dv=document.getElementById(\"d454\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?cat=44\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d454' 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='#d47441' onclick='var dv=document.getElementById(\"d47441\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/html-email\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47441' 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='#d47448' onclick='var dv=document.getElementById(\"d47448\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/emoji\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d47448' 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='#d48579' onclick='var dv=document.getElementById(\"d48579\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/navigation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48579' 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='#d48610' onclick='var dv=document.getElementById(\"d48610\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/sms\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d48610' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>We found it fortuitous with the work of today because of the recent &#8230; Mind Map and Flowchart and Venn Diagram Collaborator Tutorial&#8216;s progress, because it taught me that [SMS-url]# Text SMS message words was possible &#8230; on top of &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-two-players-via-sms-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":[380,385,409,451,452,476,477,503,2258,3127,614,3163,625,744,830,847,1712,952,997,3164,1159,1168,1265,1319,1891,2257],"class_list":["post-48610","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-games","category-tutorials","tag-email","tag-emoji","tag-external-javascript","tag-font","tag-form","tag-game","tag-games-2","tag-gmail","tag-height","tag-html-email","tag-integration","tag-interaction","tag-invitation","tag-mamp","tag-navigation","tag-noughts-and-crosses","tag-onsubmit","tag-player","tag-programming","tag-remote","tag-sms","tag-software-integration","tag-textwrangler","tag-tutorial","tag-user","tag-width"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48610"}],"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=48610"}],"version-history":[{"count":2,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48610\/revisions"}],"predecessor-version":[{"id":48612,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/48610\/revisions\/48612"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=48610"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=48610"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=48610"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}