Added Music and five new rebuses

package.json

@@ -13,26 +13,27 @@
     "@babel/runtime": "^7.1.2",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^9.0.0",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^29.7.0",
     "babel-loader": "^8.0.4",
     "coveralls": "^3.0.2",
-    "css-loader": "^1.0.1",
+    "css-loader": "^6.10.0",
     "eslint": "^5.8.0",
     "eslint-config-airbnb": "^17.1.0",
     "eslint-config-prettier": "^3.0.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^2.7.0",
     "eslint-plugin-react": "^7.11.1",
+    "file-loader": "^6.2.0",
     "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^3.2.0",
-    "jest": "^23.6.0",
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
     "prettier": "^1.14.2",
-    "prettier-eslint": "^8.8.2",
+    "prettier-eslint": "^16.3.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.23.1",
-    "webpack-cli": "^3.1.2",
-    "webpack-dev-server": "^3.1.14"
+    "webpack": "^5.90.1",
+    "webpack-cli": "^5.1.4",
+    "webpack-dev-server": "^4.15.1"
   },
   "scripts": {
     "start": "webpack-dev-server --mode development",

src/css/main.css

@@ -125,6 +125,17 @@ body,
   align-self: center;
   justify-self: flex-start;
 }
+.audio{
+  background-color: transparent;
+  border: 0;
+  font-size: 20px;
+  cursor: pointer;
+  padding: 10px;
+  align-self: center;
+  justify-self: flex-start;
+
+
+}
 
 .change-button svg {
   height: 36px;
@@ -171,6 +182,8 @@ progress[value] {
   width: auto;
   height: 20px;
   -webkit-appearance: none;
+  appearance: none;
+
 }
 
 progress[value]::-webkit-progress-bar {

src/js/app.js

@@ -7,6 +7,8 @@ import { ChangeButton } from './components/ChangeButton';
 import { Rebus } from './components/Rebus';
 import { ProgressBar } from './components/ProgressBar';
 import { Hint } from './components/Hint';
+import { AudioPlayer } from './components/Audio';
+import song from '/src/Jeopardy_Music.wav';
 
 import { actions } from './store';
 import '../css/main.css';
@@ -39,6 +41,7 @@ export function init() {
           className: 'change-button--prev',
           onClick: () => actions.prev()
         }),
+
         Rebus({
           charInput: (input, wordIndex, charIndex) => {
             const confettiCanon = document.querySelector('.confetti-canon');
@@ -50,6 +53,10 @@ export function init() {
           className: 'change-button--next',
           onClick: () => actions.next()
         }),
+        AudioPlayer({
+          src: song,
+          onClick: () => actions.playSound()
+        }),
         Hint(),
         ProgressBar()
       ),

src/js/components/App.js

@@ -1,4 +1,5 @@
 import { createComponent } from '../mini';
+import '../../css/main.css';
 
 export function App(...children) {
   return createComponent({

src/js/components/Audio.js

@@ -0,0 +1,17 @@
+import { createComponent } from '../mini';
+export function AudioPlayer(props) {
+  return createComponent({
+    props,
+    render({ src =''}) {
+      return `
+      <div class = "audio">
+      <button>
+      <audio  id = "audio" src= ${src} controls autoPlay={false}></audio>
+        Music
+        </button>
+      </div>
+
+      `;
+    }
+  });
+}

src/js/components/Rebus.js

@@ -35,7 +35,7 @@ export function Rebus(props, ...children) {
           Word({ word, wordIndex, current, rebuses, charInput: props.charInput })
         );
         return `
-          <div class="rebus ${rebus.isAnswered ? 'rebus--answered' : ''} animation--${animation}">
+          <div className="rebus ${rebus.isAnswered ? 'rebus--answered' : ''} animation--${animation}">
             <div class="rebus__header">
               <span>${current + 1}/${rebuses.length}</span>
             </div>

src/js/rebuses.js

@@ -902,6 +902,26 @@ const rebuses = [
     symbols: ['🦀', '+', '🎂'],
     words: ['crab', 'cake'],
     hint: 'A delicious appetizer'
+  },
+  {
+    symbols: ['🍔', '+', '👑'],
+    words: ['burger', 'king'],
+    hint: 'A fast food restaurant'
+  },
+  {
+    symbols: ['🐦', '+', '🏠'],
+    words: ['bird', 'house'],
+    hint: 'A small structure for birds to live in'
+  },
+  {
+    symbols: ['🍫', '+', '🥛'],
+    words: ['chocolate', 'milk'],
+    hint: 'A delicious drink'
+  },
+  {
+    symbols: ['🍦', '+', '🍪'],
+    words: ['ice', 'cream', 'sandwich'],
+    hint: 'A delicious treat'
   }
 ];
 

src/js/store.js

@@ -1,18 +1,20 @@
 import { confetti } from 'dom-confetti';
 import { createStore } from './mini';
 import { getRebuses, markRebusAsAnswered } from './rebuses';
-
+ import song from '/src/Jeopardy_Music.wav';
 export const actionsCreators = {
   next: ({ current, rebuses }) => ({
     current: current < rebuses.length - 1 ? current + 1 : 0,
     animation: 'flip-vertical-right',
     incorrectAnswerCount: 0
   }),
+
   prev: ({ current, rebuses }) => ({
     current: current > 0 ? current - 1 : rebuses.length - 1,
     animation: 'flip-vertical-left',
     incorrectAnswerCount: 0
   }),
+
   setCurrent: ({ rebuses }, id) => {
     const index = rebuses.findIndex(rebus => rebus.id === id);
     if (index > 0) {
@@ -51,6 +53,10 @@ export const actionsCreators = {
       return { animation: 'shake' };
     }
     return {};
+  },
+  playSound: () => {
+    const sound = new Audio(song);
+    sound.play();
   }
 };
 

webpack.config.js

@@ -1,15 +1,15 @@
 const path = require('path');
 const HtmlWebPackPlugin = require('html-webpack-plugin');
 
-module.exports = publicPath => ({
+module.exports = {
   entry: {
     main: './src/js/app.js'
   },
   output: {
     filename: '[name].bundle.js',
     chunkFilename: '[name].bundle.js',
     path: path.resolve(__dirname, 'dist/'),
-    publicPath: publicPath || '/'
+    publicPath: 'auto'
   },
   devtool: 'source-map',
   resolve: { extensions: ['.js', '.json'] },
@@ -24,7 +24,14 @@ module.exports = publicPath => ({
       // HTML
       { test: /\.html$/, use: ['html-loader'] },
       // CSS
-      { test: /\.css$/, use: ['style-loader', 'css-loader'] }
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
+      {
+        test: /\.(wav)$/i,
+        type: 'asset/resource',
+        generator: {
+          filename: 'Jeopardy_Music.wav'
+        }
+      }
     ]
   },
   plugins: [
@@ -35,7 +42,11 @@ module.exports = publicPath => ({
     })
   ],
   devServer: {
-    contentBase: path.join(__dirname, 'dist'),
-    port: 3000
+    static: {
+      directory: path.resolve(__dirname, 'dist')
+    },
+    port: 3000,
+    open: true, // Open the default browser when the server starts
+    hot: true // Enable Hot Module Replacement (HMR)
   }
-});
+};