Drum-Machine/drum-machine/src/App.js

import { faCode } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import React from "react";
import { Form } from "react-bootstrap";
import colorSets from "./variables.module.scss";
import { drumPadKeys } from "./drumPadKeys.js";
import "./App.scss";

class App extends React.Component {
  constructor() {
    super({});
    const processedColorSets = {};
    let noOfColorSets = 0;
    for (const key in colorSets) {
      if (/rgba/.test(colorSets[key])) {
        processedColorSets[key] = colorSets[key].split(/(?<=\))\s/g);
      } else if (/,\s/.test(colorSets[key])) {
        processedColorSets[key] = colorSets[key].split(/,\s/g);
      } else if (/\s/.test(colorSets[key])) {
        processedColorSets[key] = colorSets[key].split(/\s/g);
      } else if (/,[?=#]/.test(colorSets[key])) {
        processedColorSets[key] = colorSets[key].split(/,/g);
      } else {
        console.log("Error: split pattern not implemented");
      }
      noOfColorSets = processedColorSets[key].length;
    }
    this.state = {
      colorSets: processedColorSets,
      noOfColorSets: noOfColorSets,
      drumPadKeys: drumPadKeys,
      power: true,
      bank: false,
      volume: 100,
      displayPanelText: "Drum Machine",
    };
    this.updateColors = this.updateColors.bind(this);
    this.togglePower = this.togglePower.bind(this);
    this.togglePowerColor = this.togglePowerColor.bind(this);
    this.handleVolumeChange = this.handleVolumeChange.bind(this);
    this.toggleBank = this.toggleBank.bind(this);
    this.displayDrumPadPress = this.displayDrumPadPress.bind(this);
    this.updateColors();
  }

  togglePower() {
    this.setState((state) => ({
      power: !state.power,
      displayPanelText: `Power: ${!state.power ? "ON" : "OFF"}`,
    }));
    this.togglePowerColor();
  }

  displayDrumPadPress(note) {
    this.setState({
      displayPanelText: note,
    });
  }

  togglePowerColor() {
    if (!this.state.power) {
      this.updateColors();
    } else {
      const root = document.documentElement;
      root.style.setProperty("--custom-color", "#666");
      root.style.setProperty("--custom-darker-color", "#555");
      root.style.setProperty("--custom-super-light-color", "#eee");
    }
  }

  toggleBank() {
    this.setState((state) => ({
      bank: !state.bank,
      displayPanelText: !state.bank ? "Smooth Piano Kit" : "Heater Kit",
    }));
    if (this.state.power) {
      this.updateColors();
    }
  }

  handleVolumeChange(event) {
    this.setState({
      volume: event.target.value,
      displayPanelText: `Volume: ${event.target.value}`,
    });
  }

  updateColors() {
    const randomColorIndex = Math.floor(
      Math.random() * this.state.noOfColorSets
    );
    const root = document.documentElement;
    root.style.setProperty("--bs-body-font-weight", "bold");
    root.style.setProperty(
      "--custom-color",
      this.state.colorSets.colors[randomColorIndex]
    );
    root.style.setProperty(
      "--custom-darker-color",
      this.state.colorSets.darkerColors[randomColorIndex]
    );
    root.style.setProperty(
      "--custom-super-light-color",
      this.state.colorSets.superLightColors[randomColorIndex]
    );
  }

  render() {
    const drumPadKeys = [];
    this.state.drumPadKeys.forEach((drumPad, index) => {
      drumPadKeys.push(
        <DrumPad
          drumPadKey={drumPad.key}
          noteName={this.state.bank ? drumPad.altName : drumPad.name}
          audioSrc={this.state.bank ? drumPad.altAudioSrc : drumPad.audioSrc}
          power={this.state.power}
          volume={this.state.volume}
          displayDrumPadPress={this.displayDrumPadPress}
        />
      );
      if (index % 3 === 2) {
        drumPadKeys.push(<div className="w-100"></div>);
      }
    });
    return (
      <div
        className="text-center d-flex align-items-center min-vh-100 custom-bg-color"
        id="drum-machine"
      >
        <div className="container">
          <div
            className="row p-4 justify-content-center justify-content-md-left bg-white text-black"
            id="drum-pads-and-controls"
          >
            <div className="col-md-8 col-12">
              <div className="row pe-auto pe-md-3">{drumPadKeys}</div>
            </div>
            <div className="col-md-4 col-sm-6 col-8">
              <div className="row h-100">
                <div className="col-12 mt-2 mb-0 my-md-0">
                  <p className="m-0">Power</p>
                  <Form.Switch
                    id="Power"
                    checked={this.state.power}
                    onChange={this.togglePower}
                  ></Form.Switch>
                </div>
                <p
                  className="col-12 my-2 my-md-auto panel-bg-color"
                  id="display"
                >
                  {this.state.displayPanelText}
                </p>
                <div className="col-12 my-2 my-md-auto">
                  <p className="m-0">Volume</p>
                  <Form.Range
                    onChange={this.handleVolumeChange}
                    value={this.state.volume}
                  />
                </div>
                <div className="col-12 my-0">
                  <p className="m-0">Bank</p>
                  <Form.Switch
                    id="bank"
                    checked={this.state.bank}
                    onChange={this.toggleBank}
                  ></Form.Switch>
                </div>
              </div>
            </div>
          </div>
          <footer className="mt-2">
            <p>
              <a
                className="link-light"
                href="https://radii.dev/freeCodeCamp.org-Front-End-Dev-Libraries/Build-a-Drum-Machine"
              >
                <FontAwesomeIcon icon={faCode} /> {`Source Code & License`}
              </a>
            </p>
          </footer>
        </div>
      </div>
    );
  }
}

class DrumPad extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.playSound = this.playSound.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);
  }

  handleKeyPress(event) {
    if (String(event.key).toUpperCase() === this.props.drumPadKey) {
      this.playSound();
    }
  }

  componentDidMount() {
    this.audio = document.getElementById(this.props.drumPadKey);
    document.addEventListener("keydown", this.handleKeyPress, false);
  }

  componentWillUnmount() {
    document.removeEventListener("keydown", this.handleKeyPress, false);
  }

  playSound() {
    this.props.displayDrumPadPress(this.props.noteName);
    this.audio.play();
  }

  render() {
    return (
      <div className="col-4 p-1">
        <button
          id={`${this.props.drumPadKey}-button`}
          className={`drum-pad w-100 h-100 btn custom-el-color rounded-0`}
          style={{
            paddingTop: "20%",
            paddingBottom: "20%",
            fontWeight: "bold",
          }}
          onClick={this.playSound}
        >
          {this.props.drumPadKey}
          <audio
            className="clip"
            id={this.props.drumPadKey}
            src={this.props.audioSrc}
            preload="auto"
          />
        </button>
      </div>
    );
  }
}

export default App;