initial implementation

keithamus · keithamus · commit 6d0dec668251 · 2022-12-02T17:56:49.000Z
diff --git a/examples/index.html b/examples/index.html
@@ -5,11 +5,14 @@
     <title>custom-element demo</title>
   </head>
   <body>
-    <custom-element></custom-element>
+    <typing-test id="a">the quick brown fox jumped over the lazy dog</typing-test>
+
+
+    <button onclick="a.started ? a.stop() : a.start()">Start</button>
 
     <script type="module">
       // import 'https://unpkg.com/@github/custom-element-boilerplate@latest/dist/custom-element.js'
-      import '../src/custom-element.ts'
+      import '../src/typing-test-element.ts'
     </script>
   </body>
 </html>
diff --git a/src/custom-element.ts b/src/custom-element.ts
diff --git a/src/typing-test-element.ts b/src/typing-test-element.ts
@@ -0,0 +1,88 @@
+const html = String.raw
+/**
+ * An example Custom Element. This documentation ends up in the
+ * README so describe how this elements works here.
+ *
+ * You can event add examples on the element is used with Markdown.
+ *
+ * ```
+ * <typing-test></typing-test>
+ * ```
+ */
+class TypingTestElement extends HTMLElement {
+  #renderRoot = this.attachShadow({mode: 'open'})
+  #started = false
+  #position = 0
+  #feedback!: HTMLElement
+
+  get started() {
+    return this.#started
+  }
+
+  connectedCallback(): void {
+    // eslint-disable-next-line github/no-inner-html
+    this.#renderRoot.innerHTML = html`
+      <style>
+        p span {
+          color: green;
+        }
+        p del {
+          color: red;
+        }
+      </style>
+      <slot></slot>
+      <p></p>
+    `
+    this.ownerDocument.addEventListener('keypress', this)
+    // eslint-disable-next-line custom-elements/no-dom-traversal-in-connectedcallback
+    this.#feedback = this.#renderRoot.querySelector<HTMLElement>('p')!
+  }
+
+  start() {
+    this.#started = true
+    this.#position = 0
+  }
+
+  stop() {
+    this.#started = false
+  }
+
+  #continue() {
+    this.#feedback.querySelectorAll('del').forEach(e => e.remove())
+    const span = this.ownerDocument.createElement('span')
+    span.textContent = this.textContent?.[this.#position] || ''
+    this.#feedback.append(span)
+    this.#position += 1
+  }
+
+  #error(character: string) {
+    this.#feedback.querySelectorAll('del').forEach(e => e.remove())
+    const del = this.ownerDocument.createElement('del')
+    del.textContent = character
+    this.#feedback.append(del)
+  }
+
+  handleEvent(event) {
+    if (!this.#started) return
+    const character = this.textContent?.[this.#position]
+    console.log(event.key, character)
+    if (event.key === character) {
+      this.#continue()
+    } else {
+      this.#error(event.key)
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    TypingTestElement: typeof TypingTestElement
+  }
+}
+
+export default TypingTestElement
+
+if (!window.customElements.get('typing-test')) {
+  window.TypingTestElement = TypingTestElement
+  window.customElements.define('typing-test', TypingTestElement)
+}
diff --git a/test/test.ts b/test/test.ts
@@ -1,26 +1,26 @@
 import {assert, fixture, html} from '@open-wc/testing'
-import '../src/custom-element'
+import '../src/typing-test-element'
 
-describe('custom-element', function () {
+describe('typing-test', function () {
   describe('element creation', function () {
     it('creates from document.createElement', function () {
-      const el = document.createElement('custom-element')
-      assert.equal('CUSTOM-ELEMENT', el.nodeName)
+      const el = document.createElement('typing-test')
+      assert.equal('TYPING-TEST', el.nodeName)
     })
 
     it('creates from constructor', function () {
-      const el = new window.CustomElementElement()
-      assert.equal('CUSTOM-ELEMENT', el.nodeName)
+      const el = new window.TypingTestElement()
+      assert.equal('TYPING-TEST', el.nodeName)
     })
   })
 
   describe('after tree insertion', function () {
     beforeEach(async function () {
-      await fixture(html` <custom-element></custom-element>`)
+      await fixture(html` <typing-test></typing-test>`)
     })
 
     it('initiates', function () {
-      const ce = document.querySelector('custom-element')
+      const ce = document.querySelector('typing-test')
       assert.equal(ce?.textContent, ':wave:')
     })
   })
