diff --git a/broadcast/assets/nizika.png b/broadcast/assets/nizika.png
new file mode 100644
index 0000000..35de93d
Binary files /dev/null and b/broadcast/assets/nizika.png differ
diff --git a/broadcast/assets/talking.png b/broadcast/assets/talking.png
index 66eeffe..3bf53d8 100644
Binary files a/broadcast/assets/talking.png and b/broadcast/assets/talking.png differ
diff --git a/broadcast/talk.css b/broadcast/talk.css
index 3a85a6a..c126633 100644
--- a/broadcast/talk.css
+++ b/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;
}
diff --git a/broadcast/talk.frm.php b/broadcast/talk.frm.php
index fc4928f..22f5af4 100644
--- a/broadcast/talk.frm.php
+++ b/broadcast/talk.frm.php
@@ -6,7 +6,8 @@
-
+
+
あほ
diff --git a/broadcast/talk.js b/broadcast/talk.js
index a2c66a0..56e8c33 100644
--- a/broadcast/talk.js
+++ b/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 ());
diff --git a/broadcast/talk.php b/broadcast/talk.php
index ded54f3..0df22a1 100644
--- a/broadcast/talk.php
+++ b/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';