braaar / jam-assistant Goto Github PK

• Link to this github repository
• License info?

• Chord suggestion
  • Hit me button
  • Undo button
• Time signature selector
• Special challenge cards

Kind of silly to have this as the page title. It's just the default from create-react-app. Maybe "Jam Assistant" is better?

When I load the page it's always showing Am in the chord list.

We need to remove that as a default value from the useState:

Features we want in the future

• Key center and key mode selection (e.g. "G" and "minor", "F" and "mixolydian", etc.)
• Providing chord progressions instead of just random chords (see #14)
• Time signature selection/randomization
• Display chords in a chord chart (see example)
• Different chord lengths
• Special challenge cards (see #1)
• Rarity system for weighted randomness (Common, Uncommon, Rare, Epic, Legendary)

Loose discussion about future ideas is welcome in this issue, but feel free to create issues for more specialised discussion of specific features.

Right now we have the bare minimum in terms of CI/CD. More actions could allow us to do more fancy stuff or facilitate good coding practices

• linting
• prettier
• test and build on PR
• github-pages release

A navigation in the header would be nice when we have multiple pages to navigate between.

I suggest we use React Router for navigation

• Install React Router
• Set up Routing
• Add route for jam.tsx at / (root of the web page)
• Add navigation link to / (using React Router's Link Element)

I think an about page would be nice.

<Heading> About </Heading>
<Paragraph> Blabla bla </Paragraph>

For now we can just copy the text from the readme or something.

I think it could be useful to have a text that explains briefly how the page works, but ideally everything should be fairly self explanatory if we design it right.

We should add a route for it when we get the routing setup (see #10). I think /about is a nice path

Right now the app is using the default react favicon. We should perhaps come up with a logo or symbol to use instead.

• Install Theme UI
• Write theme.ts
• Find a colour scheme

We want to have some kind of harmonic logic in the app so that you can get chords that fit together harmonically.

In the harmonic style of 18th century european musicians, chords are grouped into their harmonic functions with a number from 1 to 7.

In the C major scale, these chords are

• I: C major
• II: D minor
• III: E minor
• IV: F major
• V: G major
• VI: A minor
• VII: B dim

We want to write a function that will take some numbers and translate them into actual chords

const fourChords = {
  chords: [1, 5, 6, 4],
  mode: "major"
}
const keyCenter = "C";

writeChordProgression(fourChords, keyCenter); // returns [ "C", "G", "Am", "F"]

We can use this function alongside a large catalogue of chord progressions to get a random chord progression from the selection. If you grab two progressions you now have an A and B part you can alternate between.

getRandomProgression("C", "major"); // returns [ "C", "G", "Am", "F"]
getRandomProgression("C", "major"); // returns [ "C", "F", "G", "F"]

We should update the description tag. Right now it says Web site created using create-react-app.

I would rather have it say something like A web app you can use at a live jam session to come up with ideas. (we can work on the description more, but it's a start).