Bring demo up-to-date; minor refactoring

bhj · Feb 17, 2021 · 1855f5b · 1855f5b
1 parent 4f06893
commit 1855f5b
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 36 deletions.
diff --git a/demo/demo.js b/demo/demo.js
@@ -1,34 +1,35 @@
 const audioUrl = 'YOUR_MP3_FILE.mp3'
 const cdgUrl = 'YOUR_CDG_FILE.cdg'
 
+const CDGraphics = require('../index.js')
+const cdg = new CDGraphics()
+
 document.addEventListener('DOMContentLoaded', () => {
   const audio = document.getElementById('audio')
   const canvas = document.getElementById('canvas')
-  const CDGraphics = require('../index.js')
+  const ctx = canvas.getContext('2d')
   let frameId
 
-  const cdg = new CDGraphics(canvas, {
-    // forceKey: true,
-    onBackgroundChange: ([r, g, b, a]) => {
-      console.log('onBackgroundChange:', `rgba(${r},${g},${b},${a})`)
-    },
-    onContentBoundsChange: ([x1, y1, x2, y2]) => {
-      console.log('onContentBoundsChange:', `(${x1},${y1}) (${x2},${y2})`)
-    }
-  })
+  const doRender = time => {
+    cdg.render(time, { forceKey: forceKeyCheckbox.checked })
+      .then(frame => {
+        ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight)
+        ctx.drawImage(frame.bitmap, 0, 0, canvas.clientWidth, canvas.clientHeight)
+      })
+  }
 
-  // methods for render loop
+  // for stopping/starting the render loop
+  const pause = () => cancelAnimationFrame(frameId)
   const play = () => {
     frameId = requestAnimationFrame(play)
-    cdg.render(audio.currentTime)
+    doRender(audio.currentTime)
   }
-  const pause = () => cancelAnimationFrame(frameId)
 
-  // link to audio events (depending on your app, not all are strictly necessary)
+  // bind to audio events (depending on your app, not all are strictly necessary)
   audio.addEventListener('play', play)
   audio.addEventListener('pause', pause)
   audio.addEventListener('ended', pause)
-  audio.addEventListener('seeked', () => cdg.render(audio.currentTime))
+  audio.addEventListener('seeked', () => doRender(audio.currentTime))
 
   // download and load cdg file
   fetch(cdgUrl)
@@ -38,14 +39,6 @@ document.addEventListener('DOMContentLoaded', () => {
       audio.src = audioUrl // pre-load audio
     })
 
-  // demo options UI only
+  // for demo UI only
   const forceKeyCheckbox = document.getElementById('forceKey')
-  const shadowBlurRange = document.getElementById('shadowBlur')
-  const shadowOffsetXRange = document.getElementById('shadowOffsetX')
-  const shadowOffsetYRange = document.getElementById('shadowOffsetY')
-
-  forceKeyCheckbox.addEventListener('change', (e) => cdg.setOptions({ forceKey: e.target.checked }))
-  shadowBlurRange.addEventListener('change', (e) => cdg.setOptions({ shadowBlur: e.target.value }))
-  shadowOffsetXRange.addEventListener('change', (e) => cdg.setOptions({ shadowOffsetX: e.target.value }))
-  shadowOffsetYRange.addEventListener('change', (e) => cdg.setOptions({ shadowOffsetY: e.target.value }))
 })
diff --git a/demo/index.html b/demo/index.html
@@ -20,18 +20,6 @@
         <label>
           <input type="checkbox" id="forceKey" value="1" />
           ForceKey
-        </label><br /><br />
-        <label>
-          <input type="range" id="shadowBlur" min="0" max="32" value="0" />
-          shadowBlur
-        </label><br />
-        <label>
-          <input type="range" id="shadowOffsetX" min="-32" max="32" value="0" />
-          shadowOffsetX
-        </label><br />
-        <label>
-          <input type="range" id="shadowOffsetY" min="-32" max="32" value="0" />
-          shadowOffsetY
         </label>
       </fieldset>
     </div>