[Build] Sounds and Features

1. Added new sounds for cards on lock and on unlock state
2. Added 'How to Play' interface for instructions on the game
3. Changed the UI/CSS for the app loader to black

src/components/app-loader/styles.scss

@@ -6,7 +6,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: $white;
+  background: $black;
   z-index: 100;
   img {
     width: 100px;

src/components/cards/component.js

@@ -6,13 +6,23 @@ import "./styles.scss";
 import { LockComponent } from "./lock-component.js";
 import { setCardAsLocked } from "./service/set-card-as-locked.js";
 import { setCardAsUnlocked } from "./service/set-card-as-unlocked.js";
+import selectionSound from "@appSounds/selection-sound.wav";
+import deselectionSound from "@appSounds/deselect-sound.wav";
 
 export const Card = (props) => {
   let [isLocked, setIsLocked] = useState(props.isLocked);
   let [hasUpdated, setHasUpdated] = useState(false);
+  let [soundEffects] = useState({
+    lock: new Audio(selectionSound),
+    unlock: new Audio(deselectionSound)
+  });
 
   const onClickHandler = () => {
-    setIsLocked((prevState) => !prevState);
+    setIsLocked((prevState) => {
+      const newLockState = !prevState;
+      newLockState === true ? soundEffects.lock.play() : soundEffects.unlock.play();
+      return newLockState;
+    });
   };
 
   /* after component load */

src/components/cards/lock-component.js

@@ -1,5 +1,5 @@
 /* react imports */
-import React from "react";
+import React, { useEffect } from "react";
 
 /* app imports */
 import { getLockIcons } from "./service/get-lock-icons.js";

src/pages/home/header.js

@@ -1,20 +1,33 @@
 /* react imports */
-import React from "react";
+import React, { useState } from "react";
 
 /* app imports */
 import diceImage from "@appImages/dice.jpg";
+import popupSound from "@appSounds/click-sound.mp3";
 
 export default function Header() {
+  const [textElementClass, setTextElementClass] = useState("text");
+  const notificationSound = new Audio(popupSound);
+
+  const onButtonClickHandler = () => {
+    setTextElementClass("text show");
+    notificationSound.play();
+    setTimeout(() => {
+      setTextElementClass("text");
+    }, 6000);
+  };
+
   return (
     <React.Fragment>
       <div className="header positionRelative customRow">
         <h1>Samurai <br/>Tenzies</h1>
-        {/*
-        <div className="text">
+        <button className="btn btn-light howToPlay" type="button" onClick={onButtonClickHandler}>
+          How to Play?
+        </button>
+        <div className={textElementClass}>
           <p>{`Roll until all dice are the same. Click each die to freeze it as its current value
           between rolls.`}</p>
         </div>
-        */}
       </div>
     </React.Fragment>
   );