<div class="background"></div>
<div id="center">
  <div id="board" class="board">
    <div class="line">
      <div class="no">L</div>
      <div class="notSpot">O</div>
      <div class="onSpot">D</div>
      <div class="no">I</div>
      <div class="no">N</div>
    </div>
  </div>
</div>
<div class="keyboard">
  <div class="kbline">
    <button class="kbkey" id="q">Q</button>
    <button class="kbkey" id="w">W</button>
    <button class="kbkey" id="e">E</button>
    <button class="kbkey" id="r">R</button>
    <button class="kbkey" id="t">T</button>
    <button class="kbkey" id="y">Y</button>
    <button class="kbkey" id="u">U</button>
    <button class="kbkey" id="i">I</button>
    <button class="kbkey" id="o">O</button>
    <button class="kbkey" id="p">P</button>
  </div>
  <div class="kbline" style="margin-left: 7px;">
    <button class="kbkey" id="a">A</button>
    <button class="kbkey" id="s">S</button>
    <button class="kbkey" id="d">D</button>
    <button class="kbkey" id="f">F</button>
    <button class="kbkey" id="g">G</button>
    <button class="kbkey" id="h">H</button>
    <button class="kbkey" id="j">J</button>
    <button class="kbkey" id="k">K</button>
    <button class="kbkey" id="l">L</button>
  </div>
  <div class="kbline" style="margin-left: 21px;">
    <button class="kbkey" id="z">Z</button>
    <button class="kbkey" id="x">X</button>
    <button class="kbkey" id="c">C</button>
    <button class="kbkey" id="v">V</button>
    <button class="kbkey" id="b">B</button>
    <button class="kbkey" id="n">N</button>
    <button class="kbkey" id="m">M</button>
    <button id="enter">Enter</button>
  </div>
</div>
<button id="delete">Delete</button>
<div id="controls" style="display: none;">
  <t id="unsaved">Make a New Board<br>To See Changes</t>
  <button id="makeButton" style="height: 30px;">New Board</button>
  <t>tries:</t>
  <input id="tries" style="width: 50px;" type="number" value="6" onchange="unsaved.style.display = 'block';"><br>
  <button id="mode">Easy Mode</button>
</div>
<div class="center" id="popup" style="display: none;">
  <div class="popup">
    <t id="triesText"></t>
    <div class="restart" id="restart">Restart</div>
  </div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap');
