Today 요약

1. 과제 구현하기

1. What I did?

1.1 과제 구현하기

기존에 wordle 게임에서는 정답을 입력하고 나서 정답 글자에 대한 표시가 키보드 말고 게임판 위에서만 나타나도록 구현되어 있었다. 하지만 과제로 키보드에도 동일하게 정답 글자에 대한 표시가 나올 수 있도록 구현하라는 요구사항이 있었다.

한 2시간 정도를 고민해서 해결하기는 했다. 이번 요구사항을 해결하면서 기존 버그도 해결하려고 했지만, 실패했다. 그래도 오늘 과제의 요구사항은 해결했으니, 그 부분에 대한 걸 적어보려고 한다.

일단 기존에 정답 글자에 따라서 색깔이 변화되는 부분을 가지고 있는 함수 안에서 처리하는 것이 효율적이라는 생각이었다.

const handleEnter = async () => {
  let answerCount = 0
  const response = await fetch('/answer')
  const CORRECT_ANSWER = await response.json()

  for (let i = 0; i < 5; i++) {
    const block = document.querySelector(
      `.stage-column[data-index="${attempts}${i}"]`
    )
    if (CORRECT_ANSWER[i] === block.innerText) {
      answerCount = answerCount + 1
      block.style.background = '#6AAA64'
    } else if (CORRECT_ANSWER.includes(block.innerText)) {
      block.style.background = '#C9B458'
    } else {
      block.style.background = '#787C7E'
    }
  }

  if (answerCount === 5) gameOver()
  if (answerCount < 5) {
    displayRetry()
    nextLine()
  } else nextLine()
}

그래서 handleEnter 함수 안에서 처리할 수 있도록 하는 고민을 시도했다. 일단 키보드에 있는 모든 키 값을 받아 올 수 있어야 한다고 생각했다. 그래서 querySelectorAll로 keyboard 안에 있는 모든 key값을 유사배열객체로 저장했다.

<section class="keyboard">
      <div class="keyboard-row">
        <button class="key" data-key="Q">Q</button>
        <button class="key" data-key="W">W</button>
        <button class="key" data-key="E">E</button>
        <button class="key" data-key="R">R</button>
        <button class="key" data-key="T">T</button>
        <button class="key" data-key="Y">Y</button>
        <button class="key" data-key="U">U</button>
        <button class="key" data-key="I">I</button>
        <button class="key" data-key="O">O</button>
        <button class="key" data-key="P">P</button>
      </div>
					... 중략
      </div>
    </section>

const keyBoard = document.querySelectorAll('.key')

그렇게 유사배열객체로 저장해놓은 것을 스프레드 연산자를 사용해서 배열로 바꾸고 그 배열을 다시 mapping 해서 각 아이템들마다 정답 글자와 비교해서 정답 글자와 mapping한 아이템들의 글자가 일치한다면 아이템의 글자, 즉 키보드의 글자의 배경 스타일을 기존에 정답 글자 배경 스타일과 동일하게 변경될 수 있도록 수정했다.)

const keyBoard = document.querySelectorAll('.key')
const keyBoardArr = [...keyBoard].map((item) => {
  if (CORRECT_ANSWER[i] === item.dataset.key) {
    item.style.background = '#6AAA64'
  }
})

그렇게 해서 정답을 입력하는 라인에서 하나라도 정답 글자가 나오면 키보드에도 정답 글자가 표시될 수 있도록 해서 해결했다.