;console.clear();

/* My interactive version of a game inspired by a Codewars kata.
  // Wikipedia: https://en.wikipedia.org/wiki/Dots_and_Boxes

    The Game:
    1. Board is between 2 and 7 (represented as 1 row of boxes).
    2. Number of players is between 2 and [Board] size.
    3. Players take turns.
    4. If a player fills in a box, they go again.
*/

// @TODO: Need better State Mgmt than global vars
   // Perhaps localStorage. May do in React version.

let letsPlay1 = {},
    SVGLib = {};

// SVG injection thanks to: https://stackoverflow.com/a/21626701/638153

const mySVGHClicked = "<svg xmlns='http://www.w3.org/2000/svg' width='98' height='40'><circle cx='4' cy='20' r='4' stroke='green' stroke-width='0' fill='yellow'></circle><circle cx='94' cy='20' r='4' stroke='green' stroke-width='0' fill='yellow'></circle><line x1='8' y1='20' x2='90' y2='20' style='stroke:rgb(255,0,0); stroke-width:1;'></line></svg>";
SVGLib['mySVGHClicked64'] = window.btoa(mySVGHClicked);

const mySVGVClicked = "<svg xmlns='http://www.w3.org/2000/svg' width='40' height='90'><circle cx='20' cy='4' r='4' stroke='green' stroke-width='0' fill='yellow'></circle><circle cx='20' cy='94' r='4' stroke='green' stroke-width='0' fill='yellow'></circle><line x1='20' y1='8' x2='20' y2='80' style='stroke:rgb(0,0,255); stroke-width:1;'></line></svg>";
SVGLib['mySVGVClicked64'] = window.btoa(mySVGVClicked);

const mySVGHOpen = "<svg xmlns='http://www.w3.org/2000/svg' width='98' height='40'><circle cx='4' cy='20' r='4' stroke='green' stroke-width='0' fill='yellow'></circle><circle cx='94' cy='20' r='4' stroke='green' stroke-width='0' fill='yellow'></circle><line x1='8' y1='20' x2='28' y2='20' style='stroke:rgb(255,100,100); stroke-width:1;' stroke-dasharray='3,3'></line><line x1='70' y1='20' x2='90' y2='20' style='stroke:rgb(255,100,100); stroke-width:1;' stroke-dasharray='3,3'></line></svg>";
SVGLib['mySVGHOpen64'] = window.btoa(mySVGHOpen);

const mySVGVOpen = "<svg xmlns='http://www.w3.org/2000/svg' width='40' height='90'><circle cx='20' cy='4' r='4' stroke='green' stroke-width='0' fill='yellow'></circle><circle cx='20' cy='94' r='4' stroke='green' stroke-width='0' fill='yellow'></circle><line x1='20' y1='8' x2='20' y2='28' style='stroke:rgb(100,100,255); stroke-width:1;' stroke-dasharray='3,3'></line><line x1='20' y1='60' x2='20' y2='80' style='stroke:rgb(100,100,255); stroke-width:1;' stroke-dasharray='3,3'></line></svg>";
SVGLib['mySVGVOpen64'] = window.btoa(mySVGVOpen);

function Game(board, playerNames) {
  this.boardSize = this.isGoodType(board, Number) ? board : 2;     // 2 - 7
  this.playerNames = this.isGoodType(playerNames, Array, String) ? playerNames : [];
  this.numOfPlayers = this.playerNames.length; // 2 - [board]
  this.numOfBoxes = 1 << this.boardSize; // A.k.a., Math.pow(2, this.boardSize);
  this.linesPlayed = [];
  this.boxesPinned = [];
  this.numOfLines = (4 + ((this.boardSize-1)*3)) + ((this.boardSize-1) * (3 + ((this.boardSize-1)*2)));
  this.allBoxNodes = ((this.boardSize * 2) + 1) * ((this.boardSize * 2) + 1);
  this.players = Array.from(Array(this.numOfPlayers)).map( e => 0);
  this.curPlayer = 1;
  this.curLine = 0;
  this.curLineDir = '';
  // this.playListener = ()=>{};
  this.play = this.play.bind(this);
}

