Rewrite poll code to coffeescript, play with warp speed animations

poll.coffee

+ismobile = /android|blackberry|iphone|opera mini|iemobile/i.test navigator.userAgent
+
+# -- config --
+
+debug = true
+numstars = if ismobile then 10 else 60
+min_star_size = 4
+max_star_size = 12
+poll_exchange_interval = 2
+poll_marketcap_interval = 60
+
+# -- utility --
+
 rand = (lbnd, ubnd) -> Math.round((Math.random() * (ubnd - lbnd)) + lbnd)
 
+# -- create stars in background --
+
 generate_star = ->
-    size = rand 4, 8
+    size = rand min_star_size, max_star_size
+    red_green = rand 180, 255
     x = rand 0, 100
     y = rand 0, 100
     star = document.createElement 'div'
+    star.style.backgroundColor = "rgb(#{red_green}, #{red_green}, 255)"
     star.style.width = size + 'px'
     star.style.height = size + 'px'
     star.style.right = x + '%'
@@ -12,10 +29,100 @@ generate_star = ->
     document.getElementById('stars').appendChild star
     star
 
-stars = (generate_star() for i in [1..40])
+stars = (generate_star() for i in [1..numstars])
+
+# -- state transitions --
+#
+# there are 3 states: cruising, excited and fullham
+
+# TODO: transition animations
+
+spaceship = document.getElementById 'spaceship'
+
+warp_spaceship = ->
+  console.log spaceship
+  Velocity spaceship, {left: '-=20%', top: '+=20%', }, {duration: 1000}
+  Velocity spaceship, {left: '+=45%', top: '-=45%', }, {duration: 400}
+  Velocity spaceship, {left: '-=25%', top: '+=25%', }, {duration: 1300}
+  for star in stars
+    amt = rand 0, 20
+    Velocity star, {right: "+=#{amt}%"}, {duration: 400}
+    Velocity star, 'reverse', {duration: 1000}
+
+unwarp_spaceship = ->
+
+star_heights = (star.style.height for star in stars)
+
+warp_stars = ->
+  Velocity stars,
+    {width: '50%'},
+    {duration: 1000, easing: 'ease-in'}
+
+unwarp_stars = ->
+  for star, i in stars
+    Velocity star,
+      {width: star_heights[i]},
+      {duration: 1000, easing: 'ease-in'}
+
+transitions =
+  cruising_excited: [warp_stars, warp_spaceship]
+  excited_cruising: [unwarp_stars]
+
+set_state = (newstate) ->
+  oldstate = document.body.className
+  if oldstate != newstate
+    console.log 'set state from', oldstate, 'to', newstate
+    f() for f in transitions[oldstate + '_' + newstate] ? []
+    document.body.className = newstate
+
+if debug
+  document.addEventListener 'keypress', (e) ->
+    switch String.fromCharCode e.charCode
+      when 'c' then set_state 'cruising'
+      when 'e' then set_state 'excited'
+      when 's' then set_state 'static'
+
+  document.addEventListener 'click', (e) ->
+    if document.body.className == 'cruising'
+      set_state 'excited'
+    else
+      set_state 'cruising'
+
+# -- polling --
+
+do ->
+  exchange = 'btce' # TODO: get from select box
+  currency_signs =
+    USD: '$'
+
+  price = document.getElementById 'price'
+  cap = document.getElementById 'cap'
+
+  poll = (url, cb) ->
+    xhr = new XMLHttpRequest
+    xhr.onreadystatechange = ->
+        if xhr.readyState == 4 and xhr.status == 200
+            cb JSON.parse xhr.responseText
+    xhr.open 'GET', url, true
+    xhr.send()
+
+  poll_exchange = ->
+    poll 'poll/' + exchange, (d) ->
+      price.innerHTML = currency_signs[d.currency] + d.last #.toFixed 2
+      # TODO: set state depending on price changes (maybe best determine this
+      # on server)
+
+  poll_marketcap = ->
+    poll 'poll/coinmarketcap', (d) ->
+      cap.innerHTML = currency_signs[d.currency] + d.last
+      # TODO: maybe some animation if it changes?
+
+  # XXX: disabled polling for debugging
+  #poll_exchange()
+  #poll_marketcap()
 
