필드카드선택과 턴오버

필드에서 카드를 선택하면 공격을 하는 것이다. 카드를 선택하면 해당 카드에 css 스타일로 표시를 해주고, 공격을 한 후에는 선택한 데이터는 null로 바꿔주고 클래스도 바꿔준다.

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) {//내 카드를 선택하고 상대 카드를 선택하면 공격
                데이터.hp = 데이터.hp - 나.선택카드.att;
                나.선택카드.classList.remove('card-selected');
                나.선택카드.classList.add('card-turnover');
                나.선택카드 = null;//공격 끝나면 선택 해제
                return;
            }else if(!데이터.mine) {//상대카드를 누르면
                return;
            }
            if(데이터.field) {//카드가 필드에 있으면(공격!)
                카드.parentNode.querySelectorAll('.card-selected').forEach(function(card){//카드 중복선택을 막기 위해 선택된 카드만 해제해주면 되지만 선택된 카드를 찾기가 복잡하기 때문에 그냥 다 해제한다.
                    card.classList.remove('card-selected');
                });
                카드.classList.add('card-selected');
                나.선택카드 = 데이터;
                나.선택카드data = 데이터;
            }else {//카드가 덱에 있으면
                if(덱에서필드로(데이터, true) !== 'end') {//true가 아닐 때 덱생성
                    나.덱생성(1);//필드에 5장이 되도록 충족
                }
            }
        } else {//상대턴인데
            if(데이터.mine || 데이터.field) {//상대카드를 누르거나 카드가 필드에 있으면
                return;
            }
            if(덱에서필드로(데이터, false) !== 'end') {
                상대.덱생성(1);//필드에 5장이 되도록 충족
            }
            
        }
    });
    돔.appendChild(카드);

}