Refactor with Riot.js.

Gemfile

@@ -6,3 +6,5 @@ gem 'json'
 
 gem 'sinatra'
 gem 'pusher'
+
+gem 'puma'

Gemfile.lock

@@ -5,6 +5,8 @@ GEM
     httpclient (2.6.0.1)
     json (1.8.2)
     multi_json (1.11.0)
+    puma (2.11.2)
+      rack (>= 1.1, < 2.0)
     pusher (0.14.4)
       httpclient (~> 2.5)
       multi_json (~> 1.0)
@@ -25,5 +27,6 @@ PLATFORMS
 DEPENDENCIES
   dotenv
   json
+  puma
   pusher
   sinatra

lib/match.rb

@@ -1,25 +1,43 @@
 class Match
-  attr_reader :players
+  def initialize
-
+    @one, @two = Player.new('Player One'), Player.new('Player Two')
-  def initialize(player1, player2)
-    @players = { one: player1, two: player2 }
   end
 
-  def add_point(player)
+  def add_point(colour)
-    @players[player].add_point
+    players[colour].add_point
-    if @players[:one].has_beaten(@players[:two])
+    if @one.has_beaten(@two)
-      @players[:one].reset_score
+      reset_scores
-      @players[:two].reset_score
+      @one.add_game
-      @players[:one].add_game
+    elsif @two.has_beaten(@one)
-    elsif @players[:two].has_beaten(@players[:one])
+      reset_scores
-      @players[:one].reset_score
+      @two.add_game
-      @players[:two].reset_score
+    end
-      @players[:two].add_game
+  end
+
+  def reset_scores
+    @one.reset_score
+    @two.reset_score
+  end
+
+  def reset_games
+    @one.reset_games
+    @two.reset_games
+  end
+
+  def total_games
+    @one.games + @two.games
+  end
+
+  def players
+    if total_games.even?
+      { red: @one, blue: @two }
+    else
+      { red: @two, blue: @one }
     end
   end
 
   def scores
-    { one: @players[:one].attributes,
+    { red: players[:red].attributes,
-      two: @players[:two].attributes }
+      blue: players[:blue].attributes }
   end
 end

lib/player.rb

@@ -1,7 +1,8 @@
 class Player
-  attr_reader :score, :games
+  attr_reader :score, :games, :name
 
-  def initialize
+  def initialize(name)
+    @name = name
     @score = 0
     @games = 0
   end
@@ -26,7 +27,13 @@ class Player
     @score = 0
   end
 
+  def reset_games
+    @games = 0
+  end
+
   def attributes
-    { score: @score, games: @games }
+    { name: @name,
+      score: @score,
+      games: @games }
   end
 end

public/javascripts/main.js

@@ -0,0 +1,10 @@
+var pusher = new Pusher('57dc9c12b6e6fa97febb');
+var channel = pusher.subscribe('scores');
+
+resetScores = function () {
+  $.ajax({method: 'PUT', url: '/reset_scores', data: ''});
+}
+
+$(function() {
+  $('#reset').on('click', resetScores);
+})

public/stylesheets/main.css

@@ -0,0 +1,43 @@
+body {
+  background: black;
+  color: white;
+  font-family: "Helvetica Neue", "Arial", sans-serif;
+}
+.scores {
+  position: absolute;
+  top: 0; bottom: 2em; left: 0; right: 0;
+  display: flex;
+  flex-direction: row;
+}
+.scores div { position: relative; flex-grow: 1; }
+.scores div .score {
+  position: absolute;
+  bottom: 2rem;
+  font-weight: bold;
+  font-size: 20rem;
+}
+.scores div .games {
+  position: absolute;
+  top: 2rem;
+  font-weight: bold;
+  font-size: 5rem;
+}
+.scores div .name {
+  position: absolute;
+  top: 3rem;
+  font-size: 2rem;
+}
+#red-score { background: #b00; }
+#blue-score { background: #00b; }
+#red-score .score { right: 5rem; }
+#blue-score .score { left: 5rem; }
+#red-score .games { left: 5rem; }
+#blue-score .games { right: 5rem; }
+#red-score .name { right: 5rem; }
+#blue-score .name { left: 5rem; }
+
+.controls {
+  position: absolute;
+  bottom: 0; left: 0; right: 0;
+  height: 2rem;
+}

