outro_rails 0.1.0

data/app/views/outro_rails/instruments/_piano_midi.html.erb

@@ -0,0 +1,74 @@
+<%#
+  Playable piano keyboard.
+
+  Locals (all optional):
+    start_note:      first key, e.g. "C3"  (default "C3")
+    end_note:        last key,  e.g. "C5"  (default "C5")
+    highlight_keys:  array of note names to highlight,
+                     e.g. %w[C4 E4 G4] (default [])
+    highlight_color: any CSS color for highlighted keys (default blue)
+    root_keys:       subset of keys to mark as roots with a distinct color,
+                     e.g. %w[C4 C5] (default []). Root keys should also be
+                     included in highlight_keys so playback covers them.
+    root_color:      any CSS color for root keys (default red)
+
+  When highlight_keys is present, "Play Chord" plays all highlighted notes
+  at once and "Play Notes" plays them one at a time (low to high).
+  Every key is always individually clickable/tappable (Enter/Space works too).
+%>
+
+<%
+  start_note      = local_assigns.fetch(:start_note, "C3")
+  end_note        = local_assigns.fetch(:end_note, "C5")
+  highlight_keys  = Array(local_assigns.fetch(:highlight_keys, []))
+  highlight_color = local_assigns.fetch(:highlight_color, "#2f6bed")
+  root_keys       = Array(local_assigns.fetch(:root_keys, []))
+  root_color      = local_assigns.fetch(:root_color, "#d1495b")
+  prefer          = local_assigns.fetch(:prefer, 'sharps').to_sym
+
+  keys              = piano_keys_between(start_note, end_note, prefer: prefer)
+  highlighted_midis = highlight_keys.map { |n| note_to_midi(n) }
+  root_midis        = root_keys.map { |n| note_to_midi(n) }
+
+  keys_label = "Piano keyboard from #{start_note} to #{end_note}"
+%>
+
+<div class="outro-piano"
+     data-outro-piano
+     style="--outro-piano-highlight: <%= highlight_color %>;
+            --outro-piano-root: <%= root_color %>;">
+  <div class="outro-piano__keys" role="group"
+       aria-label="<%= keys_label %>">
+    <% keys.each do |key| %>
+      <%
+        key_classes = [
+          "outro-piano__key",
+          ("outro-piano__key--black" if key[:black]),
+          ("is-highlighted" if highlighted_midis.include?(key[:midi])),
+          ("is-root" if root_midis.include?(key[:midi]))
+        ].compact.join(" ")
+      %>
+      <div class="<%= key_classes %>"
+           data-piano-key
+           data-midi="<%= key[:midi] %>"
+           role="button"
+           tabindex="0"
+           aria-label="Play <%= key[:note] %>">
+        <span class="outro-piano__label"><%= key[:note] %></span>
+      </div>
+    <% end %>
+  </div>
+
+  <% if highlighted_midis.any? %>
+    <div class="outro-piano__controls">
+      <button type="button" class="outro-piano__button" data-piano-play="chord"
+              data-midis="<%= highlighted_midis.sort.join(",") %>">
+        Play Chord
+      </button>
+      <button type="button" class="outro-piano__button" data-piano-play="scale"
+              data-midis="<%= highlighted_midis.sort.join(",") %>">
+        Play Notes
+      </button>
+    </div>
+  <% end %>
+</div>

data/app/views/outro_rails/instruments/index.html.erb

