diff options
Diffstat (limited to 'docs/js')
| -rw-r--r-- | docs/js/player.js | 71 | ||||
| -rw-r--r-- | docs/js/shards.js | 9 | ||||
| -rw-r--r-- | docs/js/site.js | 48 | ||||
| -rw-r--r-- | docs/js/stars.js | 4 |
4 files changed, 127 insertions, 5 deletions
diff --git a/docs/js/player.js b/docs/js/player.js new file mode 100644 index 0000000..f262454 --- /dev/null +++ b/docs/js/player.js @@ -0,0 +1,71 @@ +const player = (function(){ + let player = {} + let current_index = -1 + let audio = document.createElement('audio') + let tracks = [ + { file: "mp3/xena_vectra-cruise.mp3", title: "Cruise" }, + { file: "mp3/xena_vectra-dreaming_city_2.mp3", title: "Dreaming City 2" }, + { file: "mp3/xena_vectra-escape_from_nk.mp3", title: "Escape from Neukölln" }, + ] + function init(){ + bind() + build() + // play(0) + } + function bind(){ + audio.addEventListener('play', handlePlay) + audio.addEventListener('pause', handlePause) + audio.addEventListener('ended', handleEnded) + document.querySelector('.player .icon').addEventListener('click', togglePlaying) + document.querySelector('.player .track').addEventListener('click', play) + document.querySelector('.player .playlistToggle').addEventListener('click', togglePlaylist) + } + function build() { + tracks.forEach((track, i) => { + let el = document.createElement('li') + el.innerHTML = track.title + el.addEventListener('click', () => { + shards.rebuild() + play(i) + }) + document.querySelector('.playlist ul').appendChild(el) + }) + document.querySelector('.player .track').innerHTML = tracks[0].title + } + function play(n){ + const active = document.querySelector('.playlist ul .active') + if (active) active.classList.remove('active') + document.querySelector('.playlist ul').children[n].classList.add('active') + + current_index = (n + tracks.length) % tracks.length + audio.src = tracks[n].file + audio.play() + document.querySelector('.player .track').innerHTML = tracks[n].title + } + function handlePlay(){ + document.querySelector('.player').classList.add('playing') + document.querySelector('.player').classList.remove('paused') + shards.step() + } + function handlePause(){ + document.querySelector('.player').classList.remove('playing') + document.querySelector('.player').classList.add('paused') + } + function handleEnded(){ + shards.rebuild() + play(current_index+1) + } + function togglePlaying() { + // sounds.play('click') + if (current_index == -1) { + play(0) + } else { + if (audio.paused) audio.play() + else audio.pause() + } + } + function togglePlaylist() { + document.querySelector('.playlist').classList.toggle('visible') + } + init() +})()
\ No newline at end of file diff --git a/docs/js/shards.js b/docs/js/shards.js index 44d2ecd..6512e70 100644 --- a/docs/js/shards.js +++ b/docs/js/shards.js @@ -16,7 +16,10 @@ const shards = (function(){ bg_el.classList.remove('fade') } function bind(){ - document.querySelector('h1').addEventListener('click', rebuild) + document.querySelector('h1').addEventListener('click', () => { + sounds.play('click') + rebuild() + }) } function build(){ count = choice([5,7,7,11,11,13,13]) @@ -36,7 +39,7 @@ const shards = (function(){ function rebuild(){ if (rebuilding) return rebuilding = true - sounds.play('click') + // sounds.play('click') stars.rebuild() next() t = 0 @@ -48,7 +51,7 @@ const shards = (function(){ setTimeout(next, 20) bg_el.classList.remove('fade') rebuilding = false - sounds.play('click') + // sounds.play('click') }, 500) } function append(i){ diff --git a/docs/js/site.js b/docs/js/site.js new file mode 100644 index 0000000..59d09f9 --- /dev/null +++ b/docs/js/site.js @@ -0,0 +1,48 @@ +const site = (function(){ + let section + let links = toArray(document.querySelectorAll('.menu a')) + let time = new Date() + let hour = time.getHours() + if (hour < 8 || hour > 16) { + document.body.parentNode.classList.add('night') + } else { + document.body.parentNode.classList.add('day') + } + setTimeout(() => { + document.body.classList.remove('loading') + navigateHash(window.location.hash) + const email = atob("eGVuYXZlY3RyYTkwOUBnbWFpbC5jb20=") + const twitter = atob("dmVjdHJheGVuYQ==") + document.querySelector("#email_addr").href = 'mailto:' + email + document.querySelector("#email_addr").innerHTML = email + document.querySelector("#twitter_addr").innerHTML = twitter + document.querySelector("#twitter_addr").href = 'https://twitter.com/' + twitter + }, 0) + function navigateHash(url){ + let new_section = url.split('#')[1] + if (section) { + document.body.classList.remove(section) + links.forEach(link => link.classList.remove('active')) + } + if (new_section && new_section !== section) { + document.body.classList.add(new_section) + links.forEach(link => link.getAttribute('href').match(new_section) && link.classList.add('active')) + section = new_section + } else { + section = null + } + // window.location.hash = section || "" + } + toArray(document.querySelectorAll('.menu a')).forEach(a => { + a.addEventListener("click", e => { + e.preventDefault() + sounds.play('click') + navigateHash(e.target.href) + }) + }) + function preload(src) { + const img = new Image + img.src = src + } + preload('img/pause-inv.png') +})() diff --git a/docs/js/stars.js b/docs/js/stars.js index f1569eb..0637473 100644 --- a/docs/js/stars.js +++ b/docs/js/stars.js @@ -18,8 +18,8 @@ const stars = (function(){ function ri(n){ return Math.random() * n } function rr(a,b){ return (b-a) * Math.random() + a } function build(){ - var w = canvas.width = window.innerWidth - var h = canvas.height = window.innerHeight + var w = canvas.width = window.innerWidth * window.devicePixelRatio + var h = canvas.height = window.innerHeight * window.devicePixelRatio ctx.clearRect(0,0,w,h) var n = Math.sqrt(w*h)|0 while (n--) { |