Added completion text and item number counts

src/App.js

@@ -382,6 +382,8 @@ function App() {
 	const [succeeded,setSucceeded] = useState(0)
 	const [failed,setFailed] = useState(0)
 	const [total,setTotal] = useState(0)
+	const [itemCount,setItemCount] = useState()
+	const [totalItemCount,setTotalItemCount] = useState()
 	const [craftsRatio,setCraftsRatio] = useState(0)
 	const [missingCraftsRatio,setMissingCraftsRatio] = useState(0)
 	const [inProgressRatio,setInProgressRatio] = useState(0)
@@ -439,6 +441,8 @@ function App() {
 							}
 							tot+=Number(item.required)
 						}
+						setItemCount(itemsComplete+itemsInProgress+itemsCrafts)
+						setTotalItemCount(tot)
 						setMissingCraftsRatio(((totCrafts-itemsCrafts)/tot*100).toFixed(2))
 						setMissingProgressRatio(((totItemsInProgress-itemsInProgress)/tot*100).toFixed(2))
 						setCompleteRatio((itemsComplete/tot*100).toFixed(2))
@@ -529,6 +533,8 @@ function App() {
 					}
 					tot+=Number(item.required)
 				}
+				setItemCount(itemsComplete+itemsInProgress+itemsCrafts)
+				setTotalItemCount(tot)
 				setMissingCraftsRatio(((totCrafts-itemsCrafts)/tot*100).toFixed(2))
 				setMissingProgressRatio(((totItemsInProgress-itemsInProgress)/tot*100).toFixed(2))
 				setCompleteRatio((itemsComplete/tot*100).toFixed(2))
@@ -659,7 +665,7 @@ function App() {
 							data.length>0?
 							<>
 								<Row><Col className="text-white">
-									<h3>{Number(completeRatio)+Number(inProgressRatio)+Number(craftsRatio)}% complete</h3>
+									<span style={{fontSize:"2em",paddingRight:"10px"}}>{(Number(completeRatio)+Number(inProgressRatio)+Number(craftsRatio))}% complete</span><sub>({itemCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + " / " + totalItemCount.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")})</sub>
 								</Col></Row>
 								<Row>
 									<ProgressBar className="bg-dark text-white">