Move state server side.

Gemfile

@@ -2,5 +2,7 @@ source 'https://rubygems.org'
 
 gem 'dotenv'
 
+gem 'json'
+
 gem 'sinatra'
 gem 'pusher'

Gemfile.lock

@@ -3,6 +3,7 @@ GEM
   specs:
     dotenv (2.0.1)
     httpclient (2.6.0.1)
+    json (1.8.2)
     multi_json (1.11.0)
     pusher (0.14.4)
       httpclient (~> 2.5)
@@ -23,5 +24,6 @@ PLATFORMS
 
 DEPENDENCIES
   dotenv
+  json
   pusher
   sinatra

config.ru

@@ -1,2 +1,6 @@
-require './scores'
-run Sinatra::Application
+require 'bundler'
+
+Bundler.setup
+require './score_board'
+
+run ScoreBoard

lib/match.rb

@@ -0,0 +1,16 @@
+class Match
+  attr_reader :players
+
+  def initialize(player1, player2)
+    @players = { one: player1, two: player2 }
+  end
+
+  def add_point(player)
+    @players[player].add_point
+  end
+
+  def scores
+    { one: @players[:one].attributes,
+      two: @players[:two].attributes }
+  end
+end

lib/player.rb

@@ -0,0 +1,24 @@
+class Player
+  attr_reader :score, :games
+
+  def initialize
+    @score = 0
+    @games = 0
+  end
+
+  def has_beaten(player)
+    @score > 10 && @score > player.score + 1
+  end
+
+  def add_point
+    @score += 1
+  end
+
+  def undo_point
+    @score -= 1
+  end
+
+  def attributes
+    { score: @score, games: @games }
+  end
+end

score_board.rb

@@ -0,0 +1,43 @@
+#!/usr/bin/env ruby
+
+require 'dotenv'
+Dotenv.load
+
+require 'json'
+
+require 'sinatra'
+require 'pusher'
+
+require './lib/match'
+require './lib/player'
+
+Pusher.url = "http://#{ENV['PUSHER_KEY']}:#{ENV['PUSHER_SECRET']}@api.pusherapp.com/apps/#{ENV['PUSHER_APP']}"
+
+class ScoreBoard < Sinatra::Base
+
+  @@match = Match.new(Player.new, Player.new)
+
+  get '/' do
+    erb :index, locals: { one: @@match.players[:one],
+                          two: @@match.players[:two] }
+  end
+
+  put '/player1_scores' do
+    @@match.add_point(:one)
+    push_scores
+  end
+
+  put '/player2_scores' do
+    @@match.add_point(:two)
+    push_scores
+  end
+
+  get '/scores' do
+    JSON @@match.scores
+  end
+
+  def push_scores
+    Pusher['scores'].trigger('update_scores', @@match.scores.to_json)
+  end
+
+end

scores.rb

@@ -1,25 +0,0 @@
-#!/usr/bin/env ruby
-
-require 'dotenv'
-Dotenv.load
-
-require 'sinatra'
-require 'pusher'
-
-Pusher.url = "http://#{ENV['PUSHER_KEY']}:#{ENV['PUSHER_SECRET']}@api.pusherapp.com/apps/#{ENV['PUSHER_APP']}"
-
-get '/' do
-  erb :index
-end
-
-put '/player1_scores' do
-  Pusher['scores'].trigger('player1_scores', {
-    message: 'Player 1 scores'
-  })
-end
-
-put '/player2_scores' do
-  Pusher['scores'].trigger('player2_scores', {
-    message: 'Player 2 scores'
-  })
-end

views/index.erb

@@ -46,50 +46,38 @@
     var pusher = new Pusher('57dc9c12b6e6fa97febb');
     var channel = pusher.subscribe('scores');
 
-    var scores = { player1: 0, player2: 0 }
-    var games = { player1: 0, player2: 0 }
-
-    channel.bind('player1_scores', function(data) {
-      scores.player1++;
-      updateScores();
-    });
-    channel.bind('player2_scores', function(data) {
-      scores.player2++;
-      updateScores();
+    channel.bind('update_scores', function(data) {
+      updateDisplay(data);
     });
 
-    updateScores = function () {
-      updateDisplay();
+    updateDisplay = function (data) {
+      $('#player1-score .score').text(data.one.score);
+      $('#player2-score .score').text(data.two.score);
+      $('#player1-score .games').text(data.one.games);
+      $('#player2-score .games').text(data.two.games);
     }
 
-    updateDisplay = function () {
-      $('#player1-score .score').text(scores.player1);
-      $('#player2-score .score').text(scores.player2);
-      $('#player1-score .games').text(games.player1);
-      $('#player2-score .games').text(games.player2);
-    }
-
-    resetScores = function () {
-      scores = { player1: 0, player2: 0 }
-      games = { player1: 0, player2: 0 }
+    reset = function () {
+      resetScores();
+      resetGames();
       updateScores();
     }
 
     $(function() {
       updateScores(scores);
-      $('#reset').on('click', resetScores);
+      $('#reset').on('click', reset);
     })
   </script>
 </head>
 <body>
   <div class="scores">
     <div id="player1-score">
-      <span class="score"></span>
-      <span class="games"></span>
+      <span class="score"><%= one.score %></span>
+      <span class="games"><%= one.games %></span>
     </div>
     <div id="player2-score">
-      <span class="score"></span>
-      <span class="games"></span>
+      <span class="score"><%= two.score %></span>
+      <span class="games"><%= two.games %></span>
     </div>
   </div>