From 8932e2d8cf3752cfe402bc7872205fecccbddfb1 Mon Sep 17 00:00:00 2001
From: Thomas Young <35073576+DrakeRichards@users.noreply.github.com>
Date: Mon, 7 Nov 2022 12:18:20 -0600
Subject: [PATCH] #12: Added buttons to group tracker

---
 Infinity-2d20/Infinity 2d20.css  | 46 +++++++++++++++++++++++++++++---
 Infinity-2d20/Infinity 2d20.html | 41 ++++++++++++++++++++++++++--
 2 files changed, 81 insertions(+), 6 deletions(-)

diff --git a/Infinity-2d20/Infinity 2d20.css b/Infinity-2d20/Infinity 2d20.css
index f61b692b46..a0441fbba4 100644
--- a/Infinity-2d20/Infinity 2d20.css	
+++ b/Infinity-2d20/Infinity 2d20.css	
@@ -66,6 +66,27 @@ button[type=roll] {
 	font-family: initial;
 }
 
+/* #region: Input & Buttons */
+
+	.charactersheet .hover-blue {
+		background: white;
+		color: var(--dark-secondarytext);
+		font-family: 'Orbitron';
+		font-weight: bold;
+	}
+
+	.charactersheet .hover-blue:hover {
+		cursor: pointer;
+		background: #dddddd;
+	}
+
+	.charactersheet .hover-blue:active {
+		color: white;
+		background-color: #3399FF;
+	}
+
+/* #endregion: Buttons */
+
 	/* #region Tables */
 		table {
 			border-collapse: collapse;
@@ -157,7 +178,8 @@ button[type=roll] {
 	/* #endregion */
 
 	/* #region Headers */
-		.header-banner {
+		.header-banner,
+		.charactersheet h1 {
 			background-image: linear-gradient(to bottom left, transparent 50%, black 50%), linear-gradient(black, black), linear-gradient(black, black);
 			background-size: 20px 20px, 100% 100%, 100% 100%;
 			background-position: 100% 0%, -20px 0%, 100% 20px;
@@ -1012,9 +1034,10 @@ div.section {
 
 	#type-Group .grid {
 		display: grid;
-		grid-template-columns: 1fr 1fr;
+		grid-template-columns: 1fr 30px 1fr;
 		justify-items: center;
 		justify-content: space-between;
+		align-items: center;
 		margin-top: 25px;
 	}
 
@@ -1027,10 +1050,11 @@ div.section {
 		width: 200px;
 	}
 
-	#type-Group .grid > div > div {
+	#type-Group .grid div.row {
 		background: white;
-		border: solid #70c4db;
+		border: solid 2px #70c4db;
 		border-width: 0px 2px 2px 2px;
+		width: auto;
 	}
 
 	#type-Group img {
@@ -1039,6 +1063,20 @@ div.section {
 		height: 150px;
 	}
 
+	#type-Group button {
+		width: 30px;
+		border: solid #70c4db;
+		border-width: 0px 1px 0px 1px;
+		text-align: center;
+		justify-content: center;
+	}
+
+	#type-Group button[name="act_momentum-to-heat"] {
+		width: 30px;
+		height: 30px;
+		padding: 0;
+	}
+
 /* #endregion: GROUP TAB */
 
 /* === Legacy selectors === */
diff --git a/Infinity-2d20/Infinity 2d20.html b/Infinity-2d20/Infinity 2d20.html
index 79268f469b..5ca4a44cf6 100644
--- a/Infinity-2d20/Infinity 2d20.html	
+++ b/Infinity-2d20/Infinity 2d20.html	
@@ -2142,12 +2142,23 @@
 		<div>
 			<img src="https://raw.githubusercontent.com/DrakeRichards/roll20-character-sheets/12-group-momentumheat-tracker/Infinity-2d20/Momentum%20Token.png">
 			<h3>Momentum</h3>
-			<div><input type="number" id="group-momentum" name="attr_group_momentum"></div>
+			<div class="row">
+				<button type="action" name="act_attr-inc" class="hover-blue" value="group_momentum,-1">-1</button>
+				<input type="number" id="group-momentum" name="attr_group_momentum" value="0">
+				<button type="action" name="act_attr-inc" class="hover-blue" value="group_momentum,1">+1</button>
+			</div>
+		</div>
+		<div>
+			<button type="action" name="act_attr-inc" class="hover-blue" value="group_momentum,-1,group_heat,1">>></button>
 		</div>
 		<div>
 			<img src="https://raw.githubusercontent.com/DrakeRichards/roll20-character-sheets/12-group-momentumheat-tracker/Infinity-2d20/Heat%20Token.png">
 			<h3>Heat</h3>
-			<div><input type="number" id="group-heat" name="attr_group_heat"></div>
+			<div class="row">
+				<button type="action" name="act_attr-inc" class="hover-blue" value="group_heat,-1">-1</button>
+				<input type="number" id="group-heat" name="attr_group_heat" value="0">
+				<button type="action" name="act_attr-inc" class="hover-blue" value="group_heat,1">+1</button>
+			</div>
 		</div>
 	</div>
 </div>
@@ -5582,4 +5593,30 @@
 	
 		openSheet();
 	});
+
+	on('clicked:attr-inc', function(info) {
+		const split = (info.htmlAttributes.value).split(",");
+		let attr = {
+			from: {
+				name: split[0],
+				inc: split[1]
+			},
+			to: {
+				name: (split.length > 2) ? split[2] : "",
+				inc: (split.length > 2) ? split[3] : 0
+			}
+		};
+
+		getAttrs([attr.from.name, attr.to.name], function(values) {
+			let setObj = {};
+			if ((attr.from.inc == '-1') && (values[attr.from.name] == '0')) {
+				return;
+			}
+			setObj[attr.from.name] = Number(values[attr.from.name]) + Number(attr.from.inc);
+			if (attr.to.name !== "") {
+				setObj[attr.to.name] = Number(values[attr.to.name]) + Number(attr.to.inc);
+			}
+			setAttrs(setObj);
+		});
+	});
 </script>
\ No newline at end of file