console.clear()
var min = Math.min(window.innerHeight, window.innerWidth)
var u = 48
var uu = u*2
var gb = document.querySelector('#gameBox')
var root = document.documentElement
var right = true
var level = 0

// root.style.setProperty('--numbers','rgba(0,0,0,1)')
var levels = [ 
  one= {
    name:1,
    player:[13],
    woodBox:[31],
    rock:[],
    river:[45,46,47,48,49,50,51,52,53],
    end:[67]
  },
  henry= {
    name:'henry',
    player:[18],
    woodBox:[57],
    rock:[],
    river:[6,15,24,33,42,51,60,69,78],
    end:[26]
  },   
  two= {
    name:[2],
    player:[10],
    woodBox:[30],
    rock:[20,22,24,38,40,42,56,58,60],
    river:[5,14,23,32,41,45,46,47,48,49,50],
    end:[70]
  },
  three= {
    name:3,
    player:[10],
    woodBox:[21],
    rock:[],
    river:[5,14,23,32,6,7,8,15,16,17,24,25,26,34,35,33,36,37,38,39,40,41,42,43,44,45,46,47,48,57,66,75,54,55,56,63,64,65,72,73,74],
    end:[70]
  },
  stanley= {
    name:'stanley',
    player:[0],
    woodBox:[20,56],
    rock:[],
    river:[4,13,31,36,37,38,39,40,41,42,43,44,49,58,67,76],
    end:[70]
  },
  eight= {
    name:8,
    player:[64],
    woodBox:[38,42],
    rock:[0,1,2,3,4,5,6,7,8,9,17,18,20,21,22,23,24,25,26,27,29,,30,31,32,33,35,45,47,48,49,50,51,53,54,55,56,57,58,59,60,62,63,71,72,73,74,75,76,77,78,79,80],
    river:[40],
    end:[16]
  },
  whatever= {
    "name":[],
    "player":["0"],
    "woodBox":["12","14","19","25","55","61","66","68"],
    "rock":[],
    "river":["13","20","22","24","27","29","31","33","35","36","37","38","39","40","41","42","43","44","45","47","49","51","53","56","58","60","67"],
    "end":["80"]
  },
  yep= {
    "name":[],
    "player":["31"],
    "woodBox":["28","34","46","52"],
    "rock":[],
    "river":["4","10","11","13","15","16","20","22","24","29","33","36","37","38","39","40","41","42","43","44","47","51","56","58","60","63","64","65","67","69","70","71","73","76","79"],
    "end":["49"]
  },
  {
    "name":[],
    "player":["40"],
    "woodBox":["4","30","31","32","36","39","41","44","48","49","50","76"],
    "rock":["11","15","19","25","55","61","65","69"],
    "river":["1","7","9","10","16","17","20","21","22","23","24","29","33","38","42","47","51","56","57","58","59","60","63","64","70","71","73","79"],
    "end":["0","8","72","80"]
  },
  {
    "name":[],
    "player":["0"],
    "woodBox":["10","13","52","55"],
    "rock":["27","28","29","30","31","33","34","35","36","37","38","39","40","56","57","58","60","61","62","76","78","79"],
    "river":["3","4","12","21","22","41","50","59","68","77"],
    "end":["80"]
  },
  five= {
    name:5,
    player:[10],
    woodBox:[16,37],
    rock:[31,38,42,49],
    river:[18,19,20,21,22,23,24,25,26,54,55,56,57,58,59,60,61,62],
    end:[70]
  },
  six= {
    name:6,
    player:[64],
    woodBox:[52],
    rock:[12,13,14,15,16,17,54,55,56,57,58,59,60,51,45,46,47,48,49,50,21,22,23,24,25,26],
    river:[6],
    end:[7]
  },
  {
    "name":[],
    "player":["66"],
    "woodBox":["13","43","68"],
    "rock":["7","11","15","17","19","21","23","25","29","33","39","47","49","51","55","57","59","63","65","71","73","79"],
    "river":["0","8","10","16","20","24","30","32","40","48","50","56","60","64","70","72","80"],
    "end":["37"]
  },
  smarty= {
    "name":[],
    "player":["43"],
    "woodBox":["65","70"],
    "rock":["10","11","16","23","25","32","34","38","41","52","76"],
    "river":["6","15","24","33","37","39","40","42","45","46","47","48","49","50","51","60","68","69","77","78"],
    "end":["13"]
  },
  {
    "name":[],
    "player":["80"],
    "woodBox":["24","46","67","79"],
    "rock":[],
    "river":["1","7","10","11","16","17","20","29","30","31","40","41","49","50","51","57","60","61","64","65","66","69","70","71","73","78"],
    "end":["8"]
  },
  {
    "name":[],
    "player":["72"],
    "woodBox":["25","65","51"],
    "rock":["2","6","9","13","15","17","20","27","31","35","38","42","45","49","53","56","60","63","67","71","78"],
    "river":["4","22","36","37","39","40","41","43","44","58","76"],
    "end":["8"]
  },
  {
    "name":[],
    "player":["10"],
    "woodBox":["13","40","67"],
    "rock":["4","22","31","36","37","46","47","48","49","58","76"],
    "river":["18","19","20","21","23","24","25","26","50","51","52","53","54","55","56","57"],
    "end":["45"]
  },
  seven= {
    name:7,
    player:[16],
    woodBox:[22,24,42,47,57],
    rock:[],
    river:[5,14,23,27,28,29,30,31,32,33,34,35,41,50,54,55,56,59,63,65,68,72,73,74,77],
    end:[64]
  },  
  stanley2= {
    name:'stanley2',
    player:[0],
    woodBox:[15,65],
    rock:[6,20,22,24,38,40,43,52,53,70,79],
    river:[36,37,39,41,42,44,49,58,67,76],
    end:[80]
  },
  nine= {
    name:9,
    player:[13],
    woodBox:[11,24],
    rock:[15,20,29,32,41,38,47,6,33,42,56,57,58,59,60,69,78],
    river:[3,12,21,30,39,48,66,67,68,75,77],
    end:[76]
  },
]

