Skip to content

Commit

Permalink
reordered buttons + implemented flying beat counts
Browse files Browse the repository at this point in the history
  • Loading branch information
@ArneshRC
ArneshRC committed Aug 18, 2023
1 parent 8d3a434 commit 43f9c94
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 71 deletions.
8 changes: 7 additions & 1 deletion src/App.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,13 @@ class App implements RedomComponent {
]);
}
get description() {
return classNames(["font-sans", "my-6", "mx-4", "text-base", "text-center"]);
return classNames([
"font-sans",
"my-6",
"mx-4",
"text-base",
"text-center"
]);
}
get container() {
return classNames([
Expand Down
70 changes: 70 additions & 0 deletions src/components/FlyingBeatCount.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import classNames from "classnames";
import { RedomComponent, el } from "redom";
import { EASE, Scene } from "scenejs";
import { sleep } from "../utils";

class FlyingBeatCount implements RedomComponent {
el: HTMLDivElement;
private classes = new (class {
getSpan(beatCount: number, increasing: boolean) {
return classNames([
"rounded-full",
"w-8",
"h-8",
"bg-neutral-800",
"text-neutral-300",
"absolute",
"flex",
"items-center",
"justify-center",
`flying-beat-count-${beatCount}-${increasing ? "inc" : "dec"}`
]);
}
})();
beatCount: number;
increasing: boolean;
constructor(beatCount: number, increasing: boolean) {
this.beatCount = beatCount;
this.increasing = increasing;
this.el = el("div", beatCount.toString(), {
className: this.classes.getSpan(beatCount, increasing)
});
}

async animateFly() {
const scene = new Scene(
{
[`.flying-beat-count-${this.beatCount}-${
this.increasing ? "inc" : "dec"
}`]: {
0: {
opacity: 1,
transform: {
translateX: "50%",
translateY: "-50%",
scale: 1
}
},
1: {
opacity: 0,
transform: {
translateX: "150%",
translateY: "-150%",
scale: 0.2
}
}
}
},
{
easing: EASE,
selector: true
}
).playCSS();

await sleep(1000);

scene.clear();
}
}

export default FlyingBeatCount;
102 changes: 32 additions & 70 deletions src/components/RingSettingsMenu.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
import { RedomComponent, el, text, setAttr, setChildren } from "redom";
import {
RedomComponent,
el,
mount,
setAttr,
setChildren,
unmount
} from "redom";
import classNames from "classnames";
import {
mdiPlay,
Expand All @@ -7,17 +14,18 @@ import {
mdiChevronUp,
mdiChevronDown,
mdiPlus,
mdiMinus
mdiMinus,
mdiPalette
} from "@mdi/js";

import { RingSettings, RingState } from "../utils/Ring";
import Icon from "./Icon";
import { Coords, RingColor, instrumentNames, ringColors } from "../constants";
import { EASE, Scene } from "scenejs";
import { sleep } from "../utils";
import { visualizerState } from "../services/global";
import { capitalize, findIndex, indexOf } from "lodash";
import { capitalize, indexOf } from "lodash";
import { Kick, Sine, Snare } from "../utils/Instrument";
import FlyingBeatCount from "./FlyingBeatCount";

class RingSettingsMenu implements RedomComponent {
el: HTMLDivElement;
Expand Down Expand Up @@ -65,22 +73,7 @@ class RingSettingsMenu implements RedomComponent {
return classNames([...this.#button, "bg-neutral-300"]);
}
get beatCountButton() {
return classNames([...this.#button, "bg-slate-300"]);
}
get beatCountDisplay() {
return classNames([
...this.#button,
"bg-neutral-700",
"text-neutral-400",
"col-span-2"
]);
}
get ringIdxDisplay() {
return classNames([
...this.#button,
"bg-neutral-700",
"text-neutral-400"
]);
return classNames([...this.#button, "bg-slate-300", "relative"]);
}
get instrumentButton() {
return classNames([
Expand Down Expand Up @@ -116,8 +109,6 @@ class RingSettingsMenu implements RedomComponent {
moveDownButton: HTMLButtonElement;
incBeatCountButton: HTMLButtonElement;
decBeatCountButton: HTMLButtonElement;
beatCountDisplay: HTMLDivElement;
ringIdxDisplay: HTMLDivElement;
instrumentButton: HTMLButtonElement;
colorButton: HTMLButtonElement;

Expand Down Expand Up @@ -165,31 +156,6 @@ class RingSettingsMenu implements RedomComponent {
className: this.classes.beatCountButton
});

this.beatCountDisplay = el(
"div",
[text(this.ringSettings.beatCount.toString())],
{
className: this.classes.beatCountDisplay
}
);

this.ringIdxDisplay = el(
"div",
[
text(
(
1 +
findIndex(visualizerState.activeRings, {
id: this.ringId
})
).toString()
)
],
{
className: this.classes.ringIdxDisplay
}
);

this.instrumentButton = el(
"button",
[capitalize(this.ringSettings.instrumentName)],
Expand All @@ -198,7 +164,7 @@ class RingSettingsMenu implements RedomComponent {
}
);

this.colorButton = el("button", {
this.colorButton = el("button", [new Icon(mdiPalette)], {
className: this.classes.getColorButton(this.ringSettings.colorName)
});

Expand All @@ -208,14 +174,12 @@ class RingSettingsMenu implements RedomComponent {
[
this.playPauseButton,
this.deleteButton,
this.moveUpButton,
this.incBeatCountButton,
this.colorButton,
this.decBeatCountButton,
this.moveDownButton,
this.beatCountDisplay,
this.ringIdxDisplay,
this.incBeatCountButton,
this.moveUpButton,
this.instrumentButton,
this.colorButton
this.moveDownButton
],
{
className: this.classes.buttonsContainer
Expand Down Expand Up @@ -273,36 +237,34 @@ class RingSettingsMenu implements RedomComponent {

this.moveUpButton.addEventListener("click", () => {
this.ringReorderHandler(true);
// Update ring index display
this.ringIdxDisplay.textContent = (
1 + findIndex(visualizerState.activeRings, { id: this.ringId })
).toString();
});

this.moveDownButton.addEventListener("click", () => {
this.ringReorderHandler(false);
// Update ring index display
this.ringIdxDisplay.textContent = (
1 + findIndex(visualizerState.activeRings, { id: this.ringId })
).toString();
});

this.incBeatCountButton.addEventListener("click", () => {
this.incBeatCountButton.addEventListener("click", async () => {
// Check that the value doesn't exceed max
if (this.ringSettings.beatCount >= 8) return;
// And update
this.beatCountChangeHandler(this.ringSettings.beatCount + 1);
this.beatCountDisplay.textContent =
this.ringSettings.beatCount.toString();
const newBeatCount = this.ringSettings.beatCount + 1;
this.beatCountChangeHandler(newBeatCount);
const flyingBeatCount = new FlyingBeatCount(newBeatCount, true);
mount(this.incBeatCountButton, flyingBeatCount);
await flyingBeatCount.animateFly();
unmount(this.incBeatCountButton, flyingBeatCount);
});

this.decBeatCountButton.addEventListener("click", () => {
this.decBeatCountButton.addEventListener("click", async () => {
// Check that the value is at least 2
if (this.ringSettings.beatCount <= 1) return;
// And update
this.beatCountChangeHandler(this.ringSettings.beatCount - 1);
this.beatCountDisplay.textContent =
this.ringSettings.beatCount.toString();
const newBeatCount = this.ringSettings.beatCount - 1;
this.beatCountChangeHandler(newBeatCount);
const flyingBeatCount = new FlyingBeatCount(newBeatCount, false);
mount(this.decBeatCountButton, flyingBeatCount);
await flyingBeatCount.animateFly();
unmount(this.decBeatCountButton, flyingBeatCount);
});

this.instrumentButton.addEventListener("click", () => {
Expand Down

0 comments on commit 43f9c94

Please sign in to comment.