Petite séance de refactoring aujourd’hui. Tout d’abord, comme nous avons maintenant deux classes dans le fichier app/application.rb, on va les mettre dans des fichiers séparés, pour obtenir ça:

● tree
.
├── app
│   ├── application.rb
│   ├── player.rb
│   └── space_canvas.rb
├── build.js
├── Gemfile
├── Gemfile.lock
├── index.html
└── Rakefile

Le fichier application.rb est maintenant réduit à ceci:

require 'opal'
require 'opal-jquery'

require 'space_canvas'
require 'player'

canvas = SpaceCanvas.new
player = Player.new
canvas.clear_background
canvas.draw_player(player)

Le fichier player.rb contient la classe Player:

class Player
  attr_accessor :x, :y, :w, :h, :color

  def initialize
    @x = 325
    @y = 560
    @w = 50
    @h = 30
    @color = 'green'
  end
end

Quant au fichier space_canvas.rb, le voici:

class SpaceCanvas

  def initialize
    @canvas  = `document.getElementById('canvas')`
    @context = `#@canvas.getContext('2d')`
    @height  = `#@canvas.height`
    @width   = `#@canvas.width`
  end

  def clear_background
    `#@context.fillStyle = 'black'`
    `#@context.fillRect(0, 0, #@width, #@height)`
  end

  def draw_player(player)
    `#@context.fillStyle = #{player.color}`
    `#@context.fillRect(#{player.x}, #{player.y}, #{player.w}, #{player.h})`
  end
end

Les méthodes clear_background et draw_player sont trop similaires pour être laissées en l’état ! En voici un petit refactoring:

class SpaceCanvas

  def initialize
    @canvas  = `document.getElementById('canvas')`
    @context = `#@canvas.getContext('2d')`
    @height  = `#@canvas.height`
    @width   = `#@canvas.width`
  end

  def clear_background
    draw_rect(0, 0, @width, @height, 'black')
  end

  def draw_player(player)
    draw_rect(player.x, player.y, player.w, player.h, player.color)
  end

  private

  def draw_rect(x, y, w, h, color)
    `#@context.fillStyle = #{color}`
    `#@context.fillRect(#{x}, #{y}, #{w}, #{h})`
  end

end

Comme toujours, rake build pour s’assurer que ça fonctionne bien !

Demain, on verra comment faire bouger notre joueur…

À demain.