@import url(https://fonts.googleapis.com/css?family=Alfa+Slab+One);
.console{
color:white;
}
*{

    -webkit-user-select: none; 
  -moz-user-select: none;     
  -ms-user-select: none; 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box; 
}
@font-face {
    font-family: 'Digital';
  src: url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.eot');
  src: url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.eot?#iefix') format('embedded-opentype'), url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.woff') format('woff'), url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.ttf') format('truetype'), url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.svg#https://jonathanfelipe.com.br/css3-calculator/font/Digital-7Italic') format('svg');
}
body {
  font-family: 'Alfa Slab One', cursive;
  background:url('http://www.webtexture.net/wp-content/uploads/2011/07/8-Seamless-Dark-Metal-Grid-Patterns_thumb02.jpg');
}
h1 {
  text-align:center;
  color:#101010;
  font-size:2em;
}
.clear{
clear:both;}
.holder{
font-family:Digital;
width:270px;
height:270px;
border-radius:10px;
box-shadow:2px 2px 2px rgba(0,0,0,.5);
padding:10px;
background:#2e2e2e;
}


.holder li {
display:inline-block;
list-style:none;
cursor:pointer;
background:white;
border:1px solid #efefef;
width:50px;
height:50px;
text-align:center;
line-height:50px;}

li.pushed {
transition: background-color 0.5s ease;
background-color:#c2c2c2;
}

li.restore {
transition: background-color 2s ease;
background-color:white;
}

.correctBord {
background-color:#177d0a;
}
.wrongBord {
background-color:#7d0a0a;
}



@media
only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

}

var alphabet = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"],
    btns = '',
    codeword = ['c','o','d','e'],
    correctArr = '',
    prev = 0,
    allcoords = [],
    rf = (Math.floor(Math.random() * 25))
    $body=$('body');
    
for(i=0;i<25;i++){
  rndm = Math.floor(Math.random() * alphabet.length)
  btns+='<li>'+alphabet[rndm]+'</li>';
}

$('.holder').empty().append(btns);
//первый ряд $('.holder li:nth-child(-n+5)').css('color','red');
// Последний столбец $('.holder li:nth-child(5n)').css('color','red');
// Первый столбец $('.holder li:nth-last-child(5n)').css('color','red');
// Последний ряд $('.holder li:nth-last-child(-n+5)').css('color','red');

$.each(codeword,function(i,v){
  rndarr = [];
  next = prev;
  
  if((!((next%4)===0)||(next===20)||(next===0))&&(allcoords.indexOf(next+1)===-1)) rndarr.push((next+1));
  if(!((next%5)===0)&&(allcoords.indexOf(next-1)===-1)) rndarr.push((next-1))
  if(!(next<5)&&(allcoords.indexOf(next-5)===-1)) rndarr.push((next-5))
  if(!((next>=20)&&(next<=24))&&(allcoords.indexOf(next+5)===-1)) rndarr.push((next+5))  

  coord = rndarr[(Math.floor(Math.random() * rndarr.length))];

  allcoords.push(coord);
  
  prev = coord;

  $('.holder li').eq(coord).empty().append(codeword[i])
})
    

      
$body.on('mousedown','li',function(e){
  cleanUp();
  $body.on('mousemove','li',function(e){
    $(this).addClass('pushed');
  }); 
});

$body.on('mouseup','li',function(e){
  $('.pushed').addClass('restore');
  $body.off('mousemove');
  finishTouch();
});
  
$('.holder').on('mouseleave',function(e){
  $('.pushed').addClass('restore');
  $body.off('mousemove');
})
    
window.addEventListener('touchstart', function(e) {
  e.preventDefault();
  e.stopPropagation();
  cleanUp();
  touchedThis(e.touches[0]).addClass('pushed')
}, false);

window.addEventListener('touchmove', function(e) {
  e.preventDefault();
  touchedThis(e.touches[0]).addClass('pushed')
}, false);

window.addEventListener('touchend', function(e) {
  e.preventDefault();
  finishTouch();
}, false);

function cleanUp(){
  $('.unlocked').removeClass('unlocked')
  $('.locked').removeClass('locked');
  $('.pushed').removeClass('pushed');   $('.holder').removeClass('correctBord').removeClass('wrongBord');
}

function finishTouch(){
  finish = []
  $.each($('.pushed'),function(){
    finish.push($(this).html())
  })
  
  if(finish.sort().join('')==codeword.sort().join('')) {
    $('.lock').addClass('unlocked');                                            
    $('.holder').addClass('correctBord')                                                     
  } else {
    $('.lock').addClass('locked');
    $('.holder').addClass('wrongBord') 
  };
}

function touchedThis(data){
  return $(document.elementFromPoint(data.clientX, data.clientY));
}