From 73bf96ee8c6204489a070f31f7def4aa0bd42132 Mon Sep 17 00:00:00 2001
From: Aelita4 <kontakt@mikorosa.pl>
Date: Thu, 21 Nov 2024 10:51:25 +0100
Subject: [PATCH] Add "add all" button for sending resources

---
 src/components/ResourceBar.astro |  1 +
 src/pages/game/fleet.astro       | 72 ++++++++++++++++++++++----------
 2 files changed, 51 insertions(+), 22 deletions(-)

diff --git a/src/components/ResourceBar.astro b/src/components/ResourceBar.astro
index 8b81b93..939ce33 100644
--- a/src/components/ResourceBar.astro
+++ b/src/components/ResourceBar.astro
@@ -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;"}
diff --git a/src/pages/game/fleet.astro b/src/pages/game/fleet.astro
index 82a4884..f3067f8 100644
--- a/src/pages/game/fleet.astro
+++ b/src/pages/game/fleet.astro
@@ -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>
\ No newline at end of file