<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>