턴 넘기기

변수를 생성하고, 차례를 바꾸는 건 비교적 간단하다.

var 턴 = true;//true면 내턴, false면 상대턴
턴 = !턴;//true->false, false->true로 바꾼다.

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 턴버튼 = document.getElementByID('turn-btn');
var 상대덱data = [];
var 내덱data = [];
var 상대영웅data;
var 내영웅data;
var 상대필드data = [];
var 내필드data = [];
var 턴 = true;//true면 내턴, false면 상대턴

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 || 데이터.field) {//상대카드를 누르거나 카드가 필드에 있으면
                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,내덱);
            });
            데이터.field = true;
            내코스트.textContent = 현재코스트 - 데이터.cost;
            내덱생성(1);//필드에 5장이 되도록 충족
        } else {//상대턴인데
            if(데이터.mine || 데이터.field) {//상대카드를 누르거나 카드가 필드에 있으면
                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;
            상대덱생성(1);//필드에 5장이 되도록 충족
        }
    });
    돔.appendChild(카드);

}

function 상대덱생성(개수) {
    for(var i=0; i < 개수; i++) {
        상대덱data.push(카드공장());
    }
    상대덱.innerHTML = '';//카드가 수정되는 부분이 있다면 그 부분만 고쳐주면 되는데 이 코드에선느 그냥 다 리셋하는 거로.
    상대덱data.forEach(function(data){ //데이터를 화면에 표시하기 위해 반영하는 부분
        카드돔연결(data,상대덱);
    });
}

function 내덱생성(개수) {
    for(var i=0; i < 개수; i++) {
        내덱data.push(카드공장(false,true));
    }
    내덱.innerHTML = '';//카드가 수정되는 부분이 있다면 그 부분만 고쳐주면 되는데 이 코드에선느 그냥 다 리셋하는 거로.
    내덱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);
    내영웅생성();
    상대영웅생성();
}

턴버튼.addEventListener('click',function(){
    턴 = !턴;//true->false, false->true로 바꾸는 간단한 코드
    if(턴) {
        내코스트.textContent = 10;
    } else {
        상대코스트.textContent = 10;
    }
    document.getElementById('rival').classList.toggle('turn');
    document.getElementById('my').classList.toggle('turn');
});

초기세팅();
//자바스크립트의 숙제 : 비동기 . 사용자 인터랙션들. =>RX(Reactive JavaScript) 비동기 인터랙션 쉽게 해결하기 위해.