JSFiddle - React, Tailwind, and code Playground

by slikts

HTML

<script src="https://unpkg.com/queueable@4.0.4/dist/queueable.umd.js"></script>

JavaScript

const Delay = ms => new Promise(resolve => setTimeout(resolve, ms));

const player = async (name, { reader, writer }) => {
  while (true) {
    const { value: ball, done } = await reader.read();
    if (done === true) {
      console.log(`${name}: table's gone`);
      return;
    }
    ball.hits += 1;
    console.log(`${name} ${ball.hits}`);
    await Delay(100);
    await writer.write(ball);
  }
};

(async () => {
  const { writable, readable } = new TransformStream();
  const writer = writable.getWriter();
  const reader = readable.getReader();
  const table = { writer, reader };
  
  player("ping", table).catch(console.error);
  player("pong", table).catch(console.error);
  
  await writer.write({ hits: 0 });
  await Delay(1000);
  reader.cancel();
})();