Commit graph

1147 commits

Author SHA1 Message Date
William Carroll
d84d0000e0 Correct all G_sharp pitch classes
I incorrectly modelled all of the G-sharps in my application as belonging to the
G pitchClass, which resulted in a strange bug where vieChord printed "G minor
Root position", but the Piano highlit a G minor.

I checked the other accidentals, and it looks like everything is properly
classified.
2020-04-19 19:11:17 +01:00
William Carroll
ae31090a46 Remove unused Msg's
I'm sure this app contains more unused code. I would like to find some Elm tools
for detecting and deleting dead code, but this isn't my current priority.

My current priority is dogfooding this app until I find it genuinely useful for
myself.
2020-04-19 19:02:25 +01:00
William Carroll
541c40cd2f Ensure only whitelisted chord inversions present in initial state
Whoops...
2020-04-19 19:02:17 +01:00
William Carroll
a059c32403 Display "Get ready..." message before practicing
This is a temporary solution. Ideally I would like to handle this with the
following:

- Show the flashcard for a chord shortly after beginning a practice session
- Display a small 3...2...1... countdown timer immediately after beginning a
  practice session

I need to dig more deeply into Elm's Time module and subscriptions to better
understand how to properly solve this problem. In the meantime, please tolerate
this short-term solution.
2020-04-19 18:51:42 +01:00
William Carroll
4a8f750ba8 Restore support for whitelisted chord inversions
Allow users to include or exclude chord inversions.
2020-04-19 18:36:22 +01:00
William Carroll
14f11823ff Drop support for PracticeMode
For now, I'd like to support selecting keys and whitelisting inversions.
2020-04-19 18:23:01 +01:00
William Carroll
d134db700f Support a FlashCard before showing the notes that comprise a chord
My much anticipated feature: first prompt the user for a name of a chord, then
show the user that chord.

Cascading changes:
I changed the "Tap to practice" overlayButton's opacity from 30% to 100% because
pausing when showFlashCard is True causes the two piece

TIL:
You can batch Elm Subscriptions using the Sub.batch function.

What I haven't learned yet:
How to best handle rotating screens for mobile devices (i.e. portrait
vs. landscape modes). In time...

What's left?
- Support sound
- Support a fine-tune section of the preferences
- Support tablet and web browser variants
- Ask users for the "I chord" instead of asking "C major Root position"
- More styling (of course)
2020-04-19 15:32:20 +01:00
William Carroll
f92fe97aff Create Tailwind module
Moving the UI.tw function into Tailwind.use. Creating and consuming some
functions like Tailwind.if_ and Tailwind.when to make it easier to conditionally
style some of my components.
2020-04-19 13:42:37 +01:00
William Carroll
7b2163d804 Ensure the overlayButton is truly h-screen and w-screen
Now the "Tap to practice" button fully covers the screen.

- Dropped support for a Piano direction (for now)
- Using w-full and w-1/2 for piano key "length"
2020-04-19 13:14:18 +01:00
William Carroll
2fe6d7a10c Responsively size UI
TL;DR: scale down UI for non-mobile devices.

I pulled the screen resolution for my phone, the Google Pixel 4, off of the
internet. I created a device profile in Chrome to develop this application
specifically for my phone. To my surprise, when I opened the app on my phone,
many of elements that looked good in Google Chrome, looked askew on my phone. I
needed to troubleshoot.

Here's how I did that:
I used Tailwind to responsively color the bg for each breakpoint to see if my
device was sm, md, lg, xl (according to Tailwind's breakpoint
terminology). After reading Tailwind's documentation and comparing their
breakpoints with my Pixel 4's width (i.e. 1080px), I figured that my device
would be lg. It's not; it's md, which I confirmed by using ngrok to load
localhost:8000 on my phone and see that the background-color was
"md:bg-green-600".

I'm still unsure why my device is not lg, but knowing that my device was md
was enough to fix many of the styling issues. My current theory is that while
my screen's resolution is 1080 wide, the pixel density affects the media query
for the breakpoint.
2020-04-19 13:05:55 +01:00
William Carroll
74ebb8e869 Set the selectedChord to Nothing when setting a key
This helps us avoid showing a chord from a key that the user did not whitelist.
2020-04-19 00:31:42 +01:00
William Carroll
8620d86fd0 Prune {Select,Deselect}AllKeys actions
Removing more unused code attempting to focus this app's scope.
2020-04-19 00:31:06 +01:00
William Carroll
11b140b6ae Highlight root note of each chord
Refactor the Piano component to highlight the root note of each chord. If this
makes things too easy, I can support this as a preference.

Also:
- Reduced the number of keys that the piano displays and increased the key
  thickness to reclaim the space
