Provide tonality and selector to change

6 files changed, 110 insertions, 16 deletions

diff --git a/public/main.css b/public/main.css
index d5f941f..236ddc0 100644
--- a/public/main.css
+++ b/public/main.css
@@ -63,11 +63,17 @@ body {
     width: fit-content;
 }
 
-.g-Chords {
+.g-Chords__Tonality {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.g-Chords__Table {
     border-collapse: collapse;
 }
 
-.g-Chords td {
+.g-Chords__Cell {
     width: 4rem;
     text-align: center;
     border-left: 1px solid black;
@@ -75,6 +81,12 @@ body {
     padding: 0.5rem 0;
 }
 
+.g-Chords__Chord:not(:last-child):after {
+    display: inline-block;
+    content: "/";
+    margin: 0 0.5rem;
+}
+
 .g-Lyrics__Paragraph {
     display: flex;
     flex-direction: column;
diff --git a/public/main.js b/public/main.js
new file mode 100644
index 0000000..a5ede52
--- /dev/null
+++ b/public/main.js
@@ -0,0 +1,65 @@
+// Helpers
+
+function appendElement(parentElement, tag) {
+  element = document.createElement(tag)
+  parentElement.appendChild(element)
+  return element
+}
+  
+function appendText(parentElement, text) {
+  element = document.createTextNode(text)
+  parentElement.appendChild(element)
+  return element
+}
+
+// Only suggest sharps for the moment
+tonalities = ['C', 'C♯', 'D', 'D♯', 'E', 'F', 'F♯', 'G', 'G♯', 'A', 'A♯', 'B']
+
+function getRoot(c) {
+  if (c.indexOf('♯') > -1 || c.indexOf('♭') > -1) {
+    return c.substring(0, 2)
+  } else {
+    return c[0]
+  }
+}
+
+function getShift(t1, t2) {
+  return tonalities.indexOf(getRoot(t2)) - tonalities.indexOf(getRoot(t1))
+}
+
+function applyShift(t1, s) {
+  let root = getRoot(t1)
+  let mode = t1.substring(root.length)
+  root = tonalities[(tonalities.indexOf(root) + s + tonalities.length) % tonalities.length]
+  return `${root}${mode}`
+}
+
+
+const node = document.querySelector('[data-tonality]')
+let tonality = node.dataset.tonality
+mode = tonality[tonality.length - 1] == 'm' ? 'm' : ''
+
+label = appendElement(node, 'label')
+label['className'] = 'g-Chords__Tonality'
+label.onchange = (e) => {
+  const shift = getShift(tonality, e.target.value)
+  tonality = e.target.value
+  document.querySelectorAll('.g-Chords__Chord').forEach(chord => {
+    if (chord.innerText !== '%') {
+      chord.innerText = applyShift(chord.innerText, shift)
+    }
+  })
+}
+
+appendText(label, 'Tonalité :')
+
+select = appendElement(label, 'select')
+select['name'] = 'tonality'
+tonalities.forEach(t => {
+  option = appendElement(select, 'option')
+  option['value'] = t
+  if (tonality == `${t}${mode}`) {
+    option['selected'] = true
+  }
+  appendText(option, `${t}${mode}`)
+})
diff --git a/songs/ben-e-king/stand-by-me.lisp b/songs/ben-e-king/stand-by-me.lisp
index c3537a5..36eca86 100644
--- a/songs/ben-e-king/stand-by-me.lisp
+++ b/songs/ben-e-king/stand-by-me.lisp
@@ -1,11 +1,12 @@
 (song
     (title "Stand by Me")
     (from "Ben E. King")
+    (tonality "G")
 
     (chords
         (all
-            (A % "F♯m" %)
-            (D E A     %)))
+            (G % "Em" %)
+            (C D G %)))
 
     (lyrics
         (intro)
diff --git a/songs/graeme-allwright/petit-garcon.lisp b/songs/graeme-allwright/petit-garcon.lisp
index bd6e3bf..23a6ca6 100644
--- a/songs/graeme-allwright/petit-garcon.lisp
+++ b/songs/graeme-allwright/petit-garcon.lisp
@@ -1,15 +1,16 @@
 (song
     (title "Petit Garçon")
     (from "Graeme Allwright")
+    (tonality C)
 
     (chords
         (verse
-            (G D C D7)
-            ("G / G7" "C / C-" "G / D7" G))
+            (C G F G7)
+            ((C C7) (F F-) (C G7) C))
 
         (chorus
-            (D7 % C G)
-            ("Em" "Em / A7" "A7 / D7" D7)))
+            (G7 % F C)
+            ("Am" ("Am" D7) (D7 G7) G7)))
 
     (lyrics
         (intro)
diff --git a/songs/tri-yann/pelot-d-hennebont.lisp b/songs/tri-yann/pelot-d-hennebont.lisp
index 08662fe..ac4eafa 100644
--- a/songs/tri-yann/pelot-d-hennebont.lisp
+++ b/songs/tri-yann/pelot-d-hennebont.lisp
@@ -1,14 +1,15 @@
 (song
     (title "Pelot d’Hennebont")
     (from "Tri Yann")
+    (tonality "Em")
 
     (chords
         (intro
             ("Em" %))
 
         (verse
-            ("Em / G" D "Em / G" D)
-            ("D / G" "D / G" "D / G" "D / G")))
+            (("Em" G) D ("Em" G) D)
+            ((D "Em") (D "Em") (D "Em") (D "Em"))))
 
     (lyrics
         (intro)
diff --git a/src/main.lisp b/src/main.lisp
index 1afc4f9..f03bd1a 100644
--- a/src/main.lisp
+++ b/src/main.lisp
@@ -32,7 +32,7 @@
 (defun page (title body)
     (format 
       nil
-      "<!doctype html><html lang=\"fr\"><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><title>~A</title><link rel=\"stylesheet\" href=\"/main.css\"><link rel=\"icon\" href=\"/icon.png\">~A"
+      "<!doctype html><html lang=\"fr\"><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width\"><title>~A</title><link rel=\"stylesheet\" href=\"/main.css\"><link rel=\"icon\" href=\"/icon.png\">~A<script src=\"/main.js\"></script>"
       title
       body))
 
@@ -75,8 +75,18 @@
 
 ; Chords
 
+(defun chord-div (chord)
+  (h "span" '(("class" "g-Chords__Chord")) (list (string chord))))
+
+(defun chord-cell (chords)
+  (h "td" '(("class" "g-Chords__Cell"))
+    (if
+      (listp chords)
+      (mapcar #'chord-div chords)
+      (list (chord-div chords)))))
+
 (defun chord-row (chords)
-  (h "tr" nil (mapcar (lambda (x) (h "td" nil (list (string x)))) chords)))
+  (h "tr" nil (mapcar #'chord-cell chords)))
 
 (defun chord-rows (xs)
   (if
@@ -87,7 +97,7 @@
 (defun chord-table (key row)
   (part-tags 
     key 
-    (h "table" '(("class" "g-Chords")) (chord-rows row))))
+    (h "table" '(("class" "g-Chords__Table")) (chord-rows row))))
 
 (defun chord-tables (xs)
   (if
@@ -97,11 +107,14 @@
           (rows (cdr (car xs))))
       (cons (chord-table key rows) (chord-tables (cdr xs))))))
 
-(defun chord-tags (chords)
+(defun chord-tags (chords tonality)
   (h "section" nil
      (list
        (h "h2" '(("class" "g-Subtitle")) '("Accords"))
-       (h "div" '(("class" "g-Parts")) (chord-tables chords)))))
+       (h "div" '(("class" "g-Parts"))
+          (cons
+              (h "div" (list (list "data-tonality" tonality)) nil)
+              (chord-tables chords))))))
 
 ; Lyrics
 
@@ -134,6 +147,7 @@
     (let ((output (concatenate 'string "public/" (car (split path #\.)) ".html"))
           (title (car (song-key 'title (cdr data))))
           (from (car (song-key 'from (cdr data))))
+          (tonality (car (song-key 'tonality (cdr data))))
           (chords (song-key 'chords (cdr data)))
           (lyrics (song-key 'lyrics (cdr data))))
       (write-file output (page
@@ -144,7 +158,7 @@
           (list
             (h "a" '(("class" "g-Back") ("href" "/")) '("Retour à l’accueil"))
             (title-tags title from)
-            (chord-tags chords)
+            (chord-tags chords tonality)
             (lyrics-tags lyrics))))))))
 
 (export-song "songs/graeme-allwright/petit-garcon.lisp")