const container=document.getElementById('container')
const grid=document.getElementById('grid')
const cover=document.getElementById('cover')
const startBtn=document.getElementById('play')
const scoreSpan=document.getElementById('score')
const scorePlus=document.getElementById('plus')
const gameover=document.getElementById('gameover')

//create the game grid
for (let row=0; row<4; row++){
  for (let col=0; col<4; col++){
    const square=document.createElement('div')
    const number=document.createElement('h1')
    square.appendChild(number)
    square.classList.add('square')
    grid.appendChild(square)

    const squareCover=square.cloneNode(true)
    cover.appendChild(squareCover)
  }
}
const squares=grid.querySelectorAll('.square')
const numbers=grid.querySelectorAll('.square h1')
const squareCovers=cover.querySelectorAll('.square')
const numberCovers=cover.querySelectorAll('.square h1')
let data=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
let score=0
let stepTimer //track if step/animation is undergoing
let step=96 //box size in px(how much to move)
let bigFontSize=41  //measure for grow letters effect
if (window.innerWidth<400) {
  step=squares[0].offsetWidth+6
  if (window.innerWidth<300) bigFontSize=28
  else bigFontSize=36
}
window.onresize=()=>{
  if (window.innerWidth<400) {
    step=squares[0].offsetWidth+6
    if (window.innerWidth<300) bigFontSize=28
    else bigFontSize=36
  }
  else {
    step=96
    bigFontSize=41
  }
}
let delay=200 //step/animation timer length in milliseconds
let elementsToUpdate=[] //queue for elements to be updated per step
let elementsToGrow=[] //elements that are result of combination

//For testing purpose
//let testArr=[[2,4,2,0], [4,4,4,0], [0,4,0,0], [4,4,0,0], [4,4,2,2], [4,2,2,4], [4,0,0,4], [0,2,0,2], [0,2,4,2]]
//let testData=[0,2,16,4,2,512,64,32,4096,4,0,128,256,8,1024,2048]

//creates list of empty spots(with grid index)
function emptySpots(){
  return data.reduce((empty, n, i)=>n===0 ? empty.concat(i) : empty, [])
}

function rollTwoOrFour(){
  const roll=Math.random()
  if (roll>0.9) return 4
  return 2
}

//parses data in a grid of rows/columns
function dataSets(direction){
  let sets=[]
  let counter=[0, 1, 2, 3]
  if (direction==='left' || direction==='up') counter=[3, 2, 1, 0]
  for (let i=0; i<4; i++){
    let a=i
    if (direction==='left' || direction==='right') a*=4
    let indices=counter.map(n=>{
      let b=n
      if (direction==='down' || direction==='up') b*=4
      return a+b
    })
    const numbers=indices.map(index=>data[index])
    sets.push({numbers, indices})
  }
  return sets
}

//check if anywhere on the grid there are repeating consecutive numbers
function hasConsecutive(){
  let rows=dataSets('right')
  let cols=dataSets('down')
  for (let i=0; i<4; i++){
    for (let e=0; e<3; e++){
      if(rows[i].numbers[e]===rows[i].numbers[e+1] || cols[i].numbers[e]===cols[i].numbers[e+1]) return true
    }
  }
  return false
}

function updateSquare(n, position, cover=false){
  let square
  let number
  if (cover) {
    square=squareCovers[position]
    number=numberCovers[position]
  } else {
    square=squares[position]
    number=numbers[position]
  }
  square.className='square'
  if (!n) {
    number.textContent=''
  } else {
    square.classList.add('n'+n)
    number.textContent=n
  }
}

function gameOver(){
  document.removeEventListener('keydown', control)
  container.removeEventListener('touchstart', handleTouchStart);
  container.removeEventListener('touchmove', handleTouchMove);
  
  console.log('GAME OVER')
  container.classList.add('gameover')
  gameover.style.display='initial'
}

//rolls a new number and puts on an empty(random) spot
function rollRandomEmptySpot(){
  const empty=emptySpots()
  if (!empty.length) return
  const randomSquare=Math.floor(Math.random()*empty.length)
  const twoOrFour=rollTwoOrFour()
  const index=empty[randomSquare]
  data[index]=twoOrFour
  updateSquare(twoOrFour, index)
  updateSquare(twoOrFour, index, true)
  if (empty.length===1 && !hasConsecutive()) gameOver()
  //console.log(`rolled random number ${twoOrFour} at index ${index}`)
}

//checks if a set of four numbers can be shifted
function canChangeSet(set, reverse=false){
  const lastSetIndex=set.length-1
  if (reverse && set[lastSetIndex]===0) {
    return canChangeSet(set.slice(0,lastSetIndex), reverse)
  }
  if (!reverse && set[0]===0) {
    return canChangeSet(set.slice(1))
  }
  if (set.includes(0)) {
    return true
  }
  if (!reverse){
    for (let i=0; i<lastSetIndex; i++){
      if (set[i]===set[i+1]) return true
    }
  } else {
    for (let i=lastSetIndex; i>0; i--){
      if (set[i]===set[i-1]) return true
    }
  }
  return false
}

function moveSquare(direction, index, steps){
  //console.log(`start moving cover on index ${index}`)
  let squareCover=squareCovers[index]
  squareCover.style.opacity=1
  squareCover.style.zIndex=steps+1
  squareCover.style.transition='transform '+delay/1000+'s'
  switch (direction){
    case 'left':
      squareCover.style.transform=`translateX(-${step*steps}px)`
      break
    case 'right':
      squareCover.style.transform=`translateX(${step*steps}px)`
      break
    case 'up':
      squareCover.style.transform=`translateY(-${step*steps}px)`
      break
    case 'down':
      squareCover.style.transform=`translateY(${step*steps}px)`
  }
}

