DQX 防衛軍タイマー | チャートと防衛スケジュール

$(function(){

  var IntervalId;

  var $iframe = $('<iframe>').addClass('iframe forSound');
  var $timeMMSS = $('#timeMMSS');
  var $rangeText = $('#range span');
  var $rangeInput = $('#range input');
  var $bar = $('.bar');

  var max = 60*10;
  var time = max;

  $(document.body).prepend($iframe);
  $(document.body).on('click',function(e){
    if(e.pageX>$(this).width()*7/8){
      reset();
    }
  });

  var animationTemp = 'perWidth {s}s linear infinite';
  var animation = animationTemp.replace('{s}', Math.floor(max));
  $bar.css({animation:animation});

  var timer;
  var taskTextParams = [];


  $(document).on('click', '.enemyTypes li', function(){
    $('.enemyTypes li').removeClass('selected');
    $(this).addClass('selected');
    var enemyType = $(this).attr('name');
    enemySelect(enemyType);
  });

  $(document).on('change', '#range input', function(){
    var v = $(this).val();
    console.log(v);
    console.log(time);
    time = Number(v) || 1;
    loopAction();
  });


  var sound = function(fileName){
    if(!$('#soundCheck').prop('checked')){return;}
    $iframe.attr({src: fileName+'.mp3'});
  }

  var enemySelect = function(enemyType){
    var selector = '.tasks.' + enemyType;
    var taskText = $(selector).text();
    console.log(selector);
    console.log(taskText);
    taskTextParams = [];
    $('#taskList').empty();
    var taskTextAry = taskText.split("\n");
    //console.log(taskTextAry);
    taskTextAry.forEach(function(v, i){
      if(!v){return true;}
      var param = {};
      var col = v.split(' ');
      var timeText = col[0];
      var actionText = col[1] || '';
      if(col[2]){
        actionText += col[2];
      }
      var mp3 = 'pi';
      if(timeText.match(/:/)){
        var m = Number(timeText.split(':')[0]);
        var s = Number(timeText.split(':')[1]);
        var ss = m*60+s;
      } else {
        var ss = 0;
      }
      var ssFinish = ss - 20;
      var header = '・';
      if(actionText){
        if(actionText.match(/物資/) && !actionText.match(/アイテム/)  ){
          header = '◆';
        }
        if(actionText.match(/鐘/) && !actionText.match(/小/)  ){
          mp3 = 'bell';
          header = '▲';
        }
        if(actionText.match(/オトリ|縛り/)){
          mp3 = 'cymbal';
          header = '★';
        }
        if(actionText.match(/砲/)){
          mp3 = 'drum';
          header = '○';
        }
        if(actionText.match(/砲撃/)){
          mp3 = 'drum';
          header = '◎';
        }
        if(actionText.match(/ミラクル/)){
          mp3 = 'cash-draw';
          header = '※';
        }
        if(actionText.match(/ボーナス/)){
          mp3 = 'cash-draw';
          header = '※';
        }
        if(actionText.match(/ジャンプ/)){
          mp3 = 'jump';
          header = '▲';
        }
        if(actionText.match(/近づく/)){
          mp3 = 'voice-tikaduku';
          header = '↑';
        }
        if(actionText.match(/離れる/)){
          mp3 = 'voice-hanareru';
          header = '↓';
        }

      }
      
      var $time = $('<i>').text(timeText);
      var $header = $('<i>').text(header);
      var $b = $('<b>').text(actionText);
      var li = $('<li>');
      li.append($time).append($header).append($b);
      if(ss>0){
        li.addClass('time'+ss);
      }
      param = {
        ss:ss,
        ssFinish:ssFinish,
        mp3:mp3,
        timeText:timeText,
        actionText:actionText,
        li:li,
      };
      taskTextParams.push(param);
    });

    console.log(taskTextParams);
    taskTextParams.forEach(function(v){
      $('#taskList').append(v.li);
    });
    console.log(selector)
    console.log($(selector))
    var isTime10 = $(selector).hasClass('t10')
    max = 60*8;
    if(isTime10){max = 60*10;}
    if(enemyType.match(/tri/)){
      max = 60*5+30;//トリニティ
    }
    if(enemyType.match(/camp/)){
      max = 60*3+33;//キャンプ
    }
/*
    //後半の兵団は時間短縮//粘、華、翼
    if(enemyType.match(/nen/) || enemyType.match(/han/) || enemyType.match(/tub/)){
      max = 60*8;
    } else {
      max = 60*10;
    }
*/
    $('#range input').attr({max:max});
    

    reset();
    clearInterval(timer);
    timer = setInterval(function(){
      loopAction();
    }, 999);
  }



  var looptime = function(){
    var nowLink = $('<a>', {target:'_blank',href:'https://hiroba.dqx.jp/sc/tokoyami/#raid-container', title:'現在の兵団'});
    var spanDT = $('<span>',{id:'dt'}).text('--/--(--)');
    var spanHM = $('<span>',{id:'hm'}).text('--:--');
    var spanZZ = $('<span>').text('');
    nowLink.append(spanDT).append(spanHM).append(spanZZ);
    $('.defenseTime').empty();
    $('.defenseTime').append(nowLink);
  }
  looptime();


  var loopAction = function(){
    time--;
    if(time>max-2){return;}
    var m = parseInt(time/60);
    var s = time % 60;
    m = ('00' + m).slice(-2);
    s = ('00' + s).slice(-2);
    var timeMMSS = m+':'+s;
    $timeMMSS.text(timeMMSS);
    $rangeText.text(timeMMSS);
    $rangeInput.val(time);

    console.log(time);
    taskTextParams.forEach(function(v){
      if(time === v.ss){
        sound(v.mp3);
        v.li.addClass('active');
        var text = v.li.find('b').text();
        talk(text);
      }
      if(time === v.ssFinish){
        v.li.addClass('finished');
      }
    });
    if(time <= 0){
      sound('correct1');
      clearInterval(timer);
      speechSynthesis.cancel();
    }
  }




  var reset = function(){
    time = max;
    var $barClone =$bar.clone();
    $bar.remove();
    $bar = $barClone;
    $('li').removeClass('active');
    $('#timeMMSS').removeClass('stop');
    $('#timeMMSS').text('--:--');
    
    clearInterval(timer);
    loopAction();
  }
  reset();



  $(document).on('dblclick', '#timeMMSS', function(){
    if($(this).hasClass('stop')){
      reset();
      timer = setInterval(function(){
        loopAction();
      }, 999);
    } else {
      clearInterval(timer);
      $(this).addClass('stop');
    }
  });

  

});


  var setCheckboxs =function(ary,ary2){
    var form = $('<form>');
    var table = $('<table>');
        form.append(table);
    $('.actualForm').append(form);
    var save = function(ele,v){
      var val = ele.prop('checked');
      localStorage.setItem('dqx-bouei-'+v, val);
    }
    var tr = $('<tr>');
    table.append(tr);
    ary2.forEach(function(v2){
      var th = $('<th>').text(v2);
      tr.append(th);
    });
    ary.forEach(function(v){
      var tr = $('<tr>');
      var th = $('<th>').text(v.slice(0,2));
      table.append(tr);
      tr.append(th);
      ary2.forEach(function(v2, i){
        if(i===0){return false;}
        var td = $('<td>');
        tr.append(td);
        var label = $('<label>');
        var i = $('<i>').text();
        var input = $('<input>',{name:'jobs'+v+v2,type:'checkbox',job:v});
        var flag = localStorage.getItem('dqx-bouei-'+v+v2);
        if(flag){
          if(flag.toLowerCase() === 'true'){
            input.prop({'checked':true});
          }
        }
        label.append(input).append(i);
        td.append(label);
        input.on('change', function(){
          save($(this),v+v2);
        });
      });
      var th2 = $('<th>').text(v.slice(0,2));
      tr.append(th2);
    });
    var tr2 = $('<tr>');
    table.append(tr2);
    ary2.forEach(function(v2){
      var th = $('<th>').text(v2);
      tr2.append(th);
    });
  }