console.log(levels.length)
gb.style.width = (u*9) + 'px'
gb.style.height = (u*9) + 'px'
gb.style.backgroundSize = u+'px '+u+'px,'+u+'px '+u+'px' 

// var addBoxes = setInterval(addBox)

function levelEnd() {   
  setTimeout(function(){
    function addBox() {
      var b = document.createElement('div')
      b.id = ''
      b.className = 'box'
      b.style.width = u+'px'
      b.style.height = u+'px'
      if(document.querySelectorAll('.box')) {
        b.innerHTML = document.querySelectorAll('.box').length
      }  
      gb.appendChild(b)
      if(document.querySelectorAll('.box').length >= 81) {
        clearInterval(addBoxes)

        var bs = document.querySelectorAll('.box')
        var l = levels[level]
        // console.log(l)

        l.player.forEach(function(elm){
          bs[elm].classList.add('player')
        })
        
        l.end.forEach(function(elm){
          bs[elm].classList.add('end')
        })

        l.woodBox.forEach(function(elm){
          bs[elm].classList.add('woodBox')
        })      
        l.rock.forEach(function(elm){
          bs[elm].classList.add('rock')
          if(Math.random() < .5) {
            if(Math.random() < .5) {
              bs[elm].style.filter = 'sepia(.75)'
            } else {
              bs[elm].style.transform = 'scaleX(-1)'
            }
          }
        })
        l.river.forEach(function(elm){
          bs[elm].classList.add('river')
        })
      }
    }  

    if(levels.length - 1 < level) {
      gb.innerHTML = ''
      document.querySelector('#theend').style.opacity = '1'
    } else {
      gb.innerHTML = ''
      var addBoxes = setInterval(addBox)
      }    
  },100)  
}

