Add beat mirror + accent, cleanup css slightly

10 years ago · 137fa267e8
parent 92bd1193cc
commit 137fa267e8
2 changed files with 51 additions and 44 deletions
--- a/index.html
+++ b/index.html
@ -5,14 +5,14 @@
        Clean up the damn code
            if you're not mon, don't read any further, it's pretty bad JS

+        Keep arraybuffer in mem, load AudioBuffer as needed?
        Volume controls
        Prettier ui
        Song shuffle
        Image pause / manual advance
-        Keep arraybuffer in mem, load AudioBuffer as needed?
        Different colour palettes
        External respacks
-        Change short blackout to beat length / 1.7
+        Change short blackout to beat length / 1.7 + change image
        Blur into blackout? iunno
    -->
    <head>
@ -25,7 +25,7 @@
        <script type="text/javascript" src="audioUtils.js"></script>
        <script type="text/javascript">
            //debug
-            var skipPreloader = false;
+            var skipPreloader = true;
            
            var filesLoaded = 0;
            var initialLoad = 0;
@ -67,8 +67,9 @@
                newSong._beatWidth = newSong._buildWidth;
                
                audio.beat_pointer =  -newSong._build.length;
-                document.getElementById("beets").innerHTML = wrapBeats(0, 100);
+                updateBeatView(-1);
                document.getElementById("timer").innerHTML = "T=0x0000"
+                document.getElementById("beetAccent").style.animationDuration = newSong._loopWidth * 1.5 + "s";
            }
         
            audio.play = function(delay) {
@ -174,15 +175,28 @@
                }
            }
            
+            function updateBeatView(pointer) {
+                // future minus accent
+                var beatLine = wrapBeats(pointer+1, 30);
+                document.getElementById("beetRight").innerHTML = beatLine;
+                document.getElementById("beetLeft").innerHTML = beatLine.split("").reverse().join("");
+            }
+            
            function handleBeat(beat, bp, c, cc, current) {
                // we have changed song since we were scheduled
                if(current != audio.current_song)
                    return;
-                var beatLine = wrapBeats(bp+1, 100);
-                document.getElementById("beets").innerHTML = beatLine; // add reversed bit later
+                updateBeatView(bp);
                // I probably shouldn't have so much on one line
                document.getElementById("beatCount").innerHTML = "B=0x" + pad(bp < 0 ? 0: loopBeat(bp).toString(16).toUpperCase(), 4);
                if(beat != '.') {
+                    var accent = document.getElementById("beetAccent");
+                    accent.innerHTML = beat;
+                    accent.className = "beetView";
+                    // trigger reflow to restart animation
+                    accent.offsetWidth = accent.offsetWidth;
+                    accent.className = "beetView fade";
+                    
                    if(beat == '|') {
                        shortBlackout = true;
                        waifuCanvas.blackout();
@ -248,8 +262,7 @@
                    preloaderSong.loop = false;
                }
                preloaderSong.onended = function() {
-                    // get around issues on mobile where pointer-events
-                    // doesn't work
+                    // get around issues on mobile where pointer-events don't work
                    document.getElementById("preloader").style.display = "none";
                    document.getElementById("waifu").className = "loaded"
                    // free dat memory
@ -329,17 +342,21 @@
        <div id="preloader">
            0x00
        </div>
-        <div id="beets">.xoxoxoxoxoxo</div>
+        <div class="ui" id="beets">
+            <div class="beetView" id="beetLeft"></div>
+            <div class="beetView" id="beetAccent"></div>
+            <div class="beetView" id="beetRight"></div>
+        </div>
        <canvas id="waifu" width="1280" height="720"></canvas>
-        <div id="controls">
+        <div class="ui" id="controls">
            <a href="#" onclick="void(audio.stop());">stop</a>
            <a href="#" onclick="void(audio.play());">play</a>
            <a href="#" onclick="void(audio.prev());">prev</a>
            <a href="#" onclick="void(audio.next());">next</a>
            <div id="beatCount">B=0x0000</div>
            <div id="timer">T=0x0000</div>
-            <div id="songname"></div>
-            <div id="waifuName"></div>
+            <div id="songname">Madeon - Finale</div>
+            <div id="waifuName">Megumi</div>
            <div id="colourName">white</div>
        </div>
    </body>
--- a/style.css
+++ b/style.css
@ -1,30 +1,43 @@
 html, body {
    height: 100%;
    margin: 0; padding: 0;
+    overflow: hidden;
 }

 body {
    background-color:#ffffff;
 }

-#controls {
-    font-family: monospace;
+.ui {
    background-color:#ffffff;
+    font-family: monospace;
    position: absolute;
-    bottom: 0px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 3;
 }

+#controls {
+    bottom: 0px;
+}
+
 #beets {
-    font-family: monospace;
-    background-color:#ffffff;
-    position: absolute;
    top: 0px;
-    left: 50%;
-    transform: translate(-50%, 0);
-    z-index: 3;
+}
+
+.beetView {
+    float: left;
+}
+
+#beetAccent {
+    font-size: 50px;
+    opacity: 1;
+}
+
+#beetAccent.fade {
+    animation-name: fadeout;
+    animation-duration: 0.2s;
+    opacity: 0;
 }

 #waifu {
@ -46,29 +59,6 @@ body {
    -webkit-animation-duration: 0.5s;
 }

-#waifuColour {
-    opacity: 0.7;
-    mix-blend-mode: hard-light;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 1;
-}
-
-#blackout {
-    background-color: #000; 
-    display: none;
-    pointer-events:none;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 2;
-}
-
 #preloader {
    background-color: #FFF; 
    width: 100%;