Typing Game

  const keys = [
  ['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'del'],
  ['tab', 'q', 'w', 'e', 'r', 't', 'y', 'u', 'i', 'o', 'p', '[', ']', '\\'],
  ['caps', 'a', 's', 'd', 'f', 'g', 'h', 'j', 'k', 'l', ';', '\'', 'return'],
  ['shift', 'z', 'x', 'c', 'v', 'b', 'n', 'm', ',', '.', '/', 'shift'],
  ['fn', 'ctrl', 'opt', '⌘', ' ', '⌘', 'opt', 'ctrl', 'fn'],
  ['↑'],
  ['←', '↓', '→']
];

const keyIds = [
  [192, 49, 50, 51, 52, 53, 54, 55, 56, 57, 48, 189, 187, 8],
  [9, 81, 87, 69, 82, 84, 89, 85, 73, 79, 80, 219, 221, 220],
  [20, 65, 83, 68, 70, 71, 72, 74, 75, 76, 186, 222, 13],
  [16, 90, 88, 67, 86, 66, 78, 77, 188, 190, 191, 16],
  [188, 17, 18, 91, 32, 91, 18, 17, 188],
  [38],
  [37, 40, 39]
];

const specialWidths = {
  del: 'w-24', tab: 'w-24', caps: 'w-28', return: 'w-24', shift: 'w-36', ' ': 'w-96'
};

const keyboard = document.getElementById('keyboard');

keys.forEach((row, rowIndex) => {
  const rowDiv = document.createElement('div');
  rowDiv.classList.add('flex', 'w-full', 'justify-center', 'items-start');

  row.forEach((key, keyIndex) => {
  const keyElement = document.createElement('kbd');
  keyElement.classList.add('flex', 'items-center', 'justify-center', 'm-1', 'text-center', 'border-2', 'rounded', 'bg-gray-500', 'text-white', 'border-gray-600', 'h-12');

  if (specialWidths[key]) {
    keyElement.classList.add(specialWidths[key]);
  } else {
    keyElement.classList.add('w-16');
  }

  keyElement.id = keyIds[rowIndex][keyIndex];
  keyElement.innerText = key;

  rowDiv.appendChild(keyElement);
  });

  keyboard.appendChild(rowDiv);
});

// DOM elements
const theTextBox = document.getElementById('enteredText');
const allTheKeys = document.getElementById('keyboard');
const cursor = document.getElementById('cursor');
const changeKeys = document.getElementsByClassName('shifter');
const capsLockKey = document.getElementById('20');
const shiftKey = document.getElementById('16');

const textToType = document.getElementById('textToType').innerText;
let currentIndex = 0;
let correctCount = 0;

const accuracyElement = document.getElementById('accuracy');
const timeElement = document.getElementById('time');
const wpmElement = document.getElementById('wpm');

let startTime = null;
let timerInterval = null;

// Constants
const SHIFT_KEY_CODE = 16;
const CAPS_LOCK_KEY_CODE = 20;
const BACKSPACE_KEY_CODE = 8;
const TAB_KEY_CODE = 9;

const SHIFTER_ARRAY = ['~', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', '{', '}', '|', ':', '"', '<', '>', '?'];
let originalShifterArray = Array.from(changeKeys).map(key => key.innerHTML);

// Event listeners
document.addEventListener('keydown', handleKeyPress);
document.addEventListener('keyup', handleKeyUp);
document.addEventListener('click', clearText);

function handleKeyPress(e) {
  const keyPressed = e.keyCode;
  const charPressed = e.key;
  const keyElement = document.getElementById(keyPressed);

  if (!startTime) {
    startTime = new Date();
    timerInterval = setInterval(updateTime, 1000);
  }

  if (keyElement) {
    keyElement.classList.add('bg-teal-500/70', 'shadow-lg', 'transform', 'scale-95');
  }

  if (keyPressed === SHIFT_KEY_CODE || keyPressed === CAPS_LOCK_KEY_CODE) {
    allTheKeys.classList.add('uppercase');
  }

  if (keyPressed === BACKSPACE_KEY_CODE) {
    handleBackspace();
    return;
  }

  if (keyPressed === TAB_KEY_CODE) {
    e.preventDefault();
    return;
  }

  if (charPressed.length === 1 && currentIndex < textToType.length) {
    if (textToType[currentIndex] === charPressed) {
      correctCount++;
      addCharacter(charPressed, 'text-green-500');
    } else {
      addCharacter(charPressed, 'text-red-500');
    }
    currentIndex++;
    if (currentIndex === textToType.length) {
      endGame();
    }
  }

  updateStats();
}

function handleKeyUp(e) {
  const keyDepressed = e.keyCode;
  const keyElement = document.getElementById(keyDepressed);

  if (keyElement) {
    keyElement.classList.remove('bg-teal-500/70', 'shadow-lg', 'transform', 'scale-95');
  }

  if (keyDepressed === SHIFT_KEY_CODE || keyDepressed === CAPS_LOCK_KEY_CODE) {
    allTheKeys.classList.remove('uppercase');
  }

  if (keyDepressed === SHIFT_KEY_CODE) {
    Array.from(changeKeys).forEach((key, index) => {
      key.innerHTML = originalShifterArray[index];
    });
  }
}

function addCharacter(char, className) {
  const span = document.createElement('span');
  span.innerText = char;
  span.classList.add(className);
  theTextBox.insertBefore(span, cursor);
}

function handleBackspace() {
  if (currentIndex > 0) {
    currentIndex--;
    theTextBox.removeChild(theTextBox.children[currentIndex]);
    updateStats();
  }
}

function clearText() {
  theTextBox.innerHTML = '<span id="cursor" class="cursor"></span>';
  cursor = document.getElementById('cursor');
  currentIndex = 0;
  correctCount = 0;
  startTime = null;
  clearInterval(timerInterval);
  updateStats();
}

function updateStats() {
  updateAccuracy();
  updateWPM();
}

function updateWPM() {
  const minutes = (new Date() - startTime) / 60000;
  const wordsTyped = correctCount / 5;
  const wpm = wordsTyped / minutes || 0;
  wpmElement.innerText = `${wpm.toFixed(2)}`;
}

function updateTime() {
  const seconds = Math.floor((new Date() - startTime) / 1000);
  timeElement.innerText = `${seconds}s`;
}

function updateAccuracy() {
  const accuracy = (correctCount / currentIndex) * 100 || 0;
  accuracyElement.innerText = `${accuracy.toFixed(2)}%`;
}

function endGame() {
  clearInterval(timerInterval);
  document.removeEventListener('keydown', handleKeyPress);
  document.removeEventListener('keyup', handleKeyUp);
}