@@ -0,0 +1,50 @@
+<% content_for :title, 'Instruments' %>
+
+<%
+  instrument_details = {
+    "guitar" => {
+      image: "outro_rails/guitar.svg",
+      description: "Six strings and twenty-four frets, in standard or " \
+                   "any of eighteen special tunings."
+    },
+    "piano" => {
+      image: "outro_rails/piano.svg",
+      description: "Eighty-eight keys. Click to hear a note."
+    }
+  }
+  fallback = { image: "outro_rails/instruments.svg", description: nil }
+%>
+
+<div class="outro outro-container">
+
+  <%= render "outro_rails/shared/header",
+          title: 'Instruments',
+          subtitle: 'Playable diagrams you can click to hear.'
+      %>
+
+  <%= render "outro_rails/shared/breadcrumb", trail: [
+        [ "Outro Home", root_path ],
+        [ "Instruments" ]
+      ] %>
+
+  <ul class="outro-grid outro-grid--wide">
+    <% @instruments.each do |instrument| %>
+      <% details = instrument_details.fetch(instrument, fallback) %>
+      <li class="outro-grid__item">
+        <div class="outro-card outro-card--link">
+          <span class="outro-card__media">
+            <%= image_tag details[:image], alt: '',
+                  class: 'outro-card__image' %>
+          </span>
+          <h2 class="outro-card__title"><%= instrument.titleize %></h2>
+          <% if details[:description] %>
+            <p class="outro-card__description"><%= details[:description] %></p>
+          <% end %>
+          <%= link_to "Open #{instrument.titleize.downcase}",
+                      instrument_path(instrument),
+                      class: "outro-card__cta" %>
+        </div>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/app/views/outro_rails/instruments/show.html.erb

@@ -0,0 +1,31 @@
+<% special_tuning = @tuning if @tuning && !@tuning.standard? %>
+
+<% content_for :title,
+     [ @instrument.titleize, special_tuning&.name ].compact.join(" - ") %>
+
+<div class="outro outro-container">
+
+  <%= render "outro_rails/shared/header",
+          title: @instrument.titleize,
+          subtitle: 'Click anywhere on the diagram to hear the note.'
+      %>
+
+  <%
+    tail =
+      if special_tuning
+        [ [ @instrument.titleize, instrument_path(@instrument) ],
+          [ special_tuning.name ] ]
+      else
+        [ [ @instrument.titleize ] ]
+      end
+  %>
+  <%= render "outro_rails/shared/breadcrumb", trail: [
+        [ "Outro Home", root_path ],
+        [ "Instruments", instruments_path ],
+        *tail
+      ] %>
+
+  <div class="outro-grid">
+    <%= render "outro_rails/instruments/#{@instrument}" %>
+  </div>
+</div>

data/app/views/outro_rails/scales/_chords_table.html.erb

@@ -0,0 +1,39 @@
+<%# Diatonic chord table for a Theory::Scale. Locals: scale %>
+
+<% if scale.diatonic_chords? %>
+  <section class="outro-card">
+    <h2 class="outro-section-heading">
+      Chords
+      <span class="outro-symbol-list__detail">in <%= scale %></span>
+    </h2>
+
+    <div class="outro-table-scroll">
+      <table class="outro-table">
+        <thead>
+          <tr>
+            <th scope="col">Nashville</th>
+            <th scope="col">Roman</th>
+            <th scope="col">Chord</th>
+            <th scope="col">Quality</th>
+          </tr>
+        </thead>
+        <tbody>
+          <% scale.diatonic_chords.each do |chord| %>
+            <tr>
+              <td><%= chord.nashville %></td>
+              <td><%= chord.roman %></td>
+              <td class="outro-table__symbol">
+                <% if chord.in_library? %>
+                  <%= link_to chord.symbol, chord_path(chord.slug) %>
+                <% else %>
+                  <%= chord.symbol %>
+                <% end %>
+              </td>
+              <td><%= chord.quality.to_s.humanize.downcase %></td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+    </div>
+  </section>
+<% end %>

data/app/views/outro_rails/scales/_picker.html.erb

@@ -0,0 +1,37 @@
+<%= form_with url: scale_picker_path, method: :get,
+      class: "outro-picker outro-picker--flush" do %>
+  <%= hidden_field_tag :instrument, @instrument %>
+
+  <label class="outro-picker__field">
+    <span class="outro-label">Root</span>
+    <%= select_tag :root,
+          options_for_select(scale_root_options, @scale.root.path_slug),
+          class: "outro-select",
+          onchange: "this.form.requestSubmit()" %>
+  </label>
+
+  <label class="outro-picker__field">
+    <span class="outro-label">Scale</span>
+    <%= select_tag :type,
+          options_for_select(scale_type_options, @scale.slug),
+          class: "outro-select",
+          onchange: "this.form.requestSubmit()" %>
+  </label>
+
+  <% if @instrument == "guitar" %>
+    <label class="outro-picker__field">
+      <span class="outro-label">Tuning</span>
+      <%= select_tag :tuning,
+            options_for_select(guitar_tuning_options, @tuning&.slug),
+            class: "outro-select",
+            onchange: "this.form.requestSubmit()" %>
+    </label>
+  <% end %>
+
+  <%= button_tag type: :submit, name: nil,
+    class: "outro-button",
+    "aria-label": "Show Scale" do %>
+    <%= image_tag "outro_rails/scales.svg", class: 'outro-button__icon' %>
+    Show Scale
+  <% end %>
+<% end %>

