polish up changes to include tutorial

.gitignore

@@ -15,6 +15,7 @@
 /examples/example.js
 /examples/pong/pong.js
 /examples/mario/mario.js
+/examples/tutorial/tutorial.js
 
 ## Specific to RubyMotion:
 .dat*

README.md

@@ -9,22 +9,28 @@
 
 Ruby Web Game library on top of Opal
 
-    gem install dare
+## Installation
+
+```bash
+$ gem install dare
+```
 
 and then
 
-    > dare new gamename
-        create  gamename/Gemfile
-        create  gamename/Rakefile
-        create  gamename/gamename.rb
-        create  gamename/gamename.html
-    > cd gamename
-    gamename> rake build
-    gamename>
+```bash
+$ dare new gamename
+    create  gamename/Gemfile
+    create  gamename/Rakefile
+    create  gamename/gamename.rb
+    create  gamename/gamename.html
+$ cd gamename
+gamename$ rake build
+gamename$
+```
 
 Which will create a game.js file and an game.html file.  Open game.html in your favorite browser, and play your game!
 
-Of course, your game doesn't *do* anything yet.
+## Usage
 
 Open up game.rb and add a rectangle to draw every frame:
 
@@ -41,17 +47,20 @@ Save it, run `rake build` again, and refresh your game.html!  There's a red squa
 
 Just keep in mind the "change ruby code" => "rake build" => "refresh browser" development cycle.  This can be shortened to "change ruby code" => "refresh browser" if you set up guard, but I'll save that for the future.  If you already know how, feel free to set that up!
 
-Keyboard and Mouse input
+### Keyboard and Mouse input
 
 You can respond to user input with a couple of helper methods
 Change just a few lines in your app.rb file
 
 ```ruby
 class Game < Dare::Window
+
   def initialize
     super width: 800, height: 600, border: true
     #lets add an instance variable to store where our box is
     @x = 10
+  end
+
   def draw
     # if the right arrow is being held down, add 5 to the position
     if button_down? Dare::KbRight
@@ -64,13 +73,54 @@ class Game < Dare::Window
     #be sure to set the x position to @x in the draw_rect method!
     draw_rect(top_left: [@x,0], width: 50, height: 50, color: 'red')
   end
+
 end
 ```
 
 Now `rake build`, refresh the browser, and voila!  You can press the right arrown on your keyboard, and the box will move to the right!
 