$(function(){
  var jobsText = $('#jobs').text();
  var jobsAry = jobsText.split('\n');
  jobsAry.pop();
  var enemysAry = [];
  $('.enemyTypes li').each(function(){
    var txt = $(this).text();
    if(txt.length === 1 && !txt.match('高|星')){
      enemysAry.push(txt);
    }
  });


  //var h2 =$('<h2>').text('職実績メモ (最新兵団用) ::');
  //form.append(h2);
  setCheckboxs(jobsAry, enemysAry);


});



window.speechSynthesis.onvoiceschanged = () => {
  this.voices = window.speechSynthesis.getVoices();
};
var voices = window.speechSynthesis.getVoices();

setTimeout(function(){
  initVoice();
}, 99);

var voiceJa;
function initVoice(){
  voices = window.speechSynthesis.getVoices();
  //console.log(voices);
  var isFindvoiceJa = false;
  var isFindvoiceEn = false;
  voices.forEach(function(v){
    if(v.lang.match(/ja-JP/)){
      voiceJa = v;
    }
  });
  voices.forEach(function(v){
    //console.log(v);
    if(v.name.match(/日本/) || v.name.match(/Japan/) || v.name.match(/Kyoko/)){
      voiceJa = v;
    }
  });
  console.log(voiceJa)
  
}


