<html>
<head>
<title>Card Sequence - RJM Programming - March, 2023 ... thanks to Dr Crypton's Mind Benders Introduction by Isaac Asimov</title>
<meta charset="UTF-8"/>
<style>
option:not(first-child) {
color: red;
}

.type_slct {
color: red;
}
</style>
<script type=text/javascript>
var sharing=location.search.split('sharing=')[1] ? decodeURIComponent(location.search.split('sharing=')[1].split('&')[0]) : "";
var pluss='';
var istart=false, fca=false;
var score=0, goes=0, tsecs=0;
var odateone=null, odatetwo=null;
var suffixes=['Ace:01','Two:02','Three:03','Four:04','Five:05','Six:06','Seven:07','Eight:08','Nine:09','Ten:10','Jack:11','Queen:12','King:13'];
var denominations=['Ace','Two','Three','Four','Five','Six','Seven','Eight','Nine','Ten','Jack','Queen','King'];
var suits=['Spades','Clubs','Diamonds','Hearts'];
var suittwos=[];
var gd='';

function checkit() {
var suffix='';
score--;
goes++;
if (gd == (document.getElementById('scard').value + document.getElementById('ssuit').value)) {
score+=3;
fca=true;
suffix=' ... Well done!';
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + suffix + '';
alert('Well done! But just in case it was a fluke ...');
//score=0;
//goes=0;
tsecs=0;
fca=false;
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + suffix + '';
populate();
} else {
suffix=' ... No, it is not that card.';
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + suffix + '';
}
document.getElementById('scard').value='';
document.getElementById('ssuit').value='';
}

function tadd() {
if (!fca) { tsecs++; document.getElementById('isecs').innerHTML='' + tsecs; }
}

function setup() {
var ij=0;
for (ij=0; ij<denominations.length; ij++) {
document.getElementById('scard').innerHTML+='<option value=' + suffixes[ij].split(':')[1] + '>' + denominations[ij] + '</option>';
}
denominations=denominations.sort();
//document.getElementById('ssuit').innerHTML+='<optgroup label="Type" class="type_slct">';
for (ij=0; ij<suits.length; ij++) {
document.getElementById('ssuit').innerHTML+='<option value=' + suits[ij].toLowerCase().substring(0,1) + ('>' + suits[ij]).replace('>Hearts',' style=color:red;>Hearts').replace('>Diamonds',' style=color:red;>Diamonds') + ' ' + suits[ij].replace('Spades','♠').replace('Clubs','♣').replace('Diamonds','♦').replace('Hearts','♥') + '</option>';
}
//document.getElementById('ssuit').innerHTML+='</optgroup>';
//document.getElementById('scard').disabled=false;
//document.getElementById('ssuit').disabled=false;
populate();
}

function cardih(inih, inlet) {
var mm='';
for (var iss=0; iss<suffixes.length; iss++) {
if (suffixes[iss].indexOf(denominations[inih] + ':') == 0) {
mm=suffixes[iss].split(denominations[inih] + ':')[1];
}
}
return '//www.rjmprogramming.com.au/images/' + mm + inlet + '.gif';
}

function populate() {
var one=-1;
document.getElementById('sspan').title='';
document.getElementById('sspan').innerHTML='';
document.getElementById('sspan').setAttribute('data-alt','');
suittwos=[];
if (sharing.indexOf('.') != -1) {
suittwos.push(eval(sharing.split('.')[0]));
} else {
suittwos.push(Math.floor(Math.random() * suits.length));
}
var ih=suittwos[0];
while (ih == suittwos[0]) {
if (sharing.indexOf('.') != -1) {
ih=eval(sharing.split('.')[1]);
} else {
ih=Math.floor(Math.random() * suits.length);
}
}
suittwos.push(ih);
if (sharing.indexOf('.') != -1) {
one=eval(sharing.split('.')[2]);
} else {
if (eval(Math.floor(Math.random() * 198767543) % 2) == 1) { one=1; }
}
if (sharing.indexOf('.') != -1) {
ih=eval(sharing.split('.')[3]);
} else if (one == 1) {
ih=Math.floor(Math.random() * eval(-5 + denominations.length));
} else {
ih=eval(5 + Math.floor(Math.random() * eval(-6 + denominations.length)));
}
if (sharing == '' || pluss == '') {
pluss='' + suittwos[0] + '.' + suittwos[1] + '.' + one + '.' + ih;
}
sharing='';
document.getElementById('thefour').innerHTML='';
document.getElementById('thefour').innerHTML+='<img src=' + cardih(ih, suits[suittwos[0]].substring(0,1).toLowerCase()) + '></img>';
ih+=one;
document.getElementById('thefour').innerHTML+='<img src=' + cardih(ih, suits[suittwos[1]].substring(0,1).toLowerCase()) + '></img>';
ih+=one;
document.getElementById('thefour').innerHTML+='<img src=' + cardih(ih, suits[suittwos[0]].substring(0,1).toLowerCase()) + '></img>';
ih+=one;
document.getElementById('thefour').innerHTML+='<img src=' + cardih(ih, suits[suittwos[1]].substring(0,1).toLowerCase()) + '></img>';
ih+=one;
gd=denominations[ih].replace('Ace','01').replace('Two','02').replace('Three','03').replace('Four','04').replace('Five','05').replace('Six','06').replace('Seven','07').replace('Eight','08').replace('Nine','09').replace('Ten','10').replace('Jack','11').replace('Queen','12').replace('King','13') + suits[suittwos[0]].substring(0,1).toLowerCase();
document.getElementById('score').innerHTML='Score: ' + score + '/' + goes + '';
}

