change logic

guillaumehx · Aug 7, 2024 · 3fbcffb · 3fbcffb
1 parent e954764
commit 3fbcffb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 77 deletions.
diff --git a/index.html b/index.html
@@ -13,16 +13,16 @@
 	<div id="piano">
 		<table>
 			<tr>
-				<td id="1"><div id="2" class="darkNote"><span class="darkLetter">z</span></div><span class="letter">q</span></td>
-				<td id="3"><div id="4" class="darkNote"><span class="darkLetter">e</span></div><span class="letter">s</span></td>
-				<td id="5"><div class="noNote"></div><span class="letter">d</span></td>
-				<td id="6"><div id="7" class="darkNote"><span class="darkLetter">t</span></div><span class="letter">f</span></td>
-				<td id="8"><div id="9" class="darkNote"><span class="darkLetter">y</span></div><span class="letter">g</span></td>
-				<td id="10"><div id="11" class="darkNote"><span class="darkLetter">u</span></div><span class="letter">h</span></td>
-				<td id="12"><div class="noNote"></div><span class="letter">j</span></td>
-				<td id="13"><div id="14" class="darkNote"><span class="darkLetter">o</span></div><span class="letter">k</span></td>
-				<td id="15"><div id="16" class="darkNote"><span class="darkLetter">p</span></div><span class="letter">l</span></td>
-				<td id="17"><div class="noNote"></div><span class="letter">m</span></td>
+				<td id="1"><div id="2" class="darkNote"><span class="darkLetter">Z</span></div><span class="letter">Q</span></td>
+				<td id="3"><div id="4" class="darkNote"><span class="darkLetter">E</span></div><span class="letter">S</span></td>
+				<td id="5"><div class="noNote"></div><span class="letter">D</span></td>
+				<td id="6"><div id="7" class="darkNote"><span class="darkLetter">T</span></div><span class="letter">F</span></td>
+				<td id="8"><div id="9" class="darkNote"><span class="darkLetter">Y</span></div><span class="letter">G</span></td>
+				<td id="10"><div id="11" class="darkNote"><span class="darkLetter">U</span></div><span class="letter">H</span></td>
+				<td id="12"><div class="noNote"></div><span class="letter">J</span></td>
+				<td id="13"><div id="14" class="darkNote"><span class="darkLetter">O</span></div><span class="letter">K</span></td>
+				<td id="15"><div id="16" class="darkNote"><span class="darkLetter">P</span></div><span class="letter">L</span></td>
+				<td id="17"><div class="noNote"></div><span class="letter">M</span></td>
 			</tr>
 		</table>
 	</div>

diff --git a/script.js b/script.js
@@ -1,39 +1,24 @@
-function init() {
-    startAnimation();   
+const init = () => {
+    startAnimation();
 
-    const keyCodes = {
-        113: 1,
-        122: 2,
-        115: 3,
-        101: 4,
-        100: 5,
-        102: 6,
-        116: 7,
-        103: 8,
-        121: 9,
-        104: 10,
-        117: 11,
-        106: 12,
-        107: 13,
-        111: 14,
-        108: 15,
-        112: 16,
-        109: 17,
-    }
+    let notes = { Q: '1', S: '3', D: '5', F: '6', G: '8', H: '10', J: '12', K: '13', L: '15', M: '17' };
+    let darkNotes = { Z: '2', E: '4', T: '7', Y: '9', U: '11', O: '14', P: '16' };
 
     $("piano").onclick = e => {
-        [2, 4, 7, 9, 11, 14, 16].includes(parseInt(e.target.id)) ? playNote(e.target.id, "noteDark") : playNote(e.target.id, "note");
+        [2, 4, 7, 9, 11, 14, 16].includes(parseInt(e.target.id)) ? playNote(e.target.id, 'noteDark') : playNote(e.target.id, 'note');
     }
 
     window.addEventListener('keypress', (e) => {
-        for (const [key, value] of Object.entries(keyCodes)) {
-            if(key == e.keyCode || (key - 32) == e.keyCode) {
-                [2, 4, 7, 9, 11, 14, 16].includes(value) ? playNote(value.toString(), "noteDark") : playNote(value.toString(), "note");
-            }
+        let key = e.key.toUpperCase();
+        if (key in notes) {
+            playNote(notes[key], 'note');
+        } else if (key in darkNotes) {
+            playNote(darkNotes[key], 'noteDark');
         }
-    })
+    });
 }
