[BC] 詳細画面 とりま動くものにはなった

broadcast/talk.css

@@ -1,12 +1,32 @@
+/* vim:set tabstop=2 softtabstop=2 expandtab :*/
+
 @font-face
 {
-  font-family: 'Nikumaru';
-  src: url(./assets/nikumaru.otf);
+  font-family:  'Nikumaru';
+  src:          url(./assets/nikumaru.otf);
+}
+
+html, body
+{
+  overflow: hidden;
 }
 
 body
 {
   background-color: black;
-  font-family: Nikumaru;
+}
+
+#canvas
+{
+  width:    100%;
+  height:   100%;
+  padding:  0;
+  margin:   0;
+  overflow: unset;
+  border:   none
+            !important;
+  outline:  none
+            !important;
+  display:  block;
 }
 

broadcast/talk.frm.php

@@ -6,7 +6,8 @@
         <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" />
+        <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 ?>" />

broadcast/talk.js

@@ -6,7 +6,7 @@ Talk
   {
     const canvas = new Canvas;
 
-    setInterval (() => canvas.resize (), 100);
+    window.onresize = () => canvas.resize ();
   }
 }
 
@@ -19,45 +19,98 @@ Canvas
     this.canvas = $ ('#canvas');
     this.ctx = this.canvas[0].getContext ('2d');
 
-    this.bg = new Image ();
-    this.bg.src = './assets/bg.jpg';
-
+    (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.width ($ (window).width ());
-    this.canvas.height ($ (window).height ());
+    this.canvas[0].width = $ (window).width ();
+    this.canvas[0].height = $ (window).height ();
 
     this.redraw ();
   }
 
   redraw ()
   {
-    this.putBG (this.canvas.width (), this.canvas.height ());
+    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 (sizeX, sizeY)
+  putBG ()
   {
-    const width = this.bg.width;
+    const [x, y, zoom] = this.convertPosition (0, 0);
+
+    const width = this.bg.height * 4 / 3;
     const height = this.bg.height;
 
-    const vertical = sizeY / sizeX > height / width;
+    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);
 
-    console.log (sizeX, sizeY, width, height);
+    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 x = vertical ? 0 : ((sizeX - width * zoom) / 2);
-    const y = vertical ? ((sizeY - height * zoom) / 2) : 0;
+    const baseX = vertical ? 0 : ((sizeX - width * zoom) / 2);
+    const baseY = vertical ? ((sizeY - height * zoom) / 2) : 0;
 
-    this.ctx.drawImage (this.bg,
-                        0, 0, width, height,
-                        x, y, width, height);
+    return [baseX + x * zoom, baseY + y * zoom, zoom];
   }
 }
 
 
-Talk.main ();
+$ (() => Talk.main ());
 

broadcast/talk.php

@@ -4,7 +4,7 @@ if ($_SERVER['HTTP_HOST'] === 'nizika.monster')
   header ('location: //nizika.tv/talk.php');
 
 $dt = $_GET['dt'];
-$name = $_GET['chat'];
+$chat = $_GET['chat'];
 $answer = $_GET['answer'];
 
 require_once './talk.frm.php';