Clairvoyance Game Chat Tutorial
Stepping back from the Clairvoyance++ Game project, of recent times, further to the recent Clairvoyance Game IP Address Links Tutorial it occurred to us just this morning how similar …
- User Questions mode … is to …
- a Chat web application
… and so we may as well build on the “connection work” already there, and bedded down, to also offer a two user Chat conversation set of functionalities, as a new dropdown option the user can choose.
New ideas are all fine and good, as long as it is not a pain in the neck to organize, fitting in with other dropdown option functionalities, and with this in mind, invented a new argument “itype” value of zero, it not having been used yet, and not interfering with window.localStorage “starting itype value” considerations.
You can try “Chat” as a new option in …
Previous relevant Clairvoyance Game IP Address Links Tutorial is shown below.
Clairvoyance Game IP Address Links Tutorial
We’re not here, today, to in any way criticize the Javascript prompt window, and it’s (harkening back to the desktop application wooooorrrrrllldd in it’s feel) interactive talents, that wee bit removed and independent from webpage goings on. In fact, it is modal (ie. is capable of freezing the Javascript) and this talent needs to be used in the apt place, but is the easiest “modal means” when that is required.
Where it is not as useful, in it’s operating system origins, is it’s lack of colour coding possibilities, and it happens, today, that our work to improve on yesterday’s Clairvoyance Game Textarea Onblur Tutorial regarding creating IP Address Other Player links, can be all the more useful with some colour coding. We have these “colour modes of operation” going, today, as per …
- IP Address Other Player comma separated links list alternates among …
- flash of yellow background on first showing, else white background
- blue font … for IP Address of current player … else …
- black font … alternating with …
- white fonts … shortly after window.prompt answer made … except for …
- orange background is given to users “just arrived on the scene since last black/blue font incarnation” … and can persist through white fonts and pushed to start of links list
… perhaps helping users “hook up” with other users they are in contact with, and can invite, via these “just logged in” identifications.
Feel free to retry …
Previous relevant Clairvoyance Game Textarea Onblur Tutorial is shown below.
Clairvoyance Game Textarea Onblur Tutorial
Further to the day before yesterday’s Clairvoyance Game Element Type Tutorial it’s in that form allowing users to design their own Clairvoyance Game style of game we harness …
the powers of the onblur event
… that great event to intervene with when processing the content of …
- many input type elements
- textarea
- myriad of innerHTML friendly elements involving global attribute contenteditable=true
… via …
<textarea onblur=maybeif(this); title="Double click to populate with default suggestion" ondblclick="this.value=this.placeholder.split(String.fromCharCode(10))[eval(-1 + this.placeholder.split(String.fromCharCode(10)).length)]; document.getElementById('one').value='House'; document.getElementById('two').value='Thing'; " rows=2 style=width:90%; type=text placeholder='Image Map HTML URL eg. https://www.rjmprogramming.com.au/HTMLCSS/livingroom.htm' value='' name=three id=three></textarea><br><span> ... or ...</span><br>
<textarea onblur=numdotsonly(this); title="Double click to populate with default suggestion" ondblclick="this.value=this.placeholder.split(String.fromCharCode(10))[eval(-1 + this.placeholder.split(String.fromCharCode(10)).length)]; document.getElementById('one').value='Counting Number'; document.getElementById('two').value='Number'; " rows=3 style=width:90%; type=text placeholder='Comma separated list of 5 Emoji Decimal HTML Entity Values eg. for Game Name Words value of Counting Number (where . can facilitate complex emojis and the #span creates span elements) could be 49.65039.8419,50.65039.8419,51.65039.8419,52.65039.8419,53.65039.8419#span' value='' name=four id=four></textarea><br><span> ... or ...</span><br>
<textarea onblur=perhapsiframes(this); title="Double click to populate with default suggestion" ondblclick="this.value=this.placeholder.split(String.fromCharCode(10))[eval(-1 + this.placeholder.split(String.fromCharCode(10)).length)]; document.getElementById('one').value='Fish'; document.getElementById('two').value='Fish'; " rows=3 style=width:90%; type=text placeholder='Comma separated list of 5 Image URLs eg. for Game Name Words value of Fish could be //fishesofaustralia.net.au/images/thumbnailimage/NarcetesErimelasAlcock.jpg,//fishesofaustralia.net.au/images/thumbnailimage/LutjansuBengalensisuwkwaj.jpg,//fishesofaustralia.net.au/images/thumbnailimage/GobiodonSpadix2Holotype.jpg,//fishesofaustralia.net.au/images/thumbnailimage/SebastapistesMonospinaRandallHolotype.jpg,//fishesofaustralia.net.au/images/thumbnailimage/AmblyeleotrisBellicaudaRandall.jpg' value='' name=five id=five></textarea><br><br>
… to allow for many more scenarios a user might apply entering in various URLs or text data or hashtagging “switches”, as per …
function perhapsiframes(tao) {
var badcnt=0, compext='', jj=0, potnew='', othercnt=0, otherthing='';
if (tao.value != '') {
var ims=tao.value.split('#');
if (eval('' + ims.length) < 2) {
potnew=tao.value + '#iframe';
var intrms=ims[0].replace(/\;base64\,/g,';base64c').replace(/\;utf8\,/g,';utf8c').split(',');
for (jj=0; jj<intrms.length; jj++) {
intrms[jj]=intrms[jj].replace(';base64c',';base64,').replace(';utf8c',';utf8,')
if (intrms[jj].indexOf('data:') == 0) {
if (intrms[jj].indexOf('data:image/') == -1) {
badcnt++;
if (jj == 0) {
otherthing=intrms[jj].split('data:')[1].split('/')[0];
othercnt++;
} else if (otherthing == intrms[jj].split('data:')[1].split('/')[0]) {
othercnt++;
}
}
} else if (intrms[jj].indexOf('/') != -1) {
if (intrms[jj].indexOf('.') == -1) {
badcnt++;
} else {
compext='.' + intrms[jj].split('.')[eval(-1 + intrms[jj].split('.').length)].split('?')[0].split('&')[0].split('#')[0].toLowerCase();
if (xexts.indexOf(compext) != -1) {
if (xtypes[eval('' + xexts.indexOf(compext))].indexOf('image/') != 0) {
badcnt++;
if (jj == 0) {
otherthing=xtypes[eval('' + xexts.indexOf(compext))].split('/')[0];
othercnt++;
} else if (otherthing == xtypes[eval('' + xexts.indexOf(compext))].split('/')[0]) {
othercnt++;
}
}
} else {
badcnt++;
}
}
}
}
}
//alert(badcnt);
var comma=',';
if (othercnt == eval('' + intrms.length)) {
potnew=potnew.replace('#iframe', '#' + otherthing.replace('text','embed'));
tao.value=potnew;
} else if (badcnt == eval('' + intrms.length)) {
for (jj=eval(-1 + intrms.length); jj>=0; jj--) {
if (jj == 0) { comma=''; }
if (intrms[jj].toLowerCase().indexOf('http') == 0) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(intrms[jj]));
} else if (intrms[jj].indexOf('//') != -1) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + intrms[jj].split('//')[1]));
} else if (intrms[jj].indexOf('/') == 0) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + document.URL.split('//')[1].split('/')[0] + intrms[jj]));
} else if (intrms[jj].indexOf('./') == 0) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + document.URL.split('//')[1].split('/')[0] + intrms[jj].substring(1)));
} else if (intrms[jj].indexOf('../') == 0) {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + document.URL.split('//')[1].split('/')[0] + intrms[jj].substring(2)));
} else {
potnew=potnew.replace(comma + intrms[jj], comma + '//www.rjmprogramming.com.au/recording_ideas.php?noinitialwo=open#' + encodeURIComponent(document.URL.split('//')[0] + '//' + document.URL.split('//')[1].split('/')[0] + '/' + intrms[jj]));
}
}
tao.value=potnew.replace(/\/\/www\.rjmprogramming\.com\.au\/recording\_ideas\.php\?/g, document.URL.split(':')[0] + '://www.rjmprogramming.com.au/recording_ideas.php?');
}
}
}
function numdotsonly(ttxao) {
if (ttxao.value != '') {
var hsta=ttxao.value.split('#');
if (hsta[0] != '') {
if (hsta[0].replace(/\./g,'').replace(/\,/g,'').replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
return ttxao;
} else {
var newhtz=hsta[0].toHtmlEntities();
var inimter=newhtz.replace(/\&\#44\;/g,',').replace(/\&\#46\;/g,'.');
var insmtr=inimter.split('&#');
for (var jj=1; jj<insmtr.length; jj++) {
if (String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])) >= '0' && String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])) <= '9') {
inimter=inimter.replace('&#' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + ';', String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])));
//alert('0:' + inimter);
} else if (String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])) == '.') {
inimter=inimter.replace('&#' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + ';', String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])));
//alert('1:' + inimter);
} else if (String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])) == ',') {
inimter=inimter.replace('&#' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + ';', String.fromCharCode(eval('' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0])));
//alert('2:' + inimter);
} else {
inimter=(inimter.replace('&#' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + ';', '.' + insmtr[jj].split(';')[0].split('.')[0].split(',')[0] + '.')).replace(/\.\./g,'.').replace(/^\./g,'').replace(/\.$/g,'').replace(/\.\,\./g,',').replace(/\.\,/g,',').replace(/\,\./g,',');
//alert('3:' + inimter);
}
}
//ttxao.value=newhtz.replace(/\&\#44\;/g,',').replace(/\&\#46\;/g,'.').replace(/\&\#/g,'').replace(/\;/g,'') + (eval('' + hsta.length) > 1 ? '#' + hsta[1] : '');
ttxao.value=inimter.replace(/\&\#/g,'').replace(/\;/g,'') + (eval('' + hsta.length) > 1 ? '#' + hsta[1] : '');
//alert(newhtz + ' ' + ttxao.value);
}
}
}
return ttxao;
}
function maybeif(tao) {
if (tao.value.trim() != '' && tao.value.trim().indexOf('//') != -1) {
justvalidity=true;
document.getElementById('ifimc').src='//' + tao.value.trim().split('//')[1];
setTimeout(function(){ justvalidity=false; }, 8000);
}
}
… sometimes resorting to QR Codes as a representation of a URL should we not be able to extract any data from that URL, in a changed latest draft Clairvoyance++ Game.
Previous relevant Clairvoyance Game Element Type Tutorial is shown below.
Clairvoyance Game Element Type Tutorial
Today’s blog posting work …
… to make those User Bonus Score questions and answer default suggestions have lots more variety.
Also, today, we use the oninput event means by which we can stop the user entering particular delimiter characters we hope they do not use defining Game Names and Game Nouns …
<input oninput='this.value=this.value.replace(/[+|"#]/g, " ");' style=width:90%; type=text placeholder='Game Name Words' onblur="if (this.value.trim() != '' && document.getElementById('two').value.trim() == '') { document.getElementById('two').value=this.value; }" value='' name=one id=one></input><br>
<input oninput='this.value=this.value.replace(/[+|"#]/g, " ");' style=width:90%; type=text placeholder='Game Noun(s)' value='' name=two id=two></input><br><hr></hr>
And, today, we allow the user to hashtag enter an HTML element type as the output element type output within the five table cells of the game, exemplified by …
function fireup() {
var thisiw=theiw;
var zrect=document.getElementById('td1').getBoundingClientRect();
if (thisiw >= eval('' + thewords.length)) { thisiw=0; }
for (var ii=1; ii<=5; ii++) {
if (document.getElementById('td' + ii).outerHTML.indexOf('background') == -1 && window.parent == window.self) {
//alert(theelems[thisiw] + ' ... ' + zener_cards[eval(-1 + ii)]);
if (theelems[thisiw].indexOf('<img ') == 0) {
//document.getElementById('td' + ii).innerHTML=theelems[thisiw] + (theelems[thisiw].slice(-1) == '=' ? '' : '') + zener_cards[eval(-1 + ii)] + theelems[thisiw].slice(-1).replace('=','') + ' id=img' + ii + " onclick=\"if (!awaiting && !holdon) { pick=changeover(eval(this.id.replace('img',''))); } else { alert('' + ' Sorry, not your turn, so please wait.'); }\"" + theihs[thisiw] + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1] + (theelems[thisiw].split(' ')[0] + '>').replace('<','</');
document.getElementById('td' + ii).innerHTML=theelems[thisiw] + (theelems[thisiw].slice(-1) == '=' ? '' : '') + zener_cards[eval(-1 + ii)] + theelems[thisiw].slice(-1).replace('=','') + ' id=img' + ii + " onclick=\"if (!awaiting && !holdon) { pick=changeover(eval(this.id.replace('img',''))); } else { alert('' + ' Sorry, not your turn, so please wait.'); }\"" + theihs[thisiw] + (theelems[thisiw].split(' ')[0] + '>').replace('<','</');
} else if (usereletype != '') {
document.getElementById('td' + ii).innerHTML=theelems[thisiw] + (theelems[thisiw].slice(-1) == '=' ? '' : '') + zener_cards[eval(-1 + ii)] + theelems[thisiw].slice(-1).replace('=','') + " id=img" + ii + " onclick=\"if (!awaiting && !holdon) { pick=changeover(eval(this.id.replace('img',''))); } else { alert('' + ' Sorry, not your turn, so please wait.'); }\"" + theihs[thisiw] + (theelems[thisiw].split(' ')[0] + '>').replace('<','</');
//alert('1:' + document.getElementById('td' + ii).innerHTML);
if (document.getElementById('img' + ii).title != '' && ('' + document.getElementById('img' + ii).innerHTML).replace(/^null/g,'').replace(/^undefined/g,'') == '') {
if ((document.getElementById('img' + ii).title + zener_cards[0]).indexOf('&#') != -1) {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
if (dataeltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
//alert(0);
document.getElementById('img' + ii).style.background='url("data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='" + zrect.width + "' height='" + zrect.height + "' viewport='0 0 100 100' style='fill:black;font-family:Verdana;font-size:100px;'><text x='5%' y='80%' xml:space='preserve'>" + document.getElementById('img' + ii).title.split('|')[1] + "</text></svg>"))) + '")';
//alert(10);
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else if (valueeltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.background='url("data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='" + zrect.width + "' height='" + zrect.height + "' viewport='0 0 100 100' style='fill:black;font-family:Verdana;font-size:100px;'><text x='5%' y='80%' xml:space='preserve'>" + document.getElementById('img' + ii).title.split('|')[1] + "</text></svg>"))) + '")';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else if (srceltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.background='url("data:image/svg+xml;base64,' + window.btoa(unescape(encodeURIComponent("<svg xmlns='http://www.w3.org/2000/svg' width='" + zrect.width + "' height='" + zrect.height + "' viewport='0 0 100 100' style='fill:black;font-family:Verdana;font-size:100px;'><text x='5%' y='80%' xml:space='preserve'>" + document.getElementById('img' + ii).title.split('|')[1] + "</text></svg>"))) + '")';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else {
document.getElementById('img' + ii).innerHTML=document.getElementById('img' + ii).title.split('|')[1];
}
//alert('2:' + document.getElementById('td' + ii).innerHTML);
} else {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
document.getElementById('img' + ii).style.background='url(' + document.getElementById('img' + ii).title.split('|')[1] + ')';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
//alert('3:' + document.getElementById('td' + ii).outerHTML);
}
}
} else {
if (dataeltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
//alert(0);
document.getElementById('img' + ii).style.background='url("' + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1].replace('https:','').replace('http:','') + '")';
//alert(10);
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else if (valueeltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
document.getElementById('img' + ii).style.background='url("' + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1].replace('https:','').replace('http:','') + '")';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else if (srceltypes.toLowerCase().indexOf(',' + usereletype + ',') != -1) {
document.getElementById('img' + ii).style.width='100%';
document.getElementById('img' + ii).style.height='100%';
document.getElementById('img' + ii).style.background='url("' + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1].replace('https:','').replace('http:','') + '")';
document.getElementById('img' + ii).style.backgroundRepeat='no-repeat';
document.getElementById('img' + ii).style.backgroundSize='contain';
} else {
document.getElementById('td' + ii).innerHTML=theelems[thisiw] + (theelems[thisiw].slice(-1) == '=' ? '' : '') + zener_cards[eval(-1 + ii)] + theelems[thisiw].slice(-1).replace('=','') + " id=img" + ii + " onclick=\"if (!awaiting && !holdon) { pick=changeover(eval(this.id.replace('img',''))); } else { alert('' + ' Sorry, not your turn, so please wait.'); }\"" + theihs[thisiw] + (zener_cards[[eval(-1 + ii)]] + '|').split('|')[1] + (theelems[thisiw].split(' ')[0] + '>').replace('<','</');
}
}
//document.getElementById('td' + ii).style.background="url('" + zener_cards[eval(-1 + ii)] + "')";
//document.getElementById('td' + ii).style.backgroundSize='contain';
//document.getElementById('td' + ii).style.backgroundRepeat='no-repeat';
//alert(ii);
}
}
}
… in …
Previous relevant Clairvoyance Game Scoring Bonus Tutorial is shown below.
Clairvoyance Game Scoring Bonus Tutorial
When a game scores and it’s got a non-aspirational feel about it, it can turn off some potential players. And so, with this in mind, onto yesterday’s Clairvoyance Game User Definitions Tutorial we now offer some optional bonus scoring functionality to also involve either …
- Maths questions
- User created questions
Either player can ask for this additional challenge involving …
Previous relevant Clairvoyance Game User Definitions Tutorial is shown below.
Clairvoyance Game User Definitions Tutorial
The day before yesterday’s Clairvoyance Game Image Map Tutorial work gets incorporated into today’s work allowing a three type way, as per …
- Image Map HTML URL
- Emoji list of 5
- Image URL list of 5
… means by which a user might design their own game to add to the dropdown list, and store in …
window.localStorage
… within the realms of the web browser being used. Then that newly created user defined game can be shared when invoking email or SMS invitations, and can get added to in that Game type dropdown, where another “Your Own …” suboption brings up the HTML form (and there, some textarea element double click logics might help with the filling out, and/or “modelling the filling out” for you) where the user can create and control these definitions.
Feel free to try this all out within a changed seventh draft Clairvoyance++ Game.
Previous relevant Clairvoyance Game Image Map Tutorial is shown below.
Clairvoyance Game Image Map Tutorial
With our Clairvoyance++ Game project of recent times, before yesterday’s Clairvoyance Game Waiting Tutorial there was the day before yesterday’s Clairvoyance Game Sharing Scores Tutorial, where we “objectified” the project. Today’s job is to add into that “objectify mix” …
Image Map
… integration, where the …
- HTML containing the …
- Image img element’s …
- Map map element guillotining … via …
- area element shape=”rect” … or …
- area element shape=”poly”
subelements
… can be referenced to fill in new Clairvoyance++ Game looking incarnations as well as a means, via background image of a newly “top part of webpage” HTML div element, clicking means by which the original image map action item can be reopened, as well.
We think, at this stage, that we want to offer the user some “own incarnation” functionality eventually, and we’d like to add this image map idea into the mix. We’ll see about that later, but for now we have the modelled new dropdown options below …
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'];
var theword='Clairvoyance';
var thenoun='Zener Card';
var theelem="<img style='object-fit:contain;' src=";
var thewords=['Clairvoyance', 'Fruit', 'Food', 'Animal', 'Bird', 'Carpentry', 'London', 'India', 'Australian Indigenous Language', 'Cell'];
var theelems=["<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src="];
var theihs=[">", ">", ">", ">", ">", ">", ">", ">", ">", ">"];
var thenouns=['Zener Card', 'Fruit', 'Meal', 'Creature', 'Bird', 'Framework Feature', 'Day', 'State', 'Language Area', 'Cell Part'];
var theiw=(document.URL.indexOf('itype=') != -1 ? eval(-1 + eval('' + document.URL.split('itype=')[1].split('&')[0].split('#'))) : 0);
if (theiw > 0) {
zcblurb='';
document.title=document.title.replace('Clairvoyance ', thewords[theiw] + ' ');
if (thewords[theiw] == 'Food') {
theelems[theiw]='<button style=font-size:100px; title=';
theihs[theiw]='>';
zener_cards[0]+='|🍛';
zener_cards[1]+='|🍱';
zener_cards[2]+='|🍘';
zener_cards[3]+='|🍙';
zener_cards[4]+='|🍣';
} else if (thewords[theiw] == 'Fruit') { // '127825', '127825', '127818', '127827', '127821'
theelems[theiw]='<button style=font-size:100px; title=';
theihs[theiw]='>';
zener_cards[0]+='|🍉';
zener_cards[1]+='|🍑';
zener_cards[2]+='|🍊';
zener_cards[3]+='|🍓';
zener_cards[4]+='|🍍';
} else if (thewords[theiw] == 'Animal') {
theelems[theiw]='<button style=font-size:100px; title=';
theihs[theiw]='>';
zener_cards[0]+='|🐒';
zener_cards[1]+='|🦍';
zener_cards[2]+='|🦧';
zener_cards[3]+='|🐶';
zener_cards[4]+='|🐕';
} else if (thewords[theiw] == 'Bird') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/bird_quiz.htm" style="object-fit:contain;" src="';
} else {
theelems[theiw]='<img data-url="/bird_quiz.htm" style="object-fit:contain;" src="';
}
theihs[theiw]='>';
zener_cards[0]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#8,5,374,370';
zener_cards[1]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#374,5,930,370';
zener_cards[2]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#930,5,1164,370';
zener_cards[3]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#1164,5,1500,370';
zener_cards[4]+=''; // |//www.rjmprogramming.com.au/HTMLCSS/birdyquiz.jpeg#5,680,374,1120';
} else if (thewords[theiw] == 'Carpentry') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/floor_wall_roof_framing_members.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/floor_wall_roof_framing_members.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
} else if (thewords[theiw] == 'London') {
delay=8000;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/london_trip_via_map_element.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/london_trip_via_map_element.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
} else if (thewords[theiw] == 'India') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/india_map.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/india_map.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
} else if (thewords[theiw] == 'Australian Indigenous Language') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/ImageMap/Languages/aboriginal_language_regions.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/ImageMap/Languages/aboriginal_language_regions.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
} else if (thewords[theiw] == 'Cell') {
delay=8000;
randomize=true;
if (document.URL.indexOf('rjmprogramming.com.au/') != -1) {
theelems[theiw]='<img data-url="//www.rjmprogramming.com.au/HTMLCSS/the_cell.html" style="object-fit:Cover;" src="';
} else {
theelems[theiw]='<img data-url="/HTMLCSS/the_cell.html" style="object-fit:Cover;" src="';
}
theihs[theiw]='>';
zener_cards[0]+='';
zener_cards[1]+='';
zener_cards[2]+='';
zener_cards[3]+='';
zener_cards[4]+='';
}
}
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'];
… working with the cropping and resizing smarts the HTML canvas element is capable of …
function imc(iois) {
var aconto=null, prefixing='', ipr=0, minx=0, miny=0, maxx=0, maxy=0, donesofar=',';
if (iois.src.indexOf('/About_Us.htm') == -1) {
aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
//alert('' + aconto.body.innerHTML.indexOf('<area ') + '!' + aconto.body.innerHTML.split(' shape="rect"').length + '?' + iois.src + ';' + aconto.body.innerHTML.split('<map ')[0].split('<img ')[eval(-1 + aconto.body.innerHTML.split('<map ')[0].split('<img ').length)] + ':' + aconto.body.innerHTML);
if (eval('' + aconto.body.innerHTML.indexOf('<map ')) > eval('' + aconto.body.innerHTML.indexOf('<img ')) && aconto.body.innerHTML.indexOf('<map ') != -1 && aconto.body.innerHTML.indexOf('<img ') != -1 && aconto.body.innerHTML.indexOf('<area ') != -1 && aconto.body.innerHTML.replace(/shape\=\"poly\"/g,'shape="rect"').indexOf('shape="rect"') != -1) {
//alert('000:' + '');
if (aconto.body.innerHTML.indexOf('shape="rect"') == -1) {
prefixing=' ';
//if (document.URL.indexOf('&debug=') != -1) { alert('yes'); }
}
wourl=iois.src;
coordsarr=aconto.body.innerHTML.replace(/shape\=\"poly\"/g,'shape="rect"').split('shape="rect"');
//alert('0000:' + coordsarr.length);
if (eval('' + coordsarr.length) > 5) {
//alert('00:' + '');
imname=aconto.body.innerHTML.split('<map ')[0].split('<img ')[eval(-1 + aconto.body.innerHTML.split('<map ')[0].split('<img ').length)];
//alert('0:' + imname);
imname=imname.split('src="')[1];
//alert('1:' + imname);
imname=imname.split('"')[0];
//alert('2:' + imname);
if ((imname + 'x').indexOf('//') != -1 || (imname + 'x').indexOf('data:') == 0) { // || (imname + 'x').substring(0,1) == '/') {
if ((imname + 'x').indexOf('data:') == 0) {
imname=imname;
} else {
imname='//' + imname.split('//')[1];
}
} else if ((imname + 'x').substring(0,1) == '/') {
if (iois.src.indexOf('//') != -1) {
imname='//' + iois.src.split('//')[1].split('/')[0] + '/' + imname.substring(1);
} else {
imname='//www.rjmprogramming.com.au/' + imname.substring(1);
}
} else if ((imname + 'xxxxxxxxx').substring(0,12) == '../../../../') {
imname=iois.src.replace(iois.src.split('/')[eval(-5 + iois.src.split('/').length)], imname.substring(12) + '#');
} else if ((imname + 'xxxxxxxxx').substring(0,9) == '../../../') {
imname=iois.src.replace(iois.src.split('/')[eval(-4 + iois.src.split('/').length)], imname.substring(9) + '#');
} else if ((imname + 'xxxxxx').substring(0,6) == '../../') {
imname=iois.src.replace(iois.src.split('/')[eval(-3 + iois.src.split('/').length)], imname.substring(6) + '#');
} else if ((imname + 'xxx').substring(0,3) == '../') {
imname=iois.src.replace(iois.src.split('/')[eval(-2 + iois.src.split('/').length)], imname.substring(3) + '#');
} else if ((imname + 'xx').substring(0,1) == './') {
imname=iois.src.replace(iois.src.split('/')[eval(-1 + iois.src.split('/').length)], imname.substring(2));
} else {
imname=iois.src.replace(iois.src.split('/')[eval(-1 + iois.src.split('/').length)], imname.substring(0));
}
}
//alert(imname.split(' ')[0] + ' ' + coordsarr[1]);
imlist=document.getElementsByTagName('img');
tds=document.getElementsByTagName('td');
squaredim=eval('' + tds[0].getBoundingClientRect().width);
document.getElementById('dtop').style.background='linear-gradient(rgba(255,255,255,0.1),rgba(255,255,255,0.1)),url(' + imname.split(' ')[0] + ')';
document.getElementById('dtop').style.backgroundRepeat='no-repeat';
document.getElementById('dtop').style.backgroundSize='contain';
document.getElementById('dtop').style.backgroundPosition='right top';
document.getElementById('dtop').onclick=function(event){ event.stopPropagation(); window.open(wourl,'_blank','top=50,left=50,width=600,height=600'); };
var imgis=new Image();
imgis.onload = function(){
var ict=1, jct=1;
var zcanvas = document.createElement('canvas');
zcanvas.width = squaredim; //imgis.width;
zcanvas.height = squaredim; //imgis.height;
var zctx = zcanvas.getContext('2d');
if (!randomize) {
while (coordsarr[ict].indexOf(' coords="') == -1) {
ict++;
}
}
if (randomize) {
ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));
//alert('first ict=' + ict + ' ... ' + donesofar);
while (ict == 0 || (donesofar + ',').indexOf(',' + ict + ',') != -1) {
ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));
if (coordsarr[ict].indexOf(' coords="') == -1) {
if (donesofar != ',') {
ict=eval('' + donesofar.substring(1).split(',')[0]);
} else {
ict++;
}
}
}
donesofar+='' + ict + ',';
}
//for (ict=1; ict<=5; ict++) {
while (jct <= 5) {
//if (document.URL.indexOf('&debug=') != -1) { alert(coordsarr[ict]); }
coordsarr[ict]=coordsarr[ict].split(' coords="')[1].split('"')[0];
if (randomize || prefixing != '' || (eval(eval(coordsarr[ict].split(',')[2].split('"')[0]) - eval(coordsarr[ict].split(',')[0].split('"')[0])) > 10 && eval(eval(coordsarr[ict].split(',')[3].split('"')[0]) - eval(coordsarr[ict].split(',')[1].split('"')[0])) > 10)) {
//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 + ')');
if (prefixing != '') {
//if (document.URL.indexOf('&debug=') != -1) { alert('YES'); }
minx=0;
miny=0;
maxx=0;
maxy=0;
for (ipr=0; ipr<coordsarr[ict].split(',').length; ipr+=2) {
if (ipr == 0) {
minx=eval(coordsarr[ict].split(',')[ipr].split('"')[0]);
maxx=eval(coordsarr[ict].split(',')[ipr].split('"')[0]);
miny=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]);
maxy=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]);
} else {
if (eval(coordsarr[ict].split(',')[ipr].split('"')[0]) < minx) { minx=eval(coordsarr[ict].split(',')[ipr].split('"')[0]); }
if (eval(coordsarr[ict].split(',')[ipr].split('"')[0]) > maxx) { maxx=eval(coordsarr[ict].split(',')[ipr].split('"')[0]); }
if (eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]) < miny) { miny=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]); }
if (eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]) > maxy) { maxy=eval(coordsarr[ict].split(',')[eval(1 + ipr)].split('"')[0]); }
}
}
prefixing='' + minx + ',' + miny + ',' + maxx + ',' + maxy;
//if (document.URL.indexOf('&debug=') != -1) { alert('prefixing=' + prefixing); }
coordsarr[ict]=prefixing.trim(); // + ',' + coordsarr[ict];
}
if (theelems[theiw].indexOf('object-fit:none') != -1 || theelems[theiw].indexOf('object-fit:Cover') != -1) {
//if (document.URL.indexOf('&debug=') != -1) { alert('Yes'); }
zcanvas.width = eval(eval(coordsarr[ict].split(',')[2].split('"')[0]) - eval(coordsarr[ict].split(',')[0].split('"')[0])); //imgis.width;
//if (document.URL.indexOf('&debug=') != -1) { alert('YeS'); }
zcanvas.height = eval(eval(coordsarr[ict].split(',')[3].split('"')[0]) - eval(coordsarr[ict].split(',')[1].split('"')[0])); //imgis.height;
//if (document.URL.indexOf('&debug=') != -1) { alert('YEs'); }
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])));
//if (document.URL.indexOf('&debug=') != -1) { alert('yeS'); }
} else {
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);
}
xaltdu=zcanvas.toDataURL("image/jpeg", 0.1);
//alert(xaltdu);
//alert(imlist[eval(-1 + ict)].outerHTML);
//if (document.URL.indexOf('&debug=') != -1) { alert(xaltdu); }
imlist[eval(-1 + jct)].src=xaltdu;
//zener_cards[eval(-1 + jct)]+='' + xaltdu;
if (jct < 5) {
zcanvas.width = squaredim; //imgis.width;
zcanvas.height = squaredim; //imgis.height;
if (prefixing != '') { prefixing=' '; } else { prefixing=''; }
}
jct++;
//} else {
//alert(coordsarr[ict]);
}
if (!randomize) {
ict++;
if (document.URL.indexOf('&debug=') != -1) { alert('ict=' + ict + ' and jct=' + jct); }
} else {
ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));
//alert('first ict=' + ict + ' ... ' + donesofar);
while (ict == 0 || (donesofar + ',').indexOf(',' + ict + ',') != -1) {
ict=Math.floor(Math.random() * eval(-1 + eval('' + coordsarr.length)));
if (coordsarr[ict].indexOf(' coords="') == -1) {
if (donesofar != ',') {
ict=eval('' + donesofar.substring(1).split(',')[0]);
} else {
ict++;
}
}
}
donesofar+='' + ict + ',';
}
}
};
imgis.src=imname.split(' ')[0];
}
}
}
}
}
function imagemapcheck() {
if (theelems[theiw].indexOf(' data-url="') != -1 && theelems[theiw].indexOf(' data-url=""') == -1 && zener_cards[0].replace('#circle_yellow','').indexOf('#') == -1) {
if (theelems[theiw].split(' data-url="')[1].split('"')[0].indexOf('#') == -1) {
if (theelems[theiw].split(' data-url="')[1].split('"')[0].slice(-5).indexOf('.') == -1 && theelems[theiw].split(' data-url="')[1].split('"')[0].slice(-1) != '/') {
document.getElementById('ifimc').src=theelems[theiw].split(' data-url="')[1].split('"')[0] + '/#';
} else {
document.getElementById('ifimc').src=theelems[theiw].split(' data-url="')[1].split('"')[0] + '#';
}
} else {
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) != '/') {
document.getElementById('ifimc').src=theelems[theiw].split(' data-url="')[1].split('"')[0].replace('#','/#');
} else {
document.getElementById('ifimc').src=theelems[theiw].split(' data-url="')[1].split('"')[0];
}
}
}
}
… in a changed sixth draft Clairvoyance++ Game.
Previous relevant Clairvoyance Game Waiting Tutorial is shown below.
Clairvoyance Game Waiting Tutorial
The recent Clairvoyance Game Objectify Tutorial work is revisited today, with the news that we’ve introduced …
implied invitations
… when the user enters a “player name” (looking a lot like an IP address) from that list of “potential players online” 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 “usual methodology” at the beginning of our project, and so “we’ll allow a leave pass” for you to ask …
How come this took so long?
And then we’d say …
Huh?!
And there you go! Just “keep those cards and letters” flowing in!
So what do we mean by “implied invitations”? Well, in between a user “Wait” 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’re in the midst of a game of some sort, invited by another player. We hope this does not offend?!
The concept of a “formal invitation” still exists for the email or SMS collaboration conduits, we hasten to add.
And so “day ?whatevvvvvvvvvvveeeeerrrrrrrr” got us to …
Previous relevant Clairvoyance Game Objectify Tutorial is shown below.
Clairvoyance Game Objectify Tutorial
Extending yesterday’s Clairvoyance Game Sharing Scores Tutorial, it’s not exactly OOP (Object Oriented Programming) we are doing, but what we’d describe as “objectify” the proceedings we’re attending to today. Take a look at the following Javascript initialization code (now versus before) …
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'];
var theword='Clairvoyance';
var thenoun='Zener Card';
var theelem="<img style='object-fit:contain;' src=";
var thewords=['Clairvoyance', 'Fruit', 'Food'];
var theelems=["<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src=", "<img style='object-fit:contain;' src="];
var theihs=[">", ">", ">"];
var thenouns=['Zener Card', 'Fruit', 'Food'];
var theiw=(document.URL.indexOf('itype=') != -1 ? eval(-1 + eval('' + document.URL.split('itype=')[1].split('&')[0].split('#'))) : 0);
var ppsuff='';
var youare='';
var otheris='';
var score=0, goes=0;
var woois=null;
var pick=-1, awaiting=false, holdon=false;
var bihnull=true;
var anchor=null;
var initval='';
var lastafterscore='';
var wherewrong=false;
var sharemyscore=false, allowsdone=false;
var zcblurb=' You can enter ? to find out more about the history of Zener Cards. ';
if (theiw > 0) {
zcblurb='';
document.title=document.title.replace('Clairvoyance ', thewords[theiw] + ' ');
if (thenouns[theiw] == 'Food') {
theelems[theiw]='<button style=font-size:100px; title=';
theihs[theiw]='>';
zener_cards[0]+='|🍛';
zener_cards[1]+='|🍱';
zener_cards[2]+='|🍘';
zener_cards[3]+='|🍙';
zener_cards[4]+='|🍣';
} else if (thenouns[theiw] == 'Fruit') { // '127825', '127825', '127818', '127827', '127821'
theelems[theiw]='<button style=font-size:100px; title=';
theihs[theiw]='>';
zener_cards[0]+='|🍉';
zener_cards[1]+='|🍑';
zener_cards[2]+='|🍊';
zener_cards[3]+='|🍓';
zener_cards[4]+='|🍍';
}
}
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'];
… helping build up HTML for a new dropdown (versus what was there before) …
function multimaybe() {
var selbit='', jsel=0;
if (eval('' + thenouns.length) > 1) {
selbit="<sup><select style=width:30px; onchange=\"if (eval('' + this.value) != eval(1 + eval('' + theiw))) { location.href=document.URL.split('?')[0].split('#')[0] + '?itype=' + this.value; }\"><option value=" + eval(1 + theiw) + ">?</option></select> </sup> ";
for (jsel=0; jsel<thenouns.length; jsel++) {
selbit=selbit.replace('</select>', '<option value=' + eval(1 + jsel) + '>' + thewords[jsel] + ' Game</option></select>');
}
}
return selbit;
}
… and then later within the HTML <body> section …
<script type=text/javascript>
document.write("<h1 id=muh1>" + thewords[theiw] + " Game " + multimaybe() + "<input type=checkbox id=allows style=display:none; onchange=chscal(this);><font size=1 id=fshare style=display:none;>Share Score</font></input> <input type=checkbox id=allowstwo style=display:none; onchange=chscaltwo(this);><font size=1 id=fsharetwo style=display:none;>Be Told Where You Went Wrong</font></input></h1>");
</script>
… and am sure you can see where an initial “Clairvoyance” noun “hardcoding” feel of logic gets expanded to an “array of nouns” (where lots of programmers will immediately shout “objects”), as an alternative way of thinking to the ways our Javascript functions are like “verbs”. If you “abstract” the “what was a hardcoding” into “a dynamically selectable list of nouns” this objectifying process can be quite useful.
And so “day six” got us to …
Previous relevant Clairvoyance Game Sharing Scores Tutorial is shown below.
Clairvoyance Game Sharing Scores Tutorial
Onto the day before yesterday’s (yes, another two dayer!) Clairvoyance Game Invitations Tutorial primarily we have a checkbox part regarding …
- Be Told Where You Went Wrong … guessing within our two player Clairvoyance Game … easy peasy … but …
- Share Your Score … was really difficult … go figure …
… though the latter did ask a lot regarding timing and the sleep patterns of the PHP interlocutor … ?
Let’s just “move on” … shall we?!
Also on the agenda was some colour coding … and who doesn’t like a bit of colour coding! We purloined CSS into play, with “the kind of kludgy / kind of cute (well, you had to be there)” introduction of a title attribute to the status wording element and then apply that CSS …
<style>
#tdstatus[title^='Awaiting Other '] {
border: 3px solid red;
}
#tdstatus[title^='Awaiting a '] {
border: 3px solid rgb(127,0,0);
}
#tdstatus[title^='Awaiting Guess '] {
border: 3px solid orange;
}
#tdstatus[title^='Select the '] {
border: 6px solid lightgreen;
}
#tdstatus[title^='Select a '] {
border: 6px solid green;
}
$tdstatus { padding: 5 5 5 5; }
</style>
We often find it the way, when it comes to colour coding, we borrow from “the traffic light creed” regarding the colours used, where a reddish colour means “hang on” and a greenish colour is an invitation to the user. One could also think of “beeps” or “notifications” here, but not with us here, as of yet.
And so “day four” and “day five” saw …
Previous relevant Clairvoyance Game Invitations Tutorial is shown below.
Clairvoyance Game Invitations Tutorial
In yesterday’s Clairvoyance Game Tutorial, with our Clairvoyance Game, really a game for two, downplayed invitations to the end of the blog posting blurb. But really, invitations are the “be all and end all” for a two player game shared over the Internet and just using a “PHP and HTML/Javascript” level of sophistication.
And, of course, two days later (when we think it should have only been “one day later”), it might be me, but making this work for email or SMS invitations was not trivial, partly because …
- we launched into this “phase two public invitational sharing” on a false premise … our “phase one window.open and window.opener” Javascript logics were flawed (further into the logic than the first foray, shall we say) … bad news … we reckon one out of two days “getting there” would have to be put down to the lack of testing on day one … whereas …
- our thought that “phase two” is just phase one window.open and window.opener transfers to PHP writes Javascript equivalents was “more or less” true, but we all know “programming life” throws up unexpected roadblocks
… and that is the excuse today, which we are sticking to … so there, ngaaahhhh!
This calls into play the importance, often, of “project planning”, and the compartmentalizing of testing, including really tight unit testing, especially if your software plan has so much dependency in “day two” on the “day one” quality. As far as that goes, in our defence, regarding a networking web application, that this Clairvoyance Game “more or less is” (though yesterday’s work simplistically pared that down so that we never needed more than our local MAMP Apache/PHP web server involved) sometimes you find it is hard to recognize “units” within the big picture.
And so “day two” and “day three” were all about “online invitation” logic for email or SMS invitations in …
Previous relevant Clairvoyance Game Tutorial is shown below.
Clairvoyance Game Tutorial
Are you sixth sensical? Can you read tea leaves? If it’s one out of two, that will do.
We’re starting down the road to a new …
Clairvoyance Game
… today, that on today’s first draft, as a design for two players …
- starts you playing yourself, or a nearby other player willing to share windows on your one common web browser incarnation …
- kind of ludicrous on this day one but the building blocks are there, they being …
- HTML and Javascript parent … talking to …
- PHP interlocutor
… which we’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 sleeping
Two players take it in turns …
- selecting a Zener Card the other player is asked to guess
- other player trying to guess that Zener Card selected
… to score, or not, in this first draft Clairvoyance Game helped out by PHP first draft interlocutor.
In days to come, we think we’ll also be coding for email or SMS invitations to play, as well. This will be old news to some of you telepathic genii.
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.
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.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
