Merge branch 'main' into NIZIKA_DEV-003

1 year ago · e0be154325
--- a/broadcast/assets/bg.jpg
+++ b/broadcast/assets/bg.jpg
--- a/broadcast/assets/nikumaru.otf
+++ b/broadcast/assets/nikumaru.otf
--- a/broadcast/assets/nizika.png
+++ b/broadcast/assets/nizika.png
--- a/broadcast/assets/talking.png
+++ b/broadcast/assets/talking.png
--- a/broadcast/common_module.js
+++ b/broadcast/common_module.js
@@ -0,0 +1,44 @@
 export default class
 CommonModule
 {
  static
  isWide (chr)
  {
    return chr.match (/[^\x01-\x7f]/) !== null;
  }

  static
  lenByFull (str)
  {
    return str.split ('').map (c => this.isWide (c) ? 1 : .5)
                         .reduce ((a, c) => a + c);
  }

  static
  indexByFToC (str, index)
  {
    let i = 0;
    let work = '';

    for (let c of str)
      {
        work += c;

        if (this.lenByFull (work) > index)
          break;

        i += 1;
      }

    return i;
  }

  static
  midByFull (str, start, length)
  {
    const trimmedLeft = str.slice (this.indexByFToC (str, start));

    return trimmedLeft.slice (0, this.indexByFToC (trimmedLeft, length));
  }
 }

--- a/broadcast/index.frm.php
+++ b/broadcast/index.frm.php
@@ -22,12 +22,18 @@
    </head>

    <body>
        <?php if (!($available)): ?>
            <div class="alert alert-danger" role="alert">
                <strong>【警報】</strong>AIニジカが落ちてるぬ゛〜゛ん゛（泣）
            </div>
        <?php endif ?>

        <div class="container my-5">
            <div class="accordion mb-5" id="accordion-filter">
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-filter" aria-controls="collapse-filter">
                            絞り込みてすと
                            絞り込み
                        </button>
                    </h2>

@@ -124,9 +130,9 @@
                                                $length,
                                                true)
                                   as $record): ?>
                        <div class="mb-4">
                        <div class="mb-4 message-block">
                            <div>
                                <?= $record['date_time'] ?>
                                <span class="message-block-dt"><?= $record['date_time'] ?></span>
                            </div>

                            <div>
@@ -135,11 +141,11 @@
                            </div>

                            <div style="color: blue">
                                &gt; <span style="font-style: italic"><?= $record['chat_message'] ?></span>
                                &gt; <span class="message-block-chat" style="font-style: italic"><?= $record['chat_message'] ?></span>
                            </div>

                            <div>
                                <?= $record['answer'] ?>
                                <span class="message-block-answer"><?= $record['answer'] ?></span>
                            </div>
                        </div>
                    <?php endforeach ?>
--- a/broadcast/index.php
+++ b/broadcast/index.php
@@ -7,6 +7,11 @@ const LOG_PATH = './log.txt';

 $log_data = [];

 exec ("(ps -Af | grep -e '^miteruzo' | grep 'python3 main.py') && (ps -Af | grep -e '^miteruzo' | grep 'obs')",
      $output, $exit_code);
 $available = $exit_code === 0;
 unset ($output, $exit_code);

 $page = (int) ($_GET['p'] ?? 1);
 $length = (int) ($_GET['max'] ?? 20);
 $asc = ($_GET['asc'] ?? 0) != 0;
--- a/broadcast/script.js
+++ b/broadcast/script.js
@@ -78,6 +78,15 @@ Script
          $.cookie ('expand-filter', '0');
        });

    $ ('.message-block').on ('click', function ()
        {
          const dt = $ (this).find ('.message-block-dt').text ();
          const chat = $ (this).find ('.message-block-chat').text ();
          const answer = $ (this).find ('.message-block-answer').text ();

          window.open (`./talk.php?dt=${dt}&chat=${chat}&answer=${answer}`);
        });

    if ($.cookie ('expand-filter') === '0')
    {
      $ ('#collapse-filter').removeClass ('show');
--- a/broadcast/talk.css
+++ b/broadcast/talk.css
@@ -0,0 +1,32 @@
 /* vim:set tabstop=2 softtabstop=2 expandtab :*/

@font-face
 {
  font-family:  'Nikumaru';
  src:          url(./assets/nikumaru.otf);
 }

 html, body
 {
  overflow: hidden;
 }

 body
 {
  background-color: black;
 }

 #canvas
 {
  width:    100%;
  height:   100%;
  padding:  0;
  margin:   0;
  overflow: unset;
  border:   none
            !important;
  outline:  none
            !important;
  display:  block;
 }

--- a/broadcast/talk.frm.php
+++ b/broadcast/talk.frm.php
@@ -0,0 +1,23 @@
 <!-- vim:set tabstop=4 softtabstop=4 expandtab :-->

 <!DOCTYPE html>
 <html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" href="./talk.css?<?= filemtime ('./talk.css') ?>" />
        <link rel="preconnect" href="./assets/nikumaru.otf" />
        <title>あほ</title>
        <input type="hidden" id="dt" value="<?= $dt ?>" />
        <input type="hidden" id="chat" value="<?= $chat ?>" />
        <input type="hidden" id="answer" value="<?= $answer ?>" />
    </head>

    <body>
        <canvas id="canvas"></canvas>

        <script src="./talk.js?<?= filemtime ('./talk.js') ?>" type="module"></script>
    </body>
 </html>

--- a/broadcast/talk.js
+++ b/broadcast/talk.js
@@ -0,0 +1,136 @@
 import CommonModule from './common_module.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,
                  ('> ' + ((CommonModule.lenByFull ($ ('#chat').val ()) <= 21)
                           ? $ ('#chat').val ()
                           : (CommonModule.midByFull ($ ('#chat').val (), 0, 19.5)
                              + '...'))),
                  undefined, undefined,
                  true);
    this.putText (62.5, 93.75, 31.25,
                  ((CommonModule.lenByFull ($ ('#answer').val ()) <= 16)
                   ? $ ('#answer').val ()
                   : CommonModule.midByFull ($ ('#answer').val (), 0, 16)),
                  'Nikumaru', '#c00000');
    if (CommonModule.lenByFull ($ ('#answer').val ()) > 16)
      {
        this.putText (62.5, 125, 31.25,
                      ((CommonModule.lenByFull ($ ('#answer').val ()) <= 32)
                       ? CommonModule.midByFull ($ ('#answer').val (), 16, 16)
                       : (CommonModule.midByFull ($ ('#answer').val (), 16, 14.5)
                          + '...')),
                      '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 ());

--- a/broadcast/talk.php
+++ b/broadcast/talk.php
@@ -0,0 +1,11 @@
 <?php

 if ($_SERVER['HTTP_HOST'] === 'nizika.monster')
  header ('location: //nizika.tv/talk.php');

 $dt = htmlspecialchars ($_GET['dt']);
 $chat = htmlspecialchars ($_GET['chat']);
 $answer = htmlspecialchars ($_GET['answer']);

 require_once './talk.frm.php';