Added: Music, SFX, the settings for those and a Easter Egg

README.md

@@ -12,22 +12,19 @@ Just go to the link next to the title, and you'll see the current version in act
 ## Authors
 
 * **Dwight Van der Velpen** - *The code*
+* **Fanto8BC** - *[BG music](https://www.looperman.com/loops/detail/115700/the-sound-of-the-past-by-fanto8bc-free-100bpm-ambient-synth-loop)*
 
 If you have any remarks please hit me up, this is a learning experience.
 
 ## Errors and todo ##
 
 Last done: 
 
-* The JSON reader and game builder.
-* The level selector.
-* The random level selector.
-* The Stats.
+* Easter Egg
+* Added Music and SFX
+* Added Settings for Music and SFX.
 
 Todo:
 
-* Add Music.
-* Add VFX.
-* Enable the Settings for Music and VFX.
-* Add a Easter Egg.
-* Code Cleanup
+* More puzzles.
+* Code Cleanup.

css/styles.css

@@ -125,14 +125,16 @@ body {
 	transform-style: preserve-3d;
 }
 
-#github {
+#github,
+.credit {
 	-webkit-transition: color 200ms ease;
 	-ms-transition: color 200ms ease;
 	transition: color 200ms ease;
 	text-decoration: underline;
 }
 
-#github:hover {
+#github:hover,
+.credit:hover {
 	color: #f7712e;
 }
 
@@ -374,15 +376,15 @@ table td {
 	margin-bottom: 20px;
 }
 
-.editable p {
+.editable .cell {
 	color: #0f138e;
 }
 
-.error p {
+.error .cell {
 	color: #d30808;
 }
 
-.nonEditable p {
+.nonEditable .cell {
 	color: #1c1c1c;
 }
 

index.html

@@ -228,10 +228,11 @@ <h2>Settings</h2>
 				<fieldset>
 					<legend>Sound settings</legend>
 					<label for="chbxM">Music</label>
-					<input type="checkbox" name="chbxM" id="chbxM">
-					<label for="chbxV">VFX</label>
-					<input type="checkbox" name="chbxV" id="chbxV">
+					<input type="checkbox" name="chbxM" id="chbxM" checked="checked">
+					<label for="chbxS">SFX</label>
+					<input type="checkbox" name="chbxS" id="chbxS" checked="checked">
 				</fieldset>
+				<p><a class="credit" href="https://www.looperman.com/loops/detail/115700/the-sound-of-the-past-by-fanto8bc-free-100bpm-ambient-synth-loop">Music by Fanto8BC</a></p>
 			</div>
 		</div>
 	</div>

js/scripts.js

@@ -14,6 +14,14 @@
 		// Variables
 		var oneChar = '1';
 		var zeroChar = '0';
+		var p_zeroChar = '';
+		var p_oneChar = '';
+		var sfx = new Audio('./data/click.mp3');
+		var sfxv = new Audio('./data/victory.mp3');
+		var amb = new Audio('./data/ambient.wav');
+		var mIsPlaying = true;
+		var sfxEn = true;
+		var pandaCntr = 5;
 		var currentSide;
 		var puzzles;
 		var progress;
@@ -41,16 +49,29 @@
 		var $spinner = $('#spnrLvl').spinner();
 		var $selDif = $('#selDiff');
 
+		// Music		
+		amb.addEventListener('ended', function() {
+			this.currentTime = 0;
+			this.play();
+		}, false);
+		amb.play();
+
 		// jQuery UI tagging
 		$selDif.selectmenu();
 		$selDif.on('selectmenuchange', function() {
+			// SFX
+			if (sfxEn) sfx.play();
+
 			newDifSelMenu();
 		});
 		$spinner.spinner({
 			min: 1,
 			max: 100,
 			step: 1,
 			stop: function(event, ui) {
+				// SFX
+				if (sfxEn) sfx.play();
+
 				currentPzl.lvl = $spinner.spinner().val() - 1;
 				updatePuzzle();
 			}
@@ -135,7 +156,7 @@
 			var c;
 			for (var i = 0; i < $cellTexts.length; i++) {
 				c = code.charAt(i);
-				$cellTexts.eq(i).html((c === 'e') ? '' : c).parents('td').toggleClass('editable', (c === 'e') ? true : false);
+				$cellTexts.eq(i).html((c === 'e') ? '' : ((c === '0') ? zeroChar : oneChar)).parents('td').toggleClass('editable', (c === 'e') ? true : false).toggleClass('nonEditable', (c === 'e') ? false : true);
 			}
 			updateTodo();
 			checkit();
@@ -364,7 +385,9 @@
 			}
 
 			// Endgame?
-			if ((errs === 0) && ($todo.html() === zeroChar)) {
+			if ((errs === 0) && ($todo.html() === '0')) {
+				// SFXv
+				if (sfxEn) sfxv.play();
 				toggleVictory();
 
 				switch (currentPzl.dif) {
@@ -538,27 +561,56 @@
 		};
 		readData();
 
+		var updateChar = function() {
+			for (var i = 0; i < $cellTexts.length; i++) {
+				$cellTexts.eq(i).html(($cellTexts.eq(i).html() === p_oneChar) ? oneChar : (($cellTexts.eq(i).html() === p_zeroChar) ? zeroChar : ''));
+			}
+		};
+
 		// **** EVENTS ****
 		// Refresh this page!
 		$title.on('click', function(e) {
 			location.reload();
 		});
 
+		$todo.on('click', function(e) {
+			pandaCntr--;
+			if (pandaCntr === 0) {
+				// SFX
+				if (sfxEn) sfx.play();
+
+				p_zeroChar = zeroChar;
+				p_oneChar = oneChar;
+				zeroChar = '🐼';
+				oneChar = '🎋';
+				updateChar();
+			}
+		});
+
 		// Random button click
 		$('.btnRndm').on('click', function(e) {
+			// SFX
+			if (sfxEn) sfx.play();
+
 			rndPuzzle();
 			updateStats();
 		});
 
 		// Puzzle Complete
 		$victory.on('click', function(e) {
+			// SFX
+			if (sfxEn) sfx.play();
+
 			toggleVictory();
 			nextPuzzle();
 			updateStats();
 		});
 
 		// Flip buttons
 		$btnsFlip.on('click', function(e) {
+			// SFX
+			if (sfxEn) sfx.play();
+
 			// On a Left flip
 			if ($(e.target).hasClass('flipL')) {
 				toggleBacklayer(e.target.innerHTML);
@@ -585,11 +637,26 @@
 			val = (val === zeroChar) ? oneChar : ((val === oneChar) ? '' : zeroChar);
 			$(this).children('p').html(val);
 
+			// SFX
+			if (sfxEn) sfx.play();
+
 			// Update the todo
 			updateTodo();
 
 			// Check
 			checkit();
 		});
+
+		// Toggle music
+		$('#chbxM').on('click', function(e) {
+			if (mIsPlaying) amb.pause();
+			else amb.play();
+			mIsPlaying = !mIsPlaying;
+		});
+
+		// Toggle SFX
+		$('#chbxS').on('click', function(e) {
+			sfxEn = !sfxEn;
+		});
 	});
 })(jQuery);