Implement complete

src/App.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
+import { ref } from 'vue'
 import Game from './components/Game.vue'
+
+const id = ref<number>(0)
 </script>
 
 <template>
-  <Game :id="0" />
+  <Game :id="id" :key="id" @complete="id++" />
 </template>
 
 <style scoped>

src/components/Game.vue

@@ -6,6 +6,10 @@ const props = defineProps<{
   id: number
 }>()
 
+const emits = defineEmits<{
+  complete: []
+}>()
+
 const word = idioms[props.id].word
 const idiom_en = idioms[props.id].idiom_en
 const idiom_ja = idioms[props.id].idiom_ja
@@ -27,6 +31,9 @@ const onKeyDown = (e: KeyboardEvent) => {
   if (pos.value < end && e.key == idiom_en[pos.value] && !e.repeat) {
     pos.value++
   }
+  if (pos.value == end) {
+    emits('complete')
+  }
 }
 document.addEventListener('keydown', onKeyDown)
 </script>