From 82018bcf85f19ff811ed142e806f4571c5321db3 Mon Sep 17 00:00:00 2001 From: Brandon Keepers Date: Fri, 26 Apr 2024 00:49:01 -0400 Subject: [PATCH] Spruce up the demo a bit --- demo.css | 26 +++++++ demo.ts | 16 ++-- index.html | 182 ++++++++++++++++++--------------------------- package.json | 7 +- postcss.config.js | 6 ++ tailwind.config.js | 10 +++ 6 files changed, 127 insertions(+), 120 deletions(-) create mode 100644 demo.css create mode 100644 postcss.config.js create mode 100644 tailwind.config.js diff --git a/demo.css b/demo.css new file mode 100644 index 0000000..85fce6a --- /dev/null +++ b/demo.css @@ -0,0 +1,26 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +#visualizer>* { + @apply h-4 w-4 rounded-full bg-[--off-color] transition-colors ease-in-out duration-100; + box-shadow: inset 0 0.1rem 0.5rem rgba(0, 0, 0, 0.5); +} + +#visualizer .active { + @apply bg-[--on-color]; + box-shadow: + inset 0 0.1rem 0.5rem var(--off-color), + 0 0 0.1rem rgba(0, 0, 0, 0.3), + 0 0 0.75rem var(--on-color); +} + +#visualizer .green { + --off-color: #3d9900; + --on-color: #66FF00; +} + +#visualizer .orange { + --off-color: #b38400; + --on-color: #FFD700; +} diff --git a/demo.ts b/demo.ts index b84708a..68fe002 100644 --- a/demo.ts +++ b/demo.ts @@ -17,11 +17,13 @@ function onBeat(note) { visualizerEl.children[quarter].classList.add('active') } -document.getElementById("start")?.addEventListener("click", () => { - metronome = createMetronome({ tempo: Number(tempoEl.value), onBeat }) - metronome.start() -}) -document.getElementById("stop")?.addEventListener("click", () => { - metronome?.stop() - metronome = undefined +document.getElementById("enabled")?.addEventListener("change", (e) => { + if (e.target?.checked) { + metronome = createMetronome({ tempo: Number(tempoEl.value), onBeat }) + metronome.start() + } else { + metronome?.stop() + onBeat(0) + metronome = undefined + } }) diff --git a/index.html b/index.html index 3a86131..6fc3f54 100644 --- a/index.html +++ b/index.html @@ -1,125 +1,85 @@ - + - - - - @chordbook/metronome - - - -
-
-

@chordbook/metronome

- - - - - -
-
-
-
- - -
-
- Tempo: - +
Offset: 0
+
- -
-
-
-
-
-
- -
Offset: 0
- - + + + diff --git a/package.json b/package.json index 47da9b1..178ceff 100644 --- a/package.json +++ b/package.json @@ -36,10 +36,13 @@ "node": ">=16" }, "devDependencies": { + "autoprefixer": "^10.4.19", + "daisyui": "^4.10.2", + "postcss": "^8.4.38", + "tailwindcss": "^3.4.3", "tsup": "^8.0.2", "typescript": "^5.4.2", "vite": "^5.1.6", "vitest": "^1.4.0" - }, - "dependencies": {} + } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 0000000..2e7af2b --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +export default { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..af11a37 --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,10 @@ +/** @type {import('tailwindcss').Config} */ +export default { + content: [ + "./index.html" + ], + theme: { + extend: {}, + }, + plugins: [require("daisyui")], +}