BC詳細画面

2024-04-24 04:51:42 +09:00
parent 2fba77b89f
commit 0a1e46dd37
9 changed files with 122 additions and 5 deletions
@@ -27,7 +27,7 @@
                <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 +124,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 +135,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 ?>
@@ -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');
@@ -0,0 +1,12 @@
+@font-face
+{
+  font-family: 'Nikumaru';
+  src: url(./assets/nikumaru.otf);
+}
+
+body
+{
+  background-color: black;
+  font-family: Nikumaru;
+}
+
@@ -0,0 +1,22 @@
+<!-- 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 href="./talk.css?<?= filemtime ('./talk.css') ?>" rel="stylesheet" />
+        <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="text/javascript"></script>
+    </body>
+</html>
+
@@ -0,0 +1,63 @@
+class
+Talk
+{
+  static
+  main ()
+  {
+    const canvas = new Canvas;
+
+    setInterval (() => canvas.resize (), 100);
+  }
+}
+
+
+class
+Canvas
+{
+  constructor ()
+  {
+    this.canvas = $ ('#canvas');
+    this.ctx = this.canvas[0].getContext ('2d');
+
+    this.bg = new Image ();
+    this.bg.src = './assets/bg.jpg';
+
+    this.bg.onload = () => this.resize ();
+  }
+
+  resize ()
+  {
+    this.canvas.width ($ (window).width ());
+    this.canvas.height ($ (window).height ());
+
+    this.redraw ();
+  }
+
+  redraw ()
+  {
+    this.putBG (this.canvas.width (), this.canvas.height ());
+  }
+
+  putBG (sizeX, sizeY)
+  {
+    const width = this.bg.width;
+    const height = this.bg.height;
+
+    const vertical = sizeY / sizeX > height / width;
+
+    console.log (sizeX, sizeY, width, height);
+
+    const zoom = vertical ? (sizeX / width) : (sizeY / height);
+
+    const x = vertical ? 0 : ((sizeX - width * zoom) / 2);
+    const y = vertical ? ((sizeY - height * zoom) / 2) : 0;
+
+    this.ctx.drawImage (this.bg,
+                        0, 0, width, height,
+                        x, y, width, height);
+  }
+}
+
+
+Talk.main ();
+
@@ -0,0 +1,11 @@
+<?php
+
+if ($_SERVER['HTTP_HOST'] === 'nizika.monster')
+  header ('location: //nizika.tv/talk.php');
+
+$dt = $_GET['dt'];
+$name = $_GET['chat'];
+$answer = $_GET['answer'];
+
+require_once './talk.frm.php';
+