Implement idiom_en_converted

src/components/Game.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
 import idioms from '../assets/idioms.json'
 
 const props = defineProps<{
@@ -10,13 +11,22 @@ const idiom_en = idioms[props.id].idiom_en
 const idiom_ja = idioms[props.id].idiom_ja
 
 const start = idiom_en.indexOf(word)
-const pos = start + 1
+const pos = ref<number>(start + 1)
 const end = start + word.length
+
+const idiom_en_converted = computed<string>(() => {
+  let res = ''
+  res += idiom_en.slice(0, start)
+  res += `<span style="color: red">${idiom_en.slice(start, pos.value)}</span>`
+  res += `<span style="color: pink">${'-'.repeat(end - pos.value)}</span>`
+  res += idiom_en.slice(end)
+  return res
+})
 </script>
 
 <template>
   <p>{{ idiom_ja }}</p>
-  <p>{{ idiom_en }}</p>
+  <p v-html="idiom_en_converted"></p>
 </template>
 
 <style scoped>