지뢰찾기를 만들어보자 #11 - 사용자 인터페이스 변경 4/4

지난번 글에서 지뢰찾기 게임의 사용자 인터페이스를 변경 했었다. https://mc500.tistory.com/677 이번 글에서는 이어서 최고 점수 기록에 대한 부분을 추가로 변경해 보도록 하겠다.

7. High Score Board 에 이름 넣기

지난 번 각 레벨별로 최고 기록을 넣고 보니 최고 기록을 세워졌는지에 대한 부분을 사용자가 미처 인식하지 못하는 경우가 많을 수 있다. 따라서 최고 점수 갱신에 대한 확인과 함께 사용자의 이름을 입력 받아 Hight Score Board에 나타나도록 하는 부분을 추가해 보자.

최고 기록 정보에서 레벨별 최고 점수(score 필드) 그리고 그 기록을 세운 사람의 정보 (name 필드)를 같이 구성하도록 다음과 같이 구성해 볼 수 있다.

  highscores: {
    beginner: {
      name: 'AAA',
      score: 999
    },
    intermediate: {
      name: 'AAA',
      score: 999
    },
    expert: {
      name: 'AAA',
      score: 999
    },
  },

게임 초기화 코드에서 저장된 정보를 불러 변경된 형식에 맞춰서 로딩되도록 다음과 같이 코드를 변경한다.

this.highscores = ['beginner', 'intermediate', 'expert'].reduce((highscores, level) => {

  if (!highscores[level]) {
    highscores[level] = {
      name: 'AAA',
      score: 999
    }
  } else if (typeof highscores[level] == "number") {
    highscores[level] = {
      name: 'AAA',
      score: highscores[level]
    }
  }

  return highscores
}, highscores)

이 상태에서는 High Score Board가 형식에 맞지 않아 이상하게 나오게 된다. 따라서, 다음과 같이 HTML 코드를 변경한다.

<tr><td><b>Beginner</b></td><td>: {{highscores.beginner.name}}</td><td>{{highscores.beginner.score}} seconds</td></tr>
<tr><td><b>Intermediate</b></td><td>: {{highscores.intermediate.name}}</td><td>: {{highscores.intermediate.score}} seconds</td></tr>
<tr><td><b>Expert</b></td><td>: {{highscores.expert.name}}</td><td>: {{highscores.expert.score}} seconds</td></tr>

다음은 최고 기록을 갱신한 사용자의 이름을 입력을 받는 method를 구현한다. 방법은 다양하게 있지만 가장 간단한 것은 window.prompt()를 이용하는 것이다. 또한, 사용자가 이름을 입력하지 않거나 원하는 범위를 벗어난 경우에 대한 처리를 위해 다음과 같이 do-while 형태의 코드를 만들어 볼 수 있다.

getPlayerName() {
  let name = 'AAA'
  do {
    name = prompt('Congrats. You Win! Type your name.', name)
  } while(function(name){
    if (!name) {
      alert('Empty name')
      return true
    }
    if (name.length > 32) {
      alert('Over 32 characters')
      return true
    }
    return false
  }(name))

  return name
}

그리고, 이렇게 최고 기록이 갱신될 때 이름과 점수를 입력 받아 기록되도록 코드를 변경한다.

setHighscores(level, elapsed_time) {
  if (elapsed_time < this.highscores[level].score) {
    let name = this.getPlayerName()
    this.highscores[level] = {
        score: elapsed_time,
        name: name,
    }

    localStorage.setItem('highscores', JSON.stringify(this.highscores))
  }
},