Initial work on adding HTTP version (using Sinatra)

cymen · Feb 15, 2012 · 4e0cf7f · 4e0cf7f
1 parent b0241cd
commit 4e0cf7f
Show file tree

Hide file tree

Showing 8 changed files with 146 additions and 0 deletions.
diff --git a/lib/html_printer.rb b/lib/html_printer.rb
@@ -0,0 +1,18 @@
+module HtmlPrinter
+  def self.print_board board, writer=Writer
+    writer.display_board board
+  end
+
+  class Writer
+    def self.display_board board, output_stream=$stdout
+      row_indexes = board.get_horizontal_row_index_sets
+      row_indexes.inject('') do |html, row_index|
+        html << "<div class='row'>"
+        (row_index.first..row_index.last).inject(html) do |row_html, index|
+          row_html << "<div class='space' id='space_#{index}'>#{board.get index}</div>"
+        end
+        html << "</div>"
+      end
+    end
+  end
+end
diff --git a/play.rb → play_console.rb b/play.rb → play_console.rb
diff --git a/play_http.rb b/play_http.rb
@@ -0,0 +1,19 @@
+$: << 'lib'
+require 'sinatra'
+require 'json'
+require 'tic_tac_toe_turn'
+require 'board'
+require 'html_printer'
+
+use Rack::Session::Pool
+include TicTacToeTurn
+
+get '/' do
+  @board = HtmlPrinter.print_board(Board.new)
+  erb :index
+end
+
+get '/jjj' do
+  content_type :json
+  { 1 => :x, 2 => :o, 3 => :x }.to_json
+end
diff --git a/public/jquery-1.7.1.min.js b/public/jquery-1.7.1.min.js
diff --git a/public/style.css b/public/style.css
@@ -0,0 +1,46 @@
+.space {
+  font-family: sans-serif;
+  font-size: 3em;
+  font-weight: bold;
+  background-color: #cdd3e9;
+  border-radius: .25em;
+  box-shadow: 2px 2px 6px #636162;
+  color: #333;
+  height: 2em; width: 2em;
+  opacity: 0.7; filter:alpha(opacity=70);
+  text-align: center;
+  float: left;
+  margin: 3px;
+}
+
+.row {
+  clear: both
+}
+
+.choosable:hover {
+  background-color: #f0f2f9; 
+  box-shadow: 1px 1px 4px #000;
+  opacity: 0.2; filter:alpha(opacity=20);
+}
+
+.x, .o { opacity: 1; filter:alpha(opacity=100); }
+
+.x {
+  background-color: #e12020!important;
+  background-image: -moz-linear-gradient(left top, #e9a6a6, #e12020);
+  background-image: -webkit-gradient(linear, left top, right bottom, from(#e9a6a6), to(#e12020));
+  /* box-shadow: 2px 2px 6px #e12020; */
+  text-shadow: #e9a6a6 2px 2px 4px, #791313 -1px -1px 3px;
+}
+
+.o {
+  background-color: #3c95e5 !important;
+  background-image: -moz-linear-gradient(left top, #c9d2f3, #3c95e5);
+  background-image: -webkit-gradient(linear, left top, right bottom, from(#c9d2f3), to(#3c95e5));
+  /* box-shadow: 2px 2px 6px #3c95e5; */
+  text-shadow: #c9d2f3 2px 2px 4px, #495586 -1px -1px 3px;
+}
+
+.brite { opacity: 1.0; filter:alpha(opacity=100); }
+.dull { opacity: 0.3; filter:alpha(opacity=30); }
+.dim { opacity: 0.1; filter:alpha(opacity=10); }
diff --git a/public/test.js b/public/test.js
@@ -0,0 +1 @@
+alert('hi')
diff --git a/test/tic_tac_toe_test.rb b/test/tic_tac_toe_test.rb
@@ -0,0 +1,41 @@
+require 'tic_tac_toe'
+require 'board'
+require 'test/unit'
+
+# tests
+class TicTacToeTest < Test::Unit::TestCase
+  def test
+
+  end
+end
+
+# mocks
+class TicTacToeTest
+  class MockTicTacToe
+    attr_accessor :times_print_start, :times_print_end,
+      :times_ask_human_x_or_o, :times_play_again
+
+    def initialize
+      self.times_print_start = 0
+      self.times_print_end = 0
+      self.times_ask_human_x_or_o = 0
+      self.times_play_again = 0
+    end
+
+    def print_start
+      self.times_print_start += 1
+    end
+
+    def print_end board
+      self.times_print_end += 1
+    end
+
+    def ask_human_x_or_o
+      self.times_ask_human_x_or_o += 1
+    end
+
+    def play_again
+      self.times_play_again += 1
+    end
+  end
+end
diff --git a/views/index.erb b/views/index.erb
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Tic-tac-toe</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+    <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
+  </head>
+  <body>
+    <h1>Tic-tac-toe</h1>
+    <div id="player_prompt">
+      Would you like to be x or o (x always goes first)?
+    </div>
+    <div id="board" style="display: none">
+      <%= @board %>
+    </div>
+  </body>
+</html>