-for star in stars
-    Velocity(star, {width: 500}, {duration: 500, delay: 1000, easing: 'ease-out'})
+  #setInterval poll_exchange, poll_exchange_interval * 1000
+  #setInterval poll_marketcap, poll_marketcap_interval * 1000
 
 #starels = document.getElementById('stars').getElementsByTagName 'div'
 #Velocity(starels, {translateX: [-1000, 0]}, {duration: 200, delay: 1000})

style.less

+/* config */
+
+@spaceship-width: 400px;
+@spaceship-height: @spaceship-width * 1447 / 2454;
+
+@cruising-move-radius: 5px;
+@cruising-nose-tilt: 6deg;
+@cruising-move-duration: 1.5s;
+@cruising-tilt-duration: 1s;
+
+@excited-move-radius: 10px;
+@excited-nose-tilt: 16deg;
+@excited-move-duration: 500ms;
+@excited-tilt-duration: 100ms;
+
+/* general */
+
 body {
   background-color: #52617d;
   overflow: hidden;
@@ -13,9 +30,6 @@ img, div {
   height: 100%;
 }
 
-@spaceship-width: 400px;
-@spaceship-height: @spaceship-width * 1447 / 2454;
-
 .spaceship {
   left: 50%;
   top: 50%;
@@ -37,13 +51,15 @@ img, div {
   top: 0;
   width: 100%;
   height: 100%;
-  transform: rotateZ(-30deg);
+
+  // FIXME: this should depend on the market and the client width/height
+  //transform: rotateZ(-25deg);
 
   div {
     background-color: white;
     width: 10px;
     height: 10px;
-    border-radius: 5px;
+    border-radius: 50%;
   }
 }
 
@@ -66,12 +82,7 @@ img, div {
   bottom: 50px;
 }
 
-/* -- Cruising state -- */
-
-@cruising-move-radius: 5px;
-@cruising-nose-tilt: 6deg;
-@cruising-move-duration: 1.5s;
-@cruising-tilt-duration: 1s;
+/* Cruising state */
 
 .cruising {
   .spaceship {
@@ -93,12 +104,7 @@ img, div {
   to   { transform: rotateZ(@cruising-nose-tilt / 2) }
 }
 
-/* -- Excited state -- */
-
-@excited-move-radius: 10px;
-@excited-nose-tilt: 16deg;
-@excited-move-duration: 500ms;
-@excited-tilt-duration: 100ms;
+/* Excited state */
 
 .excited {
   .spaceship {

www/index.html

@@ -3,7 +3,7 @@
   <head>
     <link rel="stylesheet" href="style.css"></link>
   </head>
-  <body class="excited">
+  <body class="cruising">
     <div id="stars" class="stars"></div>
     <div id="bg" class="bg">
       <div id="spaceship" class="spaceship">

www/poll-old.js

-/*
-var poll_interval = 2000;
-
-var price = document.getElementById('price');
-var cap = document.getElementById('cap');
-
-function poll(url, cb) {
-    var xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = function() {
-        if (xhr.readyState == 4 && xhr.status == 200)
-            cb(JSON.parse(xhr.responseText));
-    };
-    xhr.open('GET', url, true);
-    xhr.send();
-}
-
-function poll_btce() {
-    poll('poll/btce', function(d) {
-        price.innerHTML = '$' + d.last.toFixed(2);
-    });
-}
-
-setInterval(poll_btce, poll_interval);
-
-poll('poll/coinmarketcap', function(d) {
-    cap.innerHTML = '$' + d.last.toFixed(0);
-});
-
-poll_btce();
-*/
-
-var spaceship = document.getElementById('spaceship');
-var radius = 10;
-
-function animate
-Velocity(spaceship, {translateX: radius,      translateY: 0         }, {duration: 2000});
-Velocity(spaceship, {translateX: -2 * radius, translateY: radius    }, {duration: 2000});
-Velocity(spaceship, {translateX: radius,      translateY: -2 * radius    }, {duration: 2000});