hangman.dart

import 'dart:async';  
import 'dart:html';  


const List<String> wordList = const ["PLENTY","ACHIEVE","CLASS","STARE","AFFECT","THICK","CARRIER","BILL","SAY","ARGUE","OFTEN","GROW","VOTING","SHUT","PUSH","FANTASY","PLAN","LAST","ATTACK","COIN","ONE","STEM","SCAN","ENHANCE","PILL","OPPOSED","FLAG","RACE","SPEED","BIAS","HERSELF","DOUGH","RELEASE","SUBJECT","BRICK","SURVIVE","LEADING","STAKE","NERVE","INTENSE","SUSPECT","WHEN","LIE","PLUNGE","HOLD","TONGUE","ROLLING","STAY","RESPECT","SAFELY"];

const List<String> imageList = const [
  "https://i.imgur.com/kReMv94.png",
  "https://i.imgur.com/UFP8RM4.png",
  "https://i.imgur.com/9McnEXg.png",
  "https://i.imgur.com/vNAW0pa.png",
  "https://i.imgur.com/8UFWc9q.png",
  "https://i.imgur.com/rHCgIvU.png",
  "https://i.imgur.com/CtvIEMS.png",
  "https://i.imgur.com/Z2mPdX0.png"
];

const String winImage = "https://i.imgur.com/QYKuNwB.png";

void main() {
  
}

class HangmanGame {
  static const int hanged = 7;

  final List<String> wordList;
  final Set<String> lettersGuessed = new Set<String>();

  List<String> _wordToGuess;
  int _wrongGuesses;

  // 3.4 Swimming Upstream
  StreamController<Null> _onWin = new StreamController<Null>.broadcast();
  Stream<Null> get onWin => _onWin.stream;

  StreamController<Null> _onLose = new StreamController<Null>.broadcast();
  Stream<Null> get onLose => _onLose.stream;

  StreamController<Null> _onWrong = new StreamController<int>.broadcast();
  Stream<Null> get onWrong => _onWrong.stream;

  StreamController<Null> _onRight = new StreamController<String>.broadcast();
  Stream<Null> get onRight => _onRight.stream;

  StreamController<Null> _onChange = new StreamController<String>.broadcast();
  Stream<Null> get onChange => _onChange.stream;

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>

styles.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;
}