shaking effect working only for the first wrong submission FIXED

package.json

@@ -32,11 +32,12 @@
     "style-loader": "^0.23.1",
     "webpack": "^4.23.1",
     "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.14"
+    "webpack-dev-server": "^3.1.14",
+    "file-loader": "^6.2.0"
   },
   "scripts": {
     "start": "webpack-dev-server --mode development",
-    "build": "webpack --mode production --env /rebus/",
+    "build": "webpack --mode production --env ./rebus/",
     "test": "jest",
     "test:all": "npm run test && npm run lint",
     "coverage": "jest --coverage",
@@ -55,4 +56,4 @@
       "isTestRun": true
     }
   }
-}
+}

src/js/app.js

@@ -7,10 +7,16 @@ import { ChangeButton } from './components/ChangeButton';
 import { Rebus } from './components/Rebus';
 import { ProgressBar } from './components/ProgressBar';
 import { Hint } from './components/Hint';
-
 import { actions } from './store';
+
 import '../css/main.css';
 
+import wav from '../media/click.wav';
+import soundtrack from '../media/Ascension.mp3';
+
+const player = new Audio(wav);
+const melody = new Audio(soundtrack);
+
 export function registerListeners() {
   document.addEventListener('keyup', event => {
     const key = event.key || event.keyCode; // For older browser support
@@ -20,6 +26,13 @@ export function registerListeners() {
     if (key === 'ArrowLeft' || key === 37) {
       actions.prev();
     }
+    if (key === 'ArrowUp' || key === 38) {
+      melody.setAttribute('preload', 'metadata');
+      melody.play();
+    }
+    if (key === 'ArrowDown' || key === 40) {
+      melody.pause();
+    }
   });
 }
 
@@ -41,6 +54,18 @@ export function init() {
         }),
         Rebus({
           charInput: (input, wordIndex, charIndex) => {
+            /* I have added a sound effect to a button when you click on it 
+             npm install --save-dev html-loader
+             in webpack.config.js 
+
+            {
+              test: /\.wav$/,
+              use: ['file-loader']
+            }
+            */
+            player.setAttribute('preload', 'metadata');
+            player.play();
+
             const confettiCanon = document.querySelector('.confetti-canon');
             actions.setInput(input, wordIndex, charIndex);
             actions.check(confettiCanon);

src/js/store.js

@@ -1,6 +1,9 @@
 import { confetti } from 'dom-confetti';
 import { createStore } from './mini';
 import { getRebuses, markRebusAsAnswered } from './rebuses';
+import appl from '../media/applause.mp3';
+
+const applause = new Audio(appl);
 
 export const actionsCreators = {
   next: ({ current, rebuses }) => ({
@@ -38,11 +41,15 @@ export const actionsCreators = {
     if (input === answer) {
       markRebusAsAnswered(rebus.id);
       confetti(confettiCanon);
+
+      applause.setAttribute('preload', 'metadata');
+      applause.play();
+
       const updatedRebuses = [...rebuses];
       updatedRebuses[current].isAnswered = true;
       return { updatedRebuses, animation: 'none', incorrectAnswerCount: 0 };
     }
-    return { incorrectAnswerCount: incorrectAnswerCount + 1 };
+    return { incorrectAnswerCount: incorrectAnswerCount + 1, animation: 'none' };
   },
   shake: ({ current, rebuses }) => {
     const rebus = rebuses[current];

webpack.config.js

@@ -12,7 +12,9 @@ module.exports = publicPath => ({
     publicPath: publicPath || '/'
   },
   devtool: 'source-map',
-  resolve: { extensions: ['.js', '.json'] },
+  resolve: {
+    extensions: ['.js', '.json']
+  },
   module: {
     rules: [
       // Process JS with Babel.
@@ -22,9 +24,20 @@ module.exports = publicPath => ({
         loader: require.resolve('babel-loader')
       },
       // HTML
-      { test: /\.html$/, use: ['html-loader'] },
+      {
+        test: /\.html$/,
+        use: ['html-loader']
+      },
       // CSS
-      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader']
+      },
+      // wav
+      {
+        test: /\.(wav|mp3)$/,
+        use: ['file-loader']
+      }
     ]
   },
   plugins: [
@@ -38,4 +51,4 @@ module.exports = publicPath => ({
     contentBase: path.join(__dirname, 'dist'),
     port: 3000
   }
-});
+});