Game.prototype.createBoard = function() {
  const ourBoard = document.querySelector('.game-board'),
        mainBoard = ourBoard.querySelector('.main-board');

  // PUT PLAYER NAMES ON BOARD

  let displayPlayerNames = '';

  this.playerNames.forEach( (n,i) => {
    if (i === 0) {
      displayPlayerNames += '<span class="pname-' + i + ' active">' +
        '<playernum>' + (i + 1) + '</playernum><b>' + n + '</b> [ <score>0</score> ]</span> ';
    } else {
      displayPlayerNames += '<span class="pname-' + i + '">' +
        '<playernum>' + (i + 1) + '</playernum><b>' + n + '</b> [ <score>0</score> ]</span> ';
    }
  });

  ourBoard.querySelector('.main-board-stats').innerHTML = "<div>" + displayPlayerNames + "</div>";

  // console.log('mainBoard 1: ', mainBoard, mainBoard.children[0]);
  // console.log('mainBoard 2: ', mainBoard.children.length, mainBoard.children);

  // CLEAR ALL BOARD ELEMENTS IF SET PREVIOUSLY
  while (mainBoard.children[0]) {
    mainBoard.removeChild(mainBoard.children[0]);
  }
  mainBoard.style.width = (45 * ((this.boardSize * 2) + 1)).toString() + 'px';
  ourBoard.previousElementSibling.style.display = 'block';
  ourBoard.style.display = 'block';

  // We have our game instance and all its info regarding board size and players.
  // How to draw the board...?
      // Decided to go with a simple custom modal - 2-DIV approach; 1 mask.

  // Types of lines:
     // Light dashed - Clickable
     // Solid        - Clicked

  var createDiv = (idx, cssClass, clickLine) => {

    // This function is called from (right below) within a loop of "allBoxNodes".
    // `clickLine` is only counted and passed with horizontal and vertical clickable lines.

    let newElementOut = document.createElement('div'),
        newElementIn = document.createElement('div');
    // var tmpPlay = this.play.bind(this);
    // this.playListener = tmpPlay;

    if (cssClass.indexOf('lh') > 0) {
      newElementIn.setAttribute('class', 'div-svgH node-' + clickLine);
      newElementIn.style.backgroundImage = "url('data:image/svg+xml;base64," + SVGLib['mySVGHOpen64'] + "')";
      // newElementIn.addEventListener('click', e => {
        // console.log('clicked: ', clickLine); this.play(clickLine); });
      newElementOut.addEventListener('click', this.play); // console.log('clicked: ', e); // playListener
    }
    if (cssClass.indexOf('lv') > 0) {
      newElementIn.setAttribute('class', 'div-svgV node-' + clickLine);
      newElementIn.style.backgroundImage = "url('data:image/svg+xml;base64," + SVGLib['mySVGVOpen64'] + "')";
      // newElementIn.addEventListener('click', e => {
        // console.log('clicked: ', clickLine); this.play(clickLine); });
      newElementOut.addEventListener('click', this.play); // console.log('clicked: ', e); // playListener
    }
    newElementOut.setAttribute('class', cssClass);
    newElementOut.appendChild(newElementIn);
    return newElementOut;
  }

  let gridRow = 0,
      gridCol = 0,
      curClickNode = 1;

  for (let i = 0; i < this.allBoxNodes; i++) {

    if (gridRow % 2 === 0 && gridCol % 2 === 0) {
      mainBoard.appendChild(createDiv(i, 'mb-node mb-dot'));
    } else if (gridRow % 2 === 0 && gridCol % 2 !== 0) {
      mainBoard.appendChild(createDiv(i, 'mb-node mb-lh open', curClickNode)); // .play() is 1-based
      curClickNode++;
    } else if (gridRow % 2 !== 0 && gridCol % 2 === 0) {
      mainBoard.appendChild(createDiv(i, 'mb-node mb-lv open', curClickNode));
      curClickNode++;
    } else if (gridRow % 2 !== 0 && gridCol % 2 !== 0) {
      mainBoard.appendChild(createDiv(i, 'mb-node mb-space'));
    } else if (false) {
      mainBoard.appendChild(createDiv(i, 'mb-node mb-play'));
    }
    gridCol = ((i > 0) && ((i+1) % ((this.boardSize * 2) + 1) === 0)) ? 0 : gridCol + 1;
    gridRow = (gridCol === 0) ? gridRow + 1 : gridRow;
  }
}

Game.prototype.removeBoard = function() {
  const ourBoard = document.querySelector('.game-board');
  ourBoard.querySelector('.main-board')
  ourBoard.querySelector('.main-board-stats').innerHTML = "";
  ourBoard.previousElementSibling.style.display = 'none';
  ourBoard.style.display = 'none';
}