data/app/views/outro_rails/scales/_related_scales.html.erb

@@ -0,0 +1,65 @@
+<%# Related-scale links for a Theory::Scale. Locals: scale, instrument,
+    tuning (optional - scale links land on that instrument's scale pages,
+    keeping any special guitar tuning). %>
+
+<% tuning = local_assigns[:tuning] %>
+
+<% if scale.major? || scale.minor? %>
+  <section class="outro-card">
+    <h2 class="outro-section-heading">Related scales</h2>
+
+    <dl class="outro-spec outro-spec--stacked">
+      <% if scale.major? %>
+        <dt class="outro-spec__term">Relative minor</dt>
+        <dd class="outro-spec__detail">
+          <div class="outro-chip-row">
+            <% scale.relative_minors.each do |minor| %>
+              <%= link_to scale_path_for(minor, instrument, tuning: tuning),
+                          class: "outro-chip outro-chip--link" do %>
+                <span class="outro-chip__label"><%= minor %></span>
+              <% end %>
+            <% end %>
+          </div>
+        </dd>
+
+        <dt class="outro-spec__term">Modes</dt>
+        <dd class="outro-spec__detail">
+          <div class="outro-chip-row">
+            <% scale.modes.each do |mode| %>
+              <%= link_to scale_path_for(mode, instrument, tuning: tuning),
+                          class: "outro-chip outro-chip--link" do %>
+                <span class="outro-chip__label"><%= mode %></span>
+              <% end %>
+            <% end %>
+          </div>
+        </dd>
+      <% else %>
+        <dt class="outro-spec__term">Relative major</dt>
+        <dd class="outro-spec__detail">
+          <div class="outro-chip-row">
+            <%= link_to scale_path_for(scale.relative_major, instrument,
+                                       tuning: tuning),
+                        class: "outro-chip outro-chip--link" do %>
+              <span class="outro-chip__label"><%= scale.relative_major %></span>
+            <% end %>
+          </div>
+        </dd>
+
+        <dt class="outro-spec__term">Other minor forms</dt>
+        <dd class="outro-spec__detail">
+          <div class="outro-chip-row">
+            <% other_patterns = OutroRails::Theory::Scale::MINOR_PATTERNS -
+                                [ scale.pattern_name ] %>
+            <% other_patterns.each do |pattern| %>
+              <% other = OutroRails::Theory::Scale.new(scale.root, pattern) %>
+              <%= link_to scale_path_for(other, instrument, tuning: tuning),
+                          class: "outro-chip outro-chip--link" do %>
+                <span class="outro-chip__label"><%= other %></span>
+              <% end %>
+            <% end %>
+          </div>
+        </dd>
+      <% end %>
+    </dl>
+  </section>
+<% end %>

data/app/views/outro_rails/scales/index.html.erb

@@ -0,0 +1,52 @@
+<% content_for :title, 'Scales' %>
+
+<%
+  instrument_details = {
+    "guitar" => {
+      image: "outro_rails/guitar.svg",
+      description: "Scale shapes laid out across the fretboard in any " \
+                   "tuning, with the root note marked in every position."
+    },
+    "piano" => {
+      image: "outro_rails/piano.svg",
+      description: "Scale notes highlighted along the keyboard."
+    }
+  }
+  fallback = { image: "outro_rails/scales.svg", description: nil }
+%>
+
+<div class="outro outro-container">
+
+  <%= render "outro_rails/shared/header",
+      title: 'Scales',
+      subtitle: 'Pick an instrument to see scales on.' %>
+
+  <%= render "outro_rails/shared/breadcrumb", trail: [
+        [ "Outro Home", root_path ],
+        [ "Scales" ]
+      ] %>
+
+  <ul class="outro-grid outro-grid--wide">
+    <% OutroRails::ScalesController::INSTRUMENTS.each do |instrument| %>
+      <% details = instrument_details.fetch(instrument, fallback) %>
+      <li class="outro-grid__item">
+        <div class="outro-card outro-card--link">
+          <span class="outro-card__media">
+            <%= image_tag details[:image], alt: '',
+                  class: 'outro-card__image' %>
+          </span>
+          <h2 class="outro-card__title">
+            <%= scale_instrument_label(instrument) %>
+          </h2>
+          <% if details[:description] %>
+            <p class="outro-card__description"><%= details[:description] %></p>
+          <% end %>
+          <% label = scale_instrument_label(instrument).downcase %>
+          <%= link_to "Open #{label} scales",
+                      instrument_scales_path(instrument),
+                      class: "outro-card__cta" %>
+        </div>
+      </li>
+    <% end %>
+  </ul>
+</div>

