Add ability to hide previous level letters

index.html

@@ -60,6 +60,7 @@
 				Word Limit Mode <input class='wordLimitModeButton' type="checkbox" autocomplete="off"checked> 
 			</li>
 			<li>Show Cheatsheet<input class='showCheatsheetButton' type="checkbox" autocomplete="off" checked></li>
+			<li>Show Previous Level Letters<input class='showPreviousLevelLetters' type="checkbox" autocomplete="off" checked></li>
 			<li>Play Sound On Click<input class='playSoundOnClick' type="checkbox" autocomplete="off"></li>
 			<li>Play Sound On Error<input class='playSoundOnError' type="checkbox" autocomplete="off"></li>
 		</ul>

logic/app.js

@@ -74,6 +74,7 @@ var requireBackspaceCorrection = !localStorage.getItem('requireBackspaceCorrecti
 var timeLimitMode 		= localStorage.getItem('timeLimitMode') === 'true';
 var wordScrollingMode 	= !localStorage.getItem('wordScrollingMode') || localStorage.getItem('wordScrollingMode') === 'true';  // true by default.
 var showCheatsheet		= !localStorage.getItem('showCheatsheet') || localStorage.getItem('showCheatsheet') === 'true';  // true by default.
+var showPreviousLevelLetters = !localStorage.getItem('showPreviousLevelLetters') || localStorage.getItem('showPreviousLevelLetters') === 'true';  // true by default.
 var playSoundOnClick    = localStorage.getItem('playSoundOnClick') === 'true';
 var playSoundOnError    = localStorage.getItem('playSoundOnError') === 'true';
 var deleteFirstLine		= false; // make this true every time we finish typing a line
@@ -106,6 +107,7 @@ timeLimitModeInput			= document.querySelector('.timeLimitModeInput')
 wordScrollingModeButton		= document.querySelector('.wordScrollingModeButton'),
 punctuationModeButton       = document.querySelector('.punctuationModeButton'),
 showCheatsheetButton		= document.querySelector('.showCheatsheetButton');
+showPreviousLevelLettersButton		= document.querySelector('.showPreviousLevelLetters');
 playSoundOnClickButton      = document.querySelector('.playSoundOnClick');
 playSoundOnErrorButton      = document.querySelector('.playSoundOnError');
 
@@ -149,6 +151,7 @@ function start() {
 	wordLimitModeButton.checked = !timeLimitMode;
 	wordLimitModeInput.value = scoreMax;
 	showCheatsheetButton.checked = showCheatsheet;
+	showPreviousLevelLettersButton.checked = showPreviousLevelLetters;
 	playSoundOnClickButton.checked = playSoundOnClick;
 	playSoundOnErrorButton.checked = playSoundOnError;
 
@@ -421,6 +424,17 @@ showCheatsheetButton.addEventListener('click', ()=> {
 	localStorage.setItem('showCheatsheet', showCheatsheet);
 });
 
+showPreviousLevelLettersButton.addEventListener('click', ()=> {
+	showPreviousLevelLetters = !showPreviousLevelLetters
+
+	localStorage.setItem('showPreviousLevelLetters', showPreviousLevelLetters);
+
+	createTestSets();
+	updateCheatsheetStyling(currentLevel);
+	reset();
+});
+
+
 // play sound on click toggle
 playSoundOnClickButton.addEventListener('click', ()=> {
 	playSoundOnClick = !playSoundOnClick;
@@ -1265,6 +1279,7 @@ function updateCheatsheetStyling(level) {
 	for(n of allKeys) {
 		//reset all keys to default
 		n.classList.add('inactive');
+		n.classList.remove('hiddenNonCurrentLevelKeys');
 		n.classList.remove('active');
 		n.classList.remove('homeRow');
 		n.classList.remove('currentLevelKeys');
@@ -1293,15 +1308,24 @@ function updateCheatsheetStyling(level) {
 				if(punctuation.includes(letter)){
 					n.classList.remove('active');
 					n.classList.add('punctuation');
+					if (!showPreviousLevelLetters) {
+						n.classList.add('hiddenNonCurrentLevelKeys');
+					}
 				}else if(i==0){
 					n.classList.add('homeRow');
+					if (!showPreviousLevelLetters && i != level-1) {
+						n.classList.add('hiddenNonCurrentLevelKeys');
+					}
 				}else if(i==6){
 					// all words selected
 				}else if(i == level-1){
 					n.classList.remove('active');
 					n.classList.add('currentLevelKeys');
 				}else {
 					n.classList.add('active');
+					if (!showPreviousLevelLetters) {
+						n.classList.add('hiddenNonCurrentLevelKeys');
+					}
 				}
 			}
 		}

logic/main.css

@@ -491,6 +491,10 @@ input:checked + .slider:before {
 	text-transform: uppercase;
 }
 
+.hiddenNonCurrentLevelKeys .letter {
+  opacity: 0;
+}
+
 .oneu {
 	width: 5.4%;
 }