{"id":52394,"date":"2021-05-31T03:01:43","date_gmt":"2021-05-30T17:01:43","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=52394"},"modified":"2021-06-05T20:43:15","modified_gmt":"2021-06-05T10:43:15","slug":"just-javascript-card-game-mid-ux-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/just-javascript-card-game-mid-ux-tutorial\/","title":{"rendered":"Just Javascript Card Game Mid-UX Tutorial"},"content":{"rendered":"
\"Just<\/a>

Just Javascript Card Game Mid-UX Tutorial<\/p><\/div>\n

Apropos yesterday’s Just Javascript Card Game SVG Background Data URL Tutorial<\/a> dive into aesthetics and non-essentials, we venture into some “mid-ux” work today …<\/p>\n

\nMid-UX? What’s that?\n<\/p><\/blockquote>\n

To our mind it’s that Clayton UX (user experience) improvement push you do before the end, regarding annoyances that have inevitably been irking the programmer as a project develops, and you try to satisfy the various platforms, and you’ve neglected parts of the functionality as you move (hopefully, mostly)<\/font> forward.<\/p>\n

We gathered our “mid-ux” thoughts into “self-emails” …<\/p>\n

\nSelf-emails? What’s that?\n<\/p><\/blockquote>\n

To our mind emailing to yourself project tweaks is our main work related reminder mechanism, especially regarding the smaller matters of a project which can perhaps fester for a while but good to note down for a future fix.<\/p>\n

So see this in the “JSON” tweaked<\/a> cards_usefocus.html<\/a> code behind the “Just Javascript” Memories Card Game<\/a> or live run with single window (good for mobile)<\/a> or default live run<\/a> (for your platform, and if non-mobile it will try child popup windows). Try adding “.0” to number of card players to play (our hybrid) “500” card game, and optionally wait or immediately append a comma separated email\/SMS address\/number list for your “500 card game” players (who can affect the game remotely via email)! Try adding “.1” to number of card players to play (our hybrid) “Bridge” card game, and optionally wait or immediately append a comma separated email\/SMS address\/number list for your “Bridge card game” players (who can affect the game remotely via email)!<\/p>\n

\n

\n

Previous relevant Just Javascript Card Game SVG Background Data URL Tutorial<\/a> is shown below.<\/p>\n

\"Just<\/a>

Just Javascript Card Game SVG Background Data URL Tutorial<\/p><\/div>\n

We turn back to styling and aesthetics with our 500 and bridge and memories card game “Just Javascript” (ie. no body definition on parent window) web application onto the audio and language work of yesterday’s Just Javascript Card Game Say My Memory ISO 639-3 PHP JSON Tutorial<\/a> …<\/p>\n

We wanted to make it easier for the hoster of 500 or bridge card games to know by what shows graphically on the screen that they are playing cards … not much to ask … eh’ wot guv’?<\/font><\/p>\n

We started off wondering whether our rjmprogramming.com.au image for the card back can display as a background image for the SVG data we have going as CSS html{} background data. It did not work, so we asked …<\/p>\n


\nsvg style background:url does not work<\/a>
\n<\/code><\/p>\n

… and it got us to understand that we needed to convert that rjmprogramming.com.au image into a data URL, and so we wondered …<\/p>\n


\nimage file to data-uri not using canvas<\/a>
\n<\/code><\/p>\n

… and yes, often the “online wooooorrrrrrlllldddd” (of course)<\/font> has the answers, which we based some code on, thanks, as per …<\/p>\n


\n var xmlHTTP=null, dataURL='', backis=\"\/\/www.rjmprogramming.com.au\/images\/back01.gif\", bpmoredone=0;
\n

\n function atstartdo() { \/\/ thanks to https:\/\/gist.github.com\/oliyh\/db3d1a582aefe6d8fee9<\/a>
\n xmlHTTP=new XMLHttpRequest();
\n xmlHTTP.open('GET', \"\/\/www.rjmprogramming.com.au\/images\/back01.gif\", true);
\n xmlHTTP.responseType = 'arraybuffer';
\n xmlHTTP.onload = function(e) {
\n var arr = new Uint8Array(this.response);
\n var raw = String.fromCharCode.apply(null,arr);
\n var b64 = btoa(raw); \/\/base64.encode(raw);
\n dataURL=\"data:image\/gif;base64,\" + b64;
\n if (bpmoredone == -1) { bpmoredone=1; document.head.innerHTML+=bpmore(defstyle); }
\n };
\n xmlHTTP.send();
\n }
\n<\/code><\/p>\n

Given all this, basically what we had to do in the Javascript “bpmore” function that “custom displays” the data useful “defstyle” variable<\/font> is to replace relevant CSS “background-color:rgba(255,0,0,0.1);” (type) styling with CSS “background-size:cover;background-image:url([dataURI-as-above]);” styling, and to change the “fill” and “stroke” text properties to be colours that stand out in front of the darkish blue of this “back of playing card” imagery.<\/p>\n

See this in the “JSON” tweaked<\/a> cards_usefocus.html<\/a> code behind the “Just Javascript” Memories Card Game<\/a> or live run with single window (good for mobile)<\/a> or default live run<\/a> (for your platform, and if non-mobile it will try child popup windows). Try adding “.0” to number of card players to play (our hybrid) “500” card game, and optionally wait or immediately append a comma separated email\/SMS address\/number list for your “500 card game” players (who can affect the game remotely via email)! Try adding “.1” to number of card players to play (our hybrid) “Bridge” card game, and optionally wait or immediately append a comma separated email\/SMS address\/number list for your “Bridge card game” players (who can affect the game remotely via email)!<\/p>\n

\n

\n

Previous relevant Just Javascript Card Game Say My Memory ISO 639-3 PHP JSON Tutorial<\/a> is shown below.<\/p>\n

\"Just<\/a>

Just Javascript Card Game Say My Memory ISO 639-3 PHP JSON Tutorial<\/p><\/div>\n

Afficianardos of server side languages such as PHP are bound to tell you a few things …<\/p>\n