cynic
/
0x40-web
mirror of https://github.com/kurisufriend/0x40-web
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add beat mirror + accent, cleanup css slightly

Browse Source
serial
William Toohey 10 years ago
parent 92bd1193cc
commit 137fa267e8
2 changed files with 51 additions and 44 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 41
      index.html
  2. 54
      style.css

41
index.html
Unescape View File

@ -5,14 +5,14 @@
Clean up the damn code Clean up the damn code
if you're not mon, don't read any further, it's pretty bad JS 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 Volume controls
Prettier ui Prettier ui
Song shuffle Song shuffle
Image pause / manual advance Image pause / manual advance
Keep arraybuffer in mem, load AudioBuffer as needed?
Different colour palettes Different colour palettes
External respacks External respacks
Change short blackout to beat length / 1.7 Change short blackout to beat length / 1.7 + change image
Blur into blackout? iunno Blur into blackout? iunno
--> -->
<head> <head>
@ -25,7 +25,7 @@
<script type="text/javascript" src="audioUtils.js"></script> <script type="text/javascript" src="audioUtils.js"></script>
<script type="text/javascript"> <script type="text/javascript">
//debug //debug
var skipPreloader = false; var skipPreloader = true;
var filesLoaded = 0; var filesLoaded = 0;
var initialLoad = 0; var initialLoad = 0;
@ -67,8 +67,9 @@
newSong._beatWidth = newSong._buildWidth; newSong._beatWidth = newSong._buildWidth;
audio.beat_pointer = -newSong._build.length; audio.beat_pointer = -newSong._build.length;
document.getElementById("beets").innerHTML = wrapBeats(0, 100); updateBeatView(-1);
document.getElementById("timer").innerHTML = "T=0x0000" document.getElementById("timer").innerHTML = "T=0x0000"
document.getElementById("beetAccent").style.animationDuration = newSong._loopWidth * 1.5 + "s";
} }
audio.play = function(delay) { 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) { function handleBeat(beat, bp, c, cc, current) {
// we have changed song since we were scheduled // we have changed song since we were scheduled
if(current != audio.current_song) if(current != audio.current_song)
return; return;
var beatLine = wrapBeats(bp+1, 100); updateBeatView(bp);
document.getElementById("beets").innerHTML = beatLine; // add reversed bit later
// I probably shouldn't have so much on one line // 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); document.getElementById("beatCount").innerHTML = "B=0x" + pad(bp < 0 ? 0: loopBeat(bp).toString(16).toUpperCase(), 4);
if(beat != '.') { 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 == '|') { if(beat == '|') {
shortBlackout = true; shortBlackout = true;
waifuCanvas.blackout(); waifuCanvas.blackout();
@ -248,8 +262,7 @@
preloaderSong.loop = false; preloaderSong.loop = false;
} }
preloaderSong.onended = function() { preloaderSong.onended = function() {
// get around issues on mobile where pointer-events // get around issues on mobile where pointer-events don't work
// doesn't work
document.getElementById("preloader").style.display = "none"; document.getElementById("preloader").style.display = "none";
document.getElementById("waifu").className = "loaded" document.getElementById("waifu").className = "loaded"
// free dat memory // free dat memory
@ -329,17 +342,21 @@
<div id="preloader"> <div id="preloader">
0x00 0x00
</div> </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> <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.stop());">stop</a>
<a href="#" onclick="void(audio.play());">play</a> <a href="#" onclick="void(audio.play());">play</a>
<a href="#" onclick="void(audio.prev());">prev</a> <a href="#" onclick="void(audio.prev());">prev</a>
<a href="#" onclick="void(audio.next());">next</a> <a href="#" onclick="void(audio.next());">next</a>
<div id="beatCount">B=0x0000</div> <div id="beatCount">B=0x0000</div>
<div id="timer">T=0x0000</div> <div id="timer">T=0x0000</div>
<div id="songname"></div> <div id="songname">Madeon - Finale</div>
<div id="waifuName"></div> <div id="waifuName">Megumi</div>
<div id="colourName">white</div> <div id="colourName">white</div>
</div> </div>
</body> </body>

54
style.css
Unescape View File

@ -1,30 +1,43 @@
html, body { html, body {
height: 100%; height: 100%;
margin: 0; padding: 0; margin: 0; padding: 0;
overflow: hidden;
} }
body { body {
background-color:#ffffff; background-color:#ffffff;
} }
#controls { .ui {
font-family: monospace;
background-color:#ffffff; background-color:#ffffff;
font-family: monospace;
position: absolute; position: absolute;
bottom: 0px;
left: 50%; left: 50%;
transform: translate(-50%, 0); transform: translate(-50%, 0);
z-index: 3; z-index: 3;
} }
#controls {
bottom: 0px;
}
#beets { #beets {
font-family: monospace;
background-color:#ffffff;
position: absolute;
top: 0px; 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 { #waifu {
@ -46,29 +59,6 @@ body {
-webkit-animation-duration: 0.5s; -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 { #preloader {
background-color: #FFF; background-color: #FFF;
width: 100%; width: 100%;

Write Preview
Loading…
Cancel
Save