- Add function to update tableRow when a material is obtained, instead of re-building the table every time.

- As a result, buildTable now only runs at app load, adds all available materials stored in app, and hids any rows where quantity is 0
- Re-added material highlight when a material is obtained.

Author: ZeroGwafa

src/css/style.css

@@ -72,55 +72,74 @@ html {
 }
 
 .row {
-    text-align: center;
+	text-align: center;
 }
 
 .matHeader {
-    border-top: white solid .5px;
-    background: url('https://runeapps.org/nis/alt1-currentskin/nisbutton.png') 0px -100%/24px 400% repeat content-box;
-    color: black;
-    font-family: 'trajan-pro-3';
+	border-top: white solid 0.5px;
+	background: url("https://runeapps.org/nis/alt1-currentskin/nisbutton.png") 0px -100%/24px 400% repeat content-box;
+	color: black;
+	font-family: "trajan-pro-3";
 }
 
-.mats>.row,
+.mats > .row,
 .matHeader * {
-    border-bottom: white solid .5px;
-    border-right: white solid .5px;
+	border-bottom: white solid 0.5px;
+	border-right: white solid 0.5px;
 }
 
 .matHeader,
-.mats>.row * {
-    border-left: white solid .5px;
+.mats > .row * {
+	border-left: white solid 0.5px;
 }
 
 .scroll {
-    overflow-y: scroll;
-    height: calc(100% - 39px);
+	overflow-y: scroll;
+	height: calc(100% - 39px);
 }
 
 .scroll::-webkit-scrollbar {
-    display: none;
+	display: none;
 }
 
 body.nis:not(.artefact)::-webkit-scrollbar {
-    display: none;
+	display: none;
 }
 
 body.nis:not(.artefact) {
-    overflow: scroll !important;
-    /* min-width: 315px; */
-    height: calc(100vh - 10px);
+	overflow: scroll !important;
+	/* min-width: 315px; */
+	height: calc(100vh - 10px);
 }
 
 .container * {
-    font-weight: bold;
-    font-size: 10pt;
+	font-weight: bold;
+	font-size: 10pt;
 }
 
 .container {
-    margin-top: 10px
+	margin-top: 10px;
 }
 
 .nisbutton {
-    font-size: 8pt !important;
-}
+	font-size: 8pt !important;
+}
+
+.hide {
+	display: none;
+}
+
+.new {
+	animation: flashNew 1s;
+}
+
+@keyframes flashNew {
+	from {
+		background-color: lime;
+		color: black;
+	}
+	to {
+		background-color: none;
+		color: none;
+	}
+}

src/index.ts

@@ -256,9 +256,29 @@ function processMaterials(chatLine) {
 		};
 
 		updateSaveData({ materials: material });
+		updateRow(material.name);
 	}
 }
 
+function updateRow(matName) {
+	const mats = getSaveData("materials");
+
+	const row = document.querySelector(`#${matName}`) as HTMLElement;
+	const qty = document.querySelector(`#${matName} .quantity`) as HTMLElement;
+
+	qty.innerText = mats[matName].qty;
+
+	if (row.classList.contains("hide")) {
+		row.classList.remove("hide");
+	}
+
+	row.classList.add("new");
+	row.addEventListener("animationend", () => {
+		row.classList.remove("new");
+	});
+
+}
+
 function buildTable() {
 	const mats = getSaveData("materials");
 	if (!mats) {
@@ -269,11 +289,14 @@ function buildTable() {
 
 	const matNames = Object.keys(mats).sort();
 	for (let mat of matNames) {
-		if (mats[mat]["qty"] > 0) {
-			document
-				.querySelector(`.${mats[mat]["type"]} > .col`)
-				.insertAdjacentHTML("beforeend", `<div class='mats row'><div class='mats col'>${mat}</div><div class='col'>${mats[mat]["qty"]}</div></div>`);
-		}
+		document
+			.querySelector(`.${mats[mat]["type"]} > .col`)
+			.insertAdjacentHTML(
+				"beforeend",
+				`<div id="${mat}" class='mats row ${mats[mat]["qty"] == 0 ? "hide" : ""}'><div class='mats col'>${mat}</div><div class='col quantity'>${
+					mats[mat]["qty"]
+				}</div></div>`
+			);
 	}
 }
 
@@ -333,6 +356,7 @@ exportButton.addEventListener("click", function () {
 // Factory Reset logic
 clearButton.addEventListener("click", function () {
 	localStorage.removeItem(appName);
+	sessionStorage.removeItem(`${appName}chatHistory`)
 	location.reload();
 });
 
@@ -348,7 +372,6 @@ async function updateSaveData(...dataset) {
 				console.log(value);
 				lsData[name][value["name"]].qty += Number(value["quantity"]);
 				localStorage.setItem(appName, JSON.stringify(lsData));
-				buildTable();
 				continue;
 			}
 		}