function smsit() {
var smsn=prompt('Please enter SMS number to send to', '');
if (smsn == null) { smsn=''; }
if (smsn.trim() != '' && pluss != '') {
document.getElementById('aemail').href='sms:' + smsn + '&' + document.getElementById('aemail').href.split(':')[1].split('&')[1].split('%3D')[0] + '%3D' + pluss;
document.getElementById('aemail').click();
}
}

function emailit() {
var emailn=prompt('Please enter email address to send to', '');
if (emailn == null) { emailn=''; }
if (emailn.indexOf('@') != -1 && pluss != '') {
document.getElementById('aemail').href='mailto:' + emailn + '?subject=Card%20Sequence%20Game&' + document.getElementById('aemail').href.split(':')[1].split('&')[1].split('%3D')[0] + '%3D' + pluss;
document.getElementById('aemail').click();
}
}

function preemojiit(osel) {
var optoit='';
for (var i=0; i<osel.length; i++) { if (osel.options[i].selected) { optoit=osel.options[i].innerText; document.getElementById('sspan').title=optoit.replace('Ace','A').replace('Two','2').replace('Three','3').replace('Four','4').replace('Five','5').replace('Six','6').replace('Seven','7').replace('Eight','8').replace('Nine','9').replace('Ten','10').replace('Jack','J').replace('Queen','Q').replace('King','K'); if (document.getElementById('sspan').getAttribute('data-alt') != '') { document.getElementById('sspan').innerHTML=document.getElementById('sspan').title + document.getElementById('sspan').getAttribute('data-alt'); } }
}
}

function emojiit(osel) {
var optoit='';
for (var i=0; i<osel.length; i++) { if (osel.options[i].selected) { optoit=osel.options[i].innerText; } }
if (osel.value == '' || optoit.indexOf(' ') == -1) {
document.getElementById('sspan').innerHTML='';
document.getElementById('sspan').setAttribute('data-alt','');
} else if (osel.value == 'h' || osel.value == 'd') {
document.getElementById('sspan').style.color='red';
document.getElementById('sspan').innerHTML=document.getElementById('sspan').title + optoit.split(' ')[1];
document.getElementById('sspan').setAttribute('data-alt',optoit.split(' ')[1]);
} else {
document.getElementById('sspan').style.color='black';
document.getElementById('sspan').innerHTML=document.getElementById('sspan').title + optoit.split(' ')[1];
document.getElementById('sspan').setAttribute('data-alt',optoit.split(' ')[1]);
}
}
</script>

</head>
<body onload="setup();" onclick="if (!istart) { istart=true; setInterval(tadd, 1000); }">
<h1>Card Sequence Game   <a title='Email on these same cards' onclick="emailit();" style="text-decoration:none;cursor:pointer;">📧</a> <a title='SMS on these same cards' onclick="smsit();" style="text-decoration:none;cursor:pointer;">📟</a></h1>
<h3>RJM Programming - March, 2023</h3>
<h4>Thanks to Dr Crypton's Mind Benders ... Introduction by Isaac Asimov</h4>

<p>Score 2 for correct card. Lose a point for incorrect card. Try to be speedy.</p>

<p>Seconds Taken (to first correct answer): <span id=isecs>0</span> ... <span id=score>Score: 0/0 </span></p>

<div id=thefour></div>

<p>Next Card in Sequence: <select onchange=preemojiit(this); title='Denomination' id=scard><option value=''>Please select Denomination</option></select> <select onchange=emojiit(this); title='Suit' id=ssuit><option value=''>Please select Suit</option></select> <span data-alt='' title='' id=sspan style='background-color:#f0f0f0;'></span>  <button id=bchk onclick="checkit(document.getElementById('icard'));" style=background-color:yellow;>Check</button> <button onclick="score--; goes++; populate();" style=background-color:yellow;>Redeal</button></p>

<hr></hr>
<details id=hint><summary id=mysummary>Hint(s) ...</summary>
Click the "Redeal" button a few times to note the pattern regarding the Card suits ... <button onclick="document.getElementById('hint2').style.display='block';">then</button> ...
<div id=hint2 style=display:none;><br> ... it is interesting to note that the order of card Denominations is programmed for English language usage ... <button onclick="document.getElementById('hint3').style.display='block';">and so</button> ...</div>
<div id=hint3 style=display:none;><br> ... the wording of the card Denominations (on that Denominations dropdown, that) is relevant.</div>
</details>
<a target=_blank href='mailto:?subject=Card%20Sequence%20Game&body=https%3A%2F%2Fwww.rjmprogramming.com.au%2FHTMLCSS%2Fcard_sequence.html%3Fsharing%3D' style=display:none; id=aemail>Email</a>
</body>
</html>