@@ -27,7 +27,7 @@ | |||||
<div class="accordion-item"> | <div class="accordion-item"> | ||||
<h2 class="accordion-header"> | <h2 class="accordion-header"> | ||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-filter" aria-controls="collapse-filter"> | <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-filter" aria-controls="collapse-filter"> | ||||
絞り込みてすと | |||||
絞り込み | |||||
</button> | </button> | ||||
</h2> | </h2> | ||||
@@ -124,9 +124,9 @@ | |||||
$length, | $length, | ||||
true) | true) | ||||
as $record): ?> | as $record): ?> | ||||
<div class="mb-4"> | |||||
<div class="mb-4 message-block"> | |||||
<div> | <div> | ||||
<?= $record['date_time'] ?> | |||||
<span class="message-block-dt"><?= $record['date_time'] ?></span> | |||||
</div> | </div> | ||||
<div> | <div> | ||||
@@ -135,11 +135,11 @@ | |||||
</div> | </div> | ||||
<div style="color: blue"> | <div style="color: blue"> | ||||
> <span style="font-style: italic"><?= $record['chat_message'] ?></span> | |||||
> <span class="message-block-chat" style="font-style: italic"><?= $record['chat_message'] ?></span> | |||||
</div> | </div> | ||||
<div> | <div> | ||||
<?= $record['answer'] ?> | |||||
<span class="message-block-answer"><?= $record['answer'] ?></span> | |||||
</div> | </div> | ||||
</div> | </div> | ||||
<?php endforeach ?> | <?php endforeach ?> | ||||
@@ -78,6 +78,15 @@ Script | |||||
$.cookie ('expand-filter', '0'); | $.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') | if ($.cookie ('expand-filter') === '0') | ||||
{ | { | ||||
$ ('#collapse-filter').removeClass ('show'); | $ ('#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'; | |||||