JSFiddle - React, Tailwind, and code Playground

by AndyE

HTML

<div id="topscreen">Top Screen</div>
<div id="bottomscreen">
    <div id="input">
        <span tabindex=1></span>
        <span tabindex=2></span>
        <span tabindex=3></span>
        <span tabindex=4></span>
        <span tabindex=5></span>
    </div>
</div>

CSS

/*  Break out to add meta tag
</style>
<meta name="viewport" content="width=400">
<style>
*/
body { margin: 0px; whitespace: pre-wrap; font-family: monospace; }
#topscreen { width: 400px; height: 220px; overflow: hidden; background-color: red;  margin: 0 auto; }
#bottomscreen { width: 320px; height: 212px; overflow: hidden; background-color: blue; margin: 0 auto; }

span { width: 1px; height: 1px; border: none; float:left; margin: 0 auto; outline:0; margin:1px; }
span:nth-child(3n+2) { clear:left; }

JavaScript

(function () {
    
var top = document.getElementById("topscreen"),
    bottom = document.getElementById("bottomscreen"),
    mousedown;

if (navigator.platform !== "Nintendo 3DS")
    return;
    
window.setTimeout(function fixScroll() {
    window.scrollTo(40, 220);  
    window.setTimeout(fixScroll, 0);
}, 50);

document.addEventListener("DOMFocusIn", function (evt) {
    bottom.firstElementChild.children[2].focus();
});
document.onmousedown = function () {
    top.textContent = "mousedown"
    mousedown = true;
    window.setTimeout(function () { mousedown = false; }, 20);
}
bottom.firstElementChild.children[2].focus();
bottom.firstElementChild.children[2].onblur = function () {
    self = this;
    window.setTimeout(function () {
        if (document.activeElement == document.body) {
            if (!mousedown)
                alert("B Button pressed");
            
            self.focus();   
        }
    }, 0);
}
bottom.children[0].onkeydown = function (evt) {
    event.preventDefault();    
    return false;
}

})();