Tic-Tac-Toe Two Players via SMS Tutorial
We found it fortuitous with the work of today because of the recent …
- Mind Map and Flowchart and Venn Diagram Collaborator Tutorial‘s progress, because it taught me that [SMS-url]# Text SMS message words was possible … on top of …
- the recent collaboration communication functionality improved by the recent Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial‘s progress
… but the doubt in my mind was there that Text SMS message words# [SMS-url] 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 …
<html>
<head>
<script type='text/javascript'>
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=";
function onl() {
document.getElementById('ais').href+=encodeURIComponent(suffix);
document.getElementById('ais').click();
}
</script>
</head>
<body onload=onl();>
<a target=_blank style='display:none;' id=ais href='sms:0402050258&body='>SMS</a>
</body>
</html>
… the bottom line being that this can work.
Implementing this “proof of concept” the easiest (perhaps should read “laziest”) integration approach we tweaked to was arrived at via …
Can we merge in with Email navigation functionality?
We agreed with ourselves … surprisingly … “yes”.
What distinguishes Email navigation HTML arrangements?
Teacher, teacher … HTML form usage.
True, but SMS needs “a” “sms:” tag, so how can you easily intervene at this same Email juncture of knowledge?
Teacher, teacher, teacher … HTML form onsubmit event logic.
Yes, make all the HTML form elements get an onsubmit event logic called via …
var eform = '<form onsubmit="return fget(this);" id=ifemail target="iemail" style="display:none;" action="//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php" method="POST"><input type=hidden style=display:none; name=inline value=""></input><input type=hidden style=display:none; name=to id=tdto value=""></input><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"></input><textarea name=hcont style=display:none; value="" id=tdhuhta cols=160 rows=4></textarea><input type=hidden style=display:none; name=cc id=tdcc value=""></input><input type=hidden style=display:none; name=bcc id=tdbcc value=""></input><input style=display:none; type=submit id=fsubm value="Email"></input></form><iframe style=display:none; name=iemail id=iemail src=></iframe>';
… pointing at new …
var 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) + "# ";
var origsuffix=esuffix;
var oemail=location.search.split('oemail=')[1] ? possc(decodeURIComponent(location.search.split('oemail=')[1].split('&')[0])) : '';
var preotherclicks='';
var otherclicks=location.search.split('otherclicks=')[1] ? decodeURIComponent(location.search.split('otherclicks=')[1].split('&')[0]) : '';
if (otherclicks.length <= 1 && document.URL.indexOf('otherpreclicks=') != -1) {
preotherclicks=location.search.split('otherpreclicks=')[1] ? decodeURIComponent(location.search.split('otherpreclicks=')[1].split('&')[0]) : '';
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 > 1) { otherclicks=''; } else if (otherclicks < '1' || otherclicks > '9') { otherclicks=''; } } if (otherclicks == '') { location.href=document.URL.split('&otherclicks=')[0] + '&otherclicks='; } }
if (preotherclicks != '') { preotherclicks+=','; }
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');
if ((',' + preotherclicks + ',').indexOf((',' + otherclicks + ',')) == -1 && otherclicks.length == 2) {
otherclicks=preotherclicks + otherclicks;
} else {
location.href=document.URL.split('&otherclicks=')[0] + '&otherclicks=';
}
}
var xorigc=otherclicks;
var viajunk=location.search.split('junk=')[1] ? decodeURIComponent(location.search.split('junk=')[1].split('&')[0]) : '';
var xviajunk='';
function fget(oform) {
var tfval=true;
if ((oemail + viajunk).indexOf(',') != -1 && (oemail + viajunk).indexOf('@') == -1) {
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=');
document.getElementById('asms').click();
esuffix=origsuffix;
return false;
}
return tfval;
}
… 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 merge in with Email navigation functionality idea above.
Here is the changed external Javascript tictactoe.js necessary to improve the unchanged HTML live run Tic Tac Toe game link where you can play away, perhaps involving SMS.
Previous relevant Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial is shown below.
Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial
Retesting the Tic Tac Toe “play via Inline Email Form between two players” functionality of the recent Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial we were saddened by two aspects to it, those being …
- the table cells on the emails could become very small as the Tic Tac Toe game progressed … and …
- sometimes the Tic Tac Toe game would not know to hang around for a real person’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)
… galling indeed! But we are onto that here today, and would seek this opportunity to go over some debugging tools at your disposal here.
- Gmail webmail email client has a great feature to the right top of an opened email with the (ol’) three (vertical) dots menu and its “Show original” option, that in our Inline Email Form option (down the report) shows the HTML our web application “got through” to the Gmail client email application … noting that “got through” is not always the same as “meant to get through” … the upshot of that being you can …
- Copy/Paste that HTML of above via a text editor (our macOS favourite being TextWrangler) to a local *.html file and test it on (a local web server product such as) MAMP … perhaps finding, like lucky me, that the same “too small” 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 … often good for “looks” issues, but navigation issues …
- as far as “navigation” issues go, it is not always as straightforward an approach as “looks” issues, but there in text editors you get the chance to change single line HTML “productions” into separate lines, and that way gradually see what’s going on … at least that was our way today … discovering we’d failed to populate the “email details” 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 going “remote”)
We’ve gathered together some of all this to show you with today’s >animated GIF presentation that reflects the changed external Javascript tictactoe.js necessary to improve the unchanged HTML live run Tic Tac Toe game link where you can play away.
Previous relevant Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial is shown below.
Tic-Tac-Toe Two Email Players via Inline HTML Email Tutorial
Yesterday’s You say Tic-Tac-Toe, i say Noughts & Crosses via Inline HTML Email Tutorial‘s part one of …
- via Inline HTML Email invite a remote email user to play the web application “computer player” … today’s work … and then, later …
- via Inline HTML Email invite a remote email user to play “another email player”
… and so today, it is “later”. Today’s job reminds us of “Correspondence Chess” 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 …
- at the Inline HTML Email Form display, use emojis to display the Game objects … in Tic-Tac-Toe that amounts to ⭕ (⭕) and ❌ (❌) …
- Inline HTML Email Form submit buttons via the same “name” property but differing “value” properties, sent back to the web address, and back out again to an Inline HTML Email Form
What needed to change to allow for this, with the web application? Not a lot, as per the user interaction before the first email invitation.
var hcont = '<h1 align="center">You say Tic Tac Toe ' + threedots + ' I say Noughts and Crosses, <br>Optionally for Emailee(s) <form style=inline-block; method=GET action="' + document.URL.split('#')[0].split('?')[0] + '"><input style=inline-block; type=hidden name=otherclicks value=""></input><input onblur="if (this.value.indexOf(String.fromCharCode(64)) != -1) { 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]; } } } document.getElementById(' + "'semail'" + ').click(); }" style=inline-block;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]" name=oemail type=text value=""></input><input id=semail type=submit value=Email style=display:none;></input></form></h1>';
Regarding the rest of the workings, please refer to the changed external Javascript tictactoe.js used by the live run game link, with its new optionally filled in Emailee(s) 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.
Stop Press
Yes, bugs happen! But did they just hover around Black Rock?! We see some problems with looks and navigation as we update this project on 4/4/2020 with Tic-Tac-Toe Two Email Players via Inline HTML Email Bugs Tutorial.
Previous relevant You say Tic-Tac-Toe, i say Noughts & Crosses via Inline HTML Email Tutorial is shown below.
You say Tic-Tac-Toe, i say Noughts & Crosses via Inline HTML Email Tutorial
Revisiting You say Tic-Tac-Toe, i say Noughts & Crosses we see an improved bit of functionality could be …
- via Inline HTML Email invite a remote email user to play the web application “computer player” … today’s work … and then, later …
- via Inline HTML Email invite a remote email user to play “another email player”
… via the changed external Javascript tictactoe.js used by the live run game link, with its new optionally filled in Email To textbox.
Previous relevant You say Tic-Tac-Toe, i say Noughts & Crosses is shown below.
You say Tic-Tac-Toe, i say Noughts & Crosses
 |
|
|
|
|
|
|
|
|
Here is a great movie scene that springs to mind.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