Game.prototype.isGoodType = function(param, type, subtype) {
  if (param.constructor === type && type === Array) {
    for (let i = 0; i < param.length; i++) {
      // Check elements inside Array for proper subtypes.
      if (param[i].constructor !== subtype) {
        throw new Error('Array subtype failed: [' + i + '] ' + 
                        param + ' -- ' + 
                        param[i].constructor + ' !== ' + subtype);
        return false;
      }
    }
  }
  // Ensure the element's type is as expected.
  if (param.constructor === type) {
    return true;
  } else {
    throw new Error('Input param type failed: ' + param.constructor + ' !== ' + type);
    return false;
  }
}

Game.prototype.play = function(e) {

  // See if play is good or not
  // If good, run check for sides === 4 (successful pins)
  // All 4-sided boxes that do not exist in [boxesPinned]
  // If found, allow to play again.
  // Did my first 'purposeful' recursive function

  // const linePlay = e; // MouseEvent(.target)
  // const linePlay = parseInt(Array.from(e.target.classList).filter(e=>e.indexOf('node-')===0)[0].split('-')[1], 10);
  const classListArr = Array.from(e.target.classList),
        classListNode = classListArr.filter(e=>e.indexOf('node-')===0),
          lineNum = classListNode[0].split('-')[1],
          linePlay = parseInt(lineNum, 10),
        classListDir = classListArr.filter(e=>e.indexOf('div-svg')===0),
          nodeDir = classListDir[0].split('svg')[1];

  // classListArr     // ["div-svgH", "node-9"]
  // classListNode    // ["node-9"]
  // lineNum typeof   // "9" "string"
  // linePlay typeof  //  9  "number"
  // classListDir     // ["div-svgH"]
  // nodeDir          // "H"
  // this.boardSize // 3
  // this.curPlayer // 1
  // linePlay       // 9

  this.gotABoxArr = []; // If non-empty, player pinned a box; Let player go again.

  // Check the play

  if (!this.isGoodType(linePlay, Number)) {
    // Cannot 'assume' value provided was indeed a number.
    throw new Error("Not a number? Not a Number!!");

  } else if (linePlay >= 1 && linePlay <= this.numOfLines && this.linesPlayed.indexOf(linePlay) === -1) {
    // GOOD PLAY: Good check directly after Number check and before others; Good checks come before bad.
    this.setLinePlayed(linePlay); // linesPlayed[] used in: checkIfBoxed(), and here in play()
    this.setCurLine(linePlay);    // Line in Play: Let's set the play line so other methods can access it.
    this.setCurLineDir(nodeDir);  // Line in Play's pointing direction: "H" | "V"
    this.tryPlay();

  } else if (this.linesPlayed.indexOf(linePlay) >= 0) {
    // already played (a.k.a., "How'd you do that?")
    throw new Error("How'd you do that? (...The UI should've disabled that option.)");

  } else if (linePlay < 0 || linePlay > this.numOfLines) {
    // play out of bounds (again with the, "How'd you do that?")
    throw new Error("Intruder alert! (...and, How'd you accomplish an out-of-bounds?)");

  } else {
    // No play (a.k.a., What else is there?)
    throw new Error("Wait... what happened? What'd you do?");
  }

  if (this.linesPlayed.length === this.numOfLines) {
    alert('Good game!');
    // Disable board // Enable 'Play Again' button
  } else  if (this.gotABoxArr.length === 0) { // If no boxes were filled; move to next player.
    this.changePlayer();
  }
  // console.log('Player\'s Turn: ', this.curPlayer);
  // console.log('Current Score: ', this.players);
  // console.log('boxesPinned: ', this.boxesPinned);

  // Scoreboard should automagically already be auto-updated with new stats
  // Wait, that's a SPA. This is JavaScript. Can JavaScript do declarative?
}

Game.prototype.setLinePlayed = function(newLinePlayed) {
  const expected = Number;
  if (newLinePlayed.constructor === expected) {
    this.linesPlayed.push(newLinePlayed);
    // Does .push() indicate a mutation of the var? Should I make a copy, push, and assign?
    // Although this method is supposed to act as a 'setter', so not sure how that works.
  } else {
    console.log('Error: Expected: ' + expected + ', Got: ', newLinePlayed.constructor)
  }
}

Game.prototype.setCurLine = function(linePlay) {
  this.curLine = linePlay; // The 'linePlay' param has already been vetted.
}

Game.prototype.setCurLineDir = function(linePlayDir) {
  this.curLineDir = linePlayDir;
}

