Aelita4
/
AstroCol
1
0
Fork 0
Code Issues 2 Pull Requests Packages Projects 1 Releases Wiki Activity

Add "add all" button for sending resources

This commit is contained in:
Aelita4 2024-11-21 10:51:25 +01:00
parent 639cece8f5
commit 73bf96ee8c
Signed by: Aelita4
GPG Key ID: E44490C2025906C1
2 changed files with 51 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/ResourceBar.astro
View File

@ -34,6 +34,7 @@ for(const key of planet.resources.resources) {
{resourceArray.map(res =>
<div class="resourcebar-item"
data-res-type={resourceTypes.find(x => x.id === res.id)?.type ?? "solid"}
data-res-id={res.id}
data-res-amount={res.amount}
data-res-mining-rate={res.perHourMiningRate}
style={(resourceTypes.find(x => x.id === res.id)?.type ?? "solid") === "solid" ? "" : "display: none;"}

72
src/pages/game/fleet.astro
View File

@ -182,6 +182,7 @@ const sectorsList = galaxies.map(galaxy => {
<option value="helium-3">Helium-3</option>
</select>
<input type="number" name="cargo[0][amount]" class="input" />
<button type="button" class="cargo-sendall" name="cargo[0][all]">All</button>
</div>
</div>
<div id="cargo-add-new">Add new +</div>
@ -316,15 +317,16 @@ label {
color: black;
}
</style>
<script define:vars={{ sectorsList }}>
<script define:vars={{ lang, sectorsList }}>
const destinationGalaxy = document.getElementById('destination-galaxy');
const destinationSector = document.getElementById('destination-sector');
const destinationSystem = document.getElementById('destination-system');
const destinationPlanet = document.getElementById('destination-planet');
const toSystemCheckbox = document.querySelector('input[name="toSystem"]');
const sendAllButtons = document.querySelectorAll('.cargo-sendall');
if(!destinationGalaxy || !destinationSector || !destinationSystem || !destinationPlanet || !toSystemCheckbox) {
console.error('Could not find destination elements');
if(!destinationGalaxy || !destinationSector || !destinationSystem || !destinationPlanet || !toSystemCheckbox || !sendAllButtons) {
console.error('Could not find all elements');
return;
};
@ -417,33 +419,59 @@ label {
destinationGalaxy.dispatchEvent(new Event('change'));
toSystemCheckbox.addEventListener('change', () => {
if(toSystemCheckbox.checked) {
destinationPlanet.disabled = true;
} else {
destinationPlanet.disabled = false;
}
destinationPlanet.disabled = toSystemCheckbox.checked;
});
sendAllButtons.forEach(button => {
button.addEventListener('click', () => handleAllClick(button));
});
const addNew = document.getElementById('cargo-add-new');
addNew.addEventListener('click', () => {
const cargoContainer = document.querySelector('.cargo-container');
const cargoItem = document.createElement('div');
cargoItem.classList.add('cargo-item');
cargoItem.innerHTML += `
<select name="cargo[${cargoContainer.children.length}][id]" class="select">
<option value="coal">Coal</option>
<option value="iron">Iron</option>
<option value="gold">Gold</option>
<option value="water">Water</option>
<option value="sulfuric-acid">Sulfuric Acid</option>
<option value="liquid-nitrogen">Liquid Nitrogen</option>
<option value="hydrogen">Hydrogen</option>
<option value="oxygen">Oxygen</option>
<option value="helium-3">Helium-3</option>
</select>
<input type="number" name="cargo[${cargoContainer.children.length}][amount]" class="input" />`;
const selectMenu = document.createElement('select');
selectMenu.name = `cargo[${cargoContainer.children.length}][id]`;
selectMenu.classList.add('select');
for(const res of ['coal', 'iron', 'gold', 'water', 'sulfuric-acid', 'liquid-nitrogen', 'hydrogen', 'oxygen', 'helium-3']) {
const opt = document.createElement('option');
opt.value = res;
opt.innerText = res;
selectMenu.appendChild(opt);
}
cargoItem.appendChild(selectMenu);
const input = document.createElement('input');
input.type = 'number';
input.name = `cargo[${cargoContainer.children.length}][amount]`;
input.classList.add('input');
cargoItem.appendChild(input);
const button = document.createElement('button');
button.type = 'button';
button.addEventListener('click', () => handleAllClick(button));
button.classList.add('cargo-sendall');
button.name = `cargo[${cargoContainer.children.length}][all]`;
button.innerText = 'All';
cargoItem.appendChild(button);
cargoContainer.appendChild(cargoItem);
});
function handleAllClick(button) {
const avaliableResources = [];
for(const resItem of document.querySelectorAll('.resourcebar-item')) {
avaliableResources.push({
id: resItem.dataset.resId,
amount: parseInt(resItem.dataset.resAmount)
});
}
const resourceId = button.parentElement.children.item(0).value;
const amount = avaliableResources.find(res => res.id === resourceId)?.amount ?? 0;
button.parentElement.children.item(1).value = amount;
}
</script>