ltadeu6/skeledance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve floor grid and add dev tooling

Browse source 
- Scale floor perspective with viewport height so grid reaches horizon
  on full-screen KDE (was broken with fixed 700px perspective value)
- Increase grid line thickness 1px → 2px to reduce sub-pixel flickering
- Remove DANCEBOT-9000 title text
- Add viewport meta tag for correct layout in WebEngineView
- Add dev-server.sh (port 3000) with in-browser music ticker shim

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
ltadeu6 2026-06-07 07:42:19 -03:00
parent c5668b8d62
commit 22d9f9672b
No known key found for this signature in database
GPG key ID: FB9FDAB6B6F3418D
2 changed files with 49 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

12
dev-server.sh Executable file
View file

@ -0,0 +1,12 @@
#!/usr/bin/env bash
set -euo pipefail
PORT=${1:-3000}
DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")/plugin/contents/ui" && pwd)"
echo "==> Serving $DIR on http://localhost:$PORT/dancer.html"
echo " Press Ctrl+C to stop."
echo ""
cd "$DIR"
exec python3 -m http.server "$PORT"

67
plugin/contents/ui/dancer.html
View file

@ -2,6 +2,7 @@
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* ============================================================
@ -79,22 +80,22 @@ html, body {
position: absolute;
bottom: 0;
left: -100%; right: -100%;
height: 110%;
height: 400%;
transform: perspective(700px) rotateX(55deg);
transform-origin: bottom center;
background-image:
repeating-linear-gradient(
90deg,
transparent 0,
transparent calc(5% - 1px),
rgba(0, 200, 255, 0.3) calc(5% - 1px),
transparent calc(5% - 2px),
rgba(0, 200, 255, 0.3) calc(5% - 2px),
rgba(0, 200, 255, 0.3) 5%
),
repeating-linear-gradient(
0deg,
transparent 0,
transparent 49px,
rgba(0, 200, 255, 0.2) 49px,
transparent 48px,
rgba(0, 200, 255, 0.2) 48px,
rgba(0, 200, 255, 0.2) 50px
);
animation: gridScroll 0.833s linear infinite;
@ -126,28 +127,6 @@ html, body {
50% { opacity: 1; }
}
/* ============================================================
TITLE
============================================================ */
.title {
position: absolute;
top: 4%;
left: 50%;
transform: translateX(-50%);
color: #00eeff;
font-family: 'Courier New', monospace;
font-size: clamp(11px, 1.4vw, 22px);
letter-spacing: 10px;
white-space: nowrap;
text-shadow: 0 0 12px #00eeff, 0 0 40px rgba(0,180,255,0.7);
animation: titlePulse 1s ease-in-out infinite;
pointer-events: none;
}
@keyframes titlePulse {
0%, 100% { text-shadow: 0 0 12px #00eeff, 0 0 40px rgba(0,180,255,0.7); }
50% { text-shadow: 0 0 22px #00eeff, 0 0 80px rgba(0,180,255,0.9), 0 0 120px rgba(0,150,255,0.4); }
}
/* ============================================================
VU METER (moved up)
============================================================ */
@ -745,9 +724,6 @@ html, body {
<div class="floor"></div>
</div>
<!-- Title -->
<div class="title">D A N C E B O T — 9 0 0 0</div>
<!-- ===================== ROBOT ===================== -->
<div class="robot-wrap">
<div class="robot">
@ -902,6 +878,15 @@ window.addEventListener('resize', resizeCanvas);
resizeCanvas();
requestAnimationFrame(drawStars);
const floorEl = document.querySelector('.floor');
function updateFloorPerspective() {
const p = Math.round(window.innerHeight * 1.05);
floorEl.style.transform = `perspective(${p}px) rotateX(55deg)`;
}
window.addEventListener('resize', updateFloorPerspective);
updateFloorPerspective();
/* ============================================================
CHEST EQ BARS (JS-animated for smooth randomness)
============================================================ */
@ -1044,6 +1029,28 @@ function nextDanceStyle() {
// Start on default bounce
document.body.setAttribute('data-dance', 'bounce');
setInterval(nextDanceStyle, 8000);
/* ============================================================
DEV SHIM — only active when served via HTTP (not from QML)
Simulates playerctl updates so the music ticker works in-browser.
============================================================ */
if (window.location.protocol !== 'file:' && !window.qt) {
const devTracks = [
['Daft Punk', 'Get Lucky'],
['Kavinsky', 'Nightcall'],
['Justice', 'D.A.N.C.E.'],
['M83', 'Midnight City'],
['Chromatics', 'Shadow'],
];
let devIdx = 0;
function devTick() {
const [artist, title] = devTracks[devIdx % devTracks.length];
updateMusic(artist, title);
devIdx++;
}
devTick();
setInterval(devTick, 5000);
}
</script>
</body>