{"id":47448,"date":"2019-12-20T03:01:02","date_gmt":"2019-12-19T17:01:02","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=47448"},"modified":"2020-04-13T09:53:03","modified_gmt":"2020-04-12T23:53:03","slug":"tic-tac-toe-two-email-players-via-inline-html-email-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-two-email-players-via-inline-html-email-tutorial\/","title":{"rendered":"Tic-Tac-Toe Two Email Players via Inline HTML Email 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 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","protected":false},"excerpt":{"rendered":"<p>Yesterday&#8217;s You say Tic-Tac-Toe, i say Noughts &amp; Crosses via Inline HTML Email Tutorial&#8216;s part one of &#8230; 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, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/tic-tac-toe-two-email-players-via-inline-html-email-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,37],"tags":[380,385,409,476,477,3127,3163,625,847,952,997,3164,1200,1319,1891],"class_list":["post-47448","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-email","tag-emoji","tag-external-javascript","tag-game","tag-games-2","tag-html-email","tag-interaction","tag-invitation","tag-noughts-and-crosses","tag-player","tag-programming","tag-remote","tag-stop-press","tag-tutorial","tag-user"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47448"}],"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=47448"}],"version-history":[{"count":9,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47448\/revisions"}],"predecessor-version":[{"id":48578,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/47448\/revisions\/48578"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=47448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=47448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=47448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}