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 …
- a changed fourth draft Clairvoyance Game helped out by …
- a changed PHP fourth draft interlocutor
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 …
- a changed third draft Clairvoyance Game helped out by …
- a changed PHP third draft interlocutor
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 …
- a changed second draft Clairvoyance Game helped out by …
- a changed PHP second draft interlocutor
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.
