Some theory testing

src/App.vue

@@ -1,15 +1,18 @@
 <script setup lang="ts">
 import { RouterLink, RouterView } from 'vue-router'
+import KeyTester from './components/KeyTester.vue'
 </script>
 
 <template>
-  <header>
+  <!--  <header>-->
-    <div class="wrapper">
+  <!--    <div class="wrapper">-->
-      <nav>
+  <!--      <nav>-->
-        <RouterLink to="/">Home</RouterLink>
+  <!--        <RouterLink to="/">Home</RouterLink>-->
-      </nav>
+  <!--      </nav>-->
-    </div>
+  <!--    </div>-->
-  </header>
+  <!--  </header>-->
+
+  <KeyTester />
 
   <RouterView />
 </template>

src/components/KeyTester.vue

@@ -0,0 +1,88 @@
+<template>
+  <h1>Key-Tester</h1>
+
+  <h4>
+    Lesson-Text: <span>{{ text }}</span>
+  </h4>
+</template>
+
+<script setup lang="ts">
+import * as eurKey from '../data/eurKey.json'
+import { ref } from 'vue'
+
+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()
+</script>
+
+<style scoped></style>

src/data/eurKey.json

@@ -0,0 +1,16 @@
+{
+  "eurKey": [
+    {
+      "key": " ",
+      "code": "Space"
+    },
+    {
+      "key": "f",
+      "code": "KeyF"
+    },
+    {
+      "key": "j",
+      "code": "KeyJ"
+    }
+  ]
+}