{{ block title }}
以下の中から腎臓を一つ選んでください。
{{ endblock }}
{{ block content }}

<p id="msg-my-num"></p>

<button  id="card_0" class="Card p-4 btn-outline-dark" value=0 disabled = 'disabled' style="width: 4.2rem;"   type="button" data-toggle="button">優先権</button>

<p id="msg-my-result"></p>
<p id="msg-my-status"></p>
<p id="msg-my-direction"></p>

<br><br>
{{ include Constants.instructions_template }}

<script>

let msgMyNum = document.getElementById('msg-my-num');
let msgMyStatus = document.getElementById('msg-my-status');
let msgMyResult = document.getElementById('msg-my-result');
let msgMyDirection = document.getElementById('msg-my-direction');
let cardBtn = document.getElementById('card_0');

msgMyNum.innerText = `あなたの番号は ${js_vars.my_id} です.`;


for (let i = 1 ; i< js_vars.players_per_group+1;i++ ){
    var cloneBtn = cardBtn.cloneNode(true);
    cloneBtn.disabled = 'disabled' 
    cloneBtn.style.fontWeight = ""
    cloneBtn.id = "card_"+i;
    cloneBtn.value = i
    cloneBtn.innerText = i+" 番";
    cardBtn.after(cloneBtn);
    var cloneBtn = document.getElementById("card_"+i)
}


function Lock(){
    cardBtn.disabled = 'disabled'
    for (let i = 1 ; i< js_vars.players_per_group+1;i++ ){        
        let id_num = "card_"+i;
        let card = document.getElementById(id_num);
        card.disabled = 'disabled';
        }   
    }
function activateCard(data){
    cardBtn.disabled = ''
    cardBtn.innerText = "優先権"
    for (let i = 1 ; i< js_vars.players_per_group+1;i++ ){
        let id_num = "card_"+i;
        let card = document.getElementById(id_num);
        if(data.kideny.includes(i.toString())){
            card.innerText = i +　" 番"
            if(!data.applyed_frag){
                card.disabled = ''
            }
            }else{
            card.disabled = 'disabled'
            card.innerText = '品切れ'
            }
        }
        } 

function sendValue(data){      
    let value = data.value;
    data.innerText= "選択中"
    document.activeElement.blur();
    liveSend({clicked:true,value:value});
}


function liveRecv(data) {
    console.log("受け取りデータ",data)    
    console.log("受け取りデータ",data.direction)    
    msgMyDirection = data.direction;
    // console.log("矢印",data.Direction[0])
    if(data.status){
        msgMyResult.innerText = `${data.result} をもらいました. `;
        msgMyStatus.innerText = `他の人が終わるまで待ってください`;
    }else{
        if(!data.applyed_frag){
            activateCard(data)
            msgMyStatus.innerText = `残りの腎臓の中から1つ選んでください。`;                
            if(data.algo){
                msgMyResult.innerText = `残念ながらダメでした。`;
                msgMyStatus.innerText = `残りの腎臓の中から1つ選んでください。`; 
            }
        }else{
            msgMyStatus.innerText = `そのままお待ちください`;
            i = data.current_value
            let id_num = "card_"+i;
            let card = document.getElementById(id_num);
            console.log(id_num)
            card.innerText = '選択中'
        }
    }
    if(data.end_frag){
        msgMyStatus.innerText = `腎臓を配り終えました`;
        i = data.result
        let id_num = "card_"+i;
        let card = document.getElementById(id_num);
        card.innerText = '獲得'
    }    
}

// カードが押された場合の処理
var li = document.getElementsByClassName('Card');
for (var i=0; i < js_vars.players_per_group+1; i++) {
    li[i].addEventListener('click', function() {
        Lock()
        sendValue(this);
});
};

document.addEventListener("DOMContentLoaded", function (event) {
    liveSend({clicked:false});// サーバーに送信
});
</script>


{{ endblock }}