JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<div id=start class=modal>
        <p class=sp></p>
        <div>
            <h1>Symbolistic!</h1>
            <p>Match the shape by selecting correct symbols.<br/> 
            Each correct match gives you points and additional time, so be quick!</p>
            <button id=bS>Click to Start</button>
        </div>
    </div>
    <div id=gameover class=modal>
        <p class=sp></p>
        <div>
            
            <h2>You symbolistic, you! \o/</h2>
            <p>
                In total, you got <strong><span id=goPoints></span> points</strong> and survived for <strong><span id=goSeconds></span> seconds</strong>!
                <span id=goHigh><br/>Your highest score so far has been <span id=goHighPoints></span> points</span>
            </p>
            <button id=bA>Play again</button>
            or <a id=twBrag href="" target=_blank>Twitter brag »</a>
        </div>
    </div>
    
    <header>
        <span>Look for</span><span id=answer>?</span>
        <span>Time</span><span id=stopwatch>00:00:00</span>
        <span>Points</span><span id=points>00</span>
    </header>
    <div id=tiles>
    </div>
    
    <footer>
        <p>For more information, head over to <a href="http://mintusability.com">Mint Usability</a></p>
    </footer>
    
    
    
    <audio id=sClick>
        <source src="assets/click.mp3">
    </audio>

CSS

html,body{margin:0;padding:0;height:100%}body{margin:0;font:20px "Open Sans",Arial,sans-serif;font-weight:400;background:#fff;color:#212121}a,a:visited{color:#1e7fe8}a:hover{color:#196ec4}header,#tiles,h1,h2,h3{text-shadow:0 -1px 1px rgba(0,0,0,0.1)}.modal{display:block;visibility:hidden;position:fixed;top:0;left:0;width:100%;height:100%;min-height:100%;text-align:center;background-color:rgba(0,0,0,0.7);z-index:999}.modal .sp{height:50%;font-size:0}.modal div{padding:10px 0 30px 0;margin:0 auto;background:#fff;-moz-box-shadow:0 1px 20px rgba(0,0,0,0.7);-webkit-box-shadow:0 1px 20px rgba(0,0,0,0.7);box-shadow:0 1px 20px rgba(0,0,0,0.7)}.modal h3{margin:20px 0}.modal button{display:block;margin:20px auto}.s-w #start{visibility:visible;-webkit-animation-name:fadein;-webkit-animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:fadein;-moz-animation-duration:.3s;-moz-animation-timing-function:ease-in-out}.s-p #start{-webkit-animation-name:fadeout;-webkit-animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:fadeout;-moz-animation-duration:.3s;-moz-animation-timing-function:ease-in-out}@-webkit-keyframes fadeout{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}@-moz-keyframes fadeout{0%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}.s-go #gameover{visibility:visible;-webkit-animation-name:fadein;-webkit-animation-duration:.3s;-webkit-animation-timing-function:ease-in-out;-moz-animation-name:fadein;-moz-animation-duration:.3s;-moz-animation-timing-function:ease-in-out}#gameover a{text-decoration:none;color:rgba(0,0,0,0.5)}@-webkit-keyframes fadein{0%{opacity:0}100%{opacity:1}}@-moz-keyframes fadein{0%{opacity:0}100%{opacity:1}}#goHigh{display:none;color:rgba(0,0,0,0.5)}.localstorage #goHigh{display:inline!important}#notification{padding:10px 0;text-align:center;background:#ffc000;z-index:999}#notification...

JavaScript

(function(w,k){var t=["!","@","$","&amp;","/","{","(","[",")","]","=","}","+","?","\\","^","¨","*","Å","∈","∋","∧","∨","⊕","⊗","◊","¤","¡","¿","×","÷","°","¬","∠","∪","∴","∼","⊥"],x=3,i=[],C=[],q=[],m=0,h=null,f=function(e){return w.getElementById(e)},z=f("start"),b=z.getElementsByClassName("sp").item(0),g=f("gameover"),n=g.getElementsByClassName("sp").item(0),p=f("sClick"),j=f("tiles"),s=f("points"),v=w.getElementsByClassName(".sp");function a(E,e){return new RegExp("(^| )"+e+"( |$)").test(E.className)?true:false}function o(e,E){e.className=(!e.className?E:e.className+" "+E)}function r(e,E){e.className=e.className.replace(E,"").replace(/^\s+|\s+$/g,"")}function y(F,E,e){if(F.attachEvent){F["e"+E+e]=e;F[E+e]=function(){F["e"+E+e](k.event)};F.attachEvent("on"+E,F[E+e])}else{F.addEventListener(E,e,false)}}var d={};try{if("localStorage" in k&&k.localStorage!==null&&k.localStorage!==undefined){o(g,"localstorage");d.localStorage=true}}catch(B){d.localStorage=false}function u(F){C=[];q=[];i=[];r(j,"correct");var H=2,G="";while(H--){do{var E=t[Math.floor(Math.random()*t.length)]}while(C.indexOf(E)!==-1);i.push(E);C.push(E);G+="<span>"+E+"</span>"}while(C.length<F){do{var E=t[Math.floor(Math.random()*t.length)]}while(C.indexOf(E)!==-1);C.push(E)}f("answer").innerHTML=G;j.innerHTML="";while(C.length>0){var E=C[Math.floor(Math.random()*C.length)];var e=w.createElement("button");e.innerHTML=E;j.appendChild(e);C.splice(C.indexOf(E),1)}}y(j,"mousedown",function(e){var F=(e.srcElement!==undefined?e.srcElement:e.target);if(F.tagName!=="BUTTON"){return}p.play();if(q.indexOf(F.innerHTML)==-1){o(F,"selected");q.push(F.innerHTML)}else{r(F,"selected");q.splice(q.indexOf(F.innerHTML),1)}if(i.length!=q.length){return}var E=i.length;while(E--){if(q.indexOf(i[E])==-1){return}}o(j,"correct");h.addTime(2);m+=10;setTimeout(function(){s.innerHTML=m},200);setTimeout(function(){u(++x)},400)},false);function c(){w.body.className="s-p";x=3;m=0;u(x);f("stopwatch").innerHTML="20:00:00";h=new...