<meta http-equiv="content-type" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://use.fontawesome.com/releases/v6.6.0/css/all.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
:root{--header-back:{#background#};--header-color:{#color#};--awesome:'Font Awesome 5 Free';}
body{padding-top:80px;margin:0;}
/* header */
header{background:rgba(var(--header-back),0.5);color:var(--header-color);position:fixed;top:0;left:0;width:100%;overflow-x:hidden;transition:0.3s;}
header:has(#menu[open]){background:rgba(var(--header-back),0.8);}
summary{outline:none;}
details > summary{display:inline-block;cursor:pointer;opacity:0.3;font-size:110%;font-weight:bold;padding:5px;margin:10px 0 0;}
details > summary:hover,details[open] > summary{opacity:1;}
details[open] > summary:hover{opacity:0.3;}
details > summary:before{content:'\f138';font-family:var(--awesome);font-weight:600;margin-right:0.5em;}
details[open] > summary:before{content:'\f13a';font-family:var(--awesome);font-weight:600;margin-right:0.5em;}
details > div{margin:10px 10px 30px 20px;word-break:break-all;}
details > div > button{padding:3px 20px;margin:0 0 8px;font-size:105%;cursor:pointer;outline:none;border:2px solid var(--header-color);border-radius:3px;background:rgba(0,0,0,0);color:var(--header-color);opacity:0.3;}
details > div > button:hover{opacity:1;}
button.all.hide:before{content:'一括非表示';}
button.all.hide:after{content:'\f070';font-family:var(--awesome);font-weight:600;margin-left:0.5em;}
button.all.show:before{content:'一括表示';}
button.all.show:after{content:'\f06e';font-family:var(--awesome);font-weight:600;margin-left:0.5em;}
input[type="checkbox"]{display:none;}
label{cursor:pointer;}
input[type="checkbox"]+ label:before{content:'\f0c8';font-family:var(--awesome);font-weight:400;margin-right:0.5em;}
input[type="checkbox"]:checked + label:before{content:'\f14a';font-family:var(--awesome);font-weight:600;margin-right:0.5em;}
#menu[open]{max-height:85vh;}
#menu > summary{padding:0 10px 10px;}
#menu[open] > summary{opacity:0.3;}
#menu[open] > summary:hover{opacity:1;}
#menu > summary:before{content:'\f0c9';font-family:var(--awesome);font-weight:600;margin-right:0.5em;}
#menu > summary:after{content:'MENU';}
#menu[open] > summary:before{content:'\f00d';font-family:var(--awesome);font-weight:600;margin-right:0.5em;}
#menu[open] > summary:after{content:'CLOSE';}
#menu > div{max-height:60vh;max-width:80vw;padding-bottom:50px;overflow-y: auto;}
#menu > div::-webkit-scrollbar{display:none;}
header a:link,header a:visited{color:var(--header-color);opacity:0.5;text-decoration: none;}
header a:hover{opacity:1;}
/* chat-log default style */
#chat-log{margin:20px 0 20px 25px;}
.chat{display:flex;flex-wrap:nowrap;flex-direction:column;padding-right:1em;}
.chat > div{word-break:break-all;}
.chat > div:nth-child(1){display:block;font-weight:bold;padding-top:0.2em;}
.chat > div:nth-child(2){margin-left:1em;padding:0 0.2em 0.2em;}
/* headline */
[id^="index"]{margin-top:-90px;padding-top:90px;}
/* hide-user style */
.hide-user > div:nth-child(1),.hide-user2 > div:nth-child(1){display: none !important;}
.hide-user > div:nth-child(2):not(:has(b)){margin-left:0;padding:0;}
.hide-user + div:not(:has(.hide-user)){padding-bottom:0.5em;}
.hide-user b,.hide-user2 b{ margin-left:-1.2em; }
/* tab style */
/* safari */
summary::-webkit-details-marker {display:none;}
/* mediaquery */
@media only screen and (orientation: portrait){
*{overflow-x:hidden !important;}
html{width:100vw;overflow-x:hidden !important;}
header{padding:50px 0 0 0;margin:0;width:100%;overflow-x:hidden !important;position:fixed;top:0;left:0;right:0;}
#menu{padding-left:10px;}
body{padding:120px 0 0 0;margin:0;;width:100%;font-size:90%;overflow-x:hidden !important;}
#chat-log{width:90vw;overflow-x:hidden !important;margin:20px 0 20px 15px;}
#chat-log div{word-break:break-all;overflow-x:hidden !important;padding-right:0;}
{#user-hide-type#}
.chat > div:nth-child(2){margin-left:0;overflow-x:hidden;}
.hide-user b,.hide-user2 b{ margin-left:0em; }
[id^="index"]{margin-top:-120px;padding-top:120px;}
}
<script>
$(function(){$(document).on('click','#tab-all,#user-all',function(){
let tgt = $(this).attr('id').replace('-all','');
let result = true;
if( $(this).hasClass('hide') ){ result = false; }
$('input[name="' + tgt + '"]').prop('checked',result);
$(this).toggleClass('show hide');
chatShowHide();
});});
$(function(){$(document).on('change','[name="user"],[name="tab"]',function(){ chatShowHide(); });});
function chatShowHide(){
$('.chat').show();
let hide_list = [];
$('[name="user"]:not(:checked),[name="tab"]:not(:checked)').each(function(){ hide_list.push('.' + $(this).attr('id').toLowerCase()); });
hide_list = hide_list.join(',');
$(hide_list).hide();
$('#dice-output-area').html('').hide();
$('.dice-output-area').hide();
$('button.dice').removeClass('select');
}
</script>
<br><br>
<a href="#"><i class="fa-solid fa-angles-up"></i> ログの先頭へ</a><br>
<a href="#log-end"><i class="fa-solid fa-angles-down"></i> ログの最後へ</a>
/* diceroll */
button.dice{outline:none;border:none;background:none;color:inherit;opacity:0.5;cursor:pointer;transition:0.3s;}
button.dice:hover{opacity:1;letter-spacing:0.1em;}
button.dice.select{opacity:1;}
button.dice.select:hover{letter-spacing:0;cursor:default;}
#dice-output-area{padding:10px 15px;background:#000;color:#888;border-radius:3px;font-size:80%;}
#dice-output-area li{text-indent:-1.5em;padding-left:2.5em;}
#dice-output-area li.sub{list-style-type:circle;padding-left:5em;}
button.dice-output-area{display:none;padding:2px 8px;font-size:100%;}
#dice-text-copy{display:none;}
@media only screen and (orientation: portrait){button.dice{display:block;color:var(--header-color);background:rgba(var(--header-back),1);}span.dice-span{display:none;}}
<script>
/* dice output */
$(function(){$(document).on('click','button.dice',function(){
if( $(this).hasClass('select') ){ return; }
else{
$('button.dice.select').removeClass('select');
let tgt = $(this).attr('id');
let user_ary = [];
let dice_ary = [];
let result_ary = [];
let elm = $('#chat-log > div.diceroll:visible');
for( i = 0 ; i < elm.length ; i++ ){
let thisUser = elm.eq(i).attr('class').split(' ')[2];
let txt = elm.eq(i).children().eq(1).html();
try{
let txt_re = txt.split('</b>');
if( txt_re[1] == undefined ){ throw new Error(); }
txt = txt_re[1];
}
catch(e){;}
txt = txt.replace(/\n|\s|\t| | | /g,'');
let terms = false;
if( tgt == 'diceroll' ){ terms = true; }
else if( tgt == 'cf' && ( elm.eq(i).data('dice-result').split(',').indexOf('cr') !== -1 || elm.eq(i).data('dice-result').split(',').indexOf('fb') !== -1 ) ){ terms = true; }
else if( elm.eq(i).data('dice-result').split(',').indexOf(tgt) !== -1 ){ terms = true; }
if( terms ){
if( user_ary.indexOf(thisUser) == -1 ){ user_ary.push(thisUser);dice_ary.push([]);result_ary.push([0,0]); }
let user_num = user_ary.indexOf(thisUser);
if( Boolean(elm.eq(i).data('dice-ccb')) && !Boolean(elm.eq(i).data('dice-x'))){
try{
let cbr_result = txt.split('{#lt-set#}=')[1].split('[')[1].split(']')[0].split(',');
if( cbr_result[0].match(/決定的成功/) ){ result_ary[user_num][0] = result_ary[user_num][0] + 1; }
else if( cbr_result[0].match(/致命的失敗/) ){ result_ary[user_num][1] = result_ary[user_num][1] + 1; }
if( cbr_result[1].match(/決定的成功/) ){ result_ary[user_num][0] = result_ary[user_num][0] + 1; }
else if( cbr_result[1].match(/致命的失敗/) ){ result_ary[user_num][1] = result_ary[user_num][1] + 1; }
}catch(e){;}
}
else if( Boolean(elm.eq(i).data('dice-x')) ){
txt = txt.split(/#\d/);
for( j = 0 ; j < txt.length ; j++ ){
txt[j] = txt[j].replace(/<br>/g,'');
if( j > 0 ){
txt[j] = '<li class="sub">' + txt[j] + '</li>';
if( txt[j].match(/決定的成功/) ){ result_ary[user_num][0] = result_ary[user_num][0] + 1; }
else if( txt[j].match(/致命的失敗/) ){ result_ary[user_num][1] = result_ary[user_num][1] + 1; }
}
}
txt = txt.join('');
}
else{
txt = txt.replace(/<br>/g,'');
if( txt.match(/決定的成功/) ){ result_ary[user_num][0] = result_ary[user_num][0] + 1; }
else if( txt.match(/致命的失敗/) ){ result_ary[user_num][1] = result_ary[user_num][1] + 1; }
}
let tabspan = '<span>［' + $('#' + elm.eq(i).attr('class').split(' ')[1].toUpperCase()).next().text() + '］</span>';
dice_ary[user_num].push(tabspan + txt);
}
}
let output = '';
for( i = 0 ; i < user_ary.length ; i++ ){
output += '<b>▼ ' + $('#' + user_ary[i].toUpperCase() ).next().text();
if( tgt == 'diceroll' || tgt == 'cf' ){ output += '（' + result_ary[i].join('C') + 'F）'; }
output += '<br></b>';
output += '<li>' + dice_ary[i].join('</li><li>') + '</li><br>';
}
$('#dice-output-area').html(output).show();
$('.dice-output-area').show();
$(this).addClass('select');
}
});});
/* copy action */
$(function(){
$(document).on('click','button.dice-output-area',function(){
$('#dice-text-copy').html($('#dice-output-area').html());
$('#dice-text-copy span').remove();
let li_elm = $('#dice-text-copy li.sub');
for( i = 0 ; i < li_elm.length ; i++ ){ li_elm.eq(i).prop('outerHTML',' ◦ ' + li_elm.eq(i).text() + '<br>'); }
let copyTxt = $('#dice-text-copy').html();
copyTxt = copyTxt
.replace(/<br><b>/g,'\n\n')
.replace(/<li>|<b>|<\/b>/g,'')
.replace(/<\/li>|<br>/g,'\n')
.replace(/{#lt-set#}/g,'<')
.replace(/{#nbsp-set#}/g,' ');
copyToClipboard(copyTxt);
alert('クリップボードにコピーしました。');
$('#dice-text-copy').html('');
});
});
function copyToClipboard(txt){
const pre = document.createElement('pre');
pre.style.webkitUserSelect = 'auto';
pre.style.userSelect = 'auto';
pre.textContent = txt;
document.body.appendChild(pre);
document.getSelection().selectAllChildren(pre);
const result = document.execCommand('Copy');
document.body.removeChild(pre);
return result;
}
</script>
<button type="button" class="dice" id="diceroll">ダイス一括表示</button><span class="dice-span">/</span>
<button type="button" class="dice" id="sc">成功のみ表示</button><span class="dice-span">/</span>
<button type="button" class="dice" id="fl">失敗のみ表示</button><span class="dice-span">/</span>
<button type="button" class="dice" id="cf">CF表示</button>
<div id="dice-output-area" style="display:none;"></div>
<br>
<button class="dice-output-area">コピー <i class="fa-regular fa-copy"></i></button><div id="dice-text-copy"></div>
<br>
<span style="font-size:70%;">
※組み合わせダイス（CBR,CBRB）、繰り返しコマンド（Xn CCB等）は正しく判定できない可能性があります。<br>
※ダイス結果のコピーではタブ名はコピーされません。
</span>
<!DOCTYPE html>
<html>
<head>
<title>{#TITLE#}</title>
<meta http-equiv="content-type" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<style>
:root{ --line: 1px dashed rgba(0,0,0,0.1);--bd: 5px solid; }
body{ font-family: sans-serif;overflow-x: hidden;white-space: pre-wrap;word-break: break-all;margin: 0;padding: 0; }
a:link,a:visited,a:hover{ color: inherit;text-decoration: none;opacity: 0.5; }
a:hover{ opacity: 1; }
details{ position: fixed;top: 0;left: 0;background: rgba(0,0,0,0.9);color: #fff;margin: 0;padding: 8px;width: 100vw;overflow-x: hidden;min-height: 20px;z-index: calc(infinity); }
summary,label,button,input[type="checkbox"]{ display: inline-block;cursor: pointer;outline: none; }
summary{ font-weight: bold;letter-spacing: 0.1em;border-bottom: 1px solid #fff;padding: 0 5px;position:fixed;top:5px;z-index: calc(infinity); }
details > summary:after{ content: 'MENU'; }
details[open] > summary:after{ content: 'CLOSE';background:#000; }
details[open]{ max-height: 50vh;overflow-y: auto; }
label{ margin-right: 2em;width: 12%; }
@media screen and (orientation:landscape){ label{ white-space: nowrap;overflow: hidden;text-overflow: ellipsis; } }
details > b{ display: inline-block;margin-left: 1%;width: 5em; }
details > div{ display: flex;flex-wrap: wrap;width: 90%;margin: 15px 5% 0 2%; }
button{ background: rgba(0,0,0,0);border: 2px solid #fff;border-radius: 3px;color: #fff;padding: 2px 8px;opacity: 0.5; }
button:before{ content:'一括'; }
button:after,button.out:before{ content:''; }
button.out:after{ content: 'をすべて外す'; }
button:hover{ opacity: 1; }
#chat{ display: flex;flex-wrap: wrap;flex-direction: column;justify-content: flex-start;margin: 20px 0 30px;padding: 0 2% 0 3%;overflow-x: hidden;width: 95%; }
#chat > div{ margin: 0;padding: 2px 1.5em 2px 0; }
#chat > div[data-tab="0"]{ margin: 2px 0; }
#chat > div:not([data-tab="0"]){ font-size: 80%;padding-left: 10px;border-top: var(--line);border-bottom: var(--line);margin-top: -1px; }
{#CSS#}.hide-tab,.hide-user{ display: none; }
#portrait-hover{ position: fixed;z-index: 99;;top: 0;left: 0;margin: 0;padding: 0;background: linear-gradient(180deg, #000 70%, transparent);width: 100%;height: 50px; }
@media screen and (orientation:portrait){
body{ width:100vw;overflow-x: hidden; }
#chat{ width: 88vw !important;padding: 0;margin: 0;position: static;margin-top: 20px;margin-left: 8vw }
#chat > div{ word-break: break-all;overflow-wrap: break-word;line-break: loose;overflow-x: hidden; }
#chat > div[data-tab="0"]{ padding:2px 0 !important;max-width: 87vw;font-size: 90%; }
#chat > div:not([data-tab="0"]){ padding:2px 1em 2px 3% !important; }
{#CSS2#}details{ width: 70vw;background: rgba(0,0,0,0);color:#888;z-index: 999; }
details::-webkit-scrollbar{ opacity: 0; }
details[open]{ max-height: 100vh;height: 100vh;width: 70vw;background: rgba(0,0,0,0.9);color: #fff; }
summary{ display: block;list-style: none;position: fixed;top: 50%;left: -2px;border: none;background: rgba(0,0,0,0);z-index: 99; }
summary::-webkit-details-marker { display:none; }
details[open] > summary{ top: 0;left: 0;width: 0;height: 0;margin: 0;padding: 0; }
details > summary:after{ content: '▷' !important;background: rgba(0,0,0,0) !important; }
details[open] > summary:after{ content: '✕' !important;position: fixed;z-index: 99;top: 30px;left: 0;margin: 48px 0 0 64vw;padding: 10px;z-index: 99; }
details > b{ margin-top: 2em;width: 4.2em; }
details > button{ margin: 8px 0 8px 8px;position: relative;z-index: 999; }
details > div{ width: 100%;margin: 15px 5% 0 2%; }
details > span{ display: block;opacity:0; }
label{ display: block;width: 75%;margin-bottom: 0.5em;margin-right: 0.5em;text-indent: -1.2em;padding-left: 2em; }
details > a{ float: right; }
#portrait-hover{ width: 70vw;height: 64px;padding: 8px;z-index: calc(infinity); }
}
</style>
</head>
<body>
{#BODY#}
<div id="end"></div>
<script>
function toggle(elm){
elm.classList.toggle('out');let out = elm.className;
let tgt = elm.nextElementSibling.children;
let ck = false;
if( out == 'out' ){ ck = true; }
for( i = 0 ; i < tgt.length ; i++ ){ tgt[i].children[0].checked = ck; }
return show_hide( elm.nextElementSibling.getAttribute('id') );
let hide = 'hide-' + elm.nextElementSibling.getAttribute('id');
let cls_tgt = getElementsByClassName(hide);
if( ck ){ cls_tgt.forEach(element => { element.classList.add(hide); }); }
else{ cls_tgt.forEach(element => { element.classList.remove(hide); }); }
}
function change(elm){ return show_hide(elm.parentElement.parentElement.getAttribute('id')); }
function show_hide(id){
let label = document.getElementById(id).children;
for( i = 0 ; i < label.length ; i++ ){
let tgt = document.querySelectorAll('[data-' + id + '="' + i + '"]');
let cls = 'hide-' + id;
if( label[i].children[0].checked ){ tgt.forEach(element => { element.classList.remove(cls); }); }
else{ tgt.forEach(element => { element.classList.add(cls); }); }
}
}
</script>
</body>
</html>