Fixed a bug where the combatant modal would close after clicking OK / pressing enter even though the input didn't validate

TODO.md

@@ -48,19 +48,33 @@
 -	x Sortierung falsch, wenn Ini gleich und Rea unterschiedlich
 -	x icons for dead and K.O don't load
 -	x actions-menu soll zugehen, wenn man auf eine freie Stelle klickt (so wie damage-monitor) 
+-	x SVG Improvements
+	-	x verbleibende Bilder in SVGs umwandeln/nachbauen
+		-	umwandeln: Inkscape
+		-	nachbauen: svgedit.netlify.com, 
+		-	x betrifft: add.png, newround.png, cross.png, zzz.png
+		-	x dann muss ich add und newround auch nicht mehr mit CSS filter auf die richtige Farbe bringen
+	-	x bestehende SVGs vereinfachen (polygon oder rect statt path)
+		-	x betrifft act 
+	-	x als Symbole definieren und mit <use> wiederverwenden: https://stackoverflow.com/a/59614656
+-	x take damage fkt nicht mehr richtig: es werden die falschen buttons re/deaktiviert
+	-	non-issue, geht doch
+-	x SVGs in eigene Dateien packen? (Derzeit sind sie in der index.html definiert)
+	-	via SVGInject: https://github.com/iconfu/svg-inject  
+-	wenn ich bei add combatant mit der Maus auf OK klicke oder Enter drücke, macht er das Modal zu, auch wenn die Eingaben invalid sind
+	-	korrigiert, indem ich nicht mehr den Buttons data-bs-modal="toggle" mitgebe, sondern das modal via JS in addCombatant() bzw. editCombatant() verstecke
+	-	Problem: dann ist das modal weg, aber der backdrop noch da (ich kann nichts anklicken)
+		-	Lösung: mit bs.getInstance das Bootstrap Object kriegen, dann hide()
+	-	bei Apply modal offen lassen
 
 ### open
 
--	SVG Improvements
+-	manchmal wird svg-inject nicht geladen und dann sind alle icons weg
-	-	verbleibende Bilder in SVGs umwandeln/nachbauen
+-	im Chromium sind die Slider für Damage im CombatantModal ungestylet 
-		-	umwandeln: Inkscape
+-	Seite für größere Screens anpassen
-		-	nachbauen: svgedit.netlify.com, 
+	-	Schrift, Buttons, Icons skalieren
-		-	betrifft: add.png, newround.png, cross.png, zzz.png
+	-	em und % statt px
-		-	dann muss ich add und newround auch nicht mehr mit CSS filter auf die richtige Farbe bringen
+	-	Tabellenbreite begrenzen
-	-	bestehende SVGs vereinfachen (polygon oder rect statt path)
-		-	betrifft act 
-	-	macht es Sinn, die SVGs in eigene Dateien zu packen? Derzeit sind sie im HTML Sourcecode
-		-	als Symbole definieren: https://stackoverflow.com/a/59614656
 -	make color scheme friendly for people with red green bindness (Felix)
 	-	see here: https://venngage.com/tools/accessible-color-palette-generator
 	-	tests
@@ -74,8 +88,6 @@
 -	warum fkt. das Ganze nicht als Webapp?
 	-	Firefox (android) sieht die Seite nicht als installable an
 	-	Webmanifest ist aber da und scheint auch in Ordnung zu sein (sagt Firefox on Linux) 
--	bug in validateCombatant: OK schließt das modal, auch wenn die Eingaben invalid sind
--	wenn ich bei add combatant mit der Maus auf OK klicke, macht er das Modal zu, auch wenn die Eingaben invalid sind
 -	nach dem Laden passiert es manchmal, dass nach dem Einfügen von testCombatant das add Modal gleich wieder aufgeht 
 	-	schien die gleiche Sache zu sein wie mit dem hidden.bs.modal event
 	-	jetzt kommt es aber trotzdem manchmal wieder

src/css/sr2ini.scss

@@ -1,6 +1,9 @@
-$fg: deeppink;				// #ff1493
+/*$fg: deeppink;				// #ff1493
 $fg-bright: lightpink;		// #ffb6c1
-$fg-dark: #b3005f;
+$fg-dark: #b3005f;*/
+$fg: gold;
+$fg-bright: yellow;
+$fg-dark: orange;
 
 $bg: cyan;					// #00ffff
 $bg-bright: lightcyan;		// #e0ffff