::-webkit-scrollbar{
  width: 0px;
  height: 0px;
}
:root{
  background: black;
}
*{
  margin: 0px;
  padding: 0px;
  font-family: Work Sans;
  color: white;
}
.background{
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0px;
  left: 0px;
  background: linear-gradient(45deg, #21002b, #2e0c00, #002606);
}
#center, .center{
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100vh;
}
.center{
  position: fixed;
  align-items: center;
}
.board{
  display: flex;
  flex-direction: column;
  justify-content: left;
  width: 560px;
  height: fit-content;
  background: rgba(100,100,100,0.1);
}
.line{
  display: flex;
  justify-content: left;
  margin-top: 10px;
}
.empty,.no,.notSpot,.onSpot{
  width: 100px;
  height: 100px;
  margin-left: 10px;
  text-align: center;
  font-size: 85px;
  outline: solid 1px grey;
}
.no, .kbno{ background: #464646 !important; }
.notSpot, .kbnotspot{ background: #a16421 !important; }
.onSpot, .kbspot{ background: #378f1b !important; }
#controls{
  position: fixed;
  background: rgba(100,100,100,0.1);
  width: 100px;
  height: 100vh;
}
#controls input{
  background: none;
  border: none;
}
#controls button{
  background: none;
  width: 100px;
  border: solid 1px grey;
  cursor: pointer;
  transition: all 0.1s;
}
#controls #makeButton:hover{
  border: solid 5px grey;
}
#controls #makeButton:focus{
  border: solid 5px #378f1b;
}
#controls #unsaved{
  position: fixed;
  bottom: 5px;
  font-size: 11px;
  color: red;
  display: none;
}
.keyboard{
  display: flex;
  flex-direction: column;
  position: fixed;
  right: calc(50% - 520px);
  bottom: calc(50vh - 34px);
  width: 222px;
  height: 68px;
}
.kbline{
  display: flex;
  flex-direction: row;
}
.kbkey, #enter, .kbspot, .kbnotspot, .kbno{
  background: rgba(100,100,100,0.1);
  border: solid 1px grey;
  width: 20px;
  height: 20px;
  margin-left: 2px;
  margin-top: 2px;
  text-align: center;
  text-justify: center;
}
#enter{
  display: none;
  width: 43px;
  font-size: 14px;
  padding-top: 2px;
}
#delete{
  display: none;
  position: fixed;
  right: calc(50% - 167px);
  bottom: 25px;
  width: 72px;
  height: 20px;
  transform: rotate(90deg);
  border: none;
  border-bottom: solid 1px grey;
  background: rgba(0,0,0,0.75);
  cursor: pointer;
}
@media (max-width: 1035px){
  .keyboard{
    right: calc(50% - 500px);
  }
}
@media (max-width: 996px){
  .keyboard{
    right: calc(50% - 121px);
    bottom: 0px;
    background: rgba(0,0,0,0.75);
    height: 72px;
  }
  .kbkey{
    cursor: pointer;
  }
  #enter{
    display: block;
    cursor: pointer;
  }
  #delete{
    display: block;
  }
}
.popup{
  text-align: center;
  width: 250px;
  height: 100px;
  background: rgb(70,70,70);
  border: solid 2px grey;
}
.restart{
  background: whitesmoke;
  width: 100px;
  height: 30px;
  font-size: 22px;
  color: black;
  text-align: center;
  margin-left: 75px;
  margin-top: 15px;
  cursor: pointer;
}

import {allWords} from  "https://codepen.io/conmann/pen/wvyjBbJ.js";
import {commonWords} from "https://codepen.io/conmann/pen/wvyjBbJ.js";
function id(string){ return d.getElementById(string); }

const d = document,
    center = id('center'),
    controls = id('controls'),
    board = id('board'),
    modeButton = id('mode'),
    unsaved = id('unsaved'),
    popup = id('popup'),
    popupTxt = id('triesText'),
    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'];
var i,
   ii,
   mouseX,
   chances,
   chanceNum,
   word,
   typing,
   pressedEnter,
   letters,
   canType,
   tempWord,
   words,
   wordType = 'all';

words = allWords; 
function changeWords(){
  if(wordType == 'all'){
    modeButton.innerHTML = 'Hard Mode';
    words = commonWords;
    wordType = 'common';
  }
  else{
    modeButton.innerHTML = 'Easy Mode';
    words = allWords;
    wordType = 'all';
  }
  unsaved.style.display = 'block';
}
modeButton.addEventListener("click", changeWords);

function makeBoard(){
  console.clear();
  popup.style.display = 'none'
  unsaved.style.display = 'none';
  canType = true;
  chances = id('tries').value * 1;
  chanceNum = 0;
  word = words[Math.round(Math.random() * words.length)];
  typing = '';
  board.style = 'height: ' + ((chances*110)+10) + 'px;'
  board.innerHTML = '';
  console.log('CHEATER >:(  the word is ' + word)
  i = 0;
  while(i < 26){
    d.getElementById(alphabet[i]).className = 'kbkey';
    i++
  }
  i = 0;
  while(i < chances){
    board.innerHTML += '<div id="' + i + '" class="line"></div>';
    ii = 0;
    while(ii < 5){
      id(i.toString()).innerHTML += '<div id="' + i + ',' + ii + '" class="empty"></div>';
      ii++
    }
    i++
  }
  windowResize();
}
makeBoard();
id('makeButton').addEventListener("click", makeBoard);
id('restart').addEventListener("click", makeBoard);

