{{ block title }}Round {{player.round_number}}{{ endblock }}
{{ block content }}

<div id="header-logo">
    <span><img src="https://www.smu.edu.sg/sites/all/themes/smubase_nw2_rev/svg/logo-d-smu.svg" alt="smu-logo" width="200" height="auto"></span>
    <span><p style="margin-top:10px; font-size:11px;"><i>Created by the Centre for Teaching Excellence.</i></p></span>
    <hr>
</div>

<h3 id="title">Round {{player.round_number}}</h3>

<p>
Click the "Next" button below to bid for the item.<br>
The page automatically proceeds to the next if a bid is not made. <br>
</p>

<div id="countdown_statement">
    <strong>Bidding begins after 3 seconds. </strong>
</div><br>

<!-- Animation that runs per second -->
<div id="bid-counter" style="height:280px"></div>

<input name="bid_amount" id="bid_amount" value=0 readonly hidden /> 
<!--{{ formfields }}-->

<div id="otherPlayersValues"></div>

<p id="item_value">
    Your item value is {{player.item_value_actual}}.
</p>

{{ formfield_errors 'bid_amount' }}

<button id="bid-btn" onclick="sendBidUpdate()" disabled>
       Leave Auction
</button>

<script>
// Insert elements to display bid value and animation that plays each second
let bid_display = document.getElementById("bid-counter");
bid_display.innerHTML = `
    <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
    <div id="bid-label"></div>
`;

const preparation_time = 3;
const bid_increment = {{Constants.bid_increment}};
const max_bid_val = {{Constants.max_auction_value}};
const max_bid_time = (max_bid_val / bid_increment) + preparation_time; 

let bid_label = document.getElementById("bid-label");
let bid_input = document.getElementById("bid_amount");
let bid_val = {{Constants.min_allowable_bid}};
let bid_btn = document.getElementById("bid-btn");
let remaining_players = {{Constants.players_per_group}};
let seconds_elapsed = 0;
    
// Run every second to update bid value
let bid_counter = setInterval(bid_handler, 1000);

// Choose desired function for opponent's results display mode
if (js_vars.display_opponents_results) {
    displayresults2();
} 
else {
    displayresults1();
}    
    
// Display opponents' choices and results 
    function displayresults1(){
    document.getElementById("otherPlayersValues").innerHTML = null;
}  
    
// Do not display opponents' choices and results  
function displayresults2(){
    let otherValues = js_vars.others_values;
    let arrLen = otherValues.length; 
    let otherPlayersHtml = "<p>"; 
   
    for (let i=0; i<arrLen; i++) {
        otherPlayersHtml += "Opponent " + (i+1) + "'s value is $" + otherValues[i] + "<br>";
    }
    otherPlayersHtml += "</p>";
    
    document.getElementById("otherPlayersValues").innerHTML = otherPlayersHtml;
}
   
// Updates bid counter and bid_amount
function bid_handler() {
    let display_bid_val = bid_val.toFixed(2);
    // Check if bid should begin, if not show countdown
    if (seconds_elapsed <= preparation_time) {
        bid_label.innerHTML = preparation_time - seconds_elapsed;
    }
    // Update bid value 
    else if (seconds_elapsed <= max_bid_time) {
        bid_label.innerHTML = display_bid_val;
        bid_val += bid_increment;
        if (bid_btn.hasAttribute("disabled")) {bid_btn.disabled = false};
    }
    // Once max value is reached, submit bid as max value
    else if (seconds_elapsed > max_bid_time) {
        clearInterval(bid_counter);
        bid_btn.setAttribute("disabled","disabled");
        bid_input.value = {{Constants.max_allowable_bid}};
        document.getElementById('form').submit();
    }
    // Print values outside range for troubleshooting
    else {
        console.log("Seconds passed: " + seconds_elapsed);
    }
    // Increase count of seconds elapsed
    seconds_elapsed++;
}
    
// Player wins auctions when 2nd last player quits 
function liveRecv(data) {
    remaining_players = data;
    if (remaining_players === 1) {
        bid_input.value = bid_val.toFixed(2);
        document.getElementById('form').submit();
    }
}
    
// Send current players remaining
function sendBidUpdate() {
    liveSend(remaining_players);
}
    
</script>

<style>
#bid-btn {
    color: #0066CC;
    font-weight: 800;
    background-color: white;
    padding: 10px 15px;
    border: 4px solid #0066CC;
    border-radius: 4px;
    margin-left: 75px;
}
    
#bid-btn:disabled {
    color: #808080;
    background-color: #C8C8C8;
    border: 4px solid #abcdef;
}
    
#bid-btn:hover {
    background-color: #FFEFD5;
}
    
#countdown_statement{
    animation: cssAnimation 0s 5s forwards;
    visibility: visible;
    margin-left: 45px;
}

@keyframes cssAnimation {
    to { visibility: hidden; }
}
    
#item_value{
    color: green;
    font-size: 16px;
    font-weight: 600;
    margin-left: 65px;
}

#otherPlayersValues{
    color: crimson;
    font-size: 16px;
    font-weight: 600;
    margin-left: 55px;
}    
    
.otree-body {
    background-color: {{ Constants.style_background_color }};
    color: {{ Constants.style_text_color }};
}

.otree-title {
    visibility: hidden;
    height: 0;
}
    
/*body {
  font-family: sans-serif;
  display: grid;
  height: 100vh;
  place-items: center;
}*/
    
#bid-label {
    display: block;
    position: absolute;
    margin-left: 55px;
    margin-top: -20px;
    width: 200px;
    height: auto;
    font-size: 36px;
    text-align: center;
}
    
.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}
    
.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 200px;
  height: 200px;
  margin-left: 50px;
  margin-top: -5px;
  border: 8px solid {{Constants.animation_color}};
  border-radius: 50%;
  animation: lds-ring 1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: {{Constants.animation_color}} transparent transparent transparent;
}
    
.lds-ring div:nth-child(1) {
  // animation-delay: -0.45s;
  // animation-delay: -0.40s;
}
    
.lds-ring div:nth-child(2) {
  // animation-delay: -0.3s;
  // animation-delay: -0.25s;
}
    
.lds-ring div:nth-child(3) {
  // animation-delay: -0.15s;
  // animation-delay: -0.10s;
}
    
@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>

{{ endblock }}