function finishBoardUpdate(){
  stepTimer=false
  //console.log(`updating ${elementsToUpdate.join('|')}...`)
  elementsToUpdate.forEach(([number, index, newIndex])=>{

    //console.log(`reset cover ${index} & updating grid index ${newIndex} with number ${number}`)
    squareCovers[index].removeAttribute('style')

    updateSquare(number, newIndex)
    updateSquare(number, newIndex, true)
    updateSquare(0, index, true)
    if (elementsToGrow.includes(newIndex)) {
      let currentSize=bigFontSize
      if (number>1000 && bigFontSize!==28) {
        if (bigFontSize===41) currentSize=36
        else currentSize=32
      }
      numbers[newIndex].style.transition='none'
      numbers[newIndex].style.fontSize=currentSize+'px'
    }
  })
  elementsToUpdate=[]
  grid.offsetHeight //triggers document reflow to display style changes
  elementsToGrow.forEach(index=>{
    let number=numbers[index]
    number.removeAttribute('style')
    number.style.transition='font-size 0.4s'
    number.ontransitionend=()=>number.removeAttribute('style')
  })
  elementsToGrow=[] 
  rollRandomEmptySpot()
}

function updateScore(n){

  const getClassNumber=(n)=>{
    for (let i=2; i<10000; i*=2){
      if (n===i) return i
      if (n<i) return i/2
    }
  }
  scorePlus.className='n'+getClassNumber(n)
  scorePlus.textContent='+'+n
  scorePlus.style.transition='none'
  scorePlus.style.opacity=1
  grid.offsetHeight //triggers document reflow to display style changes
  score+=n
  scoreSpan.textContent=score
  scorePlus.style.transition='opacity 0.5s ease-in 0.3s'
  scorePlus.style.opacity=0
  scorePlus.ontransitionend=()=>scorePlus.removeAttribute('style')
}

function shiftDirection(direction){
  
  if (stepTimer) {
    clearTimeout(stepTimer)
    finishBoardUpdate()
  }
  
  let sets=dataSets(direction)
  let change=false

  for (let i=0; i<sets.length; i++){
    if (canChangeSet(sets[i].numbers)) {
      change=true
      break
    }
  }
  if (!change) return

  let scoreToAdd=0
  sets.forEach(({numbers: set, indices})=>{
    if (canChangeSet(set)){
      let steps=0
      let last=0

      for (let i=set.length-1; i>=0; i--){
        let number=set[i]
        let index=indices[i]
        if (!number) {
          steps++
        } else {
          if (number===last) {
            last=0
            steps++
            number=number*2
            scoreToAdd+=number
            elementsToGrow.push(indices[i+steps])
          } else {
            last=number
          }
          if (steps) {
            let newIndex=indices[i+steps]
            data[index]=0
            data[newIndex]=number
            updateSquare(0, index)  //set old position to zero
            moveSquare(direction, index, steps)
            elementsToUpdate.push([number, index, newIndex])
          }
        }
      }
    }
  })
  if (scoreToAdd) updateScore(scoreToAdd)
  stepTimer=setTimeout(finishBoardUpdate, delay)
}

function control(e){
  //console.log('...key has been pressed!')
  switch(e.keyCode){
    case 37:
      shiftDirection('left')
      break
    case 38:
      shiftDirection('up')
      break
    case 39:
      shiftDirection('right')
      break
    case 40:
      shiftDirection('down')
  }
}

function displayGrid(){ //draws whole grid on the html
  data.forEach((n, i)=>{
    updateSquare(n, i)
    updateSquare(n, i, true)
  })
}

function startGame(){
  console.log('Starting New Game!!!')
  data=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]
  //data=testData
  score=0
  scoreSpan.textContent=score
  container.className=''  //clears "game over" tag
  gameover.style.display='none'
  displayGrid()
  rollRandomEmptySpot()
  rollRandomEmptySpot()

  document.addEventListener('keydown', control)
  container.addEventListener('touchstart', handleTouchStart, false);
  container.addEventListener('touchmove', handleTouchMove, false);
  
}
startGame()
startBtn.addEventListener('click', startGame)

//Following touchscreen detect swipe movement is mostly borrowed by Stackoverflow
var xDown = null;                                                        
var yDown = null;

function handleTouchStart(evt) {
  const firstTouch = evt.touches[0];                                      
  xDown = firstTouch.clientX;                                      
  yDown = firstTouch.clientY;                                      
}   

function handleTouchMove(evt) {
  evt.preventDefault()
  if ( ! xDown || ! yDown ) return

  var xUp = evt.touches[0].clientX;                                    
  var yUp = evt.touches[0].clientY;
  var xDiff = xDown - xUp;
  var yDiff = yDown - yUp;
    
  if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {/*most significant*/
    if ( xDiff > 0 ) {
        /* right swipe */ 
      shiftDirection('left')
    } else {
        /* left swipe */
      shiftDirection('right')
    }                       
  } else {
    if ( yDiff > 0 ) {
      /* down swipe */
    shiftDirection('up')
    } else {
        /* up swipe */
      shiftDirection('down')
    }                                                                 
  }
  /* reset values */
  xDown = null;
  yDown = null;                                             
};

/*
// COLOR PALETTE
const body=document.body
const palette=document.createElement('div')
palette.style.display='flex'
body.appendChild(palette)
for (let i=2; i<10000; i*=2){
  let box=document.createElement('div')
  box.classList.add('square')
  box.style.width='60px'
  box.style.height='60px'
  box.classList.add('n'+i)
  let number=document.createElement('h1')
  number.textContent=i
  number.style.marginBlockEnd=0
  number.style.marginBlockStart=0
  box.appendChild(number)
  palette.appendChild(box)
}
*/