From 2c38a2b2ce0faedc81ccbf93bdf24ecde02eddc9 Mon Sep 17 00:00:00 2001
From: Ruth Wong <ruthwongny@gmail.com>
Date: Sun, 8 Sep 2024 20:29:27 +0800
Subject: [PATCH] Support UltimateGuitar format

---
 src/App.vue                   |  2 ++
 src/components/ChordChart.vue | 11 ++++++----
 src/views/HomeView.vue        | 39 ++++++++++++++++++++++++++---------
 3 files changed, 38 insertions(+), 14 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 94ecb5c..e408801 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,7 +13,9 @@ import { provide, ref } from 'vue';
 import { RouterLink, RouterView } from 'vue-router'
 
 const chordProInput = ref('');
+const format = ref('chordpro');
 provide('chordProInput', chordProInput);
+provide('format', format);
 
 import('@/assets/sample-chart.js')
   .then(({ sampleChordProChart }) => {
diff --git a/src/components/ChordChart.vue b/src/components/ChordChart.vue
index fcf14a6..9960477 100644
--- a/src/components/ChordChart.vue
+++ b/src/components/ChordChart.vue
@@ -46,7 +46,7 @@
 
 <script setup>
 import { computed, inject, ref, watch } from 'vue';
-import { ChordProParser, Song } from 'chordsheetjs';
+import { ChordProParser, Song, UltimateGuitarParser } from 'chordsheetjs';
 import ChordChartBodyParagraph from './ChordChartBodyParagraph.vue';
 
 const props = defineProps({
@@ -62,7 +62,9 @@ const props = defineProps({
 
 
 const chordProInput = inject('chordProInput');
-const parser = new ChordProParser();
+const format = inject('format');
+const chordProParser = new ChordProParser();
+const ultimateGuitarParser = new UltimateGuitarParser();
 const song = ref(new Song());
 const metadata = computed(() => song.value.metadata);
 
@@ -73,10 +75,11 @@ const key = computed(() => metadata.value.get('key'));
 const tempo = computed(() => metadata.value.get('tempo'));
 const time = computed(() => metadata.value.get('time'));
 const title = computed(() => metadata.value.get('title'));
+const parser = computed(() => format.value === 'ultimate-guitar' ? ultimateGuitarParser : chordProParser);
 
-watch(chordProInput, (newValue) => {
+watch([chordProInput, parser], () => {
   try {
-    song.value = parser.parse(newValue);
+    song.value = parser.value.parse(chordProInput.value);
   } catch(err) {
     console.error(err);
   }
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 41a8430..34889f9 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -4,7 +4,7 @@
       class="no-print"
       @submit.prevent
     >
-      <label for="chordpro-input">Chord chart in ChordPro format:</label>
+      <label for="chordpro-input">Chord chart in {{ format }} format:</label>
       <textarea
         ref="textareaRef"
         v-model="input"
@@ -12,15 +12,28 @@
         rows="10"
       />
 
-      <label for="chordpro-transpose">Transpose: </label>
-      <input
-        type="number"
-        id="chordpro-transpose"
-        v-model="transposition"
-        max="12"
-        min="-12"
-        required
-      >
+      <fieldset>
+        <legend>Settings</legend>
+        <label for="chordpro-transpose">Transpose: </label>
+        <input
+          type="number"
+          id="chordpro-transpose"
+          v-model="transposition"
+          max="12"
+          min="-12"
+          required
+        >
+
+        <label for="chordpro-format">Format:</label>
+        <select
+          id="chordpro-format"
+          v-model="format"
+          required
+        >
+          <option value="chordpro" default>ChordPro</option>
+          <option value="ultimate-guitar">Ultimate Guitar</option>
+        </select>
+      </fieldset>
     </form>
     <ChordChart
       :transposition="validatedTransposition"
@@ -33,6 +46,7 @@
 import { computed, inject, defineAsyncComponent, provide, ref, watch } from 'vue';
 const ChordChart = defineAsyncComponent(() => import('../components/ChordChart.vue'));
 const input = inject('chordProInput');
+const format = inject('format');
 const textareaRef = ref(null);
 const caretPosition = ref(0);
 const transposition = ref(0);
@@ -107,4 +121,9 @@ textarea {
 input:invalid {
   border-color: red;
 }
+
+fieldset {
+  display: flex;
+  gap: 8px;
+}
 </style>