Hangman Game - Dart - intro à la https://dart.academy/web-games-with-dart-hangman/

hangman.dart

HangmanGame class

int get wrongGuesses => wrongGuesses;
List<String> get wordToGuess => _wordToGuess;
String get fullWord => wordToGuess.join();

String get wordForDisplay => wordToGuess.map((String letter) => lettersGuessed.contains(letter) ? letter: "_").join();

// comprobar si cada letra de la palabra ha sido adivinada
bool get isWordComplete {
  for (String letter in _wordToGuess) {
    if (!lettersGuessed.contains(letter)) {
      return false;
    }
  }
  return true;
}

void newGame() {
  // aleatoreizar la lista de palabras
  wordList.shuffle();

  // dividir la primera palabra de la lista aleatoreizada en una lista de letras
  _wordToGuess = wordList.first.split('');

  // resetear el contador de intentos fallidos
  _wrongGuesses = 0;

  // 'limpiar' el juego de letras supuestas
  lettersGuessed.clear();

  // declarar el cambio (nueva palabra)
  _onChange.add(wordForDisplay);
}

void guessLetter(String letter) {
  // guardar letra supuesta
  lettersGuessed.add(letter);

  // si la letra supuesta está en la palabra, comprobar si se ha completado
  // alternativamente, comprobar el ahorcamiento del/a jugador/a
  if (_wordToGuess.contains(letter)) {
    _onRight.add(letter);

    if (isWordComplete) {
      _onChange.add(fullWord);
      _onWin.add(null);
    }
    else{
      _onChange.add(wordForDisplay);
    }
  }
  else {
    wrongGuesses++;

  _onWrong.add(_wrongGuesses);

  if (_wrongGuesses == hanged) {
    _onChange.add(fullWord);
    _onLose.add(null);
   }
 }
}

index.html

<div id="main">  
  <h1>Hangman</h1>
  <img id="gallows">
  <div id="word"></div>
  <div id="letters"></div>
  <button id="new-game">New Game</button>
</div>  

style.css

#main {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#main > * {
  margin: 10px;
}

#gallows {
  max-width: 300px;
}

#word {
  letter-spacing: .3rem;
  font-size: 2rem;
}

#letters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.letter-btn {
  width: 35px;
  height: 35px;
  margin: 5px 2px;
}