data/app/views/outro_rails/scales/show.html.erb

@@ -0,0 +1,102 @@
+<% content_for :title, "#{@scale} - #{scale_instrument_label(@instrument)}" %>
+
+<% subtitle =
+     if @scale.mode?
+       safe_join(["Mode of ",
+                  scale_link(@scale.parent_major, @instrument,
+                             tuning: @tuning),
+                  "."])
+     elsif @scale.minor?
+       safe_join(["Relative minor of ",
+                  scale_link(@scale.relative_major, @instrument,
+                             tuning: @tuning),
+                  "."])
+     end %>
+
+<div class="outro outro-container">
+
+  <%= render "outro_rails/shared/header",
+      title: @scale,
+      subtitle: subtitle %>
+
+  <%= render "outro_rails/shared/breadcrumb", trail: [
+        [ "Outro Home", root_path ],
+        [ "Scales", scales_path ],
+        [ scale_instrument_label(@instrument),
+          instrument_scales_path(@instrument) ],
+        [ @scale.to_s ]
+      ] %>
+
+  <div class="outro-panel outro-filters">
+    <%= render "picker" %>
+  </div>
+
+  <div class="outro-grid">
+    <section class="outro-card">
+      <h2 class="outro-section-heading">
+        Notes
+        <% if @instrument == "guitar" && @tuning %>
+          <span class="outro-symbol-list__detail"><%= @tuning.label %></span>
+        <% end %>
+      </h2>
+
+      <ul class="outro-scale__notes">
+        <% @scale.note_names.each do |note| %>
+          <li class="outro-scale__note"><%= note %></li>
+        <% end %>
+      </ul>
+
+      <% case @instrument %>
+      <% when "piano" %>
+        <%= render "outro_rails/instruments/piano_midi",
+              start_note: @start_note.to_s,
+              end_note: @end_note.to_s,
+              highlight_keys: @pitches.map(&:to_s),
+              root_keys: @root_pitches.map(&:to_s),
+              prefer: @scale.preferred_accidentals.to_s %>
+      <% when "guitar" %>
+        <%= render "outro_rails/instruments/guitar_midi",
+              end_fret: 24,
+              tuning: @tuning.notes,
+              highlight_frets: @positions,
+              root_frets: @root_positions,
+              prefer: @scale.preferred_accidentals.to_s %>
+      <% end %>
+    </section>
+  </div>
+
+  <div class="outro-grid outro-grid--wide">
+
+    <%= render "chords_table", scale: @scale %>
+
+    <%= render "related_scales",
+          scale: @scale, instrument: @instrument, tuning: @tuning %>
+
+  </div>
+
+  <% others = OutroRails::ScalesController::INSTRUMENTS - [ @instrument ] %>
+  <% if others.any? %>
+    <div class="outro-switch">
+      <span class="outro-label" id="scale-switch-label">
+        View this scale on
+      </span>
+      <div class="outro-chip-row" role="group"
+           aria-labelledby="scale-switch-label">
+        <% others.each do |other| %>
+          <% other_path = instrument_scale_path(
+               other, @scale.root.path_slug, @scale.slug
+             ) %>
+          <%= link_to other_path,
+                      class: "outro-chip outro-chip--link" do %>
+            <%= image_tag "outro_rails/#{other}.svg",
+                  class: "outro-chip__icon", alt: "",
+                  aria: { hidden: true } %>
+            <span class="outro-chip__label">
+              <%= scale_instrument_label(other) %>
+            </span>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+</div>

