Add petition link and small game demo

4 files changed, 264 insertions, 2 deletions

diff --git a/game.html b/game.html
new file mode 100644
index 0000000..6beb722
--- /dev/null
+++ b/game.html
diff --git a/game.html.coffee b/game.html.coffee
new file mode 100644
index 0000000..a4473c6
--- /dev/null
+++ b/game.html.coffee
@@ -0,0 +1,260 @@
+# Copyright (c) 2013, 2014 Michele Bini
+
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the version 3 of the GNU General Public License
+# as published by the Free Software Foundation.
+
+# This program is distributed in the hope that it will be useful, but
+# WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+# General Public License for more details.
+
+# You should have received a copy of the GNU General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+{ htmlcup } = require 'htmlcup'
+
+htmlcup[x] = htmlcup.compileTag x for x in [ "svg", "rect", "g", "ellipse", "polygon", "line", "image", "defs", "linearGradient", "stop", "use" ]
+
+title = "V the Vaquita"
+
+fs = require 'fs'
+
+datauri = (t, x)-> "data:#{x};base64,#{new Buffer(x).toString("base64")}"
+
+icon = "vaquita.ico"
+icon = datauri("image/x-icon", fs.readFileSync(icon))
+pixyvaquita = "pixyvaquita.png"
+pixyvaquita = "data:image/png;base64," + (new Buffer(fs.readFileSync(pixyvaquita))).toString("base64")
+
+genPage = ->
+ htmlcup.html5Page ->
+  @head ->
+    @meta charset:"utf-8"
+    @link rel:"shortcut icon", href:icon
+    @title title
+    @style type: "text/css",
+      """
+      body {
+        /* background:pink; */
+        /* background: #69B2FF; */
+        /* background: #21AFF8; */
+        /* background: #0286E8; */
+        /* background: #1096EE; */
+        background:black;
+        text-align: center;
+        font-size: 22px;
+        font-family: Helvetica;
+      }
+      .banner {
+        border: 5px solid white;
+        border: 5px solid white rgba(255,255,255,0.9);
+        box-shadow: 0 2px 4px blue;
+        margin: 1em;
+      }
+      p {
+        color:white;
+        color:rgba(255,255,255,0.9);
+        margin-top:0.418em;
+        margin-bottom:0.418em;
+        margin-left:auto;
+        margin-right:auto;
+        width:22em;
+        max-width:100%;
+        text-shadow: 0 1px 1px blue;
+      }
+      a {
+        /*
+        color:rgb(200,255,255);
+        color:rgba(200,255,255,0.9);
+        */
+        color:white;
+        color:rgba(255,255,255,0.9);
+        text-decoration:none;
+        display: inline-block;
+        border: 1px solid white;
+        padding: 0 0.2em;
+        border-radius: 0.2em;
+        -moz-border-radius: 0.2em;
+        -webkit-border-radius: 0.2em;
+        -ie-border-radius: 0.2em;
+      }
+      a:hover {
+        background-color:rgba(20,70,180,1.0);
+      }
+      .petition {
+        margin:0.418em;
+        padding:0.618em;
+      }
+      .petition a {
+        font-size:127.2%;
+        box-shadow: 0 2px 4px blue;
+        margin:0.3em;
+      }
+      .page {
+        width: 100%;
+        height: 100%;
+        margin: 0;
+        border: 0;
+      }
+      .centering {
+        display: table;
+        padding: 0;
+      }
+      .centered {
+        display: table-cell;
+        vertical-align: middle;
+        text-align: center;
+      }
+      .inline-block {
+        display: inline-block;
+      }
+      .dynamic-section {
+        display: inline-block;
+        vertical-align:middle;
+        max-width:100%;
+      }
+      .flip-lr {
+        -moz-transform:     scaleX(-1);
+        -o-transform:       scaleX(-1);
+        -webkit-transform:  scaleX(-1);
+        transform:          scaleX(-1);
+        filter:             FlipH;
+        -ms-filter:         "FlipH";
+      }
+      image, .pixelart {
+        image-rendering:optimizeSpeed;             /* Legal fallback */
+        image-rendering:-moz-crisp-edges;          /* Firefox        */
+        image-rendering:-o-crisp-edges;            /* Opera          */
+        image-rendering:-webkit-optimize-contrast; /* Safari         */
+        image-rendering:optimize-contrast;         /* CSS3 Proposed  */
+        image-rendering:crisp-edges;               /* CSS4 Proposed  */
+        image-rendering:pixelated;                 /* CSS4 Proposed  */
+        -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
+      }
+      /*
+      .pixelart {
+        image-rendering: -moz-crisp-edges; 
+        -ms-interpolation-mode: nearest-neighbor;
+        image-rendering: pixelated;
+        image-rendering: crisp-edges;
+      }
+      */
+      g.flipped {
+        transform:scale(-1,1);
+      }
+      .support-vaquitas {
+        opacity: 0.2;
+      }
+      .support-vaquitas:hover {
+        opacity: 1;
+      }
+      """
+  @body ->
+    @div class:"centering page", ->
+     @div class:"centered", ->
+      @svg width:"960", height:"720", ->
+        @defs ->
+          @linearGradient id:"grad1", x1:"0%", y1:"0%", x2:"0%", y2:"100%", ->
+            @stop offset:"0%", style:"stop-color:rgb(255,255,255);stop-opacity:1"
+            @stop offset:"25%", style:"stop-color:rgb(100,200,250);stop-opacity:1"
+            @stop offset:"50%", style:"stop-color:rgb(0,80,240);stop-opacity:1"
+            @stop offset:"75%", style:"stop-color:rgb(0,0,180);stop-opacity:1"
+            @stop offset:"100%", style:"stop-color:rgb(0,0,0);stop-opacity:1"
+          @g id:"vaquita", ->
+                  @g transform:"translate(-18,-15)", ->
+                    @image width:"50", height:"30", "xlink:href":pixyvaquita
+        @rect x:"0", y:"0", width:"960", height:"720", fill:"url(#grad1)"
+        @g transform:"scale(2)", ->
+          @g id:"sea", transform:"translate(240,180)", ->
+            @use "xlink:href":"#vaquita"
+      @div -> @a class:"support-vaquitas", target:"_blank", href:"index.html", "Learn about Vaquitas"
+    gameObjects = null
+    @script type:"text/javascript", "gameObjects=#{JSON.stringify(gameObjects)};"
+    @coffeeScript ->
+      screen_x1 = 240
+      screen_y1 = 180
+      vaquitas = [ ]
+      vaquita =
+        update: (x, y)->
+          if !window.abcd
+            window.abcd = 1
+          vx = @vx + Math.floor(Math.random()*3) - 1
+          vy = @vy + Math.floor(Math.random()*3) - 1
+          x = @x
+          y = @y
+          rx = 0.5 * x / screen_x1
+          ry = 0.5 * y / screen_y1
+          if (s = vx * vx + vy * vy * 2) > 6
+            vx = Math.round(vx * 0.9 + rx)
+            vy = Math.round(vy * 0.9 + ry)
+          @x = x -= @vx = vx
+          @y = y -= @vy = vy
+          if vx > 0
+            @scaleX = 1
+          else if vx < 0
+            @scaleX = -1
+          @e.setAttribute "transform", "translate(#{x}, #{y}) scale(#{@scaleX}, 1)"
+      sea = document.getElementById "sea"
+      v = sea.firstChild
+
+      cloneVaquita = ->
+          n = v.cloneNode()
+          n.setAttribute "opacity", "0.5"
+          # n.setAttribute "transform", ""
+          sea.appendChild n
+          angle = Math.random() * 3.14        
+          vaquita = 
+            e: n
+            x: Math.sin(angle) * 300
+            y: Math.cos(angle) * 300
+            vx: 0
+            vy: 0
+            scaleX: 1
+            __proto__: vaquita
+          vaquita.update()
+          vaquitas.push vaquita
+
+      leftKey = 37
+      upKey = 38
+      rightKey = 39
+      downKey = 40
+      usedKeys = [ leftKey, upKey, rightKey, downKey ]
+
+      keyDownActions =
+        32: cloneVaquita
+      pressedKeys = { }
+      pressedKeys[k] = 0 for k in usedKeys
+
+      window.addEventListener 'keydown',  (event)->
+        code = event.keyCode
+        keyDownActions[ code ]?(event)
+        pressedKeys[ code ] = 1
+      window.addEventListener 'keyup',    (event)->
+        pressedKeys[ event.keyCode ] = 0
+
+      do (x = 0, y = 0)->
+        time = 0
+        # s = 1
+        # x = 0
+        # y = 0
+        scaleX = 1
+        scaleY = 1
+
+        gameFrame = ->
+          if (time & 0xff) is 0x00 and vaquitas.length < 4
+            cloneVaquita()
+          # s += 0.001
+          x -= vx = pressedKeys[leftKey] - pressedKeys[rightKey]
+          y -= pressedKeys[upKey] - pressedKeys[downKey]
+          if vx > 0
+            scaleX = 1
+          else if vx < 0
+            scaleX = -1
+          v.setAttribute("transform", "translate(#{x}, #{y}) scale(#{scaleX}, #{scaleY})")
+          vq.update() for vq in vaquitas
+          time++
+        
+        setInterval gameFrame, 40
+
+genPage()
diff --git a/index.html b/index.html
index cb5a173..efda7c3 100644
--- a/index.html
+++ b/index.html
@@ -94,4 +94,4 @@ a:hover {
   image-rendering:crisp-edges;               /* CSS4 Proposed  */
   image-rendering:pixelated;                 /* CSS4 Proposed  */
   -ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
-}</style></head><body><div class="centering page"><section class="centered"><section class="dynamic-section"><img class="banner" src="vaquita1.jpg" title="This vaquita was set free by a mysterious artist who prefers to stay anonymous ☺"><br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkWFxgsNSj8ggAABRFJREFUWMPtl39olVUYx7/nPe973/fu3nmv++G2O5tz6kY6kaI0IyVCQRBUnBGpf2RI9kdhZIXmr1AuFgtiEhKkkaZlE/oBkoWZw+iHLE1nuX6oqdvc3Ha33V/ve9/3Pec8/aGFSKClksL9/HUOnPPl+fI8PM85QJ48efLkyZMH7N9eaNjSsrW45+jM3NCg5RaOAklPho2gX1wT68/K8viWpZM+uq2NrNj22fOi7Ys1WccxArquMcZAgQgj3yHGdZhcMSmE8nHXEJsy/70ti2pWXY/uI7svvpDI2N3Hl47edcuNLPzkwoTAgbe+M3TODK+XAYBSCoZheASGrJ0NhINBTREpy7J02/V9BhJpa0xOQ3H/9sbFE6/WnLT1j0Ujfju4IZZqKzmlj0zxe+e9dujJsW9eeWbWhz3rjh07cl/PptlzboqRuU0HdpR0HJlvut3wPRu1d9f3jx5ZES4tLdWFEPJ4W1uGATBNk1/s7TUTiUSYc05CELmK4Crm9pqTz3VW1jenDd2p6TrybEQlh5eqRMCiNKTvoHX4Q+0/xBfeDwAvfXryx+59W6tyTkaPVZTnjlbM2v318geX35CRB5qOrxrX1bKyMBDi7sXDmDJ9hhMNchYdNozH4/EgAVizenXm9OnTLhGRUop1dHZanutqiigAgCmlyJZceMInJjye1aKqLKRzN9MLyzSZIqJsziflOUwQYOgcpmlCESHtQoVNxnwJsnT2quO6mV3b3918dZzatYyE7c6pBknuD/0OKxBQRQU6Kxo+XI/H48GWlpZsa2trIB6Ph2tra0M7d+6sdF1XVpSXy6qqKu65rpdKpZTveRQ2SC8rtMxIyOKlPBXwsn0gpSCVop6+BBgUIwAaCBoAO5uFBiDMhcZBjENqEtrKFCt85Z/i1K9lhGf7xpBwwLxBVVNXZygiC4w5BKAiFotGIhECACklNTQ0dNi2zTnnQcdxYFmWGhwchOe6cF2XQuGwklLSwMAAiOiSvuOACBhI22RCsDRZSnMl62RlHSdU3Xp8sGzP9ZT/NY1AOJbdfQIjKytDkUgk8/OJE4jFYmrd2rW5jRs3AgDWrl/vnjlzxhRCQCkVEEJkPc/D0NBQUEoJKSWIiDmOAyElGAC6XNdCCIBdKow0FSiqm9Z9GNWtEyfUt2Bh+Z6b1rUWLHux/5dv9kUA4NSpU9w0TTQ2NiZN09Sqq6vheZ46d+5cLpFIUDQaZbZte+3t7ZFkMqkbhsFczyMQ/R04AIjLKw6CBEOaClRy9oan+pKZsrPPjW/6L+33mhlpD44bIHwe0UBobGzsGjt2bPj8+fPo6enJdXV1+aZpqmQyaRYVFXkAeCqVCgwODuqMMeRcl67U+mtjk6mqp81t40waHhk5O1r/ZdQKjm5dUrXpls2Re945+6g6tGNz4qttpVOnTM4VFxf76XTaCBYUwM3lEIlGIaVEKplEKBRCNpuF7/soGTHCSPT3+568lA1eMEwUVtamnZK6k2cLRu8//PTE1/+XyT5t48cHSzq/nYiB8xYzghQOBZWT8xnXGHzSyBMSpWFd68tIJTxHKysu1JTvU2/aV+MXv/xrNw376YN5FUtum7fW9TCzqWVr8Pvtj8Wilp7J2tLLOWhubg7fyreWditE9y9/eKnLC94WQkjLDIDrOh5v2rv3jjMCAKMWrHijM8NkZ4ZJx5cYjwt1d/Q/Yfqu7mdmLHgiNadp//v5X1OePHlumD8BbIyUCrcmTxsAAAAASUVORK5CYII=" title="Please be our friend!" width="150" height="90" class="flip-lr pixelart"></section><section class="dynamic-section"><p>Please don't kill this baby!</p><p><a target="_blank" href="http://en.wikipedia.org/wiki/Vaquita">Vaquitas</a><span> are the smallest and rarest marine cetacean, they are mammalians like us.</span></p><p>Their population has decreased from an estimated 576 in 1997 to 97 individuals in 2014, which means that could be extinct as early as 2017</p><p>A really protected marine sanctuary is Vaquitas' only chance of survival; each year literally tens of them die in fishing nets; according to recent research, this is because of the illegal fishing of Totoaba</p><p>Vaquitas only live in a small area of the Gulf of California and share their habitat with the Totoaba</p><p class="petition"><span>Petition you can sign: </span><a href="http://www.thepetitionsite.com/569/482/287/extend-protections-for-critically-endangered-vaquita-porpoises/">Extend Protections for Critically Endangered Vaquita Porpoises</a></p><p><a href="http://www.youtube.com/watch?v=27pJ2S5RT8g">Commemorative video of a baby Vaquita</a></p></section></section></div></body></html>
\ No newline at end of file
+}</style></head><body><div class="centering page"><section class="centered"><section class="dynamic-section"><img class="banner" src="vaquita1.jpg" title="This vaquita was set free by a mysterious artist who prefers to stay anonymous ☺"><br><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3gkWFxgsNSj8ggAABRFJREFUWMPtl39olVUYx7/nPe973/fu3nmv++G2O5tz6kY6kaI0IyVCQRBUnBGpf2RI9kdhZIXmr1AuFgtiEhKkkaZlE/oBkoWZw+iHLE1nuX6oqdvc3Ha33V/ve9/3Pec8/aGFSKClksL9/HUOnPPl+fI8PM85QJ48efLkyZMH7N9eaNjSsrW45+jM3NCg5RaOAklPho2gX1wT68/K8viWpZM+uq2NrNj22fOi7Ys1WccxArquMcZAgQgj3yHGdZhcMSmE8nHXEJsy/70ti2pWXY/uI7svvpDI2N3Hl47edcuNLPzkwoTAgbe+M3TODK+XAYBSCoZheASGrJ0NhINBTREpy7J02/V9BhJpa0xOQ3H/9sbFE6/WnLT1j0Ujfju4IZZqKzmlj0zxe+e9dujJsW9eeWbWhz3rjh07cl/PptlzboqRuU0HdpR0HJlvut3wPRu1d9f3jx5ZES4tLdWFEPJ4W1uGATBNk1/s7TUTiUSYc05CELmK4Crm9pqTz3VW1jenDd2p6TrybEQlh5eqRMCiNKTvoHX4Q+0/xBfeDwAvfXryx+59W6tyTkaPVZTnjlbM2v318geX35CRB5qOrxrX1bKyMBDi7sXDmDJ9hhMNchYdNozH4/EgAVizenXm9OnTLhGRUop1dHZanutqiigAgCmlyJZceMInJjye1aKqLKRzN9MLyzSZIqJsziflOUwQYOgcpmlCESHtQoVNxnwJsnT2quO6mV3b3918dZzatYyE7c6pBknuD/0OKxBQRQU6Kxo+XI/H48GWlpZsa2trIB6Ph2tra0M7d+6sdF1XVpSXy6qqKu65rpdKpZTveRQ2SC8rtMxIyOKlPBXwsn0gpSCVop6+BBgUIwAaCBoAO5uFBiDMhcZBjENqEtrKFCt85Z/i1K9lhGf7xpBwwLxBVVNXZygiC4w5BKAiFotGIhECACklNTQ0dNi2zTnnQcdxYFmWGhwchOe6cF2XQuGwklLSwMAAiOiSvuOACBhI22RCsDRZSnMl62RlHSdU3Xp8sGzP9ZT/NY1AOJbdfQIjKytDkUgk8/OJE4jFYmrd2rW5jRs3AgDWrl/vnjlzxhRCQCkVEEJkPc/D0NBQUEoJKSWIiDmOAyElGAC6XNdCCIBdKow0FSiqm9Z9GNWtEyfUt2Bh+Z6b1rUWLHux/5dv9kUA4NSpU9w0TTQ2NiZN09Sqq6vheZ46d+5cLpFIUDQaZbZte+3t7ZFkMqkbhsFczyMQ/R04AIjLKw6CBEOaClRy9oan+pKZsrPPjW/6L+33mhlpD44bIHwe0UBobGzsGjt2bPj8+fPo6enJdXV1+aZpqmQyaRYVFXkAeCqVCgwODuqMMeRcl67U+mtjk6mqp81t40waHhk5O1r/ZdQKjm5dUrXpls2Re945+6g6tGNz4qttpVOnTM4VFxf76XTaCBYUwM3lEIlGIaVEKplEKBRCNpuF7/soGTHCSPT3+568lA1eMEwUVtamnZK6k2cLRu8//PTE1/+XyT5t48cHSzq/nYiB8xYzghQOBZWT8xnXGHzSyBMSpWFd68tIJTxHKysu1JTvU2/aV+MXv/xrNw376YN5FUtum7fW9TCzqWVr8Pvtj8Wilp7J2tLLOWhubg7fyreWditE9y9/eKnLC94WQkjLDIDrOh5v2rv3jjMCAKMWrHijM8NkZ4ZJx5cYjwt1d/Q/Yfqu7mdmLHgiNadp//v5X1OePHlumD8BbIyUCrcmTxsAAAAASUVORK5CYII=" title="Please be our friend!" width="150" height="90" class="flip-lr pixelart"></section><section class="dynamic-section"><p>Please don't kill this baby!</p><p><a target="_blank" href="http://en.wikipedia.org/wiki/Vaquita">Vaquitas</a><span> are the smallest and rarest marine cetacean, they are mammalians like us.</span></p><p>Their population has decreased from an estimated 576 in 1997 to 97 individuals in 2014, which means that could be extinct as early as 2017</p><p>A really protected marine sanctuary is Vaquitas' only chance of survival; each year literally tens of them die in fishing nets; according to recent research, this is because of the illegal fishing of Totoaba</p><p>Vaquitas only live in a small area of the Gulf of California and share their habitat with the Totoaba</p><p class="petition"><span>Petition you can sign: </span><a href="http://act.oceanconservancy.org/site/MessageViewer?dlv_id=41469&amp;em_id=30824.0&amp;"></a></p><p><a href="http://www.youtube.com/watch?v=27pJ2S5RT8g">Commemorative video of a baby Vaquita</a></p></section></section></div></body></html>
\ No newline at end of file
diff --git a/index.html.coffee b/index.html.coffee
index 404a245..d37bbcd 100644
--- a/index.html.coffee
+++ b/index.html.coffee
@@ -144,6 +144,8 @@ htmlcup.html5Page ->
         @p "Vaquitas only live in a small area of the Gulf of California and share their habitat with the Totoaba"
         @p class:"petition", ->
           @span 'Petition you can sign: '
-          @a href: 'http://www.thepetitionsite.com/569/482/287/extend-protections-for-critically-endangered-vaquita-porpoises/', "Extend Protections for Critically Endangered Vaquita Porpoises"
+          @a
+            # href: 'http://www.thepetitionsite.com/569/482/287/extend-protections-for-critically-endangered-vaquita-porpoises/', "Extend Protections for Critically Endangered Vaquita Porpoises"
+            href: 'http://act.oceanconservancy.org/site/MessageViewer?dlv_id=41469&em_id=30824.0&'
         @p ->
           @a href: 'http://www.youtube.com/watch?v=27pJ2S5RT8g', "Commemorative video of a baby Vaquita"