- Preferred using Tailwind selectors instead of inline styling where applicable
- Call List.reverse on the keys to ensure that the top-most note is a lower note
  than the bottom-most note

TODO:
- Support showing only the name of the chord and not just the notes that
  comprise that chord
- Rewrite the function that generates the chords for a given range of notes
- Consider supporting a dark mode
2020-04-19 00:21:37 +01:00
William Carroll
c6132ab1d6 Remove horizontal padding
Google Chrome's device preview doesn't resemble what I see when I use my phone
to visit this page.
2020-04-18 20:23:02 +01:00
William Carroll
9e855f7427 Create Overview for Learn Piano Chords
Since I've published this, I should include an Overview page to orient potential
users. This Overview could be better -- as could many things with this app --
but it's a start, and I'm seeking small wins.
2020-04-18 19:51:57 +01:00
William Carroll
f55d2f09f7 Remove duplicate step from README
I mention setting tempo twice... whoops.
2020-04-18 19:50:12 +01:00
William Carroll
6dc48753f5 Prefer "Tap" to "Press"
I'm preferring the verb "tap" to "press".
2020-04-18 19:49:25 +01:00
William Carroll
82ebc0ad19 Debug unresponsive button press for selectKey
Observed problem: Tapping "C major, A minor" key, which LPC sets by default,
does not unset it.

Bug: handleClick passed the relativeMinor Key but the default value in
State.Model is the C Major key. We would toggled b/w [Cmajor] ->
[Cmajor,Aminor], and because toggled checked if either Cmajor or Aminor was
present, it was always true.

Solution: Check relativeMajor to set toggled.
2020-04-18 18:51:23 +01:00
William Carroll
441fe3e32e Tidy app
Now that I have a deployed an MVP of my app, I am tidying things up to support
the next phase of development.

TL;DR:
- Moved application Model-related code into State module
- Moved each View into its own module
- Deleted unused ChordInspector component
- Deleted unused Msg's, {Increase,Decrease}Tempo
- Deleted misc unused code
2020-04-18 14:58:16 +01:00
William Carroll
ddbd7e2ef5 Ignore Main.min.js
The elm2nix expression builds my code as Main.min.js. As such, I changed my
index.html to require Main.min.js instead of elm.js. When I run elm-live now, I
make sure that I output Main.min.js as well. I need to gitignore this to exclude
it from my repository though.
2020-04-18 14:26:28 +01:00
William Carroll
720d727d64 Orient "Press to practice" button
Rotate the "Press to practice" copy to ensure that it is readable in landscape
mode.
2020-04-18 14:24:41 +01:00
William Carroll
f0803547e4 "Chord Drill Sergeant" -> "Learn Piano Chords"
In the spirit of "keep it simple, stupid", I am naming this application as
closely to the functionality as I can imagine.
2020-04-18 13:30:38 +01:00
William Carroll
39d084e493 Use elm2nix to (attempt to) deploy learnpianochords.app
After a few failed attempts at deploying my Elm application on NixOS, I'm trying
elm2nix, which some NixOS and Elm users created to attempt to solve some of the
issues that I ran into earlier today.

Elm tries to write to $HOME, which NixOS doesn't like. I typically prefer to
avoid things like cabal2nix, elm2nix, node2nix because I don't like the workflow
that they suggest, but I'm so eager to deploy this application, that I'm trying
it.
2020-04-18 00:10:39 +01:00
William Carroll
277ad983d4 Nixify build for Chord Drill Sergeant
Thankfully @tazjin builds Gemma (an Elm project) with Nix, so I could reference
Gemma's default.nix to help me with mine. Elm problematically attempts to
HTTP-fetch a list of packages to verify my project's dependencies. Because Nix
builds derivations in a sandbox without network access, I need to use some
escape hatches (i.e. NIX_REDIRECTS, LD_PRELOAD,
SYSTEM_CERTIFICATE_PATH). Welp... it's packaged now...

I'm also pointing learnpianochords.app to this project's index.html. It will be
live soon! :)

TODO(wpcarro): Rename "Chord Drill Sergeant" -> "Learn Piano Chords" (KISS)
2020-04-17 15:08:38 +01:00
William Carroll
bdb16c11ba Simplify preferences
I'd like to deploy an MVP version of this application today, so I'm dropping
support for a few features to focus my efforts. I may bring these features
back.

TL;DR:
- Temporarily drop support for "Fine Tune" tab of preferences
- Sort keys by the Circle of Fifths
2020-04-17 13:35:33 +01:00
William Carroll
5ca0fa2fcd Render a mobile-friendly piano
For now since I'm the only customer and I'm primarily making this for myself,
I'm styling the app specifically for my Google Pixel 4. If I find this app
useful, I will consider supporting other devices.