Game.prototype.tryPlay = function() {

  const borderBoxes = this.getAdjacentBoxes();  // Array of boxes adjacent to selected line.

  borderBoxes.forEach( boxNum => {
    if (this.checkIfBoxed(boxNum)) {    // Run 'boxed in' (pinned) check.
                                        // If you're in here, you scored! Good job!!
      this.gotABoxArr.push(boxNum);     // Will capture if 1 or 2 boxes were pinned.
      this.players[this.curPlayer-1]++; // Scores (boxes pinned per player)
      this.boxesPinned.push({'box': boxNum, 'p': this.curPlayer });
      // ^ Array of objects: [{'box': 1, 'p': 2 }]

      // this.curPlayer   // 1
      // this.gotABoxArr   // [1]
      // this.boxesPinned // [{box: 1, p: 1}]
      // this.players     // [1, 0]
    }
  });

  // SET DASHED LINE TO SOLID
  this.updateCurLine();

  // PUT PLAYER NUM IN PINNED SQUARE
  this.updateBoxes();

  // UPDATE PLAYER SCORES
  this.updateScores();
}

Game.prototype.changePlayer = function() {
  const playerNodes = document.querySelectorAll('.main-board-stats div span');

  // Change CSS class name for `active` - (old) Current User
  playerNodes[this.curPlayer - 1].classList.remove('active');

  this.curPlayer = (this.curPlayer === this.numOfPlayers) ? 1 : this.curPlayer + 1;

  // Change CSS class name for `active` - (new) Current User
  playerNodes[this.curPlayer - 1].classList.add('active');
}

Game.prototype.updateScores = function() {
  // Update all scores
  // 
  let playerNodes = document.querySelectorAll('.main-board-stats div span'),
      playerNodeNum = '0';
  playerNodes.forEach( e => {
      // Not trusting the `i` to be consistently in order,
      // I'm instead grabbing each player's number from the node's class name.
    playerNodeNum = e.className.match(/pname-(\d+)/)[1];
      // playerNodeNum = e.classList.filter(e=>e.indexOf('pname-')===0)[0].split('-')[1],
      // I couldn't see filtering each classList on each playerNode. Hopefully `.match()` is quicker.
    e.getElementsByTagName('score')[0].innerHTML = this.players[playerNodeNum];
  });
}

Game.prototype.updateBoxes = function() {
  // Update boxes with player numbers
  // 
  let boxesNode = document.querySelectorAll('.mb-space');
  this.boxesPinned.forEach( (e, i) => {
    boxesNode[e.box - 1].innerHTML = e.p;
  });
}

Game.prototype.updateCurLine = function() {
  /** SET DASHED LINE TO SOLID
   *    (and remove listener)
   *    (and remove cursor/outline styling (.open))
   */
  let getSVG = document.querySelector('.node-' + this.curLine);

  // console.log('playing: ', this.curLine, this.curLineDir, getSVG);

  if (this.curLineDir.toUpperCase() === 'H') {
    getSVG.style.backgroundImage = "url('data:image/svg+xml;base64," + SVGLib['mySVGHClicked64'] + "')";
    getSVG.parentNode.classList.remove('open');
    getSVG.parentNode.removeEventListener('click', this.play); // playListener

    // console.log('getSVG.parentNode: ', getSVG.parentNode);

  } else if (this.curLineDir.toUpperCase() === 'V') {
    getSVG.style.backgroundImage = "url('data:image/svg+xml;base64," + SVGLib['mySVGVClicked64'] + "')";
    getSVG.parentNode.classList.remove('open');
    getSVG.parentNode.removeEventListener('click', this.play); // playListener

    // console.log('getSVG.parentNode: ', getSVG.parentNode);
  }
}

