JSFiddle - React, Tailwind, and code Playground

by Muhammad Nugroho

HTML

<head>
    <title>Explode — Shiny Demos</title> 
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=yes">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="/styles/panel.css">
</head>
<body>
    <div role="main">
        <video>
            <source src="http://media.shinydemos.com/getusermedia-cracked/WebStandardsHoedown.mp4" type="video/mp4"></source>
            <source src="http://media.shinydemos.com/getusermedia-cracked/WebStandardsHoedown.webm" type="video/webm"></source>
            Sorry, your browser doesn't support video. I recommend trying <a href="http://www.opera.com/browser/">Opera</a>.
        </video>
        <canvas id="canvas1"></canvas>
        <canvas id="canvas2"></canvas>
    </div>
    <script src="/scripts/modernizr.js"></script>
    <script src="/scripts/panel.js"></script>
    <script src="scripts/options.js"></script>
    <script src="scripts/script.js"></script>

<script>
var exploding = {
    PAINTWIDTH : window.innerWidth,
    PAINTHEIGHT : window.innerHeight,
    TILE_WIDTH : 32,
    TILE_HEIGHT : 24,
    TILE_CENTER_WIDTH : this.TILE_WIDTH / 2,
    TILE_CENTER_HEIGHT : this.TILE_HEIGHT / 2,
    SOURCERECT : {
        width : 0,
        height : 0
    },
    RAD : Math.PI / 180,
    tiles : []
}, video = document.querySelector('video');

// Start drawing to the canvas once the video is ready.
exploding.doDraw = function() {
    if (!isNaN(video.duration)) {
        // Set the dimensions of the drawing areas
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
        
        exploding.canvas1.width = video.videoWidth;
        exploding.canvas1.height = video.videoHeight;

        canvas2.width = windowWidth;
        canvas2.height = windowHeight;
                
        if (exploding.SOURCERECT.width === 0) {
            exploding.SOURCERECT = {
                width : video.videoWidth,
                height :...

CSS

* {    
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    margin:0;
    padding:0;
}
body {
    background:#000;
    color:#fff;
    font-family:'Helvetica Neue', 'Free Sans', 'Deja Vu Sans', Arial, Helvetica, sans-serif;
    margin:0px;
    padding:0px;
}
a {
    color:#99f;
}
video, #canvas1 {
    display:none;
}