@@ -249,6 +252,7 @@ header.navbar {
 
 .badge.bg-warning {
 	background: radial-gradient(circle at center, $bg, $bg-dark);
+	color: black;
 	bottom: -4px;
 	left: 12px;
 	width: 20px;
@@ -256,6 +260,7 @@ header.navbar {
 
 .badge.bg-danger {
 	background: radial-gradient(circle at center, $fg, $fg-dark);
+	color: black;
 	left: 12px;
 	top: 12px;
 	width: 20px;
@@ -370,7 +375,7 @@ footer {
 		user-select: auto;
 
 		a {
-			color: $bg-bright;
+			color: $fg;
 			text-decoration: none;
 		}
 	}

src/index.html

@@ -16,7 +16,7 @@
 	<link type="text/css" rel="stylesheet" href="../node_modules/augmented-ui/augmented-ui.css">
 	<link type="text/css" rel="stylesheet" href="css/sr2ini.scss">
 	
-	<script type="module" src="js/sr2ini.js" defer></script>
+	<script type="module" src="js/sr2ini.js"></script>
 	<script type="module" src="../node_modules/@iconfu/svg-inject/dist/svg-inject.js"></script>
 
 	<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
@@ -63,8 +63,7 @@
 
 	<div class="footer-container">
 		<footer data-augmented-ui="tl-2-clip-x tr-2-clip-x both">
-			<p>code & design by <a href="https://tobias-radloff.de/" tabindex="-1" title="Eclipse">Eclipse</a> | Shadowrun trademarked by <a href="https://www.topps.com/" tabindex="-1" title="Topps">Topps</a><br>
+			<p>code & design by <a href="#" tabindex="-1" title="Eclipse">Eclipse</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
-			icons by <a href="https://www.freepik.com" tabindex="-1" title="Freepik">Freepik</a> from <a href="https://www.flaticon.com/" tabindex="-1" title="Flaticon">www.flaticon.com</a> | background by <a href="https://www.deviantart.com/xxaries1970xx" tabindex="-1" title="xxAries1970xx on DeviantArt">xxAries1970xx</a></p>
 		</footer>
 	</div>
 
@@ -102,7 +101,7 @@
 						<div class="input-group input-group-sm my-2">
 							<input type="number" min="1" max="5" class="form-control form-control-sm" id="combatant-modal-dice" form="combatant-form" placeholder="Dice">
 							<span class="input-group-text">D+</span>
-							<input type="number" min="1" max="25" class="form-control form-control-sm" id="combatant-modal-rea" form="combatant-form" placeholder="REA">
+							<input type="number" min="0" max="30" class="form-control form-control-sm" id="combatant-modal-rea" form="combatant-form" placeholder="REA">
 							<span class="input-group-text">&nbsp;&nbsp;&nbsp;</span>
 							<input type="number" min="0" max="55" class="form-control form-control-sm" id="combatant-modal-ini" form="combatant-form" placeholder="Ini">
 
@@ -123,8 +122,8 @@
 				<div class="modal-footer" data-augmented-ui="inlay">
 					<button type="button" class="sr2-button" id="combatant-modal-cancel-button" data-bs-dismiss="modal">Cancel</button>
 					<button type="submit" class="sr2-button" id="combatant-modal-add-apply-button">Apply</button>
-					<button type="submit" class="sr2-button" id="combatant-modal-add-ok-button" data-bs-dismiss="modal">OK</button>
+					<button type="submit" class="sr2-button" id="combatant-modal-add-ok-button" >OK</button>
-					<button type="submit" class="sr2-button d-none" id="combatant-modal-edit-ok-button" data-bs-dismiss="modal">OK</button>
+					<button type="submit" class="sr2-button d-none" id="combatant-modal-edit-ok-button" >OK</button>
 				</div>
 			</div>
 		</div>

src/js/sr2ini.js

@@ -230,6 +230,7 @@ function handleMoreActionsButtonClick(e) {
 	return false;
 }
 
+// click handler for new round button
 function handleNewRoundButton(e) {
 	// restyle modal
 	$("#confirm-modal .modal-title").text("Start new Round");
@@ -259,6 +260,10 @@ function addCombatant(e) {
 	if (!validateCombatant()) {
 		return false;
 	}
+	// hide modal if OK was pressed, but not on Apply
+	if (e.target.id != "combatant-modal-add-apply-button") {
+		bs.getInstance($("#combatant-modal")).hide();
+	}
 	// roll for initiative if necessary
 	let ini = $("#combatant-modal-ini").val().trim();
 	ini = (ini != "") ? ini : rollForInitiative($("#combatant-modal-dice").val(), $("#combatant-modal-rea").val());
@@ -316,6 +321,8 @@ console.log("editing combatant …")
 	if (!validateCombatant()) {
 		return false;
 	}
+	// hide modal 
+	bs.getInstance($("#combatant-modal")).hide();
 	// get values
 	let name = $("#combatant-modal-name").val().trim();
 	let ini = $("#combatant-modal-ini").val().trim();
@@ -508,7 +515,7 @@ $(document).ready(function () {
 			$(".actions-menu.seen").removeClass("seen");
 		}
 	});
-	addTestCombatant();
+//	addTestCombatant();
 });
 
 module.exports = { rollForInitiative, validateCombatant, whoGoesFirst, getEffectiveIni };