/*  // 1st line
    =(5  + (5 * 2) + 1) - (( (11 * 1) + 5) - D3)
    =IF( (V4 >= 1) AND (V4 <= 5); (5 * R5) + V4; "False")

    // 6th line (left of 1st box)
    =(5 + (5 * 2) + 1) - (( (11 * 1) + 5) - C4)
    =(T4 >= 5 + 1) AND (T4 <= 5 + 5)

    =IF( (boxBaseLineNum >= 1) AND (boxBaseLineNum <= 5); (5 * R5) + boxBaseLineNum; "False")
*/
Game.prototype.getAdjacentBoxes = function() {
  /**
  *  Get the box number to each side of the selected line.
  *
  *  In the case of the first and last rows, there is always only 1 box below or above it.
  */
  let boxedArray = [],
      lastRowFirstLine = this.numOfLines - this.boardSize + 1,
      lastRowFirstBox = (this.curLine >= lastRowFirstLine) ? (
        (this.boardSize * this.boardSize) - (this.numOfLines - this.curLine)
      ) : 0;

  if (this.curLine <= this.boardSize) { // First Row
    boxedArray.push(this.curLine);
    return boxedArray;
  }

  if (lastRowFirstBox > 0) {            // Last Row
    boxedArray.push(lastRowFirstBox);
    return boxedArray;
  }

  const boxRowBase = (this.boardSize * 2) + this.boardSize + 1, // =(5+(5*2)+1) // Base box row size; 5-board = [16]
        boxRowSize = (this.boardSize * 2) + 1, // =(5*2)+1 // Line count for each row; 5-board = [11]
        boxRowNum = (this.curLIne <= boxRowBase) ? 0 : Math.ceil((this.curLine - this.boardSize) / boxRowSize) - 1,
                       // CEILING(C4/((5*2)+1);1) // 0, 1, ..., boardSize (each row)
        boxBaseLineNum = boxRowBase - (( (boxRowSize * (boxRowNum + 1)) + this.boardSize) - this.curLine),
                       // Individual number 1-(16) [16]
                       // =( 5 + (5 * 2) + 1) - (( (11 * 1) + 5) - C4)
                       // =(5+(5*2)+1)-(((11*1)+5)-C4) // Each row, when being calc'd as a base, has 1-(16)
        boxNumBase = (this.boardSize * boxRowNum) + boxBaseLineNum,
                       // =IF ( ( T4 >= 5 + 1 ) AND ( T4 <= 5 + 5 ); ( 5 * R5 ) + T4 ; "False")
        // boxBelowTrue = (boxBaseLineNum >= 1) && (boxBaseLineNum <= this.boardSize),
                       // V4 = boxBaseLineNum // =(V4 >= 1) AND (V4 <= 5) // Nice stat, but not currently used.

        boxLeftNum =  (boxBaseLineNum >= (this.boardSize + 2) && 
                       boxBaseLineNum <= (this.boardSize + this.boardSize + 1)) ?
                                          (this.boardSize * boxRowNum) + (boxBaseLineNum - this.boardSize - 1) : 0,
                       // =IF ( V4 >= 5 + 2 ) AND ( V4 <= 5 + 5 + 2 )
                       // ( 5 * R11 ) + ( T10 - 5 )

        boxRightNum = (boxBaseLineNum >= (this.boardSize + 1) && 
                       boxBaseLineNum <= (this.boardSize + this.boardSize)) ? 
                                          (this.boardSize * boxRowNum) + (boxBaseLineNum - this.boardSize) : 0,
                       // =IF ( V4 >= 5 + 1 ) AND ( V4 <= 5 + 5 )

        boxAboveNum = (boxBaseLineNum >= ((this.boardSize * 2) + 2) && 
                       boxBaseLineNum <= ((this.boardSize * 3) + 1)) ?
                                          (this.boardSize * boxRowNum) + (boxBaseLineNum - boxRowSize) : 0;
                       // =IF ( V4 >= ((5 * 2) + 1) + 1) AND ( V4 <= ((5 * 3) + 1))
  // End of constant assignments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .^

  let boxBelowNum = 0;

  // Had restriction on bottm boxes due to initially developing for the top row.
  // In that top row, the bottom tier (6 and 7 in a 2x2) also have a bottom box,
  // but that bottom box tolerance had yet to be developed; calculation adopted.

  if (boxBaseLineNum >= 1 && boxBaseLineNum <= this.boardSize) {
    boxBelowNum = (this.boardSize * boxRowNum) + boxBaseLineNum;
  } else if (boxBaseLineNum > boxRowSize && (boxRowNum + 1) < this.boardSize) {
    boxBelowNum = (this.boardSize * boxRowNum) + (boxBaseLineNum - boxRowSize + this.boardSize);
  }                    // =IF ( (V4 >= 1) AND (V4 <= 5); V4 * R5; "False") // Box number or 0 (for none)

  // console.log('above: ', boxBaseLineNum, boxRowNum, boxRowSize);

  if (boxBelowNum > 0) boxedArray.push(boxBelowNum);
  if (boxLeftNum > 0) boxedArray.push(boxLeftNum);
  if (boxRightNum > 0) boxedArray.push(boxRightNum);
  if (boxAboveNum > 0) boxedArray.push(boxAboveNum);

  //   console.log('boxRowBase', boxRowBase);         // 16
  //   console.log('boxRowSize', boxRowSize);         // 11
  //   console.log('boxRowNum', boxRowNum);           // 3
  //   console.log('boxBaseLineNum', boxBaseLineNum); // 16
  //   console.log('boxNumBase', boxNumBase);         // 31

  //   console.log('boxAboveNum', boxAboveNum);       // 20
  //   console.log('boxBelowNum', boxBelowNum);       // 25

  //   console.log('boxLeftNum', boxLeftNum);         // 0
  //   console.log('boxRightNum', boxRightNum);       // 0

  //   console.log('boxedArray', boxedArray);         // [25, 20]

  return boxedArray;
  // return {
  //   'boxBelowNum': boxBelowNum,
  //   'boxLeftNum': boxLeftNum,
  //   'boxRightNum': boxRightNum,
  //   'boxAboveNum': boxAboveNum
  // };
}