I'm using the Icons that I bought when I purchased the "Refactoring UI" book.

Other news:
- I bought the domain learnpianochords.app!

What's left:
- Style the "fine tune" tab of the preferences view
- Better support non-mobile devices like the browser and tablet devices
- Deploy the application to learnpianochords.app
- Redesign the "key" tab of the preferences view to sort the keys according to
  the circle of fifths
- Dogfood
- Simplify until I cannot simplify anymore
2020-04-17 13:35:29 +01:00
William Carroll
1d427c4921 Begin styling efforts
Start styling the Chord Drill Sergeant for mobile devices because that is that
device on which I will primarily use CDS.

I'm also deleting the debugger related code. I would like to support a debugger,
but I'm not currently using this one, so I am going to remove it to keep things
slender.

- Introduce TailwindCSS, which also introduced elm-live, index.html, index.css
- Add mobile-first styling for the preferences modal
- Remove unused code
2020-04-13 22:43:04 +01:00
William Carroll
a64601cc05 Support generating chords for a particular key
Generate chords for a given key.

I believe my Theory.allChords function is taking a long time to generate all of
the chord possibilities. I would like to profile this to verify this
assumption. I think I can create a "staging area" for changes and only
regenerate chords when "committing" the options from the "staging area". This
should stress the application less.

TODO: Profile application to find bottleneck.
2020-04-13 15:46:26 +01:00
William Carroll
6a3af6c9c6 Don't render the notes on the piano
I was using this to debug a feature that I no longer need to debug.
2020-04-13 15:06:35 +01:00
William Carroll
774c0ddf05 Rename NoteClass -> PitchClass
For the past two to three days, I've been searching for the name for the concept
of "C" or "A". From what I read, notes are specific things like C0 or C4, but I
wanted the name of the concept of a C. Thankfully today I discovered that this
is called a pitch class.
2020-04-13 10:02:03 +01:00
William Carroll
edc8f4ef6e Remodel model.selectedChord as Maybe Chord
Until the user presses play, we shouldn't display any chords.
2020-04-13 09:42:26 +01:00
William Carroll
6a91065677 Whitelist and blacklist note classes
Often I want to practice only C, F, and G-chords in all inversions. Next I'd
like to only support the chords for various keys.
2020-04-12 23:35:16 +01:00
William Carroll
083763f7f2 Only display chords that fit on the displayed piano
Only show the chords that we can fit on the piano.

TODO: Debug occasional instance where we render chords that do not fit. I am
unsure how to reproduce these states at the moment.
2020-04-12 23:33:56 +01:00
William Carroll
3ee1b1f670 Support suspended chords
I'm not sure how valuable it is to study all of the inversions of the suspended
chords. Maybe it is. I'll let the users decide.
2020-04-12 23:32:00 +01:00
William Carroll
bf460fe5ac Whitelist and blacklist chordTypes
Allow and disallow chords by the type of chords.
2020-04-12 19:32:54 +01:00
William Carroll
1298263629 Whitelist and blacklist chords by inversion type
Add checkboxes to support various chord positions.
2020-04-12 19:20:00 +01:00
William Carroll
24692ab465 Properly support chord inversions
While I did change a lot of functionality, I also ran `elm-format` across the
codebase, which makes these changes a bit noisy.

Here is the TL;DR:
- Properly support chord inversions
- Ensure that the piano styling changes dynamically when I change the variables
  like `naturalWidth`
- Add start and end notes to define the size of the piano and which chords we
  create
- Support elm-format and run it across entire project
- Debug Misc.comesBefore
- Introduce a ChordInspector and debugger

TODO: Ensure that we only generate chords where all of the notes can be rendered
on the displayed keys.

TODO: Add preferences panel, so that I can do things like "Practice blues chords
in C and E with chord substitutions."
2020-04-12 16:43:34 +01:00
William Carroll
730aecc076 Support NoteClass
Remodel application to support the scientific pitch notation for notes. Instead
of supporting simply "C", support "C4". This change created cascading
changes. After refactoring for around an hour, I restored the app to a working
state. The current state is not desirable, but it compiles. More changes on the
way.
2020-04-11 23:11:04 +01:00
William Carroll
808e6ee484 Support Misc module
Define two functions for attempting to return an element in a list that precedes
or succeeds another element.

I prefer having something like Utils.List. Perhaps I will refactor.
2020-04-11 23:10:14 +01:00
William Carroll
c24c9b7fb9 Support BPM for tempo
Using BPM as the unit for tempo.