levelEnd()
// MOVEMENT
var face = 0
window.addEventListener('keyup', function(e){  
  var pl = document.querySelector('#gameBox .player')  
  var b = document.querySelectorAll('.box')  
  var wb = document.querySelectorAll('.woodBox')  
  var num = Array.from(b).indexOf(pl)
  // console.log(num)
  if(e.keyCode == 37 && num % 9 !== 0) {
    face = 1
    if(pl.previousSibling.classList.length == 1 || pl.previousSibling.className == 'box river woodBox' || pl.previousSibling.className == 'box end') {
      pl.classList.remove('player')
      pl.previousSibling.classList.add('player')
    }
    if(pl.previousSibling.classList.contains('woodBox') && !pl.previousSibling.classList.contains('river') && (num - 1) % 9 !== 0 && !b[num - 2].classList.contains('rock')){
      pl.classList.remove('player')
      pl.previousSibling.classList.add('player')
      b[num - 1].classList.remove('woodBox')
      b[num - 2].classList.add('woodBox')
    }

    if(pl.previousSibling.className == 'box end player') {
      level++
      levelEnd()
    }
  }
  if(e.keyCode == 39 && (num + 1) % 9 !== 0) {
    face = 0
    if(pl.nextSibling.classList.length == 1 || pl.nextSibling.className == 'box river woodBox' || pl.nextSibling.className == 'box end') {
      pl.classList.remove('player')
      pl.nextSibling.classList.add('player')
    }  
    if(pl.nextSibling.classList.contains('woodBox') && !pl.nextSibling.classList.contains('river') && (num + 2) % 9 !== 0 && !b[num + 2].classList.contains('rock')){
      pl.classList.remove('player')
      pl.nextSibling.classList.add('player')
      b[num + 1].classList.remove('woodBox')
      b[num + 2].classList.add('woodBox')
    }

    if(pl.nextSibling.className == 'box end player') {
      level++
      levelEnd()
    }
  }
  if(e.keyCode == 38) {
    var num = Array.from(b).indexOf(pl)
    var thing = num - 9
    if(thing >= 0 && (b[thing].classList.length == 1 || b[thing].className == 'box river woodBox' || b[thing].className == 'box end')) {
      pl.classList.remove('player')
      b[thing].classList.add('player')
    }
    if(b[thing].classList.contains('woodBox') && !b[thing].classList.contains('river') && num - 18 >= 0  && !b[num - 18].classList.contains('rock')){
      pl.classList.remove('player')
      b[thing].classList.add('player')
      b[num - 9].classList.remove('woodBox')
      b[num - 18].classList.add('woodBox')
    }

    if(b[thing].className == 'box end player') {
      level++
      levelEnd()
    }
  }
  if(e.keyCode == 40) {
    var num = Array.from(b).indexOf(pl)
    var thing = num + 9
    if(thing < 81 && (b[thing].classList.length == 1 || b[thing].className == 'box river woodBox' || b[thing].className == 'box end')) {
      pl.classList.remove('player')
      b[thing].classList.add('player')
    }
    if(b[thing].classList.contains('woodBox') && !b[thing].classList.contains('river') && num + 18 <= 81 && !b[num + 18].classList.contains('rock')){
      pl.classList.remove('player')
      b[thing].classList.add('player')
      b[num + 9].classList.remove('woodBox')
      b[num + 18].classList.add('woodBox')
    }

    if(b[thing].className == 'box end player') {
      level++
      levelEnd()
    }
  }  
  setTimeout(function(){
    var pl = document.querySelector('#gameBox .player')
    if(face == 0) {
      pl.style.transform = 'scaleX(1)'
    } else {
      pl.style.transform = 'scaleX(-1)'
    }
  },10)  
})

window.addEventListener('keydown',function(){
  var pl = document.querySelector('#gameBox .player')
  pl.classList.add('ram')
  setTimeout(function(){
    pl.classList.remove('ram')
  },100)
})

function restartLevel() {
   if(levels.length - 1 < level) {
    level = 0
    document.querySelector('#theend').style.opacity = '0'
  } 
  levelEnd() 
}

gb.addEventListener('click', restartLevel)
window.addEventListener('keyup', function(e){
  if(e.keyCode == 32) {
    restartLevel()
  }
})

function getColor() {
  return 'hsl('+Math.random()*360+'deg, 75%, 50%)'
}

var down = -1
window.addEventListener('mousedown', function(e) { down = e.button; })
window.addEventListener('mouseup', function(e) { e.preventDefault(); down = -1; })
gb.addEventListener('contextmenu', function(e) { e.preventDefault(); })