JSFiddle - React, Tailwind, and code Playground

by mobidevelop

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius, sapien aliquet auctor posuere, orci eros feugiat risus, at molestie quam nisl eu libero. Sed sodales lobortis porta. Praesent rhoncus suscipit risus, sit amet mattis quam pellentesque nec. Etiam tempor adipiscing nibh, sit amet tempus arcu accumsan in. Mauris nec turpis a ligula suscipit tristique. Nulla ligula lectus, sollicitudin ut placerat et, adipiscing a metus. Duis malesuada euismod ipsum, sed tincidunt velit venenatis eget. Donec semper elit in risus eleifend tincidunt. In a est velit, at suscipit metus. Quisque sodales posuere velit. Nulla cursus massa non enim congue venenatis. Fusce eu leo non ante imperdiet tempor. Proin consectetur sodales quam, sit amet luctus mauris ultricies non. Maecenas eleifend, mi sit amet volutpat ullamcorper, tellus est molestie turpis, non porta nulla diam ullamcorper turpis. Nullam vulputate pulvinar ipsum a cursus.</p>

<div class="game">
<div id="contain">
</div>
</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean varius, sapien aliquet auctor posuere, orci eros feugiat risus, at molestie quam nisl eu libero. Sed sodales lobortis porta. Praesent rhoncus suscipit risus, sit amet mattis quam pellentesque nec. Etiam tempor adipiscing nibh, sit amet tempus arcu accumsan in. Mauris nec turpis a ligula suscipit tristique. Nulla ligula lectus, sollicitudin ut placerat et, adipiscing a metus. Duis malesuada euismod ipsum, sed tincidunt velit venenatis eget. Donec semper elit in risus eleifend tincidunt. In a est velit, at suscipit metus. Quisque sodales posuere velit. Nulla cursus massa non enim congue venenatis. Fusce eu leo non ante imperdiet tempor. Proin consectetur sodales quam, sit amet luctus mauris ultricies non. Maecenas eleifend, mi sit amet volutpat ullamcorper, tellus est molestie turpis, non porta nulla diam ullamcorper turpis. Nullam vulputate pulvinar ipsum a cursus.</p>

<p>Cras vitae libero ipsum. Cras feugiat, est...

CSS

.game {
    background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAI0lEQVQIW2PkdmD+z2vAwfD5wg8GGM0oUcD9H1kAJMFImUoAlhAlEcHdcCMAAAAASUVORK5CYII=);
    padding: 10px;
}
#contain {
    width: 0px;
    height: 0px;
    margin: 0 auto;
    position: relative;    

    background: #FFF;
    border: 1px solid black;
}

JavaScript

(function(){
    // Variables
    var width = 0;
    var height = 0;
    var tileWidth = 50;
    var tileHeight = 50;
    var widthInTiles = 8;
    var heightInTiles = 8;    
    var paddingTop = 10;
    var paddingLeft = 10;
    var paddingRight = 10;
    var paddingBottom = 10;    
    var gutterLeft = 170;
    var gutterBottom = 50;
    
    // The container div
    var contain = document.getElementById('contain');

    // Create our canvases in script, why not?
    var surface1 = document.createElement('canvas');
        surface1.id = 'surface1'
        surface1.innerHTML = 'Sorry, no canvas for you';
        surface1.style.position='absolute';
        surface1.style.top = paddingTop + 'px';
        surface1.style.left = paddingLeft + 'px';     
    var surface2 = document.createElement('canvas');   
        surface2.id = 'surface2'
        surface2.innerHTML = 'Sorry, no canvas for you';
        surface2.style.position='absolute';
        surface2.style.top = paddingTop + 'px';
        surface2.style.left = paddingBottom + 'px';
    
    width = tileWidth * widthInTiles + gutterLeft;
    height = tileHeight * heightInTiles + gutterBottom;

    surface1.width = width;
    surface1.height = height;

    surface2.width = width;
    surface2.height = height;
    
    // Add our canvases
    
    contain.appendChild(surface1);
    contain.appendChild(surface2);
    
    // Set the size of the contain element
    // Take into account the padding we want
    contain.style.width = (width + paddingLeft + paddingRight) + 'px';
    contain.style.height = (height + paddingTop + paddingBottom) + 'px';

    // Draw the first surface
    if (surface1.getContext) {
        var context = surface1.getContext("2d");
        if (context != null) {
            for (var y = 0; y < heightInTiles; y++) {
                for (var x = 0; x < widthInTiles; x++) {

                    // Yay checkerboard pattern
                    if ((y % 2 + x % 2) == 1) {
                       ...