Add border marker

components/rsvp-controls.js

@@ -1,11 +1,3 @@
-// class RSVPControlButton extends HTMLElement {
-//     constructor() {
-//         super()
-//         const shadow = this.attachShadow({mode: 'open'})
-//         const button = document.createElement()
-//     }
-// }
-
 class RSVPControls extends HTMLElement {
   constructor() {
     super()

components/rsvp-reader.js

@@ -1,5 +1,6 @@
 import './rsvp-word.js'
 import './rsvp-controls.js'
+import './rsvp-word-markers.js'
 
 import { Chapter } from '../src/Chapter.js'
 import { Player } from '../src/Player.js'
@@ -8,10 +9,12 @@ class RSVPReader extends HTMLElement {
   constructor() {
     super()
     const shadow = this.attachShadow({ mode: 'open' })
+    const marker = document.createElement('rsvp-border-marker')
     const word = document.createElement('rsvp-word')
     const controls = document.createElement('rsvp-controls')
 
-    shadow.appendChild(word)
+    shadow.appendChild(marker)
+    marker.appendChild(word)
     shadow.appendChild(controls)
 
     this._root = shadow

components/rsvp-word-markers.js

@@ -0,0 +1,44 @@
+class RSVPPipeMarker extends HTMLElement {
+  constructor() {
+    super()
+    const shadow = this.attachShadow({ mode: 'open' })
+    shadow.innerHTML = `
+      <style>
+      :host {display: block}
+      .marker { text-align: center }
+      </style>
+      <div class="marker">|</div>
+      <slot></slot>
+      <div class="marker">|</div>
+    `
+  }
+}
+
+class RSVPBorderMarker extends HTMLElement {
+  constructor() {
+    super()
+    const shadow = this.attachShadow({ mode: 'open' })
+    shadow.innerHTML = `
+      <style>
+      :host {display: block; margin: 5px 0;}
+      .top, .bottom { display: flex;}
+      .a {flex:1} .b {flex:1}
+      .bottom { align-items: flex-end; }
+      .side { background-color: black; height: 2px;}
+
+      .center { background-color: black; height: 6px; width: 2px}
+      </style>
+      <div class="top">
+        <div class="side a"></div><div class="center"></div><div class="side b"></div>
+      </div>
+        <slot></slot>
+      <div class="bottom">
+        <div class="side a"></div><div class="center"></div><div class="side b"></div>
+      </div>
+      <div class="marker"></div>
+    `
+  }
+}
+
+window.customElements.define('rsvp-pipe-marker', RSVPPipeMarker)
+window.customElements.define('rsvp-border-marker', RSVPBorderMarker)

components/rsvp-word.js

@@ -16,7 +16,7 @@ class RSVPWord extends HTMLElement {
     suffix.setAttribute('class', 'suffix')
 
     style.textContent =
-      '.word{display:flex}.pivot{color:red}.prefix,.suffix{flex:1}.prefix{text-align:right}'
+      '.word{display:flex; font-size: 2.4em;}.pivot{color:red}.prefix{flex:1}.suffix{flex:1}.prefix{text-align:right}'
 
     word.appendChild(prefix)
     word.appendChild(pivot)

src/Player.js

@@ -1,5 +1,5 @@
 export class Player {
-  constructor(interval = 100) {
+  constructor(interval = 200) {
     this.intervalHandle = null
     this.interval = interval
     this.subscribers = {}