function talk(v){

  if(!$('#voiceCheck').prop('checked')){return;}
  //voices = window.speechSynthesis.getVoices();
  //var voiceJa = voices[5];
  var utter = new SpeechSynthesisUtterance();
  utter.text = v;
  utter.voice = voiceJa;
  utter.volume = 1;
  utter.rate = 1;
  utter.pitch = 1;
  utter.lang   = 'ja-JP';
  //voices = window.speechSynthesis.getVoices();
  //utter.voice = voices[1];
  console.log(utter);
  voices.forEach(function(v, i){
    if(v.name.match(/日本/)){
      utter.voice = voices[i];
    }
  });
  speechSynthesis.cancel();
  speechSynthesis.speak(utter);
}

#demo{
  padding:40px;
}
#code,
footer{
  display:none;
}

iframe{
  display:none;
}
.tasks{
  display:none;
}

#demo > h1{
  position:absolute;
  top:-8px;
  left:8px;
  z-index:3;
  font-size:16px;
}


#timeMMSS{
  display:inline-block;
  position:fixed;
  padding:12px 0;
  right:0;
  top:0px;
  z-index:3;
  background-color:rgba(255,255,255,0.4);
  font-size:120px;
  font-weight:bold;
  
}

#timeMMSS.stop{
  background-color:#999999;
}


.defenseTime{
  font-size:32px;
  height:40px;
  font-weight:bold;
}
.defenseTime a{
  text-decoration:none;
  color:#999;
}

.defenseSchedule{
  font-size:40px;
  height:52px;
  font-weight:bold;
}

.defenseSchedule a{
  color:#333333;
  background-color:#eeeeee;
  text-decoration:none;
}

.defenseSchedule span{
  display:inline-block;
  position:relative;
  top:0;
  left:0;
  padding-bottom:12px;
}
.defenseSchedule i{
  display:block;
  position:absolute;
  left:0;
  bottom:0px;
  width:100%;
  text-align:center;
  font-size:11px;
  font-weight:normal;
}

.enemyTypes{
  display:flex;
  font-weight:bold;
  align-items: center;
  user-select: none;
  margin-right:40%;
}
.enemyTypes li{
  width:96px;
  height:40px;
  line-height:40px;
  position:relative;
  top:0;
  left:0;
  text-align:center;
  border:1px solid #333;
  cursor:pointer;
  font-size:32px;
}
.enemyTypes li:hover{
  background-color:#eeeeee;
}
.enemyTypes i{
  display:block;
  font-size:10px;
  line-height:10px;
  position:absolute;
  bottom:0;
  left:0;
  text-align:center;
  width:48px;
}

li.selected{
  background-color:#ff0000;
}

ol li{
  padding:8px;
} 

#soundCheckLabel,
#voiceCheckLabel{
  display:inline-block;
  padding:8px;
}

table{
  margin:10px;
}
th,td{
  border:1px solid #ccc;
}

tr:nth-child(even) {
  background-color:#eee;
}{}

#range{
  display:flex;
}
#range span{
  width:60px;
  border-bottom:2px solid #aaa;
}
#range input{
  width:calc(100% - 60px);
}

#taskList{
  padding-bottom:40px;
}
.textPanel li{
  font-size:22px;
  padding:2px 0;
}
.textPanel li:nth-child(odd) {
	background: #eee;
}
.textPanel li.active{
  background-color:#ff0000;
}
.textPanel li.finished{
  background-color:#999999;
}
.textPanel li.finished:nth-child(odd){
  background-color:#888888;
}
.textPanel li.time0{
  margin-top:1em;
}




h2{
  line-height:1.6em;
  font-size:24px;
  font-weight:bold;
}
h3{
  line-height:1.6em;
  font-size:18px;
  font-weight:bold;
}
.howToText ul{
  list-style:inside;
  padding-left:24px;
  padding-bottom:24px;
}
.howToText ul li{
  line-height:1.6em;
}
.howToText b{
  font-weight:bold;
  color:#f00;
}

.bar{
  position:absolute;
  top:0;
  left:0;
  height:12px;
  width:100%;
  background-color:#0f0;
}

th{
  margin:0 8px;
}
td{
  font-family:monospace;
}

/*
.textPanel{
  position:absolute;
  top:120px;
  left:8px;
  z-index:3;
}
*/

@keyframes perWidth {
  0% {width: 100%;}
  100% {width: 0;}
}

form label{
  display:inline-block;
  padding:8px;
}
form label:hover{
  background-color:rgba(0,0,0,0.1);
}





@media screen and ( max-width:780px) {
#demo{
  padding:40px 0;
}
#timeMMSS{
  font-size:20px;
}
.defenseSchedule {
  font-size: 20px;
}

.enemyTypes{
  width:100%;
}
.enemyTypes li {
  font-size: 18px;
}
.enemyTypes i {
  display: none;
}

.textPanel li {
  font-size: 16px;
}


}

ページのソースを表示 : Ctrl+U , DevTools : F12

view-source:https://hi0a.com/demo/-js/js-timer-dqx-defense/