data/app/views/outro_rails/shared/_breadcrumb.html.erb

@@ -0,0 +1,31 @@
+<%#
+  Breadcrumb trail.
+
+  Pass `trail` as an array of [label, path] pairs. The last entry is rendered
+  as the current page - give it a nil path, or omit the path entirely.
+
+    render "outro_rails/shared/breadcrumb", trail: [
+        ["Outro Home", root_path],
+        ["Chord Library", chords_path],
+        [@chord.symbol]
+      ]
+%>
+
+<nav class="outro-breadcrumb" aria-label="Breadcrumb">
+  <ol class="outro-breadcrumb__trail">
+    <% trail.each_with_index do |(label, path), index| %>
+      <% current = path.blank? || index == trail.length - 1 %>
+      <li class="outro-breadcrumb__item">
+        <% if current %>
+          <span class="outro-chip outro-chip--current" aria-current="page">
+            <span class="outro-chip__label"><%= label %></span>
+          </span>
+        <% else %>
+          <%= link_to path, class: "outro-chip outro-chip--link" do %>
+            <span class="outro-chip__label"><%= label %></span>
+          <% end %>
+        <% end %>
+      </li>
+    <% end %>
+  </ol>
+</nav>

data/app/views/outro_rails/shared/_header.html.erb

@@ -0,0 +1,12 @@
+<header class="outro-header">
+  <div class="outro-header__row">
+    <h1 class="outro-header__title"><%= title %></h1>
+    <% if defined?(actions) && actions.present? %>
+      <div class="outro-header__actions"><%= actions %></div>
+    <% end %>
+  </div>
+
+  <% if defined?(subtitle) && subtitle.present? %>
+    <%= tag.p subtitle, class: "outro-header__subtitle" %>
+  <% end %>
+</header>

data/app/views/outro_rails/transposer/show.html.erb

@@ -0,0 +1,85 @@
+<% content_for :title, "Chord Transposer" %>
+
+<div class="outro outro-container">
+
+  <%= render "outro_rails/shared/header",
+          title: 'Chord Transposer',
+          subtitle: 'Move a chart into another key. Lyrics and anything
+                    unrecognised pass through unchanged.'
+      %>
+
+  <%= render "outro_rails/shared/breadcrumb", trail: [
+        [ "Outro Home", root_path ],
+        [ "Chord Transposer" ]
+      ] %>
+
+  <div class="outro-grid">
+    <section class="outro-card">
+      <h2 class="outro-section-heading">Chart</h2>
+
+      <%= form_with url: transposer_path, method: :get,
+            class: "outro-transposer" do %>
+        <div class="outro-picker outro-picker--flush">
+          <label class="outro-picker__field">
+            <span class="outro-label">Convert</span>
+            <%= select_tag :mode,
+                  options_for_select(transposer_mode_options, @mode),
+                  class: "outro-select" %>
+          </label>
+
+          <label class="outro-picker__field">
+            <span class="outro-label">Original key</span>
+            <%= select_tag :from_key,
+                  grouped_options_for_select(transposer_key_options,
+                                             @from_key.to_s),
+                  class: "outro-select" %>
+          </label>
+
+          <label class="outro-picker__field">
+            <span class="outro-label">New key</span>
+            <%= select_tag :to_key,
+                  grouped_options_for_select(transposer_key_options,
+                                             @to_key.to_s),
+                  class: "outro-select" %>
+          </label>
+        </div>
+
+        <label class="outro-transposer__field">
+          <span class="outro-label">Chords and lyrics</span>
+          <%= text_area_tag :text, @text,
+                rows: 8,
+                placeholder: "Paste a chord chart here.",
+                class: "outro-textarea outro-transposer__textarea" %>
+        </label>
+
+        <%= button_tag type: :submit, name: nil,
+          class: "outro-button",
+          "aria-label": "Transpose" do %>
+          <%= image_tag "outro_rails/transposer.svg",
+                class: 'outro-button__icon' %>
+          Transpose
+        <% end %>
+      <% end %>
+    </section>
+
+    <section class="outro-card">
+      <h2 class="outro-section-heading">
+        Result
+        <% if @result && @mode == "chords_to_chords" %>
+          <span class="outro-symbol-list__detail">
+            <%= @from_key %> to <%= @to_key %>,
+            <%= semitone_shift_label(@semitones) %>
+          </span>
+        <% end %>
+      </h2>
+
+      <% if @result %>
+        <pre class="outro-transposer__output"><%= @result %></pre>
+      <% else %>
+        <div class="outro-empty">
+          <p>Paste a chart and press Transpose to see it in the new key.</p>
+        </div>
+      <% end %>
+    </section>
+  </div>
+</div>

