<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

<div id="app"></div>

#drum-machine  {
    --pad-size: : 50px;
    --pad-gap: 10px;
}

#display{
    height: 20px;
    font-size: 2em;
    margin: 30px auto;
    text-align: center;
}

.DrumPadContainer{
    display: grid;
    /* flex-direction: row; */
    /* border: 1px solid black; */
    /* grid-template-rows: 1fr 1fr 1fr; */ 
    gap: 10px;
    height: 300px;
    width: 300px;
    grid-template: repeat(3, 1fr) / repeat(3, 1fr);
    margin: auto;
}

@keyframes clicked{
    from{
        
    }
    to {
        width: 50px;
        height: 50px;
    }
}

.drum-pad{
    text-align: center;
    vertical-align: center;
    /* height: 100px; */ 
    /* width: 100px; */ 
    /* border: 1px solid yellow; */
    background-color: #ea8201;
    box-shadow: 5px 5px 5px black;
    border-radius: 50%;
}


.drum-pad:active {
    animation-name: clicked;
    animation-duration: 3s;
}

import React from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
//import "./App.css";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            playingSoundName: "The playing sound 0",
        };
        this.handlePlay = this.handlePlay.bind(this);
    }
    handlePlay(name){
        this.setState({
            playingSoundName: name
        });
    }
    render() {
        const names = ["Q", "W", "E", "A", "S", "D", "Z", "X", "C"];
        return <div>
            <main id="drum-machine">
                <Display playingSoundName={this.state.playingSoundName} />
                <div className="DrumPadContainer">
                {names.map((name) => <DrumPad key={name} name={name} onPlay={this.handlePlay} />)}
                  </div>
            </main>
        </div>;
    }
}

const Display = props => <div id="display">{props.playingSoundName}</div>;

const DrumPad = props => {
    
       const BASE_URL = "https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3"; 
        
    const playSound = (e) => {
        props.onPlay("playing-"+props.name);
        const audioElement = document.getElementById(props.name);
        audioElement.currentTime = 0;
        audioElement.play();
    };
    const handleClick = (e) =>{
        playSound(e);
    };
    const handleKeyDown = (e) => {
        if (e.key == props.name) {
            playSound(e);
        }
    };
    
    return <div className="drum-pad" id={"sound-" + props.name} onClick={handleClick} onKeyDown={handleKeyDown} >
        {props.name}
        <audio id={props.name} className="clip" src={BASE_URL}  ></audio>
    </div>;
};


ReactDOM.render(
    <App />,
  document.getElementById('app')
);