TheButton Sim (the dinner version)

Complete Sim of /r/thebutton behavior.

by Ben Wochinski

HTML

<script src="https://www.google.com/jsapi?autoload={&#39;modules&#39;:[{&#39;name&#39;:&#39;visualization&#39;,&#39;version&#39;:&#39;1.1&#39;,&#39;packages&#39;:[&#39;corechart&#39;]}]}"></script>
<script src="https://www.google.com/uds/api/visualization/1.1/8fd8705917b3fff8516953452d62ef07/format+en,default+en,ui+en,corechart+en.I.js"></script>
<img src="http://i.huffpost.com/gen/1311262/images/o-RESTAURANT-SETTING-facebook.jpg" width="1200px" height="900px" />
<div class="thebutton-wrap active" style="position: absolute; top: 400px; left: 310px;" >
    <form class="thebutton-form">
        <div class="thebutton-counter"><span class="thebutton-participants">7,307,562,940</span>  <span class="thebutton-participants-description"> participants</span>

        </div>
        <h1>the <strike>button</strike> dinner</h1>

        <div class="thebutton-container locked active">
            <button id="thebutton" title="BUTTON PRESS BUTTON PRESS IT BUTTON THE BUTTON PRESS IT PRESS THE BUTTON BUTTON BUTTON PRESS IT THE BUTTON THE BUTTON PRESS BUTTON IT PRESS IT THE BUTTON PRESS IT NOW">[you feel an overwhelming urge to press the button]</button>
        </div>
        <div class="thebutton-pie-container pulse2">
            <div class="thebutton-pie">
                <div style="position: relative;">
                    <div dir="ltr" style="position: relative; width: 70px; height: 70px;">
                        <div aria-label="A chart." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
                            <svg width="70" height="70" aria-label="A chart." style="overflow: hidden;">
                                <defs id="defs"></defs>
                                <rect x="0" y="0" width="70" height="70" stroke="none" stroke-width="0" fill="#ffffff"></rect>
                                <g>
                                    <path d="M35,35L35,0A35,35,0,0,1,58.959148707504106,9.486098040250596L35,35A0,0,0,0,0,35,35"...

CSS

.thebutton-wrap {
    text-align:center
}
.thebutton-wrap h1 {
    text-align:left;
    line-height:30px;
    margin:0;
    font-size:24px;
    padding:0
}

.thebutton-form {
    background:transparent;
    border:none;
    font-family:Georgia;
    color:none;
    display:inline-block;
    padding:20px;
    margin:10px auto
}
.thebutton-pie-container, .thebutton-container {
    position:relative;
    float:left;
    margin-top:15px;
    margin-left:15px;
    background:#eaeaea;
    border:1px solid #E0E0E0;
    box-shadow:inset 0px 1px 1px 0px rgba(73, 73, 73, 0.1);
    border-radius:5px
}
.thebutton-pie-container {
    border-radius:50%;
    margin-top:-5px
}
.thebutton-container {
    min-height:60px;
    min-width:190px
}
.thebutton-container.denied:before, .thebutton-container.locked:before, .thebutton-container.unlocking:before, .thebutton-container.denied:after, .thebutton-container.locked:after, .thebutton-container.unlocking:after {
    cursor:pointer;
    text-align:center;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    border-radius:5px;
    z-index:100;
    transform:translate(0, 0) scale(1, 1);
    background-position:center center;
    background-repeat:no-repeat;
    transition:all 0.2s;
    opacity:1;
    line-height:60px;
    font-size:14px
}
.thebutton-container.denied:before, .thebutton-container.locked:before, .thebutton-container.unlocking:before {
    content:'';
    display:block
}
.thebutton-container.denied:before {
   ...

JavaScript

r = {
    debug: function (p) {
        console.log(p);
    },
    thebutton: {
        _setTimer: function (e) {
            var t = "00000",
                n = (e > 0 ? e : 0).toString(),
                i = t.substring(0, t.length - n.length) + n;
            for (var s = 0; s < 4; s++) {
                r.thebutton._timerTextNodes[s].nodeValue = i[s];
            }
            e % 100 === 0 && r.thebutton._drawPie(e, 6e4);
        },
        _countdown: function () {
            r.thebutton._setTimer(r.thebutton._msLeft);
            r.thebutton._msLeft = Math.max(0, r.thebutton._msLeft - 10);
            if (r.thebutton._msLeft == 0) {
                r.thebutton._onJustExpired(0);
                r.thebutton._onExpired(0);
            }
        },
        init: function () {
            if ($("#thebutton").length === 0) return;
            this._chart = new google.visualization.PieChart($(".thebutton-pie").get(0));
            this._msLeft = 0;
            this._msgSecondsLeft = 0;
            this._tickTime = "";
            this._tickMac = "";
            this._lastMsLeft = Infinity;
            this._timerTextNodes = [
            $("#thebutton-s-10s").get(0).childNodes[0],
            $("#thebutton-s-1s").get(0).childNodes[0],
            $("#thebutton-s-100ms").get(0).childNodes[0],
            $("#thebutton-s-10ms").get(0).childNodes[0]];
            r.debug("in r.thebutton.init()");
            this._started = !1;
            r.thebutton._drawPie(60000, 6e4);

            var e = $("#thebutton").parent();
            e.on("click", function (e) {
                var t = $(this);
                t.is(".active.locked") && (t.addClass("unlocking").removeClass("locked"), setTimeout(function () {
                    t.removeClass("unlocking").addClass("unlocked")
                }, 300))
            });
            $("#thebutton").on("click", function (t) {
                t.preventDefault(), t.stopPropagation();
                if (e.hasClass("pressed"))...