diff --git a/index.html b/index.html
index 7d305b4f7ded2a493354b873a550818856b8b7cd..8f9694f135fc1d60184b9e51d14ed257efc4e986 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,10 @@
diff --git a/js/html_actuator.js b/js/html_actuator.js
index 28db764ac6278fd15c6a675dd0e0db2590d230f3..80fc7898c87bde5e5dff137d9c87e77958882b2b 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 7c3ead04fd105ac126ffc4555dde390036b562f0..93f30c80dc5792857a32d8974805866cc5d13d8d 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 ecf9017087ec0d5ae7feadcea93178b0c6e47716..746ce7ce10b7d02083252ae1ae40bae4bb595349 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);