nathanmcrae/morse-game
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Added lamp for visual feedback on tones

Browse Source
This commit is contained in:
Nathan McRae 2023-03-11 12:42:10 -08:00
parent 2b284f776a
commit 47fe262d83
3 changed files with 16 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@ -54,6 +54,7 @@ available towards the bottom.</p>
<br> <br>
<div class="button-container"> <div class="button-container">
<button id="submitButton" class="interaction-button" disabled="disabled">Enter</button> <button id="submitButton" class="interaction-button" disabled="disabled">Enter</button>
<button id="beepLamp" class="lamp" disabled="disabled"/>
<button id="resetButton" class="interaction-button" disabled="disabled">Replay</button> <button id="resetButton" class="interaction-button" disabled="disabled">Replay</button>
</div> </div>
</div> </div>

2
morse-code_files/morse-code.js
View File

@ -30,11 +30,13 @@ async function initializeAudioContext() {
function startNotePlaying() { function startNotePlaying() {
// Pass a start time of 0 so it starts ramping up immediately. // Pass a start time of 0 so it starts ramping up immediately.
gain_node.gain.setTargetAtTime(0.1, 0, 0.001) gain_node.gain.setTargetAtTime(0.1, 0, 0.001)
$("#beepLamp").addClass("lamp-on")
} }
function stopNotePlaying() { function stopNotePlaying() {
// Pass a start time of 0 so it starts ramping down immediately. // Pass a start time of 0 so it starts ramping down immediately.
gain_node.gain.setTargetAtTime(0, 0, 0.001) gain_node.gain.setTargetAtTime(0, 0, 0.001)
$("#beepLamp").removeClass("lamp-on")
} }

12
morse-code_files/styles.css
View File

@ -24,6 +24,18 @@
font-size: 20px; font-size: 20px;
} }
.lamp {
width: 100px;
height: 100px;
border-radius: 100%;
margin: 10px;
font-size: 20px;
}
.lamp-on {
background: darkgray;
}
.game-container { .game-container {
display: flex; display: flex;
justify-content: center; justify-content: center;