HTML
<div id="play">
<h1 class="flash-message">Match the Clock</h1>
<div class="alert alert-danger" id="wrong-message">
<strong>Failed! </strong>
<button id="restart-btn" class="btn btn-default btn-warning">Restart</button>
</div>
<div id="right-message">
<div class="alert alert-success" >
<strong>Success!</strong>
<mark>You took <span id="time-taken"></span> secs</mark>
</div>
<mark>Your previous Best score was {{WIP}}> <span id="best-score"></span></mark>
</div>
<div id="play-ground">
<mark>Use Space to Freeze time in each Section</mark>
<h2>Match your current Time <span class="time"></span></h2>
<div class="random-num">
<h2 id="first"></h2>
<h2 id="second"></h2>
<h2 id="third"></h2>
<h2 id="fourth"></h2>
<h2 id="fifth"></h2>
<h2 id="sixth"></h2>
</div>
</div>
<div class="btn-holder">
<button id="start-btn" class="btn btn-default">Start</button>
</div>
</div>
SCSS
@mixin set-mid-pos($width){
width : $width;
margin:0 auto;
text-align : center;
}
html,body{
height : 100%;
width : 100%;
#play{
background : #3E805E;
height : 100%;
width : 100%;
#play-ground{
padding : 5.6rem 0;
@include set-mid-pos(94%);
display:none;
.time{
font-weight : bold;
color: white;
}
.random-num{
h2{
display:inline-block;
color : white;
font-weight : bold;
padding : 0 1.2rem;
}
}
}
h1{
@include set-mid-pos(80%);
color :white;
padding : 5rem 0;
padding-bottom : 2rem;
}
.btn-holder{
@include set-mid-pos(80%);
}
#wrong-message,#right-message{
@include set-mid-pos(80%);
margin-bottom : 3.2rem;
display : none;
}
}
}
JAVASCRIPT
class conversionMethods{
constructor(){
}
convertToTwoDigi(input){
if(parseInt(input).toString().length >= 2 ){
return parseInt(input).toString();
console.debug(inp);
}
else{
let inp = parseInt(input).toString().split('');
inp.push("0");
inp = inp.join('');
return inp;
}
}
generateRan(_max){
const max = _max;
let random = [];
for(let i = 0;i<max ; i++){
let temp = Math.floor(Math.random()*max);
if(random.indexOf(temp) == -1){
random.push(temp);
}
else
i--;
}
return random;
}
clearTimer(timer){
clearTimeout(timer);
}
checkResult(t,a,...b){
let str2 = b.toString().replace(/,/g , "");
let subStr = a.substr(0,str2.length);
if((subStr == str2) && str2.length==6){
document.getElementById('right-message').style.display = 'block';
document.getElementById('time-taken').innerHTML = t;
/*if(localStorage.bestScore < t){
localStorage.bestScore = t;
}*/
//document.getElementById('best-score').innerHTML = localStorage.bestScore;
document.getElementById('play-ground').style.display = 'none';
}
else if(!(subStr == str2)){
document.getElementById('wrong-message').style.display = 'block';
document.getElementById('play-ground').style.display = 'none';
}
}
}
class comp1 extends conversionMethods{
constructor(){
super();
}
startTimer(){
let arr = this.generateRan(10);
let that = this;
let counter = 0;
this.timer = setInterval(function(){
if(counter>=9){
counter = 0;
arr = that.generateRan(10);
}
counter++;
that.bindThis(arr[counter]);
},700);
}
bindThis(input){
let ele = document.getElementById('first');
ele.innerHTML = input;
}
clearTimeComp(){
this.clearTimer(this.timer);
}
getValue(){
return document.getElementById('first').innerHTML;
}
}
class comp2 extends conversionMethods{
constructor(){
super();
}
startTimer(){
let arr = this.generateRan(10);
let that = this;
let counter = 0;
this.timer = setInterval(function(){
if(counter>=9){
counter = 0;
arr = that.generateRan(10);
}
counter++;
that.bindThis(arr[counter]);
},505);
}
bindThis(input){
let ele = document.getElementById('second');
ele.innerHTML = input;
}
clearTimeComp(){
this.clearTimer(this.timer);
}
getValue(){
return document.getElementById('second').innerHTML;
}
}
class comp3 extends conversionMethods{
constructor(){
super();
}
startTimer(){
let arr = this.generateRan(10);
let that = this;
let counter = 0;
this.timer = setInterval(function(){
if(counter>=9){
counter = 0;
arr = that.generateRan(10);
}
counter++;
that.bindThis(arr[counter]);
},740);
}
bindThis(input){
let ele = document.getElementById('third');
ele.innerHTML = input;
}
clearTimeComp(){
this.clearTimer(this.timer);
}
getValue(){
return document.getElementById('third').innerHTML;
}
}
class comp4 extends conversionMethods{
constructor(){
super();
}
startTimer(){
let arr = this.generateRan(10);
let that = this;
let counter = 0;
this.timer = setInterval(function(){
if(counter>=9){
counter = 0;
arr = that.generateRan(10);
}
counter++;
that.bindThis(arr[counter]);
},620);
}
bindThis(input){
let ele = document.getElementById('fourth');
ele.innerHTML = input;
}
clearTimeComp(){
this.clearTimer(this.timer);
}
getValue(){
return document.getElementById('fourth').innerHTML;
}
}
class comp5 extends conversionMethods{
constructor(){
super();
}
startTimer(){
let arr = this.generateRan(10);
let that = this;
let counter = 0;
this.timer = setInterval(function(){
if(counter>=9){
counter = 0;
arr = that.generateRan(10);
}
counter++;
that.bindThis(arr[counter]);
},680);
}
bindThis(input){
let ele = document.getElementById('fifth');
ele.innerHTML = input;
}
clearTimeComp(){
this.clearTimer(this.timer);
}
getValue(){
return document.getElementById('fifth').innerHTML;
}
}
class comp6 extends conversionMethods{
constructor(){
super();
}
startTimer(){
let arr = this.generateRan(10);
let that = this;
let counter = 0;
this.timer = setInterval(function(){
if(counter>=9){
counter = 0;
arr = that.generateRan(10);
}
counter++;
that.bindThis(arr[counter]);
},460);
}
bindThis(input){
let ele = document.getElementById('sixth');
ele.innerHTML = input;
}
clearTimeComp(){
this.clearTimer(this.timer);
}
getValue(){
return document.getElementById('sixth').innerHTML;
}
}
class startClock extends conversionMethods{
constructor(hr,min,sec){
super();
this.currentTime = this.convertToTwoDigi(hr)+this.convertToTwoDigi(min)+this.convertToTwoDigi(sec);
}
initEvents(){
let startBtn = document.getElementById('start-btn');
let restartBtn = document.getElementById('restart-btn');
let playGround = document.getElementById('play-ground');
startBtn.onclick = (e)=> {
playGround.style.display = "block";
e.target.style.display = "none";
document.querySelectorAll('.time')[0].innerHTML = this.currentTime;
this.initTimers();
}
restartBtn.onclick = (e)=> {
let test1 = new comp1();
test1.clearTimeComp();
let test2 = new comp2();
test2.clearTimeComp();
let test3 = new comp3();
test3.clearTimeComp();
let test4 = new comp4();
test4.clearTimeComp();
let test5 = new comp5();
test5.clearTimeComp();
let test6 = new comp6();
test6.clearTimeComp();
playGround.style.display = "block";
let newTimeInst = new Date();
let timeStr = this.convertToTwoDigi(newTimeInst.getHours())+this.convertToTwoDigi(newTimeInst.getMinutes())+this.convertToTwoDigi(newTimeInst.getSeconds());
document.getElementById('wrong-message').style.display = 'none';
document.querySelectorAll('.time')[0].innerHTML = timeStr;
this.initTimers();
}
}
initTimers(){
//localStorage.bestScore = localStorage.bestScore || 0;
let spaceCount = 0;
let resultArr = [];
let test1 = new comp1();
test1.startTimer();
let test2 = new comp2();
test2.startTimer();
let test3 = new comp3();
test3.startTimer();
let test4 = new comp4();
test4.startTimer();
let test5 = new comp5();
test5.startTimer();
let test6 = new comp6();
test6.startTimer();
let trackTimedisp = 0;
let trackTimer = setInterval(function(){
trackTimedisp++;
},1000);
document.onkeyup = (event)=>{
if(event.keyCode == 32){
spaceCount++;
switch(spaceCount){
case 1:
test1.clearTimeComp();
resultArr.push(test1.getValue());
break;
case 2:
test2.clearTimeComp();
resultArr.push(test2.getValue());
break;
case 3:
test3.clearTimeComp();
resultArr.push(test3.getValue());
break;
case 4:
test4.clearTimeComp();
resultArr.push(test4.getValue());
break;
case 5:
test5.clearTimeComp();
resultArr.push(test5.getValue());
break;
case 6:
test6.clearTimeComp();
resultArr.push(test6.getValue());
break;
}
this.checkResult(trackTimedisp,this.currentTime.toString(),resultArr);
}
}
}
}
let newTimeInst = new Date();
//let timestr = newTimeInst.getHours().toString() + newTimeInst.getMinutes().toString() + newTimeInst.getSeconds().toString();
let initiateTime = new startClock(newTimeInst.getHours(),newTimeInst.getMinutes(),newTimeInst.getSeconds());
initiateTime.initEvents();
