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