Javascript에서 생성기를 사용하는 명령 패턴

function *player(maxpong = 10) {
  let i = -1;
  let resp = "pong"
  while (++i < maxpong) {
    resp = yield resp
    document.write(resp + "<br />")
  }
}

function play(gen, tag) {
  let state = gen.next (tag)
  switch (state.value) {
    case "ping" :
     play(gen, "pong")
    break;
    case "pong" :
     play(gen, "ping")
    break; 
    default: 
     console.log("end game")
  } 
}


play(player()) 

commander(robot());

function* robot() {
  const catURL = yield ["get-cat"];
  const imgTag = yield ["format", catURL];
  console.log(imgTag);
}
async function commander(gen, passBack) {
  let state = gen.next(passBack);
  switch (state.value ? state.value[0] : null) {
    case "get-cat":
      const res = await fetch("https://api.thecatapi.com/v1/images/search");
      const data = await res.json();
      return commander(gen, data[0].url);
    case "format":
      return commander(gen, `<img src="${state.value[1]}" />`);
  }
  if (!state.done) {
    commander(gen);
  }
}