Mix work

author: Michele Bini <michele.bini@gmail.com> 2014-09-28 10:37:19 (GMT)
committer: Michele Bini <michele.bini@gmail.com> 2014-09-28 10:37:19 (GMT)
commit: 4d0d08112f023a5779178399bb589988c2bcb939 (patch)
tree: d07426bbce5cd9b929f13d6ccac4c3246ef0f360
parent: ff9e0b87c97454fcf685b50c033add5806bd12e2 (diff)
7 files changed, 32 insertions, 16 deletions
diff --git a/game.html b/game.html
index 6beb722..f34a393 100644
--- a/game.html
+++ b/game.html
diff --git a/game.html.coffee b/game.html.coffee
index bfb197b..548d797 100644
--- a/game.html.coffee
+++ b/game.html.coffee
@@ -16,16 +16,19 @@
 
 htmlcup[x] = htmlcup.compileTag x for x in [ "svg", "rect", "g", "ellipse", "polygon", "line", "image", "defs", "linearGradient", "stop", "use" ]
 
-title = "V the Vaquita"
+title = "Vilma the Vaquita"
 
 fs = require 'fs'
 
-datauri = (t, x)-> "data:#{x};base64,#{new Buffer(x).toString("base64")}"
+datauri = (t, x)-> "data:#{t};base64,#{new Buffer(fs.readFileSync(x)).toString("base64")}"
+datauripng = (x)-> datauri "image/png", x
+datauriicon = (x)-> datauri "image/x-icon", x
 
-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")
+icon = datauriicon "vaquita.ico"
+pixyvaquita = datauripng "pixyvaquita_v2.png"
+frames =
+  _: pixyvaquita
+  twistleft: datauripng "pixyvaquita_v2_twistleft.png"
 
 useSvg = true
 
@@ -164,13 +167,14 @@ genPage = ->
               @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", ->
+            for k,v of frames
+              @g id:k, ->
                   @g transform:"translate(-18,-15)", ->
-                    @image width:"50", height:"30", "xlink:href":pixyvaquita
+                    @image width:"50", height:"30", "xlink:href":v
           @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"
+              @use "xlink:href":"#_"
       else
         @canvas width:"960", height:"720", ->
       @div -> @a class:"support-vaquitas", target:"_blank", href:"index.html", "Learn about Vaquitas"
diff --git a/index.html b/index.html
index df7a922..7094f6e 100644
--- a/index.html
+++ b/index.html
@@ -77,6 +77,9 @@ a:hover {
   vertical-align:middle;
   max-width:100%;
 }
