Refactor, gloval variables into appState

met · Jan 27, 2024 · f426acf · f426acf
1 parent 3d60bc5
commit f426acf
Showing 1 changed file with 16 additions and 17 deletions.
diff --git a/index.html b/index.html
@@ -60,7 +60,7 @@ <h1 class="text-center">Nums123 (beta)</h1>
 </div>
 
 <div id="uiLearning" class="text-center mt-800 mb-800">
-	<button id="btn-teach-1-10" type="button" class="Button Button--tertiary Button--medium mr-200 mb-200" role="button" data-nums123-value="1 2 3 4 5 6 7 8 9 10">Teach me 1-10</button>
+	<button id="btn-teach-1-10" type="button" class="Button Button--tertiary Button--medium mr-200 mb-200" role="button" data-nums123-value="1, 2, 3, 4, 5, 6, 7, 8, 9, 10">Teach me 1-10</button>
 	<button id="btn-teach-11-20" type="button" class="Button Button--tertiary Button--medium mr-200 mb-200" role="button" data-nums123-value="11, 12, 13, 14, 15, 16, 17, 18, 19, 20">Teach me 11-20</button>
 	<button id="btn-teach-10-100" type="button" class="Button Button--tertiary Button--medium mr-200 mb-200" role="button" data-nums123-value="10, 20, 30, 40, 50, 60, 70, 80, 90, 100">Teach me 10-100</button>
 	<button id="btn-teach-more" type="button" class="Button Button--tertiary Button--medium mr-200 mb-200" role="button" data-nums123-value="0, 10, 100, 1000, 10000, 100000, 1000000, 1000000000, 1000000000000">Teach me more</button>
@@ -70,8 +70,7 @@ <h1 class="text-center">Nums123 (beta)</h1>
 
 <script type="text/javascript">
 "use strict";
-let voices;
-let lastNumber;
+let appState = { voices: null, lastNumber: null };
 
 function detectSupport() {
 	if (window.speechSynthesis)
@@ -92,18 +91,18 @@ <h1 class="text-center">Nums123 (beta)</h1>
 }
 
 function populateVoiceList() {
-	voices = getVoicesList();
+	appState.voices = getVoicesList();
 
-	if (voices != null) {
+	if (appState.voices != null) {
 		let select = document.getElementById("slc-voices");
 
-		for (let voice in voices) {
+		for (let voice in appState.voices) {
 			//console.log(voice);
-			//console.log(voices[voice]);
+			//console.log(appState.voices[voice]);
 
 			let optEl = document.createElement("option");
 
-			optEl.textContent = `${voices[voice].name} # ${voices[voice].lang}`;
+			optEl.textContent = `${appState.voices[voice].name} # ${appState.voices[voice].lang}`;
 			optEl.value = voice;
 
 			select.appendChild(optEl);
@@ -134,7 +133,7 @@ <h1 class="text-center">Nums123 (beta)</h1>
 }
 
 function getSelectedVoiceObj() {
-	let voice = voices[getSelectedVoiceIndex()];
+	let voice = appState.voices[getSelectedVoiceIndex()];
 	return voice;
 }
 
@@ -144,7 +143,7 @@ <h1 class="text-center">Nums123 (beta)</h1>
 	collapseResultIfOpened();
 	setTimeout(() => {writeResult(newNumber) }, 200); // little timeout is needed, otherwise user see new number before collapsing
 
-	lastNumber = newNumber;
+	appState.lastNumber = newNumber;
 	sayItWithSelectedVoice(newNumber);
 }
 
@@ -174,8 +173,8 @@ <h1 class="text-center">Nums123 (beta)</h1>
 	populateVoiceList();
 
 	document.getElementById("btn-repeat").addEventListener("click", (event) => {
-		if (lastNumber && voices) {
-			sayItWithSelectedVoice(lastNumber);
+		if (appState.lastNumber && appState.voices) {
+			sayItWithSelectedVoice(appState.lastNumber);
 		}
 		return false;
 	});
@@ -184,7 +183,7 @@ <h1 class="text-center">Nums123 (beta)</h1>
 	["btn-play-new-10", "btn-play-new-20", "btn-play-new-100", "btn-play-new-more"].forEach((element) => {
 
 		document.getElementById(element).addEventListener("click", (event) => {
-			if (!voices) {
+			if (!appState.voices) {
 				populateVoiceList();
 			}
 
@@ -198,7 +197,7 @@ <h1 class="text-center">Nums123 (beta)</h1>
 	["btn-teach-1-10", "btn-teach-11-20", "btn-teach-10-100", "btn-teach-more"].forEach((element) => {
 
 		document.getElementById(element).addEventListener("click", (event) => {
-			if (voices) {
+			if (appState.voices) {
 				sayItWithSelectedVoice(event.target.dataset.nums123Value);
 			}
 			return false;
@@ -207,14 +206,14 @@ <h1 class="text-center">Nums123 (beta)</h1>
 	});
 
 	document.getElementById("slc-voices").addEventListener("focus", (event) => {
-		if (!voices) {
+		if (!appState.voices) {
 			populateVoiceList();
 		}
 	});
 
 	document.getElementById("slc-voices").addEventListener("change", (event) => {
-		if (lastNumber && voices) {
-			sayItWithSelectedVoice(lastNumber);
+		if (appState.lastNumber && appState.voices) {
+			sayItWithSelectedVoice(appState.lastNumber);
 		}
 
 		// preserve selected voice between sessions