From 4e5e66db74580cf208363db71757ddb2a49524e5 Mon Sep 17 00:00:00 2001
From: Zsolt Zitting <yellowberry@cocaine.ninja>
Date: Sat, 19 Aug 2023 10:23:12 -0700
Subject: [PATCH] adjust colors, attempt to fix offset calculation

---
 BrowserNoEditor.htm |  2 +-
 main.js             | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/BrowserNoEditor.htm b/BrowserNoEditor.htm
index a1cf59d..4084c06 100644
--- a/BrowserNoEditor.htm
+++ b/BrowserNoEditor.htm
@@ -9,7 +9,7 @@
   <style>.long-audio audio {width:1000px}</style>
   <style>
     .bgm,.bgm *{opacity:1 !important}
-    .bgm{display:flex;height:40px;line-height:40px;background:rgba(30,30,30,0.7);width:300px;text-align:center}
+    .bgm{display:flex;height:40px;line-height:40px;background:rgba(30,30,30,0.7);width:500px;text-align:center}
     .bgm svg{fill:currentColor}
     .bgm *:hover>svg{fill:#48a0f7}
     .bgm *:hover:active>svg{fill:#2d89e6}
diff --git a/main.js b/main.js
index 88279e2..6fd6960 100644
--- a/main.js
+++ b/main.js
@@ -593,10 +593,10 @@ function render(now) {
   ctx.arc(centerX, centerY, maxR, 0, Math.PI * 2)
   ctx.stroke()
   if (enableBga) {
-    ctx.fillStyle = 'rgba(0,0,0,0.8)'
+    ctx.fillStyle = 'rgba(80,80,80,0.4)'
     ctx.fill()
   } else {
-    ctx.fillStyle = 'rgba(32,32,32,0.8)'
+    ctx.fillStyle = 'rgba(128,128,128,0.4)'
     ctx.fill()
   }
 
@@ -628,7 +628,7 @@ function render(now) {
       if (chartHeader.OFFSET) {
         const offset = parseFloat(chartHeader.OFFSET)
         if (!isNaN(offset)) {
-          startTs -= offset * 1000
+          startTs += offset * 1000
         }
       }
       updateLaneOnState(-1, currentTs)
@@ -657,9 +657,9 @@ function render(now) {
   updateLaneOnState(previousTs, currentTs)
   // black out "off" lanes
   const laneBgGradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, maxR)
-  laneBgGradient.addColorStop(0, 'rgba(255,255,255,0)');
-  laneBgGradient.addColorStop(0.2, 'rgba(255,255,255,0.1)');
-  laneBgGradient.addColorStop(1, enableBga ? 'rgba(255,255,255,0.2)' : 'rgba(255,255,255,0.4)');
+  laneBgGradient.addColorStop(0, 'rgba(0,0,0,0.3)');
+  laneBgGradient.addColorStop(0.2, 'rgba(0,0,0,0.4)');
+  laneBgGradient.addColorStop(1, enableBga ? 'rgba(0,0,0,0.5)' : 'rgba(0,0,0,0.7)');
   ctx.fillStyle = laneBgGradient
   ctx.beginPath()
   for (let i = 0; i < 60 * laneEffectMul; i++) {
@@ -1037,6 +1037,7 @@ function render(now) {
     ctx.stroke()
   }
 
+  // circle mask
   {
     ctx.globalCompositeOperation = 'destination-in'
     ctx.beginPath();