​

//영웅리스트 렌더

class PersonInfo extends React.Component {

  render() {

    return (

      <option value= {this.props.hero.id}>

        {this.props.hero.name}

      </option>

    );

  }

}

​

​

class Setting extends React.Component {

  constructor(props) {

    super(props);

    this.state = {

      pickupTarget:"0",

      useRuby:0,

      getList :[],

      getHistoryList :[],

      heroList: [

    {name:"네스트라의 사도 [세인]",per:0.008,grade:5},

    {name:"네스트라의 사도 [밍]",per:0.008,grade:5},

    {name:"엘레나의검 [발데르]",per:0.008,grade:5},  

    {name:"엘레나의검 [코제트]",per:0.008,grade:5},

    {name:"빛의 기사 [루디]",per:0.008,grade:5},

    {name:"포디나의 여제 [아일린]",per:0.0471428571428571,grade:4},

    {name:"절대 수호자 [루디]",per:0.0471428571428571,grade:4},

    {name:"파멸의기사 [델론즈]",per:0.0471428571428571,grade:4},

    {name:"불멸의 화신 [레이첼]",per:0.0471428571428571,grade:4},

    {name:"차원의 인도자 [연희]",per:0.0471428571428571,grade:4},

    {name:"하얀이리 [에반]",per:0.0471428571428571,grade:4},

    {name:"혹한의 폭군 [스파이크]",per:0.0471428571428571,grade:4},

    {name:"불멸의 여제 [아일린]",per:0.0471428571428571,grade:4},

    {name:"빛의 성녀 [카린]",per:0.0471428571428571,grade:4},

    {name:"홍염의 화살 [클레어]",per:0.0471428571428571,grade:4},

    {name:"핏빛 장미 [미스벨벳]",per:0.0471428571428571,grade:4},

    {name:"광기의 연구자 [멜키르]",per:0.0471428571428571,grade:4},

    {name:"여명의 뇌룡 [렌]",per:0.0471428571428571,grade:4},

    {name:"악몽의 추적자 [크리스]",per:0.0471428571428571,grade:4},

    {name:"네스트라의 사도 [루키]",per:0.3333,grade:3},

    {name:"네스트라의 사도 [챙첸]",per:0.3333,grade:3},

    {name:"네스트라의 사도 [멜리사]",per:0.3334,grade:3},

    {name:"엘레나의 검 [렌]",per:0.3333,grade:3},

    {name:"엘레나의 검 [앙리]",per:0.3333,grade:3},

    {name:"엘레나의 검 [케이드]",per:0.3334,grade:3},

    {name:"흑화마검 [세인]",per:0.5214,grade:2},

    {name:"마도 오토마타 [코제트]",per:0.5215,grade:2},

    {name:"최후의 기사 [발데르]",per:0.5215,grade:2},

    {name:"은둔자 [루디]",per:0.5215,grade:2},

    {name:"영원의 뇌제 [아일린]",per:0.5215,grade:2},

    {name:"새로운자아 [네오델론즈]",per:0.5214,grade:2},

    {name:"천상의 목소리 [세레나]",per:0.5214,grade:2},

    {name:"모험가 [샤이]",per:0.5214,grade:2},

    {name:"서큐버스악동 [밍]",per:0.5214,grade:2},

    {name:"혹한의 수호자 [윈디고]",per:0.5214,grade:2},

    {name:"혁명의 수인 [테온]",per:0.5214,grade:2},

    {name:"특급 해결사 [캐스퍼]",per:0.5214,grade:2},

    {name:"영혼의 인도자 [주주]",per:0.5214,grade:2},

    {name:"야성의 포효 [이오타]",per:0.5214,grade:2},

    {name:"로얄블러드 [아델]",per:3.75,grade:1},

    {name:"순백의 순찰자 [클레어]",per:3.75,grade:1},

    {name:"검은장미 [미스밸벳]",per:3.75,grade:1},

    {name:"악마사냥꾼 [스콧]",per:3.75,grade:1},

    {name:"강철의 요새 [트리스탄]",per:3.75,grade:1},

    {name:"고통의 탐식자 [앙리]",per:3.75,grade:1},

    {name:"연금술사 [이안]",per:3.75,grade:1},

    {name:"마도공학자 [길라한]",per:3.75,grade:1},

    {name:"파동의 용아 [챙첸]",per:12,grade:0},

    {name:"정예전사 [케이드]",per:12,grade:0},

    {name:"빛의 순례자 [멜리사]",per:12,grade:0},

    {name:"승부사 [루키]",per:12,grade:0},

    {name:"여명의 희망 [렌]",per:12,grade:0}

    ]

    };

    ["_oneGetClick","_tenGetClick","change",

     "pickUpSetting","setHeroId","getHero","_resetClick"].forEach(name => {

      this[name] = this[name].bind(this);

    });

  }