score_board.rb

@@ -15,25 +15,25 @@ Pusher.url = "http://#{ENV['PUSHER_KEY']}:#{ENV['PUSHER_SECRET']}@api.pusherapp.
 
 class ScoreBoard < Sinatra::Base
 
-  @@match = Match.new(Player.new, Player.new)
+  @@match = Match.new
 
   get '/' do
-    erb :index, locals: { one: @@match.players[:one],
+    erb :index, locals: { scores: @@match.scores }
-                          two: @@match.players[:two] }
   end
 
   put '/reset_scores' do
-    @@match = Match.new(Player.new, Player.new)
+    @@match.reset_scores
+    @@match.reset_games
     push_scores
   end
 
-  put '/player1_scores' do
+  put '/red_scores' do
-    @@match.add_point(:one)
+    @@match.add_point(:red)
     push_scores
   end
 
-  put '/player2_scores' do
+  put '/blue_scores' do
-    @@match.add_point(:two)
+    @@match.add_point(:blue)
     push_scores
   end
 

views/index.erb

@@ -3,91 +3,25 @@
 <head>
   <meta charset="UTF-8">
   <title>Table Tennis</title>
-  <style>
+  <link rel="stylesheet" href="/stylesheets/main.css">
-    body {
-      background: black;
-      color: white;
-      font-family: "Helvetica Neue", "Arial", sans-serif;
-    }
-    .scores {
-      position: absolute;
-      top: 0; bottom: 2em; left: 0; right: 0;
-      display: flex;
-      flex-direction: row;
-    }
-    .scores div {
-      position: relative;
-      flex-grow: 1;
-    }
-    .scores div .score {
-      position: absolute;
-      bottom: 2rem;
-      font-weight: bold;
-      font-size: 20rem;
-    }
-    .scores div .games {
-      position: absolute;
-      top: 2rem;
-      font-weight: bold;
-      font-size: 5rem;
-    }
-    #player1-score { background: #b00; }
-    #player2-score { background: #00b; }
-    #player1-score .score { right: 5rem; }
-    #player2-score .score { left: 5rem; }
-    #player1-score .games { left: 5rem; }
-    #player2-score .games { right: 5rem; }
 
-    .controls {
+  <script src="//cdnjs.cloudflare.com/ajax/libs/pusher/2.2.4/pusher.min.js"></script>
-      position: absolute;
+  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
-      bottom: 0; left: 0; right: 0;
-      height: 2rem;
-    }
-  </style>
-
-  <script src="//js.pusher.com/2.2/pusher.min.js"></script>
-  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
-
-  <script>
-    var pusher = new Pusher('57dc9c12b6e6fa97febb');
-    var channel = pusher.subscribe('scores');
-
-    channel.bind('update_scores', function(data) {
-      updateDisplay(data);
-    });
-
-    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);
-    }
-
-    resetScores = function () {
-      $.ajax({method: 'PUT',
-              url: '/reset_scores',
-              data: ''});
-    }
-
-    $(function() {
-      $('#reset').on('click', resetScores);
-    })
-  </script>
 </head>
 <body>
-  <div class="scores">
+  <scores></scores>
-    <div id="player1-score">
+
-      <span class="score"><%= one.score %></span>
+  <script src="/tags/scores.tag" type="riot/tag"></script>
-      <span class="games"><%= one.games %></span>
+  <script src="/javascripts/main.js"></script>
-    </div>
+  <script src="//cdnjs.cloudflare.com/ajax/libs/riot/2.0.15/riot+compiler.min.js"></script>
-    <div id="player2-score">
-      <span class="score"><%= two.score %></span>
-      <span class="games"><%= two.games %></span>
-    </div>
-  </div>
 
   <div class="controls">
     <button id="reset">Reset</button>
   </div>
+
+  <script>
+    riot.mount('scores', { players: <%= scores.to_json %> })
+  </script>
+
 </body>
 </html>