we have site

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--) {