TODO: Consider a higher-fidelity way to calculate BPM, although I'm not sure
this is critical functionality; an interesting problem is just seducing me, and
this app would be better off resisting the temptation.
2020-04-11 17:46:46 +01:00
William Carroll
e864074600 Support elm-mode for Emacs
Instead of (ab)using haskell-mode, support elm-mode.

TODO: Support elm-format on buffer save
2020-04-11 17:45:59 +01:00
William Carroll
93bdebf9b2 Track app ideas
Use an org file to track random ideas or features or improvements.
2020-04-11 17:44:20 +01:00
William Carroll
3c8bfe85c9 Prefer type alias to type
Elm reminds me of Haskell. In fact, I'm using `haskell-mode` (for now) in Emacs
to write my Elm code, and it works reliably. I'm not writing a Haskell app, but
if I were, I would define my application Model with the following Haskell code:

```haskell
data Model = Model { whitelistedChords :: [Theory.Chord]
                   , selectedChord :: Theory.Chord
                   , isPaused :: Bool
                   , tempo :: Int
                   }
```

When I first modelled my application state, I did something similar. After
reading more Elm examples of SPAs, I see that people prefer using type aliases
to define records. As far as I know, you cannot do this in Haskell; I believe
all types are "tagged" (something about "nominal typing" comes to mind). Anyhow,
Elm isn't Haskell; Haskell has cool features like type classes; Elm has cool
features like human-readable error messages and exhaustiveness checking for
cases. I love Haskell, and I love Elm, and you didn't ask.

Anyhow, this commit refactors my records as type aliases instead of types. I
think the resulting code is more readable and ergonomic.
2020-04-11 16:50:02 +01:00
William Carroll
52eb456a0f Support basic tempo
Supporting Play/Pause events, and Increase/Decrease tempo.

TODO: Convert milliseconds to BPM
2020-04-11 16:09:11 +01:00
William Carroll
2f446d0441 Improve the styling of the piano
Create a more convincing representation of the piano.

I would like to compute the left-offset based on the naturalWidth. That change
is probably forthcoming.
2020-04-11 11:36:37 +01:00
William Carroll
3562343c19 Generate all known chords and display randomly selected chords
First of all, Elm's purity is beautiful. I think every language should model
their error messages and develop experience after Elm. If I didn't have to
download packages, I don't think I would need an internet connection to
troubleshoot my program's errors. This is how helpful I find the compiler.

Now that that's out of the way, here's what I've changed since we've last
corresponded:
- Use Elm's Browser.element to create a reactive application with state
- Write a function to generate all of the chords about which CDS knows
- Move some code out of Main.elm into other modules
- Depend on List.Extra, Random, Random.Extra

What's left:
- Lots of work
- Instead of clicking a button to show a new chord, use a timer
- Add mobile-first styling (probably add TailwindCSS)
- Persist settings in LocalStorage (and then eventually create user accounts)
- Allow users to curate the list of chords they're interested in practicing
- Deploy the website and dogfood it

Unknowns:
- How can I handle tempo? I don't expect setInterval to be enough (maybe it
  is)...
2020-04-11 10:45:42 +01:00
William Carroll
3dac2f10ff Drop support for Haskell glyphs
I think that glyphs look nice, but they subtley confuse Emacs's UI. In the case
of a two-character glyph condensing into one character's width, the fill-width
indicator -- correctly -- highlights the 81st character as red, but it looks
like it's erroneously highlighting the 80th.

Also when I want to create an anonymous function I type (), which condenses into
the unit character, and it's difficult to delete either the opening or the
closing parenthesis.

Overall I think glyphs are cute, but they're not worth the trouble.
2020-04-11 10:41:49 +01:00
William Carroll
b600f709b4 Model data and sketch ideas for Chord Drill Sergeant
Initialize an Elm application to build a MVP for the Chord Drill Sergeant
application. There isn't much to see at the moment. I'm just sketching
ideas. More forthcoming...
2020-04-10 23:03:01 +01:00
William Carroll
c350222fcc Create README for Chord Drill Sergeant
See the README for more information.

I've wanted to use an application like this for awhile. I would like to start
developing this soon.
2020-04-10 14:48:00 +01:00
William Carroll
065d58dd5a Add README for typo-po
See the README for more context on typo-po.

I drank a strong cup of coffee this morning, and I cannot quiet the activity in
my head. I'm attempting to use READMEs in my //website/sandbox to track ideas
that I would typically track using my phone's notes application. Creating a
README forces me to write more than I may have written in my phone's
notes. Also, since this repository is available at https://git.wpcarro.dev, I
can share these ideas with friends by sending them a URL! So much for "stealth
mode"... Well I guess this stress-tests my theory that ideas are less important
than execution.
2020-04-10 13:54:33 +01:00