diff --git a/components/rsvp-controls.js b/components/rsvp-controls.js index e7cef29..2584ea1 100644 --- a/components/rsvp-controls.js +++ b/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() diff --git a/components/rsvp-reader.js b/components/rsvp-reader.js index c80f95c..4c49c75 100644 --- a/components/rsvp-reader.js +++ b/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 diff --git a/components/rsvp-word-markers.js b/components/rsvp-word-markers.js new file mode 100644 index 0000000..b309851 --- /dev/null +++ b/components/rsvp-word-markers.js @@ -0,0 +1,44 @@ +class RSVPPipeMarker extends HTMLElement { + constructor() { + super() + const shadow = this.attachShadow({ mode: 'open' }) + shadow.innerHTML = ` + +