Game.prototype.checkIfBoxed = function(boxNum) {
  let thisBox = [],
      notFound = 0,
      borderLines = this.get4BoxLines(boxNum);

  // TOP
  if (this.linesPlayed.indexOf(borderLines['top']) >= 0) {
    thisBox.push(borderLines['top']);
  } else { notFound = 'top'; }

  // LEFT
  if (this.linesPlayed.indexOf(borderLines['left']) >= 0) {
    thisBox.push(borderLines['left']);
  } else { notFound = 'left'; }

  // RIGHT
  if (this.linesPlayed.indexOf(borderLines['right']) >= 0) {
    thisBox.push(borderLines['right']);
  } else { notFound = 'right'; }

  // BOTTOM BOX
  if (this.linesPlayed.indexOf(borderLines['bottom']) >= 0) {
    thisBox.push(borderLines['bottom']);
  } else { notFound = 'bottom'; }

  // console.log('checkIfBoxed', boxNum, '|', thisBox, notFound, '|', borderLines['top'], this.linesPlayed);

  return (thisBox.length === 4) ? true : false;
}

Game.prototype.get4BoxLines = function(boxNum) {
  let boardR = Math.ceil(boxNum / this.boardSize) - 1,
      boardC = boxNum % this.boardSize === 0 ? this.boardSize : boxNum % this.boardSize,
      base = (((this.boardSize * 3) + 1 - this.boardSize) * boardR),
      top    = base + boardC,                               // =(((box5*3)+1-box5)*box5r2)+box5c1
      left   = base + this.boardSize + boardC,             // =(((box5*3)+1-box5)*box5r2)+box5+box5c1
      right  = base + this.boardSize + boardC + 1,         // =(((box5*3)+1-box5)*box5r2)+box5+box5c1+1
      bottom = base + ((this.boardSize * 2) + 1) + boardC; // =(((box5*3)+1-box5)*box5r2)+((box5*2)+1)+box5c1
  // console.log('get4BoxLines', boxNum, boardR, boardC, '|', top, left, right, bottom);
  return {
    'top': top,
    'left': left,
    'right': right,
    'bottom': bottom
  };
}

// const original = [1, 3, 4],
//       gameResults = [1, 3, 4, 6],
//       game = new Game(2);
// const original = [ 20, 21, 24, 26, 33, 34, 35, 38, 39 ],
//       gameResults = [20, 21, 24, 25, 26, 29, 30, 33, 34, 35, 38, 39],
//       game = new Game(4);

// console.log(game.play(original), "Should return '[" + gameResults + "]'");

// const letsPlay1 = new Game(5, 3, ['Keith', 'Seliena', 'Tiffany']);
// letsPlay1.play(49); // ^ board, players, playerNames
// letsPlay1.play(48); // Player 2
// letsPlay1.play(55); // Player 3
// letsPlay1.play(54); // Player 1
// letsPlay1.play(60); // Player 2
// letsPlay1.play(59); // Player 2
// letsPlay1.play(53); // Player 3
// ng1.play(2);

