Modal DayCompleteModal.jsx

100% Statements 5/5

100% Branches 2/2

75% Functions 3/4

100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33  
 
 
 
 
 
3x
3x
 
 
3x
 
 
 
 
 
 
 
 
 
1x
1x
 
 
 
 
 
 
 
 
 
 
  import "./Modal.css"
import React, { useEffect } from "react"
import ReactDom from "react-dom"
import { playPopSound } from "../SoundEffects/playPopSound"
 
export default function DayCompleteModal({ score, customers, handleClick }) {
    useEffect(() => {
        new Audio("/audio/next_day.mp3").play().catch(() => {})
    }, [])
 
    return ReactDom.createPortal(
        <div className="modal-overlay">
            <div className="modal-content">
                <div className="text">🎉Day Complete!🎉</div>
                <div className="customers">
                    {customers == 1 ? "1 Happy Customer!" : customers + " Happy Customers!"}
                </div>
                <div className="score-earned">{score}</div>
                <button
                    onClick={() => {
                        handleClick()
                        playPopSound()
                    }}
                    className="home-button"
                >
                    ☀️ Next Day
                </button>
            </div>
        </div>,
        document.getElementById("portal-day")
    )
}