html, body {
  width: 100%;
  height: 100%;
  padding: 6px;
  margin: 0;
  overflow: hidden;
}

#main {
  position: relative;
  display: inline-block;
}

#panel, #typed {
  border: solid 1px #000;
  line-height: 1.5;
  white-space: pre-wrap;
  margin: 0;
  padding: 18px 6px 6px 6px;
  color: #0006;
}

#panel {
  width: 600px;
  min-height: 400px;
}
#panel:empty {
  cursor: pointer;
}
#panel:empty::after {
  content: '鼠标点击后开始';
}

#typed {
  max-width: 600px;
  position: absolute;
  top: 0;
  border-color: transparent;
  color: #008;
  background-color: #eea6;
  background-clip: content-box;
  overflow: hidden;
}
#typed:empty {
  background-color: transparent;
}

#starting {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem;
}

#countdown {
  position: absolute;
  top: 0;
  right: 10px;
  opacity: 0.3;
}

const text = `If you already have experience making drawings with computers, you know that in that process you draw a circle, then a rectangle, a line, some triangles until you compose the image you want. That process is very similar to writing a letter or a book by hand - it is a set of instructions that do one task after another.

Shaders are also a set of instructions, but the instructions are executed all at once for every single pixel on the screen. That means the code you write has to behave differently depending on the position of the pixel on the screen. Like a type press, your program will work as a function that receives a position and returns a color, and when it's compiled it will run extraordinarily fast. 

Why are shaders fast? To answer this, I present the wonders of parallel processing.

Imagine the CPU of your computer as a big industrial pipe, and every task as something that passes through it - like a factory line. Some tasks are bigger than others, which means they require more time and energy to deal with. We say they require more processing power. Because of the architecture of computers the jobs are forced to run in a series; each job has to be finished one at a time. Modern computers usually have groups of four processors that work like these pipes, completing tasks one after another to keeping things running smoothly. Each pipe is also known as a thread.`;

function wait(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function starting(el, count = 3) {
  el.innerText = count;
  while(count--) {
    await wait(1000);
    el.innerText = count;
  }
  el.innerText = '';
}

function* typings(text) {
  for(let i = 0; i < text.length; i++) {
    const char = text[i];
    yield new Promise((resolve) => {
      document.addEventListener('keydown', function f({key}) {
        if(key === char) {
          document.removeEventListener('keydown', f);
          resolve(key);
        }
      });
    });
  }
}

async function countDown(el, sec) {
  while(sec--) {
    const minute = Math.floor(sec / 60);
    const second = sec % 60;
    const time = `${minute > 10 ? minute : `0${minute}`}:${second > 10 ? second : `0${second}`}`;
    el.innerText = time;
    await wait(1000);
  }
}

const typedEl = document.getElementById('typed');
const startingEl = document.getElementById('starting');
const countdownEl = document.getElementById('countdown');

const panel = document.getElementById('panel');
panel.addEventListener('click', start);

async function start() {
  panel.innerText = text;
  await starting(startingEl);
  const countDownPromise = countDown(countdownEl, 10);
  typedEl.innerText = '_';
  for(const typing of typings(text)) {
    const key = await Promise.race([countDownPromise, typing]);
    if(key) {
      typedEl.innerText = `${typedEl.innerText.slice(0, -1)}${key}_`;
    } else {
      break;
    }
  }
  console.log('结束');
}

function defer() {
  const deferred = {};
  deferred.promise = new Promise((resolve, reject) => {
    deferred.resolve = resolve;
    deferred.reject = reject;
  });
  return deferred;
}

const _state = Symbol('state');
const _checkers = Symbol('checker');

export class Signal {
  constructor(initState) {
    this[_state] = initState;
    this[_checkers] = new Map();
  }

  get state() {
    return this[_state];
  }

  set state(value) {
    // 每次状态变化时，检查未结束的 defer 对象
    [...this[_checkers]].forEach(([promise, {type, deferred, state}]) => {
      if(type === 'while' && value !== state // 当信号状态改变时，while 信号结束
        || type === 'until' && value === state // 当信号状态改变为对应的 state 时，until 信号结束
      ) {
        deferred.resolve(value);
        this[_checkers].delete(promise);
      }
    });
    this[_state] = value;
  }

  while(state) {
    const deferred = defer();
    if(state !== this[_state]) {
      // 如果当前状态不是 while 状态， while 的 deferred 结束
      deferred.resolve(this[_state]);
    } else {
      // 否则将它添加到 checkers 列表中等待后续检查
      this[_checkers].set(deferred.promise, {type: 'while', deferred, state});
    }
    return deferred.promise;
  }

  until(state) {
    const deferred = defer();
    if(state === this[_state]) {
      // 如果当前状态就是 until 状态， until 的 deferred 结束
      deferred.resolve(this[_state]);
    } else {
      // 否则将它添加到 checkers 列表中等待后续检查
      this[_checkers].set(deferred.promise, {type: 'until', deferred, state});
    }
    return deferred.promise;
  }

  delete(promise) {
    this[_checkers].delete(promise);
  }

  deleteAll() {
    this[_checkers].clear();
  }
}