aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--public/main.css39
-rw-r--r--src/view/sequencer.ts36
2 files changed, 41 insertions, 34 deletions
diff --git a/public/main.css b/public/main.css
index 9540a7f..26c5950 100644
--- a/public/main.css
+++ b/public/main.css
@@ -1,8 +1,9 @@
/* Constants */
:root {
- --color-block: lightgray;
- --color-block-checked: lightgreen;
+ --color-block: #e3e3e3;
+ --color-block-checked: #90ee90;
+ --color-block-unchecked-beat: #fff7bf;
--spacing-mouse: 0.25rem;
--spacing-cat: 0.5rem;
@@ -56,7 +57,13 @@ body {
.g-Sequencer__Blocks {
display: flex;
align-items: center;
- gap: var(--spacing-cat);
+ gap: var(--spacing-mouse);
+}
+
+.g-Sequencer__Column {
+ display: flex;
+ flex-direction: column;
+ gap: var(--spacing-mouse);
}
.g-Sequencer__Column > li {
@@ -64,35 +71,35 @@ body {
align-items: center;
height: var(--spacing-horse);
cursor: pointer;
-}
-
-.g-Sequencer__Column {
- display: flex;
- flex-direction: column;
- gap: var(--spacing-cat);
+ padding: var(--spacing-mouse);
}
.g-Sequencer__Block {
width: var(--spacing-horse);
height: var(--spacing-horse);
- background-color: lightgray;
+ background-color: var(--color-block);
cursor: pointer;
}
.g-Sequencer__Block:hover {
- filter: brightness(110%);
+ filter: brightness(105%);
}
.g-Sequencer__Block--Checked {
- background-color: lightgreen;
+ background-color: var(--color-block-checked);
+}
+
+.g-Sequencer__Column--Beat {
+ background-color: var(--color-block-unchecked-beat);
+ box-shadow: 0px 0px 5px 1px var(--color-block-unchecked-beat);
}
-.g-Sequencer__Block--Beat {
- animation: beat 0.2s linear;
+.g-Sequencer__Column--Beat .g-Sequencer__Block--Checked {
+ animation: checked-beat 0.2s linear;
}
-@keyframes beat {
+@keyframes checked-beat {
0% {transform: scale(100%);}
- 30% {transform: scale(105%);}
+ 30% {transform: scale(115%);}
100% {transform: scale(100%);}
}
diff --git a/src/view/sequencer.ts b/src/view/sequencer.ts
index 74eb0ea..bc26e69 100644
--- a/src/view/sequencer.ts
+++ b/src/view/sequencer.ts
@@ -7,7 +7,7 @@ import * as block from 'view/sequencer/block'
export function view() {
let index = -1
- let blocks = [{
+ let columns = [{
[Sound.Bass]: true,
[Sound.Snare]: false,
[Sound.HitHatClosed]: false,
@@ -17,38 +17,38 @@ export function view() {
block.column([
{
checked: false,
- onCheck: checked => blocks[0][Sound.HitHatClosed] = checked
+ onCheck: checked => columns[0][Sound.HitHatClosed] = checked
},
{
checked: false,
- onCheck: checked => blocks[0][Sound.Snare] = checked
+ onCheck: checked => columns[0][Sound.Snare] = checked
},
{
checked: true,
- onCheck: checked => blocks[0][Sound.Bass] = checked
+ onCheck: checked => columns[0][Sound.Bass] = checked
}
])
)
let onNextStep = (sounds: soundsLib.Sounds) => {
let oldIndex = index
- let newIndex = (index + 1) % blocks.length
+ let newIndex = (index + 1) % columns.length
index = newIndex
- let oldBlock = blocksNode.childNodes[oldIndex] as HTMLElement
- if (oldBlock !== undefined) oldBlock.classList.remove('g-Sequencer__Block--Beat')
+ let oldColumn = blocksNode.childNodes[oldIndex] as HTMLElement
+ if (oldColumn !== undefined) oldColumn.classList.remove('g-Sequencer__Column--Beat')
- let newBlock = blocksNode.childNodes[newIndex] as HTMLElement
+ let newColumn = blocksNode.childNodes[newIndex] as HTMLElement
// Trigger reflow between removing and adding the classname.
// Allow to re-trigger the animation if there is only one column.
// See https://css-tricks.com/restart-css-animation/
- void newBlock.offsetWidth
+ void newColumn.offsetWidth
- newBlock.classList.add('g-Sequencer__Block--Beat')
+ newColumn.classList.add('g-Sequencer__Column--Beat')
soundsLib.all().forEach(sound => {
- if (blocks[newIndex][sound]) soundsLib.play(sounds, sound)
+ if (columns[newIndex][sound]) soundsLib.play(sounds, sound)
})
}
@@ -56,20 +56,20 @@ export function view() {
play.view({
onNextStep,
onStop: () => {
- let block = blocksNode.childNodes[index] as HTMLElement
- block.classList.remove('g-Sequencer__Block--Beat')
+ let column = blocksNode.childNodes[index] as HTMLElement
+ column.classList.remove('g-Sequencer__Column--Beat')
index = -1
}
}),
addRemoveBeat.view({
initBeats: 1,
onRemove: index => {
- let lastBlock = blocksNode.childNodes[index]
- blocksNode.removeChild(lastBlock)
- blocks.pop()
+ let lastColumn = blocksNode.childNodes[index]
+ blocksNode.removeChild(lastColumn)
+ columns.pop()
},
onAdd: index => {
- blocks.push({
+ columns.push({
[Sound.Bass]: false,
[Sound.Snare]: false,
[Sound.HitHatClosed]: false,
@@ -77,7 +77,7 @@ export function view() {
blocksNode.appendChild(block.column(
soundsLib.all().map(sound => ({
checked: false,
- onCheck: checked => blocks[index][sound] = checked
+ onCheck: checked => columns[index][sound] = checked
}))
))
}