From b9426877cfe30b74d03ec756b93bd047c402d7ad Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Sun, 25 Nov 2018 18:44:06 +0100 Subject: we have site --- docs/img/pause-inv.png | Bin 1337 -> 3208 bytes docs/index.html | 138 +++++++++++++++++++++---------------------------- docs/js/player.js | 71 +++++++++++++++++++++++++ docs/js/shards.js | 9 ++-- docs/js/site.js | 48 +++++++++++++++++ docs/js/stars.js | 4 +- 6 files changed, 187 insertions(+), 83 deletions(-) create mode 100644 docs/js/player.js create mode 100644 docs/js/site.js (limited to 'docs') diff --git a/docs/img/pause-inv.png b/docs/img/pause-inv.png index 9bec646..9780255 100644 Binary files a/docs/img/pause-inv.png and b/docs/img/pause-inv.png differ diff --git a/docs/index.html b/docs/index.html index 0c5217f..9263023 100644 --- a/docs/index.html +++ b/docs/index.html @@ -65,6 +65,7 @@ body.fade { top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; + pointer-events: none; } .bgs { position: absolute; @@ -181,7 +182,7 @@ ol li { line-height: 1.4; } .player { - padding: 10px 20px; + padding: 12px 20px; width: 300px; display: flex; flex-direction: row; @@ -193,25 +194,22 @@ ol li { .player .icon { width: 1.2em; height: 1.2em; - background-image: url(img/play.png); + background-image: url(img/pause-inv.png); background-size: 100%; background-position: center; border: 2px solid rgba(255,255,255,0.3); - border-radius: 50%; + border-radius: 100%; margin: 0 10px 0 10px; - transition: all 100ms; } -.player:hover .icon { - background-image: url(img/play-inv.png); +.player.playing .icon { + background-image: url(img/pause-inv.png); } .player.paused .icon { - background-image: url(img/pause.png); -} -.player.paused:hover .icon { - background-image: url(img/pause-inv.png); + background-image: url(img/play-inv.png); } .player .track { transition: all 100ms; + flex: auto; } .player:hover .track { color: rgba(255,255,255,1.0); @@ -220,14 +218,46 @@ ol li { -webkit-overflow-scrolling: touch; overflow-y: auto; max-height: calc(100vh - 140px); - width: 310px; + width: 331px; max-width: calc(100vw - 30px); background: black; position: absolute; bottom: 160px; right: 0; - margin: 10px 10px; + margin: 0px 10px; + padding: 0px; + height: 0; overflow: hidden; + transition: all 0.5s cubic-bezier(0,1,1,1); +} +.playlist.visible { + height: 180px; +} +.playlist ul { + margin: 0; padding: 0; +} +.playlist li { + margin: 0; padding: 10px; + cursor: pointer; + transition: all 0.2s; + background: rgba(20,5,10,0.5); +} +.playlist li.active { + color: #000; + background: rgba(255,255,255,0.9); +} +.playlistToggle { + align-self: flex-end; + width: 15px; + height: 15px; padding: 10px; - background: rgba(0,0,0,0.5); + display: flex; + flex-direction: column; + justify-content:space-between; +} +.playlistToggle div { + width: 100%; + height: 2px; + border-bottom: 1px solid #999; + background: white; } section { -webkit-overflow-scrolling: touch; @@ -239,7 +269,7 @@ section { bottom: 160px; left: 0; margin: 10px 10px; padding: 10px; - background: rgba(0,0,0,0.5); + background: rgba(20,5,10,0.5); pointer-events: none; opacity: 0; transition: opacity 200ms; @@ -249,6 +279,7 @@ section { .hardware #hardware, .contact #contact { opacity: 1; + pointer-events: auto; } @keyframes fade { 0% { opacity: 0.6; } @@ -271,9 +302,14 @@ section { Equipment Contact -
+
Dreaming City
+
+
+
+
+
@@ -292,14 +328,12 @@ section { As Xena Vectra

-
Escape from Neukölln EP (2018)
- 12" / digital on Bandcamp + Digital on Bandcamp

-
Dreaming City EP (2018)
Cassette / digital on Bandcamp

@@ -334,77 +368,25 @@ section {

Contact

Booking: -
+
Twitter: - @
+ @
Soundcloud: - xenavectra, - magisphere + xenavectra, + magisphere
- Bandcamp: xenavectra
+ Bandcamp: xenavectra

-

Playlist

+
+ - + 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--) { -- cgit v1.2.3-70-g09d2