<amidacuji>
    <div class="header">
      数回入力するだけで簡単に「あみだくじ」が行えます！<br>
      <div class="help" if={status>0}>
        ①参加者の名前を入力し、「参加者確定」ボタンを押下してください。<br>
        ②一番下の項目を入力し、「項目確定」ボタンを押下してください。<br>
        ③「答えを見る」ボタンをクリックするとあみだくじが表示されます<br>
        ※マウスカーソルを「参加者」か「項目」に合わせると決定した内容を表示できます。
      </div>
    </div>

    <div class="body">
      <div class="help" if={(status==0)}>
        <div>
          参加人数を入力してください。この数値がくじの数になります。<br>
          <input ref="num" onInput={check_num_button_dis.bind(this,"num_fx")}>
          <input ref="num_fx" onclick={start.bind(this,"num")} type="button" value="確定">
        </div>
        <div class="pxt">
          <出力例><br>
          <img src="screen-shot.png" alt="スクリーンショット" title="実行画面">
        </div>
      </div>


      <div if={status>0} style={bodystyle}>
        <div if={(status==1)} style={secretstyle}>
          <div class="mannaka">
            <input onclick={open} type="button" value="答えを見る">
          </div>
        </div>
        <div class="amida">
          <div each={v,i in vlines} class="amida-col">
            <div ref={"in"+i} class="inbox" onmouseover={in_search.bind(this,i,'add')} onmouseout={in_search.bind(this,i,'remove')} >
              <input onclick={input_fx.bind(this,"inb"+i)} type="button" value="参加者確定" class="fix_btn">
              <input ref={"inb"+i} class="fix_txt">
            </div>
            <div  each={vv,l in v} class="tatesen" ref={("tate"+i+"-"+l)} >
              <div if={i!=(vlines.length-1)} class={yokosen:vv.d} ref={("yoko"+i+"-"+l)}><!--{vv.d}:{i}{l}--></div>
            </div>
            <div ref={"an"+i} class="anbox" onmouseover={an_search.bind(this,i,'add')} onmouseout={an_search.bind(this,i,'remove')}>
              <input ref={"anb"+i} class="fix_txt">
              <input onclick={input_fx.bind(this,"anb"+i)} type="button" value="項目確定" class="fix_btn">
            </div>
          </div>
        </div>
      </div>

    </div>
    <div class="help">
        最初からやり直したい場合は下記のリセットをクリックしてください<br>
      <input onclick={restart} type="button" value="リセット">
    </div>
  <style>
    .pxt{
      float: right;
    }
    .amida{
      margin:10px;
    }
    .amida-col{
      width:100px;
      float:left;
    }
    .help{
      border:1px solid #e6d6a8;
      border-left:3px solid var(--accent, #c9a04e);
      background:#faf7ef;
      color:var(--ink, #1a1a2e);
      font-size: small;
      line-height:1.7;
      border-radius:4px;
      margin:10px;
      padding:12px 14px;
    }
    .header{
      margin:10px;
      font-weight:500;
    }
    .body{
      margin:10px;
      overflow-x:auto;
      overflow-y:hidden;
      display: flex;
      flex-direction: column;
      min-height: 60vh;
      padding-bottom:6px;
    }
    /* themed action buttons */
    input[type="button"]{
      font-family:"Noto Sans JP",sans-serif;
      background:var(--accent, #c9a04e);
      color:#fff;
      border:1px solid var(--accent, #c9a04e);
      border-radius:2px;
      padding:.5rem 1.1rem;
      letter-spacing:.06em;
      cursor:pointer;
      transition:all .2s ease;
    }
    input[type="button"]:hover:not(:disabled){
      background:#b88f3e; border-color:#b88f3e;
    }
    input[type="button"]:disabled{
      background:var(--bg-soft, #fafafa); color:var(--muted, #6b6b80);
      border-color:var(--line, #e8e8ee); cursor:default;
    }
    /* themed text inputs */
    input[type="text"], .fix_txt, .body input:not([type]){
      font-family:"Noto Sans JP",sans-serif;
      border:1px solid var(--line, #e8e8ee);
      border-radius:2px;
      padding:.45rem .6rem;
      color:var(--ink, #1a1a2e);
      outline:none;
    }
    input:focus{ border-color:var(--accent, #c9a04e); }
    .fix_btn{
      width:100%;
      border-radius: 2px;
    }
    .fix_txt{
      width:100%;
    }
    .mannaka{
      	height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .inbox{
      width:100px;
      transition:all 300ms 0s ease;
    }
    .anbox{
      width:100px;
      transition:all 300ms 0s ease;
    }
    .tatesen{
        position:relative;
        border-left:solid;
        height:20px;
        margin:auto;
        width:0px;
        transition: all 300ms 0s ease;
    }
    .yokosen{
        position:absolute;
        border-top:solid;
        top:20px;
        width:100px;
        height:0px;
        transition: all 300ms 0s ease;
    }
    .active-in{
      border-color:#d16432;
      box-shadow:0px 0px 24px 2px #9f070d;
      z-index:2;
    }
    .active-an{
      border-color:#5282ce;
      box-shadow:0px 0px 24px 2px #5282ce;
      z-index:2;
    }

  </style>
  <script>
    var self     = this;
    self.test    = [1,0,1,1];
    self.usr_cnt = false;
    self.status  = 0;
    self.vlines  = false;
    const ami    = 15;

    var _init_=(usr_cnt)=>{
      self.usr_cnt    = usr_cnt;
      self.vlines = new Array(usr_cnt);
      for(var i=0;i<usr_cnt;i++){
        var _d=(i%2==0);
        self.vlines[i]=new Array();
        for(var l=0;l<(ami*2);l++){
          var _dd=(l%2==0);
          if(_d)_dd=!_dd;
          if(l==((ami*2)-1))_dd=true;//最後は強制０
          self.vlines[i].push({
            d:((_dd)?0:Math.round(Math.random()-0.2))
          });
        }
      }
      self.status  = 1;
      self.bodystyle={
        position:"relative",
        width:(usr_cnt*100+20)+"px"
      };
      self.secretstyle={
        position: "absolute",
        right: "25px",
        top: "92px",
        height: (ami*2*20)+"px",
        width:(usr_cnt*100-50)+"px",
        background:"gray",
        'z-index':1
      };
    }
    restart(){
      self.status  = 0;
    }
    start(nm){
      _init_(self.refs[nm].value*1);
    }
    open(){
      self.status  = 2;
    }
    input_fx(nm,e){
      self.refs[nm].disabled=true;
      e.target.style.visibility = "hidden";;
    }
    check_num_button_dis(nm,e){
      var f = isNaN(e.target.value);
      self.refs[nm].disabled=f;
      self.refs[nm].value=f?"数値を入力してください":"確定";
    }
    in_search(i,f,e){
      var idx      = i*1;
      var tgclass  = 'active-in';
      var ng_user  = self.usr_cnt-1;
      if(self.status!=2)return false;
      self.refs['in'+idx].classList[f](tgclass);
      for(var l=0;l<(ami*2);l++){
        //tate
        self.refs["tate"+idx+"-"+l].classList[f](tgclass);
        //yoko
        if((ng_user!=(idx))&&self.vlines[idx][l].d){
          self.refs["yoko"+idx+"-"+l].classList[f](tgclass);
          idx=idx+1;
        }else if(idx&&self.vlines[idx-1][l].d){
          idx=idx-1;
          self.refs["yoko"+idx+"-"+l].classList[f](tgclass);
        }
      }
      self.refs['an'+idx].classList[f](tgclass);
    }
    an_search(i,f,e){
      var idx      = i*1;
      var st_idx   = ((ami*2)-1);
      var tgclass  = 'active-an';
      var ng_user  = self.usr_cnt-1;
      if(self.status!=2)return false;
      self.refs['an'+idx].classList[f](tgclass);
      for(var l = st_idx ; l >= 0 ; l--){
        //yoko
        if((ng_user!=(idx))&&self.vlines[idx][l].d){
          self.refs["yoko"+idx+"-"+l].classList[f](tgclass);
          idx=idx+1;
        }else if(idx&&self.vlines[idx-1][l].d){
          idx=idx-1;
          self.refs["yoko"+idx+"-"+l].classList[f](tgclass);
        }
        //tate
        self.refs["tate"+idx+"-"+l].classList[f](tgclass);
      }
      self.refs['in'+idx].classList[f](tgclass);

    }
  </script>
</amidacuji>
