import { el, Panel } from './hud';

/** The front door. One button, one piece of art, one joke. */
export class Title {
  private panel: Panel;

  constructor(day: number, onStart: () => void) {
    this.panel = new Panel('title');
    const wrap = el('div', 'title-wrap', this.panel.root);
    const art = el('img', 'title-art', wrap);
    art.src = '/assets/img/title_art.png';
    art.alt = '';
    const txt = el('div', 'title-txt', wrap);
    el('h1', undefined, txt, 'TOASTSIM');
    el('p', 'title-sub', txt, 'Bread goes in. You are judged.');
    const btn = el('button', 'btn', txt, day > 1 ? `RESUME — DAY ${day}` : 'START DAY 1');
    btn.addEventListener('click', () => {
      this.panel.dispose();
      onStart();
    });
    const keys = el('div', 'title-keys', txt);
    el('div', undefined, keys, 'SPACE — lever down, then pop');
    el('div', undefined, keys, 'DRAG — fish the right tool from the drawer');
    el('div', undefined, keys, 'DRAG — spread · WHEEL — tilt the knife · dip when empty');
    el('div', undefined, keys, 'ENTER — serve it to him');
  }
}