function adjustPlayerNames(dir, bsize) {
  // <Number>bsize is only used to accommodate board size decrements

  let playerNamesArr = document.getElementsByClassName('player-names');

  // Reset 'number of players' tooltip hint (activated when attempting to go too high/low).
  // clearHint();

  if (dir === 'up') {
    if (parseInt(document.getElementsByClassName('board-size')[0].value, 10) > playerNamesArr.length) {
      clearHint();
      // add one
      let tmpInput = document.createElement('input');
      tmpInput.type = "text";
      tmpInput.className = "player-names";
      playerNamesArr[0].parentNode.appendChild(tmpInput);
    } else {
      if (document.getElementsByTagName('tooltip')[0].classList.contains('tooltip-small')) {
        highlightHint(); // Maxed out. Highlight Tooltip for hint.
      }
    }

  } else if (dir === 'down') {
    // remove one
    if (playerNamesArr.length > 2) {
      clearHint();
      playerNamesArr[0].parentNode.removeChild(playerNamesArr[playerNamesArr.length-1]);
    } else {
      if (document.getElementsByTagName('tooltip')[0].classList.contains('tooltip-small')) {
        highlightHint(); // Min'd out. Highlight Tooltip for hint.
      }
    }

  } else if (dir === 'max') {
    clearHint();
    while (playerNamesArr[0] && playerNamesArr.length > bsize) {
      playerNamesArr[0].remove();
    }
  }
}

function highlightHint() {
  // document.getElementsByTagName('tooltip')[0].style.fontWeight = 'bold';
  document.querySelector('.tooltip-open').classList.add('bold');
  document.querySelector('.tooltip-open').style.color = 'red';
  document.querySelector('.tooltip-open').style.boxShadow = '1px 1px 2px 2px yellowgreen';
}

function dehighlightHint() {
  // document.getElementsByTagName('tooltip')[0].style.fontWeight = 'bold';
  document.querySelector('.tooltip-open').classList.remove('bold');
  document.querySelector('.tooltip-open').style.color = 'rgba(200,75,25,0.75)';
  document.querySelector('.tooltip-open').style.boxShadow = 'none';
}

function showHint() {
  // document.querySelector('.tooltip-content').style.display = 'inline-block';
  // console.log('cl: ', document.getElementsByTagName('tooltip')[0]);
  if (document.getElementsByTagName('tooltip')[0].classList.contains('tooltip-small')) {
    document.querySelector('.tooltip').style.zIndex = 2;
    document.getElementsByTagName('tooltip')[0].classList.remove('tooltip-small');
    document.getElementsByTagName('tooltip')[0].classList.add('tooltip-big');
  }
}

function clearHint() {
  dehighlightHint();
  let thisTip = document.getElementsByTagName('tooltip');

  // document.querySelector('.tooltip-content').style.display = 'none';
  document.querySelector('.tooltip').style.zIndex = 0;
  thisTip[0].classList.remove('tooltip-big');
  thisTip[0].classList.add('tooltip-small');
  // document.getElementsByClassName('tooltip-close')[0].innerHTML = '?';
  // console.log('click ttc cH', thisTip[0]);
}

function getName(curNames) {
  const rNames = ['Paper', 'Steckle', 'Lunarcey', 'Hydraple', 'D-31', 'Superr Duperr', 
                  'Fortwone', 'Atlassed', 'Everwood', 'Oak', 'Abovert', 'Lethion',
                  'Elmentts', 'Qemple', 'Curry Ahn', 'Parry Over', 'Peezee', 
                  'Central', 'Sentral', 'Cyglue', 'Get-a-Grip', 'Down Up', 
                  'Xissors', 'Yoo Doo', 'Marsent', 'Tuthedoreon Ish'],
        getPick = () => Math.floor(Math.random() * rNames.length);

  let tmpRun = 0;
  let keepCnt = 0;
  let tmpPick = '';
  const getNameTry = () => {
    if (keepCnt > 7)
      return;
    else
      keepCnt++;

    tmpPick = rNames[getPick()];
    if (curNames.includes(tmpPick)) {
      // console.log('getNameTry again: ', keepCnt, tmpPick, curNames);
      getNameTry();
    }
  }
  getNameTry();
  // console.log('GOT Pick: ', tmpPick);
  return tmpPick;
}

