DingusCorp/doofonline
Private
Public Access
1
0
Issues Pull Requests 1 Projects Releases 1 Activity

WIP: The MuSiCaL Update #1

Draft
unfunny wants to merge 27 commits from music into master
pull from: music
merge into: DingusCorp:master
Conversation 0 Commits 27 Files Changed 50 +216
2 changed files with 216 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5979a136be - Show all commits

46
test-bgm.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<head>
<title>BGM.js Test - Song Title Display</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts - Sono font family -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sono&display=swap" rel="stylesheet">
<!-- MIDI.js MUST load first - in head section -->
<script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script>
<link href="/normalbordem.css" rel="stylesheet" type="text/css">
<link href="/BGMHUD.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<h1>BGM.js Song Title Test</h1>
<p>The song title should appear in the top-right corner immediately.</p>
<a href="index.html">← Back to main site</a>
</header>
<section>
<h2>Test Checklist</h2>
<ul>
<li>✅ Song title appears in top-right corner</li>
<li>✅ Title is readable (yellow text on dark background)</li>
<li>✅ Title matches current song from randomizer</li>
<li>✅ Loading order: MIDI.js → BGM.js → Title element</li>
</ul>
</section>
<!-- Song title display element in top-right corner -->
<div id="bgm-title">
<span id="bgm-title-content"></span>
</div>
<div class="autoplay-warning" id="autoplay"></div>
<!-- BGM.js loads after MIDI.js and will add .visible class when text is set -->
<script src="/Music/bgm.js"></script>
<footer>
<p><small>Auto-refreshes every 30 seconds to simulate new song</small></p>
<p><small>Click refresh to stop auto-refresh</small></p>
</footer>
</body>
</html>

170
test-debug.html Normal file
View File

@@ -0,0 +1,170 @@
<!DOCTYPE html>
<html>
<head>
<title>BGM.js Debug Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: monospace;
background: #111;
color: #0f0;
padding: 20px;
}
.debug {
background: #000;
border: 2px solid #0f0;
padding: 10px;
margin: 10px 0;
}
.error { color: #f00; }
.success { color: #0f0; }
h1 { color: #ff0; }
/* CRITICAL: Add inline styles for #bgm-title to test */
#bgm-title {
position: fixed !important;
top: 10px !important;
right: 10px !important;
padding: 15px 20px !important;
background-color: #000 !important;
color: #ffeb3b !important;
border: 3px solid yellow !important;
border-radius: 8px !important;
font-family: Arial, sans-serif !important;
font-size: 16px !important;
z-index: 9999 !important;
font-weight: bold !important;
text-shadow: 2px 2px 4px black !important;
box-shadow: 0 0 10px rgba(255, 235, 59, 0.5) !important;
/* Force visibility with !important */
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
</style>
</head>
<body>
<h1>🎵 BGM.js Debug Test</h1>
<div class="debug">
<h2>Debug Console</h2>
<div id="debug-output"></div>
</div>
<div class="debug">
<h2>DOM Check</h2>
<div id="dom-check"></div>
</div>
<div class="debug">
<h2>CSS Check</h2>
<div id="css-check"></div>
</div>
<!-- Song title display element -->
<div id="bgm-title">Loading...</div>
<div class="autoplay-warning" id="autoplay"></div>
<!-- Load MIDI.js first -->
<script>
debugOutput('Loading MIDI.js...');
</script>
<script type='text/javascript' src='//www.midijs.net/lib/midi.js'></script>
<!-- Show title visibility script -->
<script>
debugOutput('Running visibility script...');
var titleEl = document.getElementById('bgm-title');
if (titleEl) {
titleEl.classList.add('visible');
debugOutput('Added .visible class to #bgm-title');
} else {
debugOutput('ERROR: #bgm-title element not found!', 'error');
}
</script>
<!-- Load BGM.js after MIDI.js -->
<script>
debugOutput('Loading BGM.js...');
</script>
<script src="/Music/bgm.js"></script>
<!-- Final check -->
<script>
setTimeout(function() {
debugOutput('Final check after 2 seconds...');
checkDOM();
checkCSS();
}, 2000);
</script>
<script>
function debugOutput(msg, type) {
var output = document.getElementById('debug-output');
var p = document.createElement('p');
if (type === 'error') {
p.className = 'error';
} else if (type === 'success') {
p.className = 'success';
}
p.textContent = '[' + new Date().toLocaleTimeString() + '] ' + msg;
output.appendChild(p);
console.log(msg);
}
function checkDOM() {
var output = document.getElementById('dom-check');
var titleEl = document.getElementById('bgm-title');
if (titleEl) {
output.innerHTML = '<p class="success">✅ #bgm-title element found</p>';
output.innerHTML += '<p>Element content: "' + titleEl.textContent + '"</p>';
output.innerHTML += '<p>Computed display: ' + getComputedStyle(titleEl).display + '</p>';
output.innerHTML += '<p>Computed visibility: ' + getComputedStyle(titleEl).visibility + '</p>';
output.innerHTML += '<p>Computed opacity: ' + getComputedStyle(titleEl).opacity + '</p>';
output.innerHTML += '<p>Computed position: ' + getComputedStyle(titleEl).position + '</p>';
output.innerHTML += '<p>Has .visible class: ' + titleEl.classList.contains('visible') + '</p>';
// Check computed styles
var styles = getComputedStyle(titleEl);
if (styles.top === 'auto' || styles.top === '0px') {
output.innerHTML += '<p class="error">⚠️ WARNING: top position may be incorrect</p>';
}
} else {
output.innerHTML = '<p class="error">❌ #bgm-title element NOT found in DOM</p>';
}
}
function checkCSS() {
var output = document.getElementById('css-check');
var titleEl = document.getElementById('bgm-title');
if (titleEl) {
var styles = getComputedStyle(titleEl);
output.innerHTML = '<p>Top: ' + styles.top + '</p>';
output.innerHTML += '<p>Right: ' + styles.right + '</p>';
output.innerHTML += '<p>Position: ' + styles.position + '</p>';
output.innerHTML += '<p>Background: ' + styles.backgroundColor + '</p>';
output.innerHTML += '<p>Color: ' + styles.color + '</p>';
output.innerHTML += '<p>Border: ' + styles.border + '</p>';
output.innerHTML += '<p>Border-radius: ' + styles.borderRadius + '</p>';
// Check if bgm-title is in normalbordem.css
output.innerHTML += '<p>Font-family: ' + styles.fontFamily + '</p>';
}
}
</script>
<div class="debug">
<h2>Instructions</h2>
<p>1. Check the "Debug Console" above for loading messages</p>
<p>2. Check "DOM Check" to see if #bgm-title exists and its properties</p>
<p>3. Check "CSS Check" to see computed styles</p>
<p>4. Look for a YELLOW BOX in the TOP-RIGHT CORNER of this page</p>
<p>5. Open DevTools Console (F12) for more details</p>
</div>
<p><a href="index.html">← Back to main site</a></p>
</body>
</html>