extract classes from TestComponent

src/components/KeyTester.vue

@@ -7,79 +7,11 @@
 </template>
 
 <script setup lang="ts">
-import * as eurKey from '../data/eurKey.json'
 import { ref } from 'vue'
+import { Lesson } from '@/models/Lesson'
 
 const text = ref('')
 
-class Key {
-  key: string
-  code: string
-
-  constructor(key: string, code: string) {
-    this.key = key
-    this.code = code
-  }
-}
-
-class Lesson {
-  private readonly lessonId: number
-  private readonly steps: number = 0
-  private lessonText: string
-  private keys: Key[] = []
-  private counter: number = 0
-
-  constructor(lessonId: number, lessonText: string) {
-    this.lessonId = lessonId
-    this.steps = lessonText.length
-    this.lessonText = lessonText
-    text.value = this.lessonText
-
-    // Map key-objects to lessonText
-    lessonText.split('').map((key) => {
-      eurKey.eurKey.forEach((euKey) => {
-        if (euKey.key == key) this.keys.push(euKey)
-      })
-    })
-  }
-
-  private createListener(index: number) {
-    // Create listener function for a key
-    const listener = (event: KeyboardEvent) => {
-      if (event.code === this.keys[index].code) {
-        // Remove listener event after key was pressed
-        console.log(this.keys[index])
-        document.removeEventListener('keydown', listener)
-
-        // Remove typed char
-        this.lessonText = this.lessonText.slice(1)
-        text.value = this.lessonText
-
-        // If more keys are in line, invoke function for new key
-        if (this.counter < this.steps - 1) {
-          this.counter++
-          this.createListener(this.counter)
-        } else {
-          // Else lesson is done
-          console.warn('DONE')
-        }
-      }
-    }
-
-    // Prints out the lessonText
-    console.warn(this.lessonText)
-
-    // Add listener for current key
-    document.addEventListener('keydown', listener)
-  }
-
-  run() {
-    if (this.steps === 0) return
-
-    this.createListener(this.counter)
-  }
-}
-
 const lessonText = 'ffff jjjj'
 const lesson1 = new Lesson(1, lessonText)
 lesson1.run()

src/models/Key.ts

@@ -0,0 +1,9 @@
+export class Key {
+  key: string
+  code: string
+
+  constructor(key: string, code: string) {
+    this.key = key
+    this.code = code
+  }
+}

src/models/Lesson.ts

@@ -0,0 +1,58 @@
+import * as eurKey from '@/data/eurKey.json'
+import type { Key } from '@/models/Key'
+
+export class Lesson {
+  private readonly lessonId: number
+  private readonly steps: number = 0
+  private lessonText: string
+  private keys: Key[] = []
+  private counter: number = 0
+
+  constructor(lessonId: number, lessonText: string) {
+    this.lessonId = lessonId
+    this.steps = lessonText.length
+    this.lessonText = lessonText
+
+    // Map key-objects to lessonText
+    lessonText.split('').map((key) => {
+      eurKey.eurKey.forEach((euKey) => {
+        if (euKey.key == key) this.keys.push(euKey)
+      })
+    })
+  }
+
+  private createListener(index: number) {
+    // Create listener function for a key
+    const listener = (event: KeyboardEvent) => {
+      if (event.code === this.keys[index].code) {
+        // Remove listener event after key was pressed
+        console.log(this.keys[index])
+        document.removeEventListener('keydown', listener)
+
+        // Remove typed char
+        this.lessonText = this.lessonText.slice(1)
+
+        // If more keys are in line, invoke function for new key
+        if (this.counter < this.steps - 1) {
+          this.counter++
+          this.createListener(this.counter)
+        } else {
+          // Else lesson is done
+          console.warn('DONE')
+        }
+      }
+    }
+
+    // Prints out the lessonText
+    console.warn(this.lessonText)
+
+    // Add listener for current key
+    document.addEventListener('keydown', listener)
+  }
+
+  run() {
+    if (this.steps === 0) return
+
+    this.createListener(this.counter)
+  }
+}