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(
Power
{this.state.displayPanelText}
Volume
Bank