{{ block title }}
Make a deal
{{ endblock }}
{{ block content }}

<p>
    This is a 2-player game. Two managers are negotiating for the rating of
    a picture.
</p>
<p>
    You are the {{ player.role }}.
    Please negotiate with the {{ other_role }} below.
</p>

<table class="table">
    <tr>
        <th>Your current proposal</th>
        <td id="my-proposal">(none)</td>
        <td>
            <input type="number" id="my_offer">
            <button type="button" onclick="sendOffer()" id="btn-offer">Make new offer</button>
        </td>
    </tr>
    <tr>
        <th>{{ other_role }} proposal</th>
        <td id="other-proposal">(none)</td>
        <td>
            <button type="button" id="btn-accept" onclick="sendAccept(this)" style="display: none">Accept</button>
        </td>
    </tr>
</table>

<h4>Chat</h4>
{{ chat nickname=player.role }}

<script>
    let my_offer = document.getElementById('my_offer');
    let btnAccept = document.getElementById('btn-accept');
    let msgOtherProposal = document.getElementById('other-proposal');
    let msgMyProposal = document.getElementById('my-proposal');

    let otherProposal;

    my_offer.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendOffer();
        }
    });

    function sendOffer() {
        liveSend({'type': 'propose', 'amount': my_offer.value})
        my_offer.value = '';
    }

    function sendAccept() {
        liveSend({'type': 'accept', 'amount': otherProposal})
    }

    function cu(amount) {
        return `${amount} points`;
    }

    function liveRecv(data) {
        if ('proposals' in data) {
            for (let [id_in_group, proposal] of data.proposals) {

                if (id_in_group === js_vars.my_id) {
                    msgMyProposal.innerHTML = cu(proposal)
                } else {
                    msgOtherProposal.innerHTML = cu(proposal);
                    otherProposal = proposal;
                    btnAccept.style.display = 'block';
                }
            }
        }
        if ('finished' in data) {
            document.getElementById('form').submit();
        }
    }

    window.addEventListener('DOMContentLoaded', (event) => {
        liveSend({});
    });

</script>

{{ endblock }}