    componentDidMount(){

       $.each(this.state.heroList, function(index, item){

      item.id = index;

    });

    this.setState({

      heroList:this.state.heroList

    });

  }

​

  setHeroId(e){

        console.log("tttttt2222ttt");

     $.each(this.state.heroList, function(index, item){

      item.id = index;

    });

    this.setState({

      heroList:this.state.heroList

    });

  }

  render() {

  /* const setHero2 = data => {

      return data.map((set2, i) => {

        return (<PersonInfo hero={set2}  key={i}/>);

      });

    };*/

    const setHero = this.state.heroList.map(

      (hero,i)=>(<option value= {hero.id} key={i}>{hero.name}</option>)

    );

    const getHeroLi = this.state.getList.map(

      (hero,i)=>(<li key={i} className={"grade"+hero.grade}>{hero.name}</li>)

    );

    return (

       <div>

      <select onChange={this.change} >

                    {setHero}  

      </select>

      <select value={this.state.pickupTarget} onChange={this.pickUpSetting} >

        <option value="0">일반뽑기</option>

        <option value="18">크리스확률업</option>

        <option value="13">카린확률업</option>

      </select>

      <button onClick={this._oneGetClick}>1회뽑기</button>

      <button onClick={this._tenGetClick}>10회뽑기</button>

      <button onClick={this._resetClick}>초기화</button>

      <div>

        뽑힌 영웅

        <div>소모된루비 {this.state.useRuby}</div>

        <ul>

          {getHeroLi}

        </ul>

      </div>

      </div>

    );

  }

  pickUpSetting(e){

     this.setState({pickupTarget: e.target.value});

    // 왜 바로 적용 안됨?? =>(setState가 비동기로 적용되기 때문이다. 

    // 바로 써야 될땐 preveState를 이용하자)

    console.log("no:"+this.state.pickupTarget);

      let targetId  = e.target.value

     $.each(this.state.heroList, function(index, item){

       if(targetId==0&&item.grade==4){

         item.per = 0.0471428571428571;

       }else{

         if(item.grade==4){

            item.per = 0.02;

          }

        if(item.id==targetId){

          item.per = 0.4;

          }

       }

    });

    this.setState({

      heroList:this.state.heroList

    });

  }

  change(e){

  }

  _oneGetClick(e) {

    let result = this.getHero();

    this.setState({

      getList:[result],

      useRuby:this.state.useRuby +120

    })

    console.log(result);

  }

  _tenGetClick(e) {

    let tenResult = [];

    for(let cnt = 0; cnt < 10; cnt++){

      let result = this.getHero();

      tenResult.push(result);

    }

    this.setState({

      getList:tenResult,

      useRuby:this.state.useRuby +1100

    });

  }

  _resetClick(e){

    this.setState({

      getList:[],

      useRuby:0

    });

  }

​

  getHero(){

    // console.log("뽑기");

    val = Math.round(Math.random()*1000000);

    val = val/10000

    //console.log("뽑기값:"+val)

    var heroCard;

    var sum = 0;

    $.each(this.state.heroList, function(index, item){ 

       sum=+ (sum + item.per).toFixed(12);

       //console.log("sum값"+sum)

       if(sum >= val){

         heroCard = item;

         //console.log(item);

         return false;

        }

      });

  // heroHistoryArr.push(heroCard);

   return heroCard;

  }

​

​

​

}

​

class App extends React.Component {

  render() {

    return(

      <div>

        <Setting/>

      </div>

    );

  }

}

ReactDOM.render(<App/>, document.getElementById("app"));

​

​

​

​

​

​

​

​

​

​

​

​

​