function preChecks() {
  let iBoardSize = document.querySelector('.board-size').value,
      iNumPlayers = document.getElementsByClassName('player-names');

  // @TODO: Need error-handling
  // (can pass back to the game board for feedback)

  if (isNaN(parseInt(iBoardSize, 10))) {
      throw new Error('Board size can only be a number (between 2 and 7, inclusive).');
  } else {
    // So far, so good.
    let iBoard = parseInt(iBoardSize, 10),
        iPlayers = iNumPlayers.length;

    if (iBoard < 2 || iBoard > 7) {
      throw new Error('Board size can only be between 2 and 7, inclusive.');
    } else {
      // So far, so good, good. (We can trust iBoard to be a number between 2 and 7.)
      if (iNumPlayers.length < 2 || iNumPlayers.length > iBoard) {
        throw new Error('Number of players can only be between 2 and the size of the board, inclusive.');
      } else {
        // So far, so good, good... good. (Number of names [iNumPlayers] is a good count.)
        let playerNamesArr = Array.from(iNumPlayers),
            curNames = [],
            regCheck = /^[a-z0-9\s_\-']+$/i,
            nameErrors = [];
        // Names can only contain A-Z 0-9 \W _ - '

        for (let ii = 0; ii < playerNamesArr.length; ii++) {
          if (playerNamesArr[ii].value.length !== 0) {
            // A name was entered for this field #
            if (regCheck.test(playerNamesArr[ii].value)) {
              // Passed our RegExp check
              curNames[ii] = playerNamesArr[ii].value;
            } else {
              // An invalid character? Log it, and assign something else.
              curNames[ii] = getName(curNames);
              nameErrors.push({
                playerNum: ii, 
                nameOld: playerNamesArr[ii].value, 
                nameNew: curNames[ii]
              });
            }
          } else {
            curNames[ii] = getName(curNames);
          }
          // /[a-z0-9\w]/gi.test(t1)   // My pitiful first-thought attempt
          // /^[a-z0-9\W]+$/i.test(t1) // https://stackoverflow.com/a/389022/638153
        }
        // console.log('preChecks Complete: ', curNames, nameErrors);
        letsPlay(iBoard, curNames, nameErrors);
        // iNumPlayers
        // And now we're really good! Silver-like!
        /*
          this.boardSize = this.isGoodType(board, Number) ? board : 2;       // 2 - 7
          this.numOfPlayers = this.isGoodType(players, Number) ? players : 2; // 2 - [board]
          this.playerNames = this.isGoodType(playerNames, Array, String) ? playerNames : [];
          this.numOfBoxes = 1 << this.boardSize; // A.k.a., Math.pow(2, this.boardSize);
          this.linesPlayed = [];
          this.boxesPinned = [];
          this.numOfLines = (4 + ((this.boardSize-1)*3)) + ((this.boardSize-1) * (3 + ((this.boardSize-1)*2)));
          this.players = Array.from(Array(this.numOfPlayers)).map( e => 0);
          this.curPlayer = 1;
          this.curLine = 0;
        */
      }
    }
  }
}

function letsPlay(lpBoardSize, lpCurNames, lpNameErrors) {

  // @TODO: Create a queue so multiple games can be played.

  letsPlay1 = new Game(lpBoardSize, lpCurNames);
  letsPlay1.createBoard();
  
  // This will get called when a <div> on the board is clicked.
  // letsPlay1.play(49); // ^ board, playerNames
}
function clearGame() {
  letsPlay1.removeBoard();
  letsPlay1 = {};
}

window.onload = function() {
  document.querySelector('.start-it-button').addEventListener('click', () => {
    clearHint();
    preChecks();
    // Check all inputs
    // Assign inputs to variables
    // Add functional buttons as needed.
  });
  document.querySelector('.main-board-close').addEventListener('click', () => {
    clearGame(letsPlay1);
  });
  document.getElementsByClassName('board-size')[0].addEventListener('change', (e) => {
    adjustPlayerNames('max', parseInt(e.target.value, 10));
  });
  document.getElementsByClassName('players-count-up')[0].addEventListener('click', () => {
    adjustPlayerNames('up');
  });
  document.getElementsByClassName('players-count-down')[0].addEventListener('click', () => {
    adjustPlayerNames('down');
  });
  document.querySelector('.tooltip .tooltip-open').addEventListener('click', () => {
    showHint();
  });
  document.querySelector('.tooltip .tooltip-close').addEventListener('click', () => {
    clearHint();
  });
  document.getElementsByClassName('player-names')[0].addEventListener('change', (e) => {
    clearHint();
  });
  document.getElementsByClassName('player-names')[1].addEventListener('change', (e) => {
    clearHint();
  });
  document.querySelector('.main-board-background').addEventListener('change', (e) => {
    document.querySelector('.main-board').style.backgroundColor = e.target.value;
  })
  document.addEventListener('keydown', function(e) {
    // [event.keyCode] is deprecated.
    // [event.key] is its replacement.
    // [event.code] is not supported well (2017-11-07).
    if (e.key.toLowerCase() === 'escape') { // ESCAPE
      if (Object.keys(letsPlay1).length !== 0 || letsPlay1.constructor !== Object) {
        if (window.confirm("Do you really want to quit?")) { 
          clearGame(letsPlay1);
        }
      }
    }
  });
}