-function startAnimation() {
+
+const startAnimation = () => {
     setTimeout(() => { 
         playNote("1", "note");
         playNote("17", "note"); 
@@ -46,54 +31,26 @@ function startAnimation() {
 
     setTimeout(() => { 
         playNote("5", "note");
-        playNote("13", "note"); 
+        playNote("13", "note");
     }, 300);
 
     setTimeout(() => { 
         playNote("6", "note");
-        playNote("12", "note"); 
+        playNote("12", "note");
     }, 450);
 
     setTimeout(() => { 
         playNote("8", "note");
-        playNote("10", "note"); 
+        playNote("10", "note");
     }, 600);
 }
 
-function playNote(id, note) {
-    id = id.toString();
+const playNote = (id, note) => {
     $(id).classList.add(note);
-    var audio = new Audio('notes/' + parseInt(id) + '.wav');
+    var audio = new Audio(`notes/${id}.wav`);
     audio.volume = 0.3;
-    audio.play().catch((error) => {});
-    setTimeout(function(){ $(id).classList.remove(note); }, 500);
+    audio.play().catch(() => {}); 
+    setTimeout(() =>{ $(id).classList.remove(note); }, 350);
 }
-(function() {
-    var fired = 0;
-    var timer = null;
-	function onReady(ev) {
-		if (timer) {
-            clearTimeout(timer);
-        }
-		if (fired) {
-            return false;
-        }
-		if (document.readyState == "complete") {
-            fired = 1;
-            window.removeEventListener("load", onReady, false);
-            document.removeEventListener("DOMContentLoaded", onReady, false);
-            document.removeEventListener("readystatechange", onReady, false);
-            init();
-		} 
-		else {
-            timer = setTimeout(onReady, 1);
-        }
-    }
-    window.addEventListener("load", onReady, false);
-    document.addEventListener("DOMContentLoaded", onReady, false);
-    document.addEventListener("readystatechange", onReady, false);
-    timer = setTimeout(onReady, 10);
-	if (document.readyState == "complete") {
-        onReady();
-    }
-} ());
+
+window.onload = init;
diff --git a/style.css b/style.css
@@ -3,25 +3,31 @@ body {
 	padding: 0;
 	font-family: monospace;
 }
+
 #copyright {
 	text-align: center;
     width: 100%;
 }
+
 #piano {
 	width: 833px;
 	height: auto;
 	box-shadow: 0px 0px 30px black;
 	margin: 200px auto;
+	cursor: pointer;
 }
+
 table {
 	border-collapse: collapse;
 }
+
 th, td {
 	border: 3px solid black;
 	width: 10px;
 	height: 240px;
 	padding: 20px;
 }
+
 .darkNote {
 	padding: 20px;
 	height: 150px;
@@ -30,6 +36,7 @@ th, td {
 	left: 41px;
 	top: -38px;
 }
+
 .noNote {
 	padding: 20px;
 	height: 150px;
@@ -39,19 +46,23 @@ th, td {
 	top: -45px;
 	z-index: -2;
 }
+
 .note {
 	animation-duration: 0.5s;
 	animation-name: note;
 }
+
 .noteDark {
 	animation-duration: 0.5s;
 	animation-name: noteDark;
 }
+
 .letter {
 	position: relative;
 	left: 16px;
 	top: 30px;
 }
+
 .darkLetter {
 	color: white;
 	position: absolute;
@@ -61,11 +72,12 @@ th, td {
 
 @keyframes note {
 	0%   {background-color: white;}
-	50%  {background-color: #E75252;}
+	50%  {background-color: #18864B;}
 	100% {background-color: white;}
 }
+
 @keyframes noteDark {
 	0%   {background-color: black;}
-	50%  {background-color: #E75252;}
+	50%  {background-color: #18864B;}
 	100% {background-color: black;}
 }