{{ block title }}
あなたの役割は　{{ if player.is_buyer }}買手{{ else }}売手{{ endif }}　です。
{{ endblock }}
{{ block content }}

<p id="news" style="color: green"></p>

<table class="table">
    <!-- <tr>
        <td>あなたの役割</td>
        <th>
            {{ if player.is_buyer }}買手{{ else }}売手{{ endif }}
        </th>
    </tr> -->
    <tr>
        <td>
            あなたの評価額
            {{ if player.is_buyer }}
                (これ以下の額で購入して下さい。)
            {{ else }}
                (これ以上の額で販売して下さい。)
            {{ endif }}
        </td>
        <th>
            {{ player.break_even_point }}
        </th>
    </tr>
    <tr>
        <td>あなたが所持している財の量</td>
        <th id="num_items"></th>
    </tr>
    <!-- <tr>
        <td>現在のあなたの入札額</td>
        <th id="current_offer"></th>
    </tr> -->
    <!-- <tr>
        <td>利潤</td>
        <th id="payoff"></th>
    </tr>
    <tr>
        <td>売手の数</td>
        <th id="num_sellers"></th>
    </tr>
    <tr>
        <td>買手の数</td>
        <th id="num_buyers"></th>
    </tr> -->
</table>


<input type="number" id="my_offer">
<button type="button" onclick="sendOffer()" id="btn-offer">新たに価格を入札する</button>
<div id="alert"></div>
<br><br>
<div class="container">
    <div class="row">
        <div class="col-sm">
            <h4>　<th id="num_buyers"></th>　</h4>            
            <table id="bids_table_player"></table>
        </div>
        <div class="col-sm">
            <h4>買注文</h4>
            <table id="bids_table"></table>
        </div>
        <div class="col-sm">
            <h4>売注文</h4>
            <table id="asks_table"></table>
        </div>
        <div class="col-sm">
            <h4>　</h4>
            <table id="asks_table_player"></table>
        </div>
        <div class="col-sm">            
        </div>

        <div class="col-sm">
            <h4>取引履歴</h4>
            <table id="result_time"></table>
        </div>            
        <div class="col-sm">
            <h4>価格</h4>
            <table id="result"></table>
        </div>
        <!-- <div class="col-sm">
            <h4>　</h4>
            <table id="result_player"></table>
        </div> -->
    </div>
</div>

<br><br>
<!-- {{ include 'double_auction/chart.html' }} -->


