fix bga overlay

BrowserNoEditor.htm

@@ -2,17 +2,19 @@
 <head>
   <meta charset="UTF-8" name="viewport" content="width=device-width">
   <title>MercuryPlayer</title>
-  <style>html{background:black}canvas{position:fixed;left:0;top:0}</style>
-  <style>video{display:none}</style>
+  <style>html{background:black}canvas{position:fixed;left:0;top:0;height:100vh;width:100vw}</style>
+  <style>video{position:fixed;mask-size:100%;mask-image:url('data:image/svg+xml,%3Csvg height%3D"2" width%3D"2" version%3D"1.1" xmlns%3D"http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg"%3E%3Cellipse style%3D"fill%3A%23000" cx%3D"1" cy%3D"1" rx%3D"1" ry%3D"1"%2F%3E%3C%2Fsvg%3E')}</style>
 </head>
 
 <video src="../../../../mv_S02_218_40534656.mp4" preload id="bga"></video>
 <canvas id="canvas"></canvas>
 <div style="position:fixed;left:5px;bottom:5px;color:white">
+  <div style="white-space:pre-wrap" id="stats"></div>
   <input type="range" min="10" max="60" step="1" value="40" autocomplete="off" id="speed_input"><span id="speed_val">4.0</span><br>
   <input type="button" value="play" onclick="play()">
   <input type="button" value="pause" onclick="pause()">
   <input type="button" value="stop" onclick="stop()"><br>
   <audio src="0.wav" preload id="bgm" controls></audio>
 </div>
+<script src="chrome-file-helper.js"></script>
 <script src="main.js"></script>

chrome-file-helper.js

@@ -0,0 +1,33 @@
+// https://stackoverflow.com/questions/49971575/chrome-fetch-api-cannot-load-file-how-to-workaround
+if (/^file:\/\/\//.test(location.href)) {
+    let path = './';
+    let orig = fetch;
+    window.fetch = (resource) => ((/^[^/:]*:/.test(resource)) ?
+        orig(resource) :
+        new Promise(function(resolve, reject) {
+            let request = new XMLHttpRequest();
+
+            let fail = (error) => {reject(error)};
+            ['error', 'abort'].forEach((event) => { request.addEventListener(event, fail); });
+
+            let pull = (expected) => (new Promise((resolve, reject) => {
+                if (
+                    request.responseType == expected ||
+                    (expected == 'text' && !request.responseType)
+                )
+                    resolve(request.response);
+                else
+                    reject(request.responseType);
+            }));
+
+            request.addEventListener('load', () => (resolve({
+                arrayBuffer : () => (pull('arraybuffer')),
+                blob        : () => (pull('blob')),
+                text        : () => (pull('text')),
+                json        : () => (pull('json'))
+            })));
+            request.open('GET', resource.replace(/^\//, path));
+            request.send();
+        })
+    );
+}

main.js

@@ -36,6 +36,7 @@ let startedHoldReverseList = {}
 let chartHeader = {}
 
 const enableBga = false
+
 const TICK_PER_GAME_SECTION = 1920;
 const TICK_PER_BEAT = TICK_PER_GAME_SECTION / 4;
 let RENDER_DISTANCE = 750
@@ -222,6 +223,19 @@ function parseNotesFromText(text) {noteList = [];
   console.log('parsed notes')
 }
 
+const drawCount = {
+  frame: 0,
+  actualFrame: 0,
+}
+setInterval(() => {
+  stats.textContent = [
+    `frame draw: ${drawCount.frame}`,
+    `frame actual draw: ${drawCount.actualFrame}`,
+  ].join('\n')
+  drawCount.frame = 0
+  drawCount.actualFrame = 0
+}, 1e3)
+
 let startTs = 0
 let startNextFrame = false
 let currentTs = 0
@@ -232,6 +246,7 @@ let sflOffset = 0
 let drawForNextFrame = false
 function render(now) {
   requestAnimationFrame(render)
+  drawCount.frame++
 
   if (!playing) {
     if (!drawForNextFrame) {
@@ -240,6 +255,7 @@ function render(now) {
     drawForNextFrame = false
   }
 
+  drawCount.actualFrame++
   ctx.clearRect(0, 0, canvas.width, canvas.height)
   const centerX = canvas.width / 2, centerY = canvas.height / 2
 
@@ -250,8 +266,7 @@ function render(now) {
   ctx.arc(centerX, centerY, maxR, 0, Math.PI * 2)
   ctx.stroke()
   ctx.fillStyle = 'white'
-  if (enableBga) ctx.drawImage(bga, centerX-maxR, centerY-maxR, maxR*2, maxR*2)
-  else ctx.fill()
+  if (!enableBga) ctx.fill()
   ctx.fillStyle = enableBga ? 'rgba(50,50,50,0.7)' : 'rgba(50,50,50,0.5)'
   ctx.fill()
 
@@ -533,10 +548,24 @@ speed_input.addEventListener('change', e => {
   RENDER_DISTANCE = 3000 / speed
 })
 function resize() {
-  canvas.width = window.innerWidth
-  canvas.height = window.innerHeight
-  maxR = Math.round(Math.min(canvas.width, canvas.height) * 0.45)
+  const w = Math.round(window.innerWidth * devicePixelRatio), h = Math.round(window.innerHeight * devicePixelRatio)
+  canvas.width = w
+  canvas.height = h
+  maxR = Math.round(Math.min(w, h) * 0.45)
   drawForNextFrame = true
+
+  if (enableBga) {
+    const wView = window.innerWidth, hView = window.innerHeight
+    const centerX = wView / 2, centerY = hView / 2
+    const rView = Math.round(Math.min(wView, hView) * 0.45)
+    bga.style.left = (centerX - rView) + 'px'
+    bga.style.top = (centerY - rView) + 'px'
+    bga.style.width = (rView * 2) + 'px'
+    bga.style.height = (rView * 2) + 'px'
+    bga.style.display = 'block'
+  } else {
+    bga.style.display = 'none'
+  }
 }
 window.addEventListener('resize', resize)
 resize();