diff --git a/index.html b/index.html index 7d305b4f7ded2a493354b873a550818856b8b7cd..8f9694f135fc1d60184b9e51d14ed257efc4e986 100644 --- a/index.html +++ b/index.html @@ -24,7 +24,10 @@

- Try again +
+ Try again +
+
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);