aboutsummaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorJoris2024-01-03 00:01:38 +0100
committerJoris2024-01-03 00:01:38 +0100
commitb5292689534c00918675223d1f36174bbf44406f (patch)
treed2f70d1ce44b3647c143a2f43926a97203e259e0 /public
parent9c71ea5a80eed021cfc1a269a9a176b059eb8d4f (diff)
Provide tonality and selector to change
Diffstat (limited to 'public')
-rw-r--r--public/main.css16
-rw-r--r--public/main.js65
2 files changed, 79 insertions, 2 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}`)
+})