<html>
<head>
<script type='text/javascript'>
var randstart='1';
var thisrect=null, thatrect=null, compy=1, offx=0, offy=0; //3451

function checkit(event) { // Thanks to https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_event_key_location
var x = event.location;
randstart='';
if (event.key === "Alt" || event.key === "Ctrl" || event.which == 91 || event.which == 17 || event.which == 93) {
event.preventDefault();
//document.getElementById('sa').innerHTML+='' + x;
document.getElementById('ta' + x).focus();
} //else {
//document.getElementById('sa').innerHTML+='.' + event.which;
//}
document.getElementById('score1').innerHTML='' + document.getElementById('ta1').value.length;
document.getElementById('score2').innerHTML='' + document.getElementById('ta2').value.length;
if (document.getElementById('ta1').value.length == document.getElementById('ta2').value.length) {
document.getElementById('score1').style.backgroundColor='white';
document.getElementById('score2').style.backgroundColor='white';
} else if (eval('' + document.getElementById('ta1').value.length) > eval('' + document.getElementById('ta2').value.length)) {
document.getElementById('score1').style.backgroundColor='yellow';
document.getElementById('score2').style.backgroundColor='white';
} else {
document.getElementById('score2').style.backgroundColor='yellow';
document.getElementById('score1').style.backgroundColor='white';
}
}

function randf() {
var isok=true;
if (randstart != '' && compy < 0) {
thatrect=top.document.body.getBoundingClientRect();
//document.getElementById('sa').innerHTML='eval(thatrect.top + offy - 400)=' + eval(thatrect.top + offy - 400) + ' compy=' + compy + ' thatrect.top=' + thatrect.top; // + ' thisrect.y=' + thisrect.y + ' thatrect.y=' + thatrect.y;
if (eval('' + thatrect.top) != eval('' + compy)) { isok=false; randstart=''; }
}
if (isok) {
if (randstart == '1') {
randstart='2';
document.getElementById('ta' + randstart).focus();
//if (compy < 0) { compy--; }
setTimeout(randf, 5000);
} else if (randstart == '2') {
randstart='1';
document.getElementById('ta' + randstart).focus();
setTimeout(randf, 5000);
//if (compy < 0) { compy--; }
}
}
}

function prerandstart() {
//thisrect=document.body.getBoundingClientRect();
thatrect=top.document.body.getBoundingClientRect();
if (offx == 0 && offy == 0) {
var iofs=top.document.getElementsByTagName('iframe');
for (jofs=0; jofs<iofs.length; jofs++) {
if (('' + iofs[jofs].src).indexOf(document.URL) != -1) {
offx=iofs[jofs].offsetLeft;
offy=iofs[jofs].offsetTop;
}
}
//document.getElementById('sa').innerHTML='eval(thatrect.top + offy - 400)=' + eval(thatrect.top + offy - 400) + ' offy=' + offy + ' thatrect.top=' + thatrect.top; // + ' thisrect.y=' + thisrect.y + ' thatrect.y=' + thatrect.y;
}
if (eval(thatrect.y + offy - 400) >= 0 && Math.abs(eval(thatrect.y + offy - 400)) < 110) {
//document.getElementById('sa').innerHTML='eval(thatrect.top + offy - 400)=' + eval(thatrect.top + offy - 400) + ' offy=' + offy + ' thatrect.top=' + thatrect.top; // + ' thisrect.y=' + thisrect.y + ' thatrect.y=' + thatrect.y;
if (randstart != '') {
compy=eval('' + thatrect.top);
randf();
}
} else {
//document.getElementById('sa').innerHTML='Eval(thatrect.top + offy - 400)=' + eval(thatrect.top + offy - 400) + ' offy=' + offy + ' thatrect.top=' + thatrect.top; // + ' thisrect.y=' + thisrect.y + ' thatrect.y=' + thatrect.y;
//document.getElementById('sa').innerHTML=' offy=' + offy + ' thatrect.top=' + thatrect.top + ' thisrect.y=' + thisrect.y + ' thatrect.y=' + thatrect.y;
setTimeout(prerandstart, 1000);
}
}

//setTimeout(randf, 5000);
</script>
</head>
<body onload="if (window.self !== window.top) { prerandstart(); } else { document.getElementById('ta1').focus(); setTimeout(randf, 5000); }">
<h1>Multiple Keyboard Game ... Maybe Bluetooth Extra Keyboard, to Play</h1>
<h3>RJM Programming - October, 2022 <span id=sa></span></h3>
<h4>Players Get Focus to Their Blurb via Their Left or Right Alt or Ctrl Keyboard Press ... Longest Blurb Wins!</h4>
<table border=20 style='width:100%;'>
<tr><th colspan=2>Blurb</th></tr>
<tr><th id=player1 contenteditable=true>Player Left Alt 1</th><th id=player2 contenteditable=true>Player Right Alt 2</th></tr>
<tr><th id=score1>9</th><th id=score2>9</th></tr>
<tr><td id=cell1><textarea id=ta1 style='width:100%;height:460px;' onkeydown=checkit(event);>Blurb ...</textarea></td><td id=cell2><textarea id=ta2 style='width:100%;height:460px;' onkeydown=checkit(event);>Blurb ...</textarea></td></tr>
</table>
</body>
</html>