JSFiddle - React, Tailwind, and code Playground

by feklee

HTML

<!DOCTYPE html><html lang="en" manifest="manifest.appcache"><head><meta charset="UTF-8"><title>ROTOGAMEsq</title><meta name="description" content="ROTOGAMEsq is a puzzle game inspired by squared bathroom tiles."><meta name="author" content="Felix E. Klee &lt;[email protected]&gt;"><link rel="author" href="https://github.com/feklee/rotogamesq.git"><link rel="icon" href="/favicon.ico"><link rel="image_src" href="/images/icon_256.png"><link rel="stylesheet" href="/app.build/stylesheets/index.css"><script src="/socket.io/socket.io.js"></script><script src="/app.build/client/main.js" async></script><meta name="HandheldFriendly" content="True"><meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=0"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="apple-touch-icon-precomposed" href="/images/icon_256.png"><script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-35200955-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head><body><h1 id="title">ROTOGAME<em>sq</em></h1><div id="display"><canvas id="tilesCanvas"></canvas><canvas id="arrowCanvas"></canvas><canvas id="rotAnimCanvas"></canvas><canvas id="rubberBandCanvas"></canvas></div><div id="boardsNavigator"></div><div id="rotationsNavigator"><button disabled class="undo">↶</button><span id="nRotations"></span><button disabled class="redo">↷</button><button class="reset">↺</button></div><div id="hiscoresTableGroup"><table><tbody></tbody></table><table class="cont"><tbody></tbody></table></div><div id="loadScreen"><div><div...

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: normal;
  src: local('Droid Sans'), local('DroidSans'),
       url(/fonts/DroidSans.woff) format('woff'),
       url(/fonts/DroidSans.ttf) format('truetype');
}

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: bold;
  src: local('Droid Sans Bold'), local('DroidSans-Bold'),
       url(/fonts/DroidSans-Bold_subset.woff) format('woff'),
       url(/fonts/DroidSans-Bold_subset.ttf) format('truetype');
}

@font-face {
  font-family: 'Allan';
  font-style: normal;
  font-weight: normal;
  src: local('Allan'), local('Allan-Regular'),
       url(/fonts/Allan-Regular_subset.woff) format('woff'),
       url(/fonts/Allan-Regular_subset.ttf) format('truetype');
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@-moz-keyframes spin {
  0% { -moz-transform: rotate(0deg); }
  100% {...

JavaScript

var buttonEl, onClick, el, onTouchEnd, onTouchMove;

buttonEl = function (type) {
    return document.querySelector('#rotationsNavigator>button.' + type);
};

onClick = function () {
    alert('fixme');
};

onTouchEnd = function (e) {
    e.preventDefault();
    alert('touchend');
};

onTouchMove = function (e) {
    e.preventDefault();
};

window.addEventListener('touchmove', onTouchMove);
window.addEventListener('touchend', onTouchEnd);
window.addEventListener('touchcancel', onTouchEnd);

el = buttonEl('undo');

el.removeAttribute('disabled');
el.addEventListener('click', onClick);