쫄병카드 코스트에 맞춰뽑기(덱에서 필드로)

cost 값 만큼 카드를 내서 상대 영웅을 공격하는 것 구현하기 위해서 필드에 나오는 카드를 관리하기 위한 데이터 배열을 만든다.

var 상대영웅 = document.getElementByID('rival-hero');
var 내영웅 = document.getElementByID('my-hero');
var 상대덱 = document.getElementByID('rival-deck');
var 내덱 = document.getElementByID('my-deck');
var 상대필드 = document.getElementByID('rival-cards');
var 내필드 = document.getElementByID('my-cards');
var 상대코스트 = document.getElementByID('rival-cost');
var 내코스트 = document.getElementByID('my-cost');
var 상대덱data = [];
var 내덱data = [];
var 상대영웅data;
var 내영웅data;
var 상대필드data = [];
var 내필드data = [];
var 턴 = true;

function 카드돔연결(데이터,돔,영웅){
    var 카드 = document.querySelector('.card-hidden .card').cloneNode(true);
    카드.querySelector('.card-cost').textContent = 데이터.cost;
    카드.querySelector('.card-att').textContent = 데이터.att;
    카드.querySelector('.card-hp').textContent = 데이터.hp;
    if(영웅) {
        카드.querySelector('.card-cost').style.display = true;
        var 이름 = document.createElement('div');
        이름.textContent = '영웅';
        카드.appendChild(이름);
    }
    카드.addEventListener('click',function(card){//카드를 클릭했을 때 옮기는 기능 구현, 카드를 선택할 때 내카드인지 상대카드인지
        if(턴) {//내턴
            if(!데이터.mine) {//상대카드를 누르면
                return;
            }
            var 현재코스트 = Number(내코스트.textContent);
            if(현재코스트 < 데이터.cost) {//카드의 코스트가 더 크면 못 뽑는다.
                return;
            }
            var idx = 내덱data.indexOf(데이터);
            내덱data.splice(idx,1);
            내필드data.push(데이터);
            내덱.innerHTML = '';//필드로 나간 카드는 없애준다
            내필드.innerHTML = '';
            내필드data.forEach(function(data){//보여지는 부분과 데이터 싱크를 맞추기 위한 것. 이러한 복잡한 작업 때문에 프론트엔드는 결국 리액트오 뷰,앵글러로 가게 되어 있다!
                카드돔연결(data,내필드);
            });
            내덱data.forEach(function(data){
                카드돔연결(data,내덱);
            });
            내코스트.textContent = 현재코스트 - 데이터.cost;
        } else {//상대턴인데
            if(데이터.mine) {//상대카드를 누르면
                return;
            }
            var 현재코스트 = Number(상대코스트.textContent);
            if(현재코스트 < 데이터.cost) {//카드의 코스트가 더 크면 못 뽑는다.
                return;
            }
            var idx = 내덱data.indexOf(데이터);
            상대덱data.splice(idx,1);
            상대필드data.push(데이터);
            상대덱.innerHTML = '';
            상대필드.innerHTML = '';
            상대필드data.forEach(function(data){
                카드돔연결(data,상대필드);
            });
            상대덱data.forEach(function(data){
                카드돔연결(data,상대덱);
            });
            내코스트.textContent = 현재코스트 - 데이터.cost;

        }
    });
    돔.appendChild(카드);

}

function 상대덱생성(개수) {
    for(var i=0; i < 개수; i++) {
        상대덱data.push(카드공장());
    }
    상대덱data.forEach(function(data){ //데이터를 화면에 표시하기 위해 반영하는 부분
        카드돔연결(data,상대덱);
    });
}

function 내덱생성(개수) {
    for(var i=0; i < 개수; i++) {
        내덱data.push(카드공장(false,true));
    }
    내덱data.forEach(function(data){ //데이터를 화면에 표시하기 위해 반영하는 부분
        카드돔연결(data,내덱);
    });
}
function 내영웅생성() {
    내영웅data = 카드공장(true,true);
    카드돔연결(내영웅data,내영웅,true);
}
function 상대영웅생성() {
    상대영웅data = 카드공장(true);
    카드돔연결(상대영웅data,상대영웅,true);
}

function Card(영웅,내카드) {
    if(영웅) {
        this.att = Math.ceil(Math.random() * 5);
        this.hp = Math.ceil(Math.random() * 5);
        this.hero = true;
    } else {
        this.att = Math.ceil(Math.random() * 5);
        this.hp = Math.ceil(Math.random() * 5);
        this.cost = Math.floor((this.att + this.hp) / 2);
    }
    if(내카드) {
        this.mine = true;
    }
    
}
function 카드공장(영웅,내카드) {
    return new Card(영웅,내카드);
}

function 초기세팅() {
    내덱생성(5);
    상대덱생성(5);
    내영웅생성();
    상대영웅생성();
}

초기세팅();