Rockat now moaves!

.gitignore

@@ -2,3 +2,5 @@
 *.pyc
 www/poll/*
 docker-compose.yml
+www/poll.js
+www/style.css

Makefile

+SCRIPTS := www/poll.js
+STYLES := www/style.css
+
+ALL := $(SCRIPTS) $(STYLES)
+
+.PHONY: all min clean
+
+all: $(ALL)
+
+www/%.js: %.coffee
+	coffee --compile --output $(@D) $<
+
+www/%.css: %.sass
+	sass $< $@
+
+www/%.css: %.less
+	lessc $< $@
+
+clean:
+	rm -f $(ALL)

poll.coffee

+rand = (lbnd, ubnd) -> Math.round((Math.random() * (ubnd - lbnd)) + lbnd)
+
+generate_star = ->
+    size = rand 4, 8
+    x = rand 0, 100
+    y = rand 0, 100
+    star = document.createElement 'div'
+    star.style.width = size + 'px'
+    star.style.height = size + 'px'
+    star.style.right = x + '%'
+    star.style.top = y + '%'
+    document.getElementById('stars').appendChild star
+    star
+
+stars = (generate_star() for i in [1..40])
+
+for star in stars
+    Velocity(star, {width: 500}, {duration: 500, delay: 1000, easing: 'ease-out'})
+
+#starels = document.getElementById('stars').getElementsByTagName 'div'
+#Velocity(starels, {translateX: [-1000, 0]}, {duration: 200, delay: 1000})
+
+#animate = ->
+#    spaceship = document.getElementById('spaceship')
+#    radius = 30
+#    duration = 4000
+#
+#    options =
+#        duration: duration / 4
+#        easing: 'ease-in-out'
+#
+#    Velocity(spaceship,
+#        { translateX: [-10, 10], translateY: [-10, 10] },
+#        { duration: 2000, loop: true })

style.less

+body {
+  background-color: #52617d;
+  overflow: hidden;
+}
+img, div {
+  position: absolute;
+}
+
+.bg {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+@spaceship-width: 400px;
+@spaceship-height: @spaceship-width * 1447 / 2454;
+
+.spaceship {
+  left: 50%;
+  top: 50%;
+  width: @spaceship-width;
+  height: @spaceship-height;
+  margin-left: -@spaceship-width / 2;
+  margin-top: -@spaceship-height / 2;
+  z-index: 10;
+
+  img {
+    position: static;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.stars {
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: rotateZ(-30deg);
+
+  div {
+    background-color: white;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+  }
+}
+
+.moon {
+  right: 50px;
+  top: 50px;
+}
+.dashboard {
+  right: 0;
+  bottom: 0;
+}
+.price, .cap {
+  font: normal 14px courier new;
+  right: 15px;
+  bottom: 127px;
+  width: 109px;
+  height: 20px;
+}
+.cap {
+  bottom: 50px;
+}
+
+/* -- Cruising state -- */
+
+@cruising-move-radius: 5px;
+@cruising-nose-tilt: 6deg;
+@cruising-move-duration: 1.5s;
+@cruising-tilt-duration: 1s;
+
+.cruising {
+  .spaceship {
+    animation: cruising-movement @cruising-move-duration linear 0s infinite;
+
+    img {
+      animation: cruising-rotation @cruising-tilt-duration linear 0s infinite alternate;
+    }
+  }
+}
+
+@keyframes cruising-movement {
+  from { transform: rotateZ(0) translateX(@cruising-move-radius) rotateZ(0) }
+  to   { transform: rotateZ(360deg) translateX(@cruising-move-radius) rotateZ(-360deg) }
+}
+
+@keyframes cruising-rotation {
+  from { transform: rotateZ(-@cruising-nose-tilt / 2) }
+  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 {
+  .spaceship {
+    animation: excited-movement @excited-move-duration linear 0s infinite;
+
+    img {
+      animation: excited-rotation @excited-tilt-duration linear 0s infinite alternate;
+    }
+  }
+
+  /*
+  .bg {
+    animation: excited-bg-tilt 3s linear 0s infinite alternate;
+  }
+  */
+}
+
+@keyframes excited-movement {
+  from { transform: rotateZ(0) translateX(@excited-move-radius) rotateZ(0) }
+  to   { transform: rotateZ(360deg) translateX(@excited-move-radius) rotateZ(-360deg) }
+}
+
+@keyframes excited-rotation {
+  from { transform: rotateZ(-@excited-nose-tilt / 2) }
+  to   { transform: rotateZ(@excited-nose-tilt / 2) }
+}
+
+@keyframes excited-bg-tilt {
+  from { transform: rotateZ(0) }
+  to   { transform: rotateZ(70deg) }
+}

watch.sh

+#!/bin/sh
+hash inotifywait || (echo "Install inotify-tools first"; exit 1)
+
+make
+
+while true; do
+    inotifywait --quiet --event attrib,modify *.less *.coffee
+    sleep 0.05s
+    make
+done

www/index.html

 <!doctype html>
 <html>
   <head>
-    <style>
-      body {
-        background-color: #52617d;
-      }
-      img, div {
-        position: absolute;
-      }
-      .spaceship {
-        left: 50%;
-        top: 50%;
-        margin-left: -150px;
-        margin-top: -50px;
-      }
-      .moon {
-        right: 50px;
-        top: 50px;
-      }
-      .dashboard {
-        right: 0;
-        bottom: 0;
-      }
-      .price, .cap {
-        font: normal 14px courier new;
-        right: 15px;
-        bottom: 127px;
-        width: 109px;
-        height: 20px;
-      }
-      .cap {
-        bottom: 50px;
-      }
-    </style>
+    <link rel="stylesheet" href="style.css"></link>
   </head>
-  <body>
-    <img class="moon" src="moooon.png" width="300"></div>
-    <img class="dashboard" src="dashboard.png "width="500"></div>
-    <img class="spaceship" src="spaiceship.png" width="250"></div>
+  <body class="excited">
+    <div id="stars" class="stars"></div>
+    <div id="bg" class="bg">
+      <div id="spaceship" class="spaceship">
+        <img src="spaiceship.png">
+      </div>
+    </div>
+    <img class="moon" src="moooon.png" width="100">
+    <img class="dashboard" src="dashboard.png "width="300">
     <div id="price" class="price"></div>
     <div id="cap" class="cap"></div>
+    <script src="velocity.min.js"></script>
     <script src="poll.js"></script>
   </body>
 </html>

www/poll.js → www/poll-old.js

+/*
 var poll_interval = 2000;
 
 var price = document.getElementById('price');
@@ -26,3 +27,12 @@ poll('poll/coinmarketcap', function(d) {
 });
 
 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});