function setCharAt(str,index,chr) {
    if(index > str.length - 1){ return str; }
    return str.substring(0,index) + chr + str.substring(index + 1);
}
function mouseMove(e){
  mouseX = e.pageX;
  if(mouseX < 110 && mouseX > 2){
    controls.style.display = 'block'
  }
  else{   
    controls.style.display = 'none'
  }
}
addEventListener('mousemove', mouseMove, false);
function windowResize(){
  if(window.innerHeight < ((chances * 110 ) + 10)){
    center.style = 'align-items: top;';
  }
  else{
    center.style = 'align-items: center;'
  }
}
window.onresize = windowResize;
window.onkeydown = function(e){
  if(canType == true){
    pressedEnter = false;
    if(e.keyCode == 8){
      typing = typing.substring(0, typing.length - 1);
    }
    else if(e.keyCode == 13 && typing.length == 5 && allWords.includes(typing)){
      pressedEnter = true;
    }
    else if(typing.length < 5 && e.keyCode < 91 && e.keyCode > 64){
      typing += e.key;
    }
    update();
  }
}
function update(){
  if(pressedEnter == true){
    tempWord = word;
    i = 0;
    while(i < 5){
      d.getElementById(chanceNum + ',' + i).className = 'no';
      if(typing.charAt(i) == word.charAt(i)){
        d.getElementById(chanceNum + ',' + i).className = 'onSpot';
        tempWord = setCharAt(tempWord,i,'0');
      }
      i++
    }
    i = 0;
    while(i < 5){
      if(true == tempWord.includes(typing.charAt(i)) && typing.charAt(i) != word.charAt(i)){
        d.getElementById(chanceNum + ',' + i).className = 'notSpot';
        ii = 0;
        while(ii < 5){
          if(tempWord.charAt(ii) == typing.charAt(i)){
            tempWord = setCharAt(tempWord,ii,'1');
            ii = 5;
          }
          ii++
        }
      }
      i++
    }
    if(typing == word){
      canType = false;
    }
    console.log(tempWord);
    i = 0;
    while(i < 5){
      if(d.getElementById(typing.charAt(i)).className == 'kbkey'){
        d.getElementById(typing.charAt(i)).className = 'kbno';
      }
      if(tempWord.charAt(i) == '0'){
        d.getElementById(typing.charAt(i)).className = 'kbspot';
      }
      if(tempWord.charAt(i) == '1' && d.getElementById(word.charAt(i)).className != 'kbspot'){
        d.getElementById(word.charAt(i)).className = 'kbnotspot';
      }
      i++
    }
    if(typing == word){
      popupTxt.innerHTML = 'Congratulations!<br>You found it in ' + (chanceNum + 1) + (chanceNum == 0 ? ' try!<br>I suspect you cheated >:|' : ' tries!');
      popup.style.display = 'flex';
      return;
    }
    else if(chanceNum + 1 == chances){
      popupTxt.innerHTML = 'Sadly you didnt find the word.<br>The word was ' + word;
      popup.style.display = 'flex';
      return;
    }
    chanceNum++
    typing = '';
  }
  i = 0;
  while(i < 5){
    d.getElementById(chanceNum + ',' + i).innerHTML = typing.charAt(i);
    i++
  }
}
function addChar(char){
  if(canType == true){
    pressedEnter = false;
    if(char == 'enter' && typing.length == 5 && allWords.includes(typing)){
      pressedEnter = true;
    }
    if(char == 'delete'){
      typing = typing.substring(0, typing.length - 1);
    }
    if(char != 'enter' && char != 'delete' && typing.length < 5){
      typing += char;
    }
    update();
  }
}
function ac(char){
  id(char).addEventListener("click",() => addChar(char));
}
ac('enter');
ac('delete');
i = 0;
while(i < 26){
  ac(alphabet[i]);
  i++
}