#1 by jrm0094 (edited )
Hi, I am trying to make a live page where there is a table of offers for players to choose from. Only one player can take one offer, so the live page has to remove the offer from the table. My problem is that this is only happening for the player who has taken the offer.
For example, there are 5 offers and 5 players, and player 1 takes offer 1. For some reason, players 2-5 still see offer 1.
Here is most of my html and javascript for the page that I am working on. If anyone could help me find a way to update all the players pages to show the most up-to-date offers that would greatly appreciated.
<table id="offers" class="table">
<tr>
<th>Player</th>
<th>Wage</th>
<th>Licensed</th>
<th>Taken</th>
<th>Accept</th>
</tr>
</table>
{{ if player.my_role == 1 }}
<div id="licensed-div">
<p>Input the licensed wage offer here:</p>
<input id="inputbox-licensed" type="number" min="0" step="0.01" max="0.25">
<button id="button-licensed" type="button" onclick="sendValueLicensed()">Send</button>
</div>
<div id="unlicensed-div">
<p>Input the unlicensed wage offer here:</p>
<input id="inputbox-unlicensed" type="number" max="0.25" min="0.00">
<button id="button-unlicensed" type="button" onclick="sendValueUnlicensed()">Send</button>
</div>
<div id="next-button-green"></div>
{{ endif }}
<div id="next-button-red"></div>
<script>
let offers = document.getElementById('offers');
let inputboxLicensed = document.getElementById('inputbox-licensed');
let inputboxUnlicensed = document.getElementById('inputbox-unlicensed');
function sendValueLicensed() {
if ((inputboxLicensed.value >= 0.00) && (inputboxLicensed.value <= 0.25) && (inputboxLicensed.value != "")) {
if (inputboxLicensed.value == 0 || inputboxLicensed.value == 0. || inputboxLicensed.value == 0.0) {
liveSend({'type': 'offer', "id_in_group": js_vars.id, 'value': "0.00", 'licensed': 0})
} else {
liveSend({'type': 'offer', "id_in_group": js_vars.id, 'value': inputboxLicensed.value, 'licensed': 1})
}
document.getElementById('licensed-div').remove();
}
if (document.getElementById('licensed-div') == null && document.getElementById('unlicensed-div') == null) {
document.getElementById('next-button-green').innerHTML += "<button>Next</button>";
}
}
function sendValueUnlicensed() {
if ((inputboxUnlicensed.value >= 0.00) && (inputboxUnlicensed.value <= 0.25) && (inputboxUnlicensed.value != "")) {
if (inputboxUnlicensed.value == 0 || inputboxUnlicensed.value == 0. || inputboxUnlicensed.value == 0.0) {
liveSend({'type': 'offer', "id_in_group": js_vars.id, 'value': "0.00", 'licensed': 0})
} else {
liveSend({'type': 'offer', "id_in_group": js_vars.id, 'value': inputboxUnlicensed.value, 'licensed': 0})
}
document.getElementById('unlicensed-div').remove();
}
if (document.getElementById('licensed-div') == null && document.getElementById('unlicensed-div') == null) {
document.getElementById('next-button-green').innerHTML += "<button id='next-button'>Next</button>";
}
}
function liveRecv(data) {
offers.innerHTML += "<tr class='tr-"+data.id_in_group+"-"+data.licensed+"'><td>" + data.id_in_group + "</td><td data-label='label'>" + data.value + "</td><td>" + data.licensed + "</td><td>" + data.taken + "</td><td><button class='acceptButton' type='button'>Accept Offer</button></tr>";
}
#2 by jrm0094
Here is my most up to date html and javascript for the live page:
<table id="offers" class="table">
<tr>
<th>Player</th>
<th>Wage</th>
<th>Licensed</th>
<th>Taken</th>
<th>Accept</th>
</tr>
</table>
{{ if player.my_role == 1 }}
<div id="licensed-div">
<p>Input the licensed wage offer here:</p>
<input id="inputbox-licensed" type="number" min="0" step="0.01" max="0.25">
<button id="button-licensed" type="button" onclick="sendValueLicensed()">Send</button>
</div>
<div id="unlicensed-div">
<p>Input the unlicensed wage offer here:</p>
<input id="inputbox-unlicensed" type="number" max="0.25" min="0.00">
<button id="button-unlicensed" type="button" onclick="sendValueUnlicensed()">Send</button>
</div>
<div id="next-button-green"></div>
{{ endif }}
<div id="next-button-red"></div>
<script>
let offers = document.getElementById('offers');
let inputboxLicensed = document.getElementById('inputbox-licensed');
let inputboxUnlicensed = document.getElementById('inputbox-unlicensed');
function sendValueLicensed() {
if ((inputboxLicensed.value >= 0.00) && (inputboxLicensed.value <= 0.25) && (inputboxLicensed.value != "")) {
if (inputboxLicensed.value == 0 || inputboxLicensed.value == 0. || inputboxLicensed.value == 0.0) {
liveSend({'type': 'offer', "id_in_group": js_vars.id, 'value': "0.00", 'licensed': 0})
} else {
liveSend({'type': 'offer', "id_in_group": js_vars.id, 'value': inputboxLicensed.value, 'licensed': 1})
}
document.getElementById('licensed-div').remove();
}
if (document.getElementById('licensed-div') == null && document.getElementById('unlicensed-div') == null) {
document.getElementById('next-button-green').innerHTML += "<button>Next</button>";
}
}
function sendValueUnlicensed() {
if ((inputboxUnlicensed.value >= 0.00) && (inputboxUnlicensed.value <= 0.25) && (inputboxUnlicensed.value != "")) {
if (inputboxUnlicensed.value == 0 || inputboxUnlicensed.value == 0. || inputboxUnlicensed.value == 0.0) {
liveSend({'type': 'offer', "id_in_group": js_vars.id, 'value': "0.00", 'licensed': 0})
} else {
liveSend({'type': 'offer', "id_in_group": js_vars.id, 'value': inputboxUnlicensed.value, 'licensed': 0})
}
document.getElementById('unlicensed-div').remove();
}
if (document.getElementById('licensed-div') == null && document.getElementById('unlicensed-div') == null) {
document.getElementById('next-button-green').innerHTML += "<button id='next-button'>Next</button>";
}
}
function liveRecv(data) {
offers.innerHTML += "<tr class='tr-"+data.from_player+"-"+data.licensed+"'><td>" + data.from_player + "</td><td data-label='label'>" + data.value + "</td><td>" + data.licensed + "</td><td>" + data.taken + "</td><td><button class='acceptButton' type='button'>Accept Offer</button></tr>";
}
function acceptOffer(event) {
if (js_vars.role == 0) {
if (event.target.classList.contains('acceptButton')) {
var row = event.target.closest('tr');
var from_player = row.querySelector('td:nth-child(1)').textContent;
var numberValue = row.querySelector('td:nth-child(2)').textContent;
var licensed = row.querySelector('td:nth-child(3)').textContent;
var numTaken = row.querySelector('td:nth-child(4)').textContent;
console.log('From player: ', from_player);
console.log('Number value:', numberValue);
console.log('Licensed', licensed);
console.log('Num taken: ', numTaken);
// Check if they don't already have a wage
if (js_vars.set_wage == 0) {
// Check if the player has the license to accept the offer
if ((js_vars.licensed == true && licensed == 'yes') || (js_vars.licensed == false && licensed == 'no')) {
liveSend({'type': 'acceptedOffer', 'from': from_player, 'for': js_vars.id, "licensed": licensed, 'value': numberValue})
console.log('sent accepted offer!');
js_vars.set_wage += numberValue;
event.target.closest('tr').remove();
document.getElementById('next-button-red').innerHTML += "<button id='next-button'>Next</button>"
} else {
console.log("does not meet license");
}
} else {
console.log("players set wage is above zero");
}
} else {
console.log('not sure how this wouldnt work...');
}
} else {
console.log('role cannot accept offers');
}
}
document.getElementById('offers').addEventListener('click', acceptOffer);
</script>
If anyone has any idea of how to update each players live page at the same time to show the most up-to-date offers available, please help. Even if you don't know for sure, anything will help.
Thank you for your help.
#3 by jrm0094
I figured out a way to solve the problem. I typed out a really long explanation but accidentally closed my browser so I lost all that, but I will explain it in hopefully simpler terms. I basically just sent a liveSend to the python code after someone accepts an offer to remove that specific job offer, that specific row in the table. Then I sent that back to all the players to remove that row from each of their offer tables.