Add debug tool for effects

public/board.js

@@ -1243,6 +1243,7 @@ canvas.addEventListener('contextmenu', function(event) {
 		if(itemKey in size && itemKey in position){
 			// Compare the event XY position to the item
 			if(clickableCheck(x,y,itemKey)){
+				console.log('itemId: '+itemKey);
 				// Only want to happen once (for now)
 				// Maybe in future add to hand would trigger another event if there's an effect?
 

public/debug.js

@@ -0,0 +1,52 @@
+// For front-end debugging
+// Anything to be tested that would otherwise need server logs, etc.
+// should go here
+
+function debugEffect(){
+
+	let damageAmount = document.getElementById("effectDamageAmount").value;
+	if(damageAmount == ""){ damageAmount = null; }
+
+	let targetId = document.getElementById("effectTargetId").value;
+	if(targetId == ""){ targetId = null; }
+
+	let targetId2 = document.getElementById("effectTargetId2").value;
+	if(targetId2 == ""){ targetId2 = null; }
+
+	let targetPlayer = document.getElementById("effectTargetPlayer").value;
+	if(targetPlayer == ""){ targetPlayer = null; }
+
+	let effectAddRemove = document.getElementById("effectAddRemove").value;
+	if(effectAddRemove == ""){ effectAddRemove = null; }
+
+	let effect = document.getElementById("effect").value;
+	if(effect == ""){ effect = null; }
+
+	debugEffectFunction(damageAmount, targetId, targetId2, targetPlayer, effectAddRemove, effect);
+
+}
+
+function debugEffectFunction(damageAmount = null, targetId = null, targetId2 = null, targetPlayer = null, effectAddRemove = null, effect = null){
+
+	if(effect == 'hurt'){
+		hurt(damageAmount, targetId, targetPlayer);
+	}
+	if(effect == 'heal'){
+		heal(damageAmount, targetPlayer);
+	}
+	if(effect == 'flight'){
+		console.log(targetId+' Flight: '+flight[targetId]);
+
+		console.log(effectAddRemove);
+
+		if(effectAddRemove == 'remove'){
+			removeFlight(targetId);
+		}else{
+			giveFlight(targetId);
+		}
+
+		console.log(targetId+' Flight: '+flight[targetId]);
+	}
+	if(effect == 'equip'){}
+}
+

public/index.html

@@ -58,6 +58,33 @@
 			</select>
 		</div>
 
+		<hr>
+		<div>
+			<button onclick="debugEffect();">Debug Effect</button>
+
+			<input type="text" placeholder="damage amount (X000s)" id="effectDamageAmount">
+			<input type="text" placeholder="targetId" id="effectTargetId">
+			<input type="text" placeholder="targetId2" id="effectTargetId2">
+			<input type="text" placeholder="targetPlayer" id="effectTargetPlayer">
+
+			<select name="effectAddRemove" id="effectAddRemove">
+				<option value="add">Add</option>
+				<option value="remove">Remove</option>
+			</select>
+
+			<select name="effect" id="effect">
+				<option value="hurt">Hurt</option>
+				<option value="heal">Heal</option>
+
+				<option value="">-- Add/Remove --</option>
+				<option value="flight">Flight</option>
+
+				<option value="equipCard">Equip</option>
+				<option value="unequipCard">unEquip</option>
+			</select>
+
+		</div>
+
 		<hr>
 		<div>
 			<button onclick="requestStartGame()">(Re)start game</button>
@@ -71,6 +98,7 @@
 		<script src="/board.js"></script>
 		<script src="/helper.js"></script>
 		<script src="/effect.js"></script>
+		<script src="/debug.js"></script>
 	</body>
 
 </html>