nizika/broadcast/talk.js

class
Talk
{
  static
  main ()
  {
    const canvas = new Canvas;

    window.onresize = () => canvas.resize ();
  }
}


class
Canvas
{
  constructor ()
  {
    this.canvas = $ ('#canvas');
    this.ctx = this.canvas[0].getContext ('2d');

    (this.bg = new Image ()).src = './assets/bg.jpg';
    this.bg.onload = () => this.resize ();

    (this.nizika = new Image ()).src = './assets/nizika.png';
    this.nizika.onload = () => this.resize ();

    (this.talking = new Image ()).src = './assets/talking.png';
    this.talking.onload = () => this.resize ();

    (new FontFace ('Nikumaru', 'url(./assets/nikumaru.otf)')).load ().then (
        () => this.resize ());
  }

  resize ()
  {
    this.canvas[0].width = $ (window).width ();
    this.canvas[0].height = $ (window).height ();

    this.redraw ();
  }

  redraw ()
  {
    this.putBG ();
    this.putText (0, 0, 15, $ ('#dt').val ());
    this.putImage (this.nizika, 370, 260, 1.1);
    this.putImage (this.talking, 0, 0, 640 / 1024);
    this.putText (75, 43.75, 20, '> ' + $ ('#chat').val (),
                  undefined, undefined,
                  true);
    this.putText (62.5, 93.75, 31.25, $ ('#answer').val (), 'Nikumaru', '#c00000');
  }

  putBG ()
  {
    const [x, y, zoom] = this.convertPosition (0, 0);

    const width = this.bg.height * 4 / 3;
    const height = this.bg.height;

    this.ctx.drawImage (this.bg,
                        (852 - 640) / 2, 0, width, height,
                        x, y, width * zoom, height * zoom);
  }

  putImage (image, x, y, zoom = 1)
  {
    let zoom2

    [x, y, zoom2] = this.convertPosition (x, y);

    zoom *= zoom2

    this.ctx.drawImage (image,
                        0, 0, image.width, image.height,
                        x, y, image.width * zoom, image.height * zoom);
  }

  putText (x, y, size, text, style = 'sans-serif', colour = 'black',
           italic = false)
  {
    let zoom;

    [x, y, zoom] = this.convertPosition (x, y);

    size *= zoom;

    this.ctx.font = `${italic ? 'italic ' : ''}${Math.trunc (size)}px ${style}`;
    this.ctx.fillStyle = colour;
    this.ctx.textBaseline = 'top';
    this.ctx.fillText (text, x, y);
  }

  convertPosition (x, y)
  {
    const sizeX = this.canvas.width ();
    const sizeY = this.canvas.height ();

    const width = this.bg.height * 4 / 3;
    const height = this.bg.height;

    const vertical = sizeY / sizeX > height / width;

    const zoom = vertical ? (sizeX / width) : (sizeY / height);

    const baseX = vertical ? 0 : ((sizeX - width * zoom) / 2);
    const baseY = vertical ? ((sizeY - height * zoom) / 2) : 0;

    return [baseX + x * zoom, baseY + y * zoom, zoom];
  }
}


$ (() => Talk.main ());