Add easter egg to web app

Added a sound-related easter egg to the web app. In the process, all the new sound files were moved to static/sound. Also, the logging level of Flask was set to 'logging.ERROR' instead of the default ('logging.INFO') to prevent the terminal being clogged with GET requests.

crossword_puzzle/cword_webapp/app.py

@@ -3,6 +3,7 @@
 """
 
 from configparser import ConfigParser
+from logging import getLogger, ERROR
 from multiprocessing import Process
 from os import path
 from socket import socket, AF_INET, SOCK_STREAM
@@ -14,6 +15,9 @@
 from crossword_puzzle.utils import _update_config
 
 app: Flask = Flask(__name__)
+# Suppress info from Flask such as ``GET`` requests
+log = getLogger("werkzeug") 
+log.setLevel(ERROR)
 cfg: ConfigParser = ConfigParser()
 
 

crossword_puzzle/cword_webapp/static/interaction.js

@@ -67,6 +67,11 @@ class Interaction {
     this.jazz = document.getElementById("jazz");
     this.jazz.volume = 0.125;
 
+    // Easter egg typing sounds - licensed under Mixkit Sound Effects Free License
+    this.clicks = [...document.getElementsByClassName("click")];
+    this.clicks.forEach(click => click.volume = 0.175);
+    this.playClicks = false;
+
     this.setListeners();
     Interaction.configureScrollHeights();
     this.displayOnloadPopup();
@@ -124,6 +129,12 @@ class Interaction {
     );
   }
 
+  playClick() {
+    if (this.playClicks) {
+      return this.clicks[Math.floor(Math.random() * this.clicks.length)].play();
+    }
+  }
+
   zoomOut() {
     if (document.querySelector(".non_empty_cell.selectedZoomTarget")) {
       this.returnGridZoomElement.click();
@@ -142,6 +153,7 @@ class Interaction {
     }
 
     let inputValue = event.key;
+    this.playClick();
 
     // Handle the setting of a compound input element when pressing [Shift + 1]
     if (inputValue === "!" && event.shiftKey) {
@@ -1124,3 +1136,6 @@ Element.prototype.hasCorrectValue = function () {
 };
 
 let interaction = new Interaction();
+
+// Enable easter egg through console
+const egg = () => interaction.playClicks = true;

crossword_puzzle/cword_webapp/templates/index.html

@@ -68,8 +68,25 @@
     data-word_count="{{ starting_word_positions|length }}">
     <audio
       id="jazz" 
-      src="{{ url_for('static', filename='jazz.wav') }}">
+      src="{{ url_for('static', filename='sound/jazz.wav') }}">
     </audio>
+    <audio
+      class="click" 
+      src="{{ url_for('static', filename='sound/click1.wav') }}">
+    </audio>
+    <audio
+    class="click"  
+      src="{{ url_for('static', filename='sound/click2.wav') }}">
+    </audio>
+    <audio
+      class="click" 
+      src="{{ url_for('static', filename='sound/click3.wav') }}">
+    </audio>
+    <audio
+      class="click" 
+      src="{{ url_for('static', filename='sound/click4.wav') }}">
+    </audio>
+
 
     <div class="container" id="blur">
       <div class="left_side">