{{ block title }}
eBay Like Auction
{{ endblock }}
{{ block content }}

<p>This is an eBay-like auction for a Tom Brady autographed jersey worth 100 dollars.</p>


<table class="table">
    <tr>
      <th>Leading Bid</th>
      <td id="lead-bid">   </td>
    </tr>
    <tr>
    <th>My bid</th>
    <td id="my-bid">   </td>
  </tr>
    <tr>
        <th>Make new bid</th>
        <td>
            <input type="number" id="input-bid">
            <button type="button" onclick="sendBid()">Make new bid</button>
        </td>
    </tr>
</table>


<script>
    let leadBid = document.getElementById('lead-bid');
    let myBid = document.getElementById('my-bid');
    let bidInput = document.getElementById('input-bid');
    bidInput.addEventListener("keydown", function (event) {
        if (event.key === "Enter") {
            sendBid();
        }
    });

    function sendBid() {
        let bid = parseInt(bidInput.value);
        if (isNaN(bid)) return;
        liveSend({'bid': bid})
        bidInput.value = '';
    }

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

    function liveRecv(data) {
        // javascript destructuring assignment
        let {is_new_high_bid, highest_bid, highest_bidder, my_bid, my_id} = data;
        let leadingBidderLabel = (highest_bidder === js_vars.my_id) ? 'Me' : 'Other player';
        leadBid.innerText = `${cu( highest_bid)} (${leadingBidderLabel})`;
        if (js_vars.my_id === my_id) {
              myBid.innerText = `${cu(my_bid)}`;
        }
        if (is_new_high_bid) {
            leadBid.style.backgroundColor = 'lightgreen';
            setTimeout(function () {
              leadBid.style.backgroundColor = '';
            }, 1000);
          }
    }

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

</script>

{{ endblock }}