<script>
    // 定数
    let my_id = js_vars.id_in_group;
    let num_sellers = js_vars.num_sellers;
    let num_buyers = js_vars.num_buyers;
    let max_value = js_vars.max_value;    

    let bids_table_player = document.getElementById('bids_table_player');
    let asks_table_player = document.getElementById('asks_table_player');
    
    let bids_table = document.getElementById('bids_table');
    let asks_table = document.getElementById('asks_table');    
    let news_div = document.getElementById('news'); // 取引成立時メッセージ
    let is_buyer = js_vars.is_buyer;// 送信ボタン
    let btnOffer = document.getElementById('btn-offer');// 送信ボタン
    let my_offer = document.getElementById('my_offer'); // 入力ボックス
    let lock_frag = false;
    
    function showNews(msg) {
        news_div.innerText = msg;
        // メッセージの削除
        // setTimeout(function () {　　
        //     news_div.innerText = ''
        // }, 10000)
    }

    function cu(amount) {
        return `${amount} `;
    }
    
    function cu_player(x,player_id) {
        if(x == player_id){
            return `(あなた) `;
        }else{
            return `　`;
        }        
    } 

    function make_table(obj,player_id) {        
        obj[player_id] = `${obj[player_id]} (あなた)`
        //キーを含んだ配列に変換 オブジェクト⇒配列
        var array = Object.keys(obj).map((k)=>({ key: k, value: obj[k] }));
        //値段順
        array.sort((a, b) => a.value - b.value);
        //配列⇒オブジェクト　で元に戻す
        obj = Object.assign({}, ...array.map((item) => ({
            [item.key]: item.value,
        })));        
        for (let i of obj){
            let array_1 = []; //　取引時間
        }
        if(x == player_id){
            return `${i[0]} (あなた)`;
        }else{
            return `${i[0]}`;
        }        
    } 

    function make_history(x,player_id) {
        let array_1 = []; //　取引時間
        let array_2 = []; //　プレーヤー
        let array_3 = []; // 価格
        for (let i of x){                                        
            array_2.push(i[1])                                 
            if (i[2] == player_id||i[3] == player_id){
                array_1.push(`${i[0]} 秒(あなた)`)
                array_3.push(`${i[1]} `)
            }else{
                array_1.push(`${i[0]} 秒`)
                array_3.push(i[1])
            }
        }        
        return [array_1,array_2,array_3];
    }

    function liveRecv(data) {
        console.log(data)       
        // javascript destructuring assignment
        let {player, bids_dict, asks_dict,bids, asks, bids_player, asks_player, highcharts_series, num_items, current_offer, payoff, news, finish_frag,results_series } = data;                
        console.log(finish_frag ) 
        if (finish_frag === true) {// 画面ロック
            btnOffer.style.display = 'none'
        }
        if (finish_frag === 0) {// 画面ロック
            btnOffer.disabled = true;            
        }
        
        if (news) {
            let {buyer, seller, price} = news;
            if (buyer === my_id) {
                showNews(`あなたは player ${seller} から ${cu(price)}で購入しました。`);
            } else if (seller === my_id) {
                showNews(`あなたは player ${buyer} に ${cu(price)}で販売しました。`);
            }
        }
        console.log(results_series)    
        document.getElementById('num_items').innerText = num_items;
        // document.getElementById('current_offer').innerText = cu(current_offer);        
        // document.getElementById('payoff').innerText = cu(payoff);
        // document.getElementById('num_sellers').innerText = cu(num_sellers);        
        // document.getElementById('num_buyers').innerText = cu(num_buyers);            
        bids_table_player.innerHTML = bids_player.map(e => `<tr><td>${cu_player(e,my_id)}</td></tr>`).join(''); //
        asks_table_player.innerHTML = asks_player.map(e => `<tr><td>${cu_player(e,my_id)}</td></tr>`).join(''); //
        // result_player.innerHTML =players.map(e => `<tr><td>${cu_player(e,my_id)}</td></tr>`).join(''); //
        
        console.log(bids_dict)
        // bids = make_table(bids,my_id)
        // asks = make_table(asks,my_id)

        bids_table.innerHTML = bids.map(e => `<tr><td>${cu(e)}</td></tr>`).join(''); // => アロー関数
        asks_table.innerHTML = asks.map(e => `<tr><td>${cu(e)}</td></tr>`).join(''); // https://it-biz.online/web-design/arrow-function/
        
        times = make_history(results_series,my_id)[0]
        prices = make_history(results_series,my_id)[1] 
        players = make_history(results_series,my_id)[2] //なくてもよし

        result_time.innerHTML = times.map(e => `<tr><td>${cu(e)}</td></tr>`).join(''); // => アロー関数
        result.innerHTML = players.map(e => `<tr><td>${cu(e)}</td></tr>`).join(''); // => アロー関数
        // result_player.innerHTML = players.map(e => `<tr><td>${cu(e)}</td></tr>`).join(''); // https://it-biz.online/web-design/arrow-function/
        
        // redrawChart(highcharts_series);// グラフの更新        
        if(player == my_id){
            let lock_frag = false
            document.getElementById('alert').innerHTML = ''; 
        }
    }

    function sendOffer() { // 送信処理
        let offer = my_offer.value
        if (offer.match(/[0-9]+/g) != offer ) {
            document.getElementById('alert').innerHTML = '決められた範囲の数値を入力してください。';            
        } else if(offer <=0 || max_value <= offer ){
            document.getElementById('alert').innerHTML = '決められた範囲の数値を入力してください。';                        
        } else if(lock_frag == false){
            liveSend({'offer': offer,'offer_frag':true})
            let lock_frag = true
            document.getElementById('alert').innerHTML = '入札中です。しばらくお待ちください';                        
        }
    }

    my_offer.addEventListener("keydown", function (event) {  // Enterボタン時の処理
        if (event.key === "Enter") {
            sendOffer();
        }
    });

    document.addEventListener('DOMContentLoaded', (event) => {
        liveSend({'offer_frag':false});
    });
</script>

{{ endblock }}