data/config/routes.rb

@@ -0,0 +1,68 @@
+OutroRails::Engine.routes.draw do
+  guitar_tunings = Regexp.union(OutroRails::Instruments::Guitar::Tunings.slugs)
+  instruments    = Regexp.union(OutroRails::Instruments::ALL.map(&:to_s))
+
+  root "home#index"
+
+  scope "caged", constraints: { shape: /[caged]/ } do
+    resource :picker, only: :show, module: :caged, as: :caged_picker
+
+    get "",             to: "caged#show", as: :caged
+    get ":root",        to: "caged#show", as: :caged_root
+    get ":root/:shape", to: "caged#show", as: :caged_shape
+  end
+
+  resources :chord_charts, only: [], path: "chord-charts" do
+    resources :voicings, only: %i[index create destroy], module: :chord_charts
+  end
+
+  scope "capo", constraints: { fret: /[0-7]/ } do
+    get "",      to: "capo#show", as: :capo
+    get ":fret", to: "capo#show", as: :capo_fret
+  end
+
+  resources :voicings, only: %i[show], controller: "chord_voicings"
+
+  namespace :chords do
+    resource :picker, only: :show
+  end
+  resources :chords, only: %i[index show]
+
+  scope "circle-of-fifths", constraints: { mode: /major|minor/ } do
+    get "",            to: "circle_of_fifths#show", as: :circle_of_fifths
+    get ":root",       to: "circle_of_fifths#show", as: :circle_of_fifths_root
+    get ":root/:mode", to: "circle_of_fifths#show", as: :circle_of_fifths_key
+  end
+
+  scope "instruments" do
+    resource :picker, only: :show, module: :instruments, as: :instrument_picker
+
+    get "guitar/:tuning",
+        to:          "instruments#show",
+        as:          :guitar_tuning_instrument,
+        defaults:    { instrument: "guitar" },
+        constraints: { tuning: guitar_tunings }
+  end
+
+  resources :instruments,
+            only:        [ :index, :show ],
+            param:       :instrument,
+            constraints: { instrument: instruments }
+
+  scope "scales", constraints: { instrument: instruments } do
+    resource :picker, only: :show, module: :scales, as: :scale_picker
+
+    get "",                        to: "scales#index", as: :scales
+    get ":instrument",             to: "scales#show",  as: :instrument_scales
+    get ":instrument/:root",       to: "scales#show",  as: :instrument_root_scale
+    get ":instrument/:root/:type", to: "scales#show",  as: :instrument_scale
+
+    get "guitar/:root/:type/:tuning",
+        to:          "scales#show",
+        as:          :guitar_tuning_scale,
+        defaults:    { instrument: "guitar" },
+        constraints: { tuning: guitar_tunings }
+  end
+
+  get "transposer", to: "transposer#show", as: :transposer
+end

data/db/migrate/20260702141708_create_outro_rails_chords.rb

@@ -0,0 +1,21 @@
+class CreateOutroRailsChords < ActiveRecord::Migration[8.1]
+  def change
+    create_table :outro_rails_chords do |t|
+      t.string  :root_name, null: false
+      t.integer :root_pitch_class, null: false
+      t.integer :quality, null: false, default: 0
+      t.string  :extension
+      t.text    :alterations, default: '[]'
+      t.text    :added_tones, default: '[]'
+      t.text    :intervals, default: '[]'
+      t.string  :symbol, null: false
+      t.string  :slug, null: false
+
+      t.timestamps
+    end
+
+    add_index :outro_rails_chords, :symbol, unique: true
+    add_index :outro_rails_chords, :root_pitch_class
+    add_index :outro_rails_chords, %i[root_pitch_class quality]
+  end
+end