add twitter sharing to game over screen

index.html

@@ -24,7 +24,10 @@
     <div class="game-container">
       <div class="game-message">
         <p></p>
+        <div class="lower">
           <a class="retry-button">Try again</a>
+          <div class="score-sharing"></div>
+        </div>
       </div>
 
       <div class="grid-container">

js/html_actuator.js

@@ -2,6 +2,7 @@ function HTMLActuator() {
   this.tileContainer    = document.getElementsByClassName("tile-container")[0];
   this.scoreContainer   = document.getElementsByClassName("score-container")[0];
   this.messageContainer = document.getElementsByClassName("game-message")[0];
+  this.sharingContainer = document.getElementsByClassName("score-sharing")[0];
 
   this.score = 0;
 }
@@ -28,6 +29,7 @@ HTMLActuator.prototype.actuate = function (grid, metadata) {
 };
 
 HTMLActuator.prototype.restart = function () {
+  if (ga) ga("send", "event", "game", "restart");
   this.clearMessage();
 };
 
@@ -98,8 +100,26 @@ HTMLActuator.prototype.message = function (won) {
 
   this.messageContainer.classList.add(type);
   this.messageContainer.getElementsByTagName("p")[0].textContent = message;
+
+  this.clearContainer(this.sharingContainer);
+  this.sharingContainer.appendChild(this.scoreTweetButton());
+  twttr.widgets.load();
 };
 
 HTMLActuator.prototype.clearMessage = function () {
   this.messageContainer.classList.remove("game-won", "game-over");
 };
+
+HTMLActuator.prototype.scoreTweetButton = function () {
+  var tweet = document.createElement("a");
+  tweet.classList.add("twitter-share-button");
+  tweet.setAttribute("href", "https://twitter.com/share");
+  tweet.setAttribute("data-via", "gabrielecirulli");
+  tweet.textContent = "Tweet";
+
+  var text = "I scored " + this.score + " points at 2048, a game where you " +
+             "join numbers to score high!";
+  tweet.setAttribute("data-text", text);
+
+  return tweet;
+};

style/main.css

@@ -174,6 +174,10 @@ hr {
       height: 40px;
       line-height: 42px;
       margin-top: 59px; }
+    .game-container .game-message .score-sharing {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 10px; }
     .game-container .game-message.game-won {
       background: rgba(237, 194, 46, 0.5);
       color: #f9f6f2; }

style/main.scss

@@ -192,6 +192,12 @@ hr {
       margin-top: 59px;
     }
 
+    .score-sharing {
+      display: inline-block;
+      vertical-align: middle;
+      margin-left: 10px;
+    }
+
     @include animation(fade-in 800ms ease $transition-speed * 12);
     @include animation-fill-mode(both);