-TODO:
+### Images and Sound
+
+Adding images and sound is straightforward:
+
+
+```ruby
+class Game < Dare::Window
+
+  def initialize
+    super width: 800, height: 600, border: true
+    @meow = Dare::Sound.new('meow.mp3', volume: 0.5)
+    @cat_picture = Dare::Image.new('cat_picture.jpg')
+    @x = 10
+  end
+
+  def draw
+    if button_down? Dare::KbRight
+      @x += 5
+    end
+    if @x > 600
+      @x = 10
+    end
+    @cat_picture.draw(@x, 20)
+  end
+
+  def update
+    if @x > 500
+      @meow.play
+    end
+  end
+
+end
+```
+
+Now if you have a meow.mp3 file and a cat_picture.jpg file in the same directory as your html file, they will get loaded and played just like that!
+
+## More
+
+To see more, go follow the [tutorial in the wiki](https://github.com/nicklink483/dare/wiki/Ruby-Tutorial)!  I'm constantly adding new features, so be sure to check back often!
+
+And go make a game!
 
-1. documentation
+## Attribution
 
 Huge shoutout to jlnr for his [Gosu](https://github.com/jlnr/gosu) gem which fueled a major part of this API.  Go check out his work!

bin/dare

@@ -6,14 +6,14 @@ class DareCLI < Thor
   desc "new", "creates a new app"
   def new(app_name)
     add_file("#{app_name}/Gemfile") do
-      "gem 'dare', '0.1.0'
+      "gem 'dare', '0.1.3'
 gem 'opal', '0.7.0beta3'
 gem 'opal-jquery', '0.3.0beta1'"
     end
     add_file "#{app_name}/Rakefile" do
 "desc \"Build #{app_name}.js\"
 task :build do
-  gem 'dare', '0.1.0'
+  gem 'dare', '0.1.3'
   gem 'opal', '0.7.0beta3'
   gem 'opal-jquery', '0.3.0beta1'
   require 'opal'
@@ -42,11 +42,11 @@ class #{app_name[0].upcase + app_name[1..-1]} < Dare::Window
   end
 
   def draw
-    #code that runs every frame
+    #code that draws every frame
   end
 
   def update
-    #code that runs every frame
+    #code that runs every update_interval
   end
 
 end

dare.gemspec

@@ -6,12 +6,12 @@ require 'bundler'
 Gem::Specification.new do |spec|
 
   spec.name = 'dare'
-  spec.version = '0.1.1'
-  spec.date = '2014-12-11'
+  spec.version = '0.1.3'
+  spec.date = '2014-12-17'
   spec.summary = 'Ruby 2D Game library on top of Opal'
   spec.authors = ["Dominic Muller"]
   spec.email = 'nicklink483@gmail.com'
-  spec.files = Dir['bin/dare', 'lib/dare/*.rb', 'lib/*.rb']
+  spec.files = Dir['bin/dare', 'lib/dare/*.rb', 'lib/*.rb', 'examples/tutorial/*/**']
   spec.executables = ["dare"]
   spec.require_paths = ["lib"]
 

examples/pong/Rakefile

@@ -1,10 +1,11 @@
-gem 'opal', '0.6.3'
-require 'opal'
-require 'opal-jquery'
-
 desc "Build pong.js"
 task :build do
+  gem 'opal', '0.7.0beta3'
+  gem 'opal-jquery', '0.3.0beta1'
+  require 'opal'
+  require 'opal-jquery'
   Opal::Processor.source_map_enabled = false
+  Opal::Processor.inline_operators_enabled = true
   env = Sprockets::Environment.new
   Opal.paths.each do |path|
     env.append_path path

examples/pong/pong.html

@@ -2,7 +2,6 @@
 <html>
   <head>
     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
-    <script src="http://cdn.opalrb.org/opal/0.6.3/opal.min.js"></script>
   </head>
   <body>
     <script src="pong.js"></script>

examples/pong/pong.rb

@@ -57,8 +57,10 @@ def update
       @angle = (180.0-@angle)
       @game.boops[:paddle].play
     end
-    @x += Dare.offset_x(@angle, @speed)
-    @y += Dare.offset_y(@angle, @speed)
+    travel_distance = @speed*(Dare.ms-@birth)/16.666666
+    @x += Dare.offset_x(@angle, travel_distance)
+    @y += Dare.offset_y(@angle, travel_distance)
+    @birth = Dare.ms
   end
 
   def check_bounds
@@ -103,7 +105,8 @@ def reset!
     @y = Game::HEIGHT/2.0+5
     @angle = 90.0*rand - 45.0
     @angle = @angle+180.0 if rand > 0.5
-    @speed = 6.0
+    @birth = Dare.ms
+    @speed = 10.0
   end
 
 end
@@ -123,9 +126,9 @@ def initialize
     @paddles[0] = Paddle.new(self, :left)
     @paddles[1] = Paddle.new(self, :right)
     @boops = {}
-    @boops[:paddle] = Dare::Sound.new('assets/pong_bounce.mp3', 0.3)
-    @boops[:wall] = Dare::Sound.new('assets/wall_bounce.mp3', 0.3)
-    @score_font = Dare::Font.new(self)
+    @boops[:paddle] = Dare::Sound.new('assets/pong_bounce.mp3', volume: 0.3)
+    @boops[:wall] = Dare::Sound.new('assets/wall_bounce.mp3', volume: 0.3)
+    @score_font = Dare::Font.new
     @score = 10
   end
 

examples/tutorial/Gemfile

@@ -0,0 +1,3 @@
+gem 'dare', '0.1.2'
+gem 'opal', '0.7.0beta3'
+gem 'opal-jquery', '0.3.0beta1'

examples/tutorial/Rakefile

@@ -0,0 +1,20 @@
+desc "Build tutorial.js"
+task :build do
+  gem 'dare', '0.1.2'
+  gem 'opal', '0.7.0beta3'
+  gem 'opal-jquery', '0.3.0beta1'
+  require 'opal'
+  require 'opal-jquery'
+  Opal::Processor.source_map_enabled = false
+  Opal::Processor.inline_operators_enabled = true
+  env = Sprockets::Environment.new
+  Opal.paths.each do |path|
+    env.append_path path
+  end
+  env.append_path "."
+  env.append_path `bundle show dare`.chomp + '/lib'
+
+  File.open("tutorial.js", "w+") do |out|
+    out << env["tutorial"].to_s
+  end
+end

examples/tutorial/tutorial.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title id="pageTitle"></title>
+    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
+    <!-- Will add this back when 0.7.0 is released -->
+    <!-- <script src="http://cdn.opalrb.org/opal/0.7.0/opal.min.js"></script> -->
+  </head>
+  <body>
+    <script src="appp.js"></script>
+  </body>
+</html>

examples/tutorial/tutorial.rb

@@ -0,0 +1,120 @@
+require 'dare'
+
+class Star
+  attr_reader :x, :y
+
+  def initialize(animation)
+    @animation = animation
+    @creation_time = Dare.ms
+    @x = rand 640
+    @y = rand 480
+  end
+
+  def draw
+    img = @animation[((Dare.ms-@creation_time)/100).to_i % @animation.size]
+    img.draw_rot(@x, @y)
+  end
+
+  def update
+  end
+
+end
+
+class Player
+
+  def initialize
+    @image = Dare::Image.new('assets/Starfighter.png')
+    @grab_star_beep = Dare::Sound.new('assets/Beep.wav', overlap: 10)
+    @x = @y = @vel_x = @vel_y = 0.0
+    @angle = 90.0
+    @score = 0
+  end
+
+  def warp(x, y)
+    @x, @y = x, y
+  end
+
+  def turn_left
+    @angle += 4.5
+  end
+
+  def turn_right
+    @angle -= 4.5
+  end
+
+  def accelerate
+    @vel_x += Dare.offset_x(@angle, 0.5)
+    @vel_y += Dare.offset_y(@angle, 0.5)
+  end
+
+  def move
+    @x += @vel_x
+    @y += @vel_y
+    @x %= 640
+    @y %= 480
+
+    @vel_x *= 0.95
+    @vel_y *= 0.95
+  end
+
+  def draw
+    @image.draw_rot(@x, @y, @angle)
+  end
+
+  def score
+    @score
+  end
+
+  def collect_stars(stars)
+    if stars.reject! {|star| Dare.distance(@x, @y, star.x, star.y) < 35 }
+      @score += 1
+      @grab_star_beep.play
+    end
+  end
+end
+
+class Game < Dare::Window
+
+  def initialize
+    super width: 640, height: 480, border: true
+    self.caption = "Dare Tutorial Game"
+
+    @background_image = Dare::Image.new('assets/Space.png')
+    @player = Player.new
+    @player.warp 320, 240
+
+    @star_animation = Dare::Image.load_tiles('assets/Star.png', width: 25)
+    @stars = []
+
+    @font = Dare::Font.new(font: "Arial", size: 20, color: 'yellow')
+  end
+
+  def draw
+    @background_image.draw
+    @player.draw
+    @stars.each(&:draw)
+    @font.draw("Score: #{@player.score}", 20, 20)
+  end
+
+  def update
+    if button_down? Dare::KbLeft
+      @player.turn_left
+    end
+    if button_down? Dare::KbRight
+      @player.turn_right
+    end
+    if button_down? Dare::KbUp
+      @player.accelerate
+    end
+    @stars.each(&:update)
+    @player.move
+    @player.collect_stars(@stars)
+
+    if rand(100) < 4 and @stars.size < 25
+      @stars << Star.new(@star_animation)
+    end
+  end
+
+end
+
+Game.new.run!