From 06fa37b0ae1d4c2e5ca45f4731950a8a6a35ec6d Mon Sep 17 00:00:00 2001
From: Gabriele Cirulli <gabrycir@gmail.com>
Date: Mon, 10 Mar 2014 12:09:35 +0100
Subject: [PATCH] add twitter sharing to game over screen

---
 index.html          |  5 ++++-
 js/html_actuator.js | 20 ++++++++++++++++++++
 style/main.css      |  4 ++++
 style/main.scss     |  6 ++++++
 4 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 7d305b4..8f9694f 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,10 @@
     <div class="game-container">
       <div class="game-message">
         <p></p>
-        <a class="retry-button">Try again</a>
+        <div class="lower">
+          <a class="retry-button">Try again</a>
+          <div class="score-sharing"></div>
+        </div>
       </div>
 
       <div class="grid-container">
diff --git a/js/html_actuator.js b/js/html_actuator.js
index 28db764..80fc789 100644
--- a/js/html_actuator.js
+++ b/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;
+};
diff --git a/style/main.css b/style/main.css
index 7c3ead0..93f30c8 100644
--- a/style/main.css
+++ b/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; }
diff --git a/style/main.scss b/style/main.scss
index ecf9017..746ce7c 100644
--- a/style/main.scss
+++ b/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);
 
-- 
GitLab