diff --git a/plugin/contents/ui/dancer.html b/plugin/contents/ui/dancer.html index 36321d9..bf5dc58 100644 --- a/plugin/contents/ui/dancer.html +++ b/plugin/contents/ui/dancer.html @@ -208,11 +208,15 @@ html, body { .robot-wrap { position: absolute; left: 50%; - bottom: 40%; + bottom: 32%; transform: translateX(-50%); - filter: - drop-shadow(0 0 35px rgba(0,200,255,0.25)) - drop-shadow(0 20px 15px rgba(0,0,80,0.6)); +} + +.skeleton-gif { + display: block; + height: 40vh; + width: auto; + filter: drop-shadow(0 0 20px rgba(0,200,255,0.4)); } /* Entire robot bounces on the beat (0.5s = 1 beat at 120 BPM) */ @@ -694,81 +698,7 @@ html, body {
-
- - -
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- - -
-
-
-
-
- -
-
-
-
- -
-
-
-
-
-
-
-
-
- -
-
-
-
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
- + skeleton
@@ -1038,6 +968,7 @@ function updateMusic(artist, title) { : (title || artist || '— —'); if (el.textContent === text) return; el.textContent = text; + pickSkeleton(); // scroll only if text is long const wrap = el.parentElement; el.classList.toggle('short', el.scrollWidth <= wrap.clientWidth + 10); @@ -1061,6 +992,26 @@ function nextDanceStyle() { document.body.setAttribute('data-dance', 'bounce'); setInterval(nextDanceStyle, 8000); +/* ============================================================ + SKELETON SWITCHER + Add new files to SKELETONS to include them in the rotation. + Switches on music change and randomly every 16 beats (8s). + ============================================================ */ +const SKELETONS = ['skeleton.apng', 'skeleton2.apng', 'skeleton3.apng', 'skeleton4.apng', 'skeleton5.apng', 'skeleton6.apng']; +const skeletonImg = document.querySelector('.skeleton-gif'); +let currentSkel = 5; + +function pickSkeleton() { + if (SKELETONS.length < 2) return; + let next; + do { next = Math.floor(Math.random() * SKELETONS.length); } + while (next === currentSkel); + currentSkel = next; + skeletonImg.src = SKELETONS[currentSkel]; +} + +setInterval(pickSkeleton, 8000); + /* ============================================================ DEV SHIM — only active when served via HTTP (not from QML) Simulates playerctl updates so the music ticker works in-browser. diff --git a/plugin/contents/ui/skeleton.apng b/plugin/contents/ui/skeleton.apng new file mode 100644 index 0000000..878a9cb Binary files /dev/null and b/plugin/contents/ui/skeleton.apng differ diff --git a/plugin/contents/ui/skeleton2.apng b/plugin/contents/ui/skeleton2.apng new file mode 100644 index 0000000..544b067 Binary files /dev/null and b/plugin/contents/ui/skeleton2.apng differ diff --git a/plugin/contents/ui/skeleton3.apng b/plugin/contents/ui/skeleton3.apng new file mode 100644 index 0000000..60e7d62 Binary files /dev/null and b/plugin/contents/ui/skeleton3.apng differ diff --git a/plugin/contents/ui/skeleton4.apng b/plugin/contents/ui/skeleton4.apng new file mode 100644 index 0000000..9873e6d Binary files /dev/null and b/plugin/contents/ui/skeleton4.apng differ diff --git a/plugin/contents/ui/skeleton5.apng b/plugin/contents/ui/skeleton5.apng new file mode 100644 index 0000000..a6fcbfd Binary files /dev/null and b/plugin/contents/ui/skeleton5.apng differ diff --git a/plugin/contents/ui/skeleton6.apng b/plugin/contents/ui/skeleton6.apng new file mode 100644 index 0000000..60ee7b8 Binary files /dev/null and b/plugin/contents/ui/skeleton6.apng differ