Add twitter share button

app/controllers/MathSwipeController.coffee

@@ -9,6 +9,7 @@ InputSolver             = require '../services/InputSolver'
 RandomizedFitLength     = require '../services/RandomizedFitLength'
 ResetButton             = require '../services/ResetButton'
 RunningSum              = require '../services/RunningSum'
+ShareGameService        = require '../services/ShareGameService'
 SolutionService         = require '../services/SolutionService'
 Title                   = require '../services/Title'
 TrackingService         = require '../services/TrackingService'
@@ -23,7 +24,6 @@ class MathSwipeController
   constructor: ->
     @gameScene = @createGameScene()
     @symbols = @getSymbols()
-    @initialize()
     @bindNewGameButton()
     HowToPlay.createHowToPlay @isMobile
     if @isMobile().any()?
@@ -32,6 +32,8 @@ class MathSwipeController
     else
       TrackingService.desktopView()
       @cursorToPointer()
+    ShareGameService.setMessage()
+    @initialize()
 
     # # Uncomment the following line to perform general tests
     # GeneralTests.tests @board

app/services/ShareGameService.coffee

@@ -0,0 +1,8 @@
+TwitterGameService = require './TwitterGameService'
+
+class ShareGameService
+
+  @setMessage: ->
+    TwitterGameService.setTweet()
+
+module.exports = ShareGameService

app/services/TwitterGameService.coffee

@@ -0,0 +1,12 @@
+$ = require 'jquery'
+
+class TwitterGameService
+
+  @setTweet: ->
+    possible = ['Play MathSwipe with me! Try to beat my score at',
+                'Play MathSwipe with me! Try to solve my board at',
+                'Play MathSwipe with me! Solve my puzzle at']
+    text = possible[Math.floor(Math.random() * 3)]
+    $( '#tweet' ).attr( 'data-text' , text )
+
+module.exports = TwitterGameService

index.html

@@ -28,8 +28,10 @@
   </div>
   <div class="center-column">
     <div id="game-button-wrapper" class="game-button-wrapper">
-      <div id="reset-button" type="submit" class="game-btn"><p>Reset</p></div>
-      <div id="new-game-button" type="submit" class="game-btn"><p>New Game</p></div>
+      <div id="reset-button" type="submit" class="game-btn"><p class="button-text">Reset</p></div>
+      <div id="new-game-button" type="submit" class="game-btn"><p class="button-text">New Game</p></div>
+      <a id="tweet" href="https://twitter.com/share" class="twitter-share-button" data-text="Play MathSwipe with me! Connect numbered tiles to match the answers." data-size="large" data-hashtags="mathswipe">Tweet</a>
+      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
     </div>
   </div>
   <div class="center-column">

public/assets/stylesheets/GameBackground.sass

@@ -36,7 +36,7 @@ body
     font-size: 30px
 
   .game-desc-hr
-    margin: 40px 0px 20px 0px
+    margin: 10px 0px 20px 0px
 
   #how-to-play
     margin: 10px auto 10px auto
@@ -73,16 +73,17 @@ body
   margin: 10px 0px 20px 0px
 
   .game-btn
-    height: auto
+    height: 40px
+    word-wrap: break-word
     display: inline-block
     width: 40%
-    margin: 0px 10px
+    margin: 0 0 10px
     background-color: Transparent
     border-style: solid
     border-color: #a7acb0
     border-radius: 10px
 
-    p
+    .button-text
       font-size: 30px
       color: #D1857F
       margin: 0px 0px 5px 0px