+.dynamic-section.dynsec-vertical {
+  display: block;
+}
 .flip-lr {
   -moz-transform:     scaleX(-1);
   -o-transform:       scaleX(-1);
@@ -94,4 +97,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://act.oceanconservancy.org/site/MessageViewer?dlv_id=41469&amp;em_id=30824.0&amp;">Ocean Conservancy .org: Save the vaquita from extinction!</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 ☺"></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 target="_blank" href="http://act.oceanconservancy.org/site/MessageViewer?dlv_id=41469&amp;em_id=30824.0&amp;">Ocean Conservancy .org: Save the vaquita from extinction!</a></p><p><a href="http://www.youtube.com/watch?v=27pJ2S5RT8g">Commemorative video of a baby Vaquita</a></p></section><section class="dynamic-section dynsec-vertical"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAeCAYAAABuUU38AAAFWElEQVRYw+2WX0gcVxTGv7l3Zmd2drs6aHaNW7Jd88cYDaQYI1jsQ5GSh1BCAhUsNQ/JWxT6lLKExISCQkBECoW+6IMJEknaIEKQbKXJ5iFY6mKsEhOkk6qbRTe67szs7M7szvQhydKWhibEbQn1B/M2557z3e/ecy6wxRZbbLHFFv8hZ86ccYVCIe/rxkUiEXckEnFvVh3M6wZMTk7un56eHkkkEnsJIdA0DZRSuFwumKbZqSjKRHd399zL4sfHx9l4PL7TMIw5AGR4eLh0YmJi402FkFf9cXZ2tv7SpUv2zZs378fj8b2WZcE0TRDybAnTNKHr+tcOh2N2ZGTk4Iu4vr6+P22Wqqo1uVzuQSwWI4uLi5AkqfJlOdva2pj+/v7tFy5cIJviiKIort7eXlUURei6DgAwDAMOhwPZbBZPnz5FSUkJBEGAruvgOA48z8Plcj14/Pjx516vVxcEQVlZWflsx44d3clkEplMBrZtI5PJHPR4PFlK6dK5c+eSf8z76NGjytHR0eXa2tomlmUftLS0rL+RkBs3bhycn5//CQCSySSOHDkCv98Py7JAKYWu68hkMlhYWMDDhw8Rj8fhcrlg2zYMw/hZkiSNYRhKCPlAVdWCYJZlQSlFPp/v4jhOIYT8ePbs2WgikRB7enp2+ny++06nE36/v/7YsWNTb+RIOByWotHoGsuyiMViOH36NAAgn8+jo6MDtm2jv78fDMNA0zRYloV79+4hlUpBUZRnSRgGhmGgpKQEAGDbNhiGQT6fRz6fh2VZ4DgOlFIQQpDNZpFOpwEAHo8HlmXBtm2Iong1n89fDYVC3/+1TvYV7saHuVwO2WwW5eXlAACHw4HW1lbcuXMHPM/j1KlTGBoawp49exCNRtHc3AyPx4PBwUGkUinkcjmwLItkMlkQJkkSqqurwTAM5ubmkMlkYJomTNOEYRiglKK6uhqGYUCSJDyvoRXARwC+f+3LnkqlPgUAXddx9OhRiKIIlmVhWRbKysrgdrsLDk1PT0MQBFBKwXEcgsEgGOaZ6S922TAMAEB9fT14nocoimhsbIQoiuB5HoIgYNu2bdi1a1e/0+n8ZPfu3R9TSn1ra2s+TdPe6+jo+NtW/4+OpNNpORaLoaurC6ZpYnBwEMePH8fly5fR3t4OALh+/ToAgFIKy7KgqipUVUVjYyMURcHU1FTh6NTW1sLr9SKdToNhmMJXUVGBRCIBp9MJSmnHtWvXvr1y5Qr8fn9uU+ZIZ2enPT4+DgCQZRkcx2FmZgYcxxXa7vLyMu7evVvoZsFgEA0NDSCEYGNjA4QQyLIM27YLR0sQhMIMMgwDhJBveJ7/cnJy0urp6Ulv+kA8fPjwFwsLC30Mw2BoaAiBQAC6rmN0dBTr6+sQRRGlpaU4cOAATNPErVu3CgUTQlBTUwOv1wtKKTRNW2ZZNg7gt1QqtSxJ0jwh5LtcLsd7vd4Vl8uVraqqyhVlssuyLLa3t2vz8/M4f/48kskkDMMAx3EIBAJwOp3w+XyFbmOaJm7fvo2ysjJwHAfTNFFXVwdd139YXV39KhgMZgkhv3IcpzY3N2v/+hPl4sWL72ua1pvNZgcAlFNK4Xa76wghw5ZlCYqirFZWVpY8efLEcfLkybFIJAJVVV9M/4YTJ078UlFRkSnWm48pxqLhcHg/y7L3l5aWsLi4CAAIhUIMiggpxqItLS0zPp8PoiiC4zgYhoGBgQHurRMCADzPv7tv3z4cOnQI8Xh8ezgctt9KIVVVVctjY2PvpFKpMlmW12VZLqqQouP3+5m2tjbS1NREi5mHLbaQQCCA52683Y5s8X/ld5pkXmGj97LmAAAAAElFTkSuQmCC" title="Please be our friend!" width="150" height="90" class="flip-lr pixelart"><a href="game.html">Vilma the Vaquita - demo game</a><img src="data:image/png;base64,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" title="Play with us!" width="150" height="90" class="pixelart"></section></section></div></body></html>
+\ No newline at end of file
diff --git a/index.html.coffee b/index.html.coffee
index 0fab89f..b76bb1a 100644
--- a/index.html.coffee
+++ b/index.html.coffee
@@ -18,10 +18,13 @@ title = "Vaquitas need you!"
 
 fs = require 'fs'
 
-icon = "vaquita.ico"
-icon = "data:image/x-icon;base64," + (new Buffer(fs.readFileSync(icon))).toString("base64")
-pixyvaquita = "pixyvaquita.png"
-pixyvaquita = "data:image/png;base64," + (new Buffer(fs.readFileSync(pixyvaquita))).toString("base64")
+datauri = (t, x)-> "data:#{t};base64,#{new Buffer(fs.readFileSync(x)).toString("base64")}"
+datauripng = (x)-> datauri "image/png", x
+datauriicon = (x)-> datauri "image/x-icon", x
+
+icon = datauriicon "vaquita.ico"
+pixyvaquita = datauripng "pixyvaquita_v2.png"
+pixyvaquita2 = datauripng "pixyvaquita_v105_v.png"
 
 htmlcup.html5Page ->
   @head ->
@@ -108,6 +111,9 @@ htmlcup.html5Page ->
         vertical-align:middle;
         max-width:100%;
       }
+      .dynamic-section.dynsec-vertical {
+        display: block;
+      }
       .flip-lr {
         -moz-transform:     scaleX(-1);
         -o-transform:       scaleX(-1);
@@ -132,8 +138,6 @@ htmlcup.html5Page ->
      @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:pixyvaquita, title:"Please be our friend!", width:"150", height:"90", class:"flip-lr pixelart"
       @section class:"dynamic-section", ->
         @p "Please don't kill this baby!"
         @p ->
@@ -145,9 +149,14 @@ htmlcup.html5Page ->
         @p class:"petition", ->
           @span 'Petition you can sign: '
           @a
+            target:"_blank"
             # 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&',
             "Ocean Conservancy .org: Save the vaquita from extinction!"
             
         @p ->
           @a href: 'http://www.youtube.com/watch?v=27pJ2S5RT8g', "Commemorative video of a baby Vaquita"
+      @section class:"dynamic-section dynsec-vertical", ->
+        @img src:pixyvaquita, title:"Please be our friend!", width:"150", height:"90", class:"flip-lr pixelart"
+        @a href:"game.html", "Vilma the Vaquita - demo game"
+        @img src:pixyvaquita2, title:"Play with us!", width:"150", height:"90", class:"pixelart"
diff --git a/pixyvaquita_v105_v.png b/pixyvaquita_v105_v.png
new file mode 100644
index 0000000..b20fb0d
--- /dev/null
+++ b/pixyvaquita_v105_v.png
diff --git a/pixyvaquita_v2.png b/pixyvaquita_v2.png
new file mode 100644
index 0000000..6fcb5d8
--- /dev/null
+++ b/pixyvaquita_v2.png
diff --git a/pixyvaquita_v2_twistleft.png b/pixyvaquita_v2_twistleft.png
new file mode 100644
index 0000000..c02b719
--- /dev/null
+++ b/pixyvaquita_v2_twistleft.png
author	Michele Bini <michele.bini@gmail.com>	2014-09-28 10:37:19 (GMT)
committer	Michele Bini <michele.bini@gmail.com>	2014-09-28 10:37:19 (GMT)
commit	4d0d08112f023a5779178399bb589988c2bcb939 (patch)
tree	d07426bbce5cd9b929f13d6ccac4c3246ef0f360
parent	ff9e0b87c97454fcf685b50c033add5806bd12e2 (diff)