simon game

/*Downloaded from https://www.codeseek.co/vanderdrilu/simon-game-vjMdMw */
.maincircle {
  width: 500px;
  height: 500px;
  border: 2px solid #212121;
  margin: 10% 20%;
  border-radius: 300px 300px 300px 300px;
  position: relative;
}

.innercircle {
  width: 50%;
  height: 50%;
  background-color: lavender;
  border: 15px solid #212121;
  border-radius: 200% 200% 200% 200%;
  position: absolute;
  left: 25%;
  top: 25%;
}

.pismo {
  color: ghostwhite;
  text-align: right;
  font-family: "Trebuchet MS", "Lucida Sans Unicode";
}

.btnred {
  background-color: brown;
}

body {
  background-image: url(http://4.bp.blogspot.com/_4MehpqzcQVE/TNN-7f_sTEI/AAAAAAAAAg4/PyreN9jFrdo/s1600/pipe+shelves8.jpg);
  background-repeat: no-repeat;
  background-position: 0px 0%;
}

.btn:focus,
.btn:hover,
.btn:visited {
  color: ghostwhite;
  text-decoration: none !important;
  /* outline: none !important;*/
}

.btnsize {
  width: 50.1%;
  height: 50.1%;
  border-radius: 100% 0 0 0;
  position: absolute;
  border: 20px solid;
  display: block;
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes blick1 {
  50% {
    color: transparent;
  }
}
@keyframes blick1 {
  50% {
    color: transparent;
  }
}
.btn1 {
  background-color: #2f7421;
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
  left: 0%;
  top: 0%;
}

.btn2 {
  background-color: darkgoldenrod;
  -webkit-transform: rotate(270deg);
          transform: rotate(270deg);
  left: 0%;
  bottom: 0%;
}

.btn3 {
  background-color: #0f0fd6;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  right: 0%;
  bottom: 0%;
}

.btn4 {
  background-color: red;
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
  top: 0%;
  right: 0%;
}

.btnstart {
  width: 30px;
  height: 30px;
  background-color: red;
  border: 4px solid;
  border-radius: 200px 200px 200px 200px;
  position: absolute;
  color: black;
  font-size: 12pt;
}

.btnstrict {
  width: 30px;
  height: 30px;
  background-color: yellow;
  border: 4px solid;
  border-radius: 200px 200px 200px 200px;
  position: absolute;
  color: black;
  font-size: 12pt;
}

.btnstrictcontrol {
  width: 10px;
  height: 10px;
  background-color: beige;
  border: 1px solid;
  border-radius: 10px 10px 10px 10px;
  position: absolute;
}

.disp {
  width: 50px;
  height: 35px;
  background-color: #800000;
  border: 3px double black;
  box-shadow: -2px 2px 8px red;
  overflow: hidden;
  box-shadow: inset -2px 1px 5px 0px rgba(242, 233, 233, 0.75);
  font-size: 18px;
  font-weight: bold;
  color: rgba(31, 0, 0, 0.26);
  border-radius: 12px 12px 12px 12px;
  text-align: center;
}

.font {
  text-align: center;
  font-size: 12pt;
}

.shadowbox {
  box-shadow: -2px 2px 8px rgba(0, 0, 0, 0.6), -3px 4px 12px rgba(0, 0, 0, 0.5), -4px 6px 15px rgba(0, 0, 0, 0.4), -5px 8px 18px rgba(0, 0, 0, 0.3);
}

.latofont {
  font-family: 'Lato', sans-serif;
}

.fixfont {
  font-family: 'Permanent Marker', cursive;
}

.Kavi {
  font-family: 'Kavivanar', cursive;
}

.marcfont {
  font-family: 'Marck Script', cursive;
}

H1 {
  margin: -5% 27%;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 800%;
  color: #800000;
  position: fixed;
}

/*Downloaded from https://www.codeseek.co/vanderdrilu/simon-game-vjMdMw */
$(document).ready(function () {
    var zvuk = {
        1: "https://s3.amazonaws.com/freecodecamp/simonSound1.mp3",
        2: "https://s3.amazonaws.com/freecodecamp/simonSound2.mp3",
        3: "https://s3.amazonaws.com/freecodecamp/simonSound3.mp3",
        4: "https://s3.amazonaws.com/freecodecamp/simonSound4.mp3",
        5: "http://soundbible.com/grab.php?id=172&type=mp3",
        6: "http://soundbible.com/grab.php?id=1003&type=mp3",
        7: "https://www.soundjay.com/misc/fail-trombone-02.mp3"
    };
    var farba = {
        1: 'rgba(47, 116, 33, 1)',
        2: 'darkgoldenrod',
        3: 'rgb(15, 15, 214',
        4: 'red'
    };
    var isplayBoo = false;
    var onoff = false;
    var strictEnabled = false;
    var a = {
        1: new Audio(zvuk["1"]),
        2: new Audio(zvuk["2"]),
        3: new Audio(zvuk["3"]),
        4: new Audio(zvuk["4"]),
        5: new Audio(zvuk["5"]),
        6: new Audio(zvuk["6"]),
        7: new Audio(zvuk["7"])
    };
    a.defaultplaybackRate = 1.0;
    var timefactor = 1;
    var history = [];
    var counter = 0;
    var ID = {
        random: 0,
        n: 0
    };
    var timeoutkey;
    $('a').click(function () {
        if (onoff === true && isplayBoo == false) {
            var select = $(this);
            id = select.attr('id');
            ID.n = id[3];
            if (id == 'start') {
                rigthtimestop();
                timeoutkey = setTimeout(function () {
                    rigthtime();
                }, 10000);
                gameset();
                fromrecord(0);
            }
            else {
                a[ID.n].play();
                /*    $('#btn' + nId).css('animation', 'blick1 0.5s');*/
                $('#btn' + ID.n).css('background-color', 'whitesmoke');
                navratoriginalnejfarby(ID.n);
                /* $('#btn' + nId).css('background-color', farba[nId]);*/
                if (history[counter] == ID.n) {
                    /*good*/
                    if (counter == history.length - 1) {
                        /*ak je to posledný pridaj ďalší ťah */
                        if (history.length == 12) {
                            win(0, 4, 0.1);
                            a['6'].play();
                            reset();
                        }
                        else {
                            gameset();
                            isplayBoo = true;
                            counter = 0;
                            setTimeout(function () {
                                fromrecord(0);
                            }, 1200);
                        }
                        /*plus jedna sekunda a spustí záznam*/
                    }
                    else {
                        counter++;
                    }
                    číslovač();
                }
                else {
                    /*wrong*/
                    a['5'].play();
                    Wrong();
                }
            }
        }
    });
    function rigthtime() {
        a['7'].play();
        $('#disp').text("! !");
        $('#disp').css('animation', 'blick1 0.5s');
        setTimeout(function () { Wrong(); }, 3000);
    }
    function rigthtimestop() {
        clearTimeout(timeoutkey);
    }
    function číslovač() {
        $('#disp').text(history.length);
    }
    function win(y, x, t) {
        timefactor = t;
        isplayBoo = true;
        if (x == 0)
            x = 4;
        if (y < 100) {
            $('#btn' + x).css('background-color', 'whitesmoke');
            navratoriginalnejfarby(x);
            y += 1;
            t += 0.01;
            x -= 1;
            {
            }
            $('H1').text('You win');
        }
        else {
            isplayBoo = false;
            $('H1').empty();
        }
        setTimeout(function () { win(y, x, t); }, 400 * timefactor);
    }
    function gameset() {
        ID.random = random_button();
        history.push(ID.random);
    }
    function random_button() {
        return Math.floor(Math.random() * 4 + 1);
    }
    function reset() {
        $('H1').empty();
        counter = 0;
        history = [];
    }
    function fromrecord(x) {
        rigthtimestop();
        isplayBoo = true;
        timefactor = 1 / (1.8 * history.length / ((x + 1) / 0.4));
        return Promise.delay(800 * timefactor)
            .then(function () {
            if (x < history.length) {
                a[history[x]].play();
                $('#btn' + history[x]).css('background-color', 'whitesmoke');
                navratoriginalnejfarby(history[x]);
                return fromrecord(x += 1);
            }
            else {
                isplayBoo = false;
                timeoutkey = setTimeout(function () {
                    rigthtime();
                }, 6000);
            }
        });
    }
    function navratoriginalnejfarby(twoID) {
        setTimeout(function () {
            $('#btn' + twoID).css('background-color', farba[twoID]);
        }, 300 * timefactor);
    }
    /*zvyšné tlačítka switch a strict*/
    $('#strict').click(function () {
        if (strictEnabled === true) {
            strictEnabled = false;
            $('#btnstrictcontrol').css('background-color', 'beige');
        }
        else {
            $('#btnstrictcontrol').css('background-color', 'orange');
            strictEnabled = true;
        }
    });
    $('#onoff').change(function () {
        if ($('#onoff').prop('checked')) {
            onoff = true;
            $('#disp').css('color', '#FF0000');
            $('#disp').text('--');
            $('#disp').css('animation', 'blick1 1s');
        }
        else {
            onoff = false;
            $('#disp').css('color', '#990000');
            $('#disp').text('-88-');
            $('#disp').css('animation', 'blick1 1s');
            reset();
        }
    });
    function Wrong() {
        if (strictEnabled === true) {
            reset();
        }
        else {
            counter = 0;
            číslovač();
            /*plus jedna sekunda a spustí záznam*/
            setTimeout(function () {
                fromrecord(0);
            }, 1500);
        }
    }
});