From 43f9c94d45795fd7e9131a176573ad7560902b16 Mon Sep 17 00:00:00 2001 From: ArneshRC <84434238+ArneshRC@users.noreply.github.com> Date: Fri, 18 Aug 2023 20:58:22 +0530 Subject: [PATCH] reordered buttons + implemented flying beat counts --- src/App.ts | 8 ++- src/components/FlyingBeatCount.ts | 70 ++++++++++++++++++++ src/components/RingSettingsMenu.ts | 102 +++++++++-------------------- 3 files changed, 109 insertions(+), 71 deletions(-) create mode 100644 src/components/FlyingBeatCount.ts diff --git a/src/App.ts b/src/App.ts index ff1dbf1..5ce4620 100644 --- a/src/App.ts +++ b/src/App.ts @@ -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([ diff --git a/src/components/FlyingBeatCount.ts b/src/components/FlyingBeatCount.ts new file mode 100644 index 0000000..87cce1f --- /dev/null +++ b/src/components/FlyingBeatCount.ts @@ -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; diff --git a/src/components/RingSettingsMenu.ts b/src/components/RingSettingsMenu.ts index 163ddd3..2cfda80 100644 --- a/src/components/RingSettingsMenu.ts +++ b/src/components/RingSettingsMenu.ts @@ -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, @@ -7,7 +14,8 @@ import { mdiChevronUp, mdiChevronDown, mdiPlus, - mdiMinus + mdiMinus, + mdiPalette } from "@mdi/js"; import { RingSettings, RingState } from "../utils/Ring"; @@ -15,9 +23,9 @@ 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; @@ -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([ @@ -116,8 +109,6 @@ class RingSettingsMenu implements RedomComponent { moveDownButton: HTMLButtonElement; incBeatCountButton: HTMLButtonElement; decBeatCountButton: HTMLButtonElement; - beatCountDisplay: HTMLDivElement; - ringIdxDisplay: HTMLDivElement; instrumentButton: HTMLButtonElement; colorButton: HTMLButtonElement; @@ -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)], @@ -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) }); @@ -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 @@ -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", () => {