Riot.jsであみだくじ

概要

あみだくじのサイトを利用したのだけど思ったようなものがなかったので作成してみた。

完成品は下記
https://hashito.biz/amidacuji/

作成内容

仕様

あみだくじサイトは下記のような仕様にて作成した。

• 参加者名/決定項目名を入力可能とする。
• 参加人数を最初に指定可能
• あみだくじは最初隠れており、任意のタイミングで公開可能
• 公開後はどの参加者がどの項目になったかを表示可能とする

ソースコード解説

あみだくじ作成部分

      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();
        // あみだくじの横線は作成予定数の2倍用意する。
        // これは奇数と偶数部分で線が重ならないようにするため。
        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))
          });
        }
      }

あみだくじ結果検索部分

    // i = 検索対象の参加者のインデックス
    // f = クラスをどうするかの指定 ("remove" or "add"） 
    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);//参加者ボックスに要素を追加 or 削除
      for(var l=0;l<(ami*2);l++){
        //tate
        self.refs["tate"+idx+"-"+l].classList[f](tgclass);//縦線に要素を追加 or 削除
        //yoko 横線に要素を追加 or 削除
        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);//項目ボックスに要素を追加 or 削除
    }