stash

Gemfile

@@ -37,6 +37,8 @@ group :development do
   gem 'guard-bundler'
   gem 'guard-rails'
   gem 'guard-rspec'
+  gem 'guard-livereload', '~> 2.4', require: false
+  gem "rack-livereload"
   gem 'html2haml'
   gem 'hub', require: nil
   gem 'quiet_assets'

Gemfile.lock

@@ -140,6 +140,11 @@ GEM
     guard-ctags-bundler (1.4.0)
       guard (>= 2.0)
       guard-compat (>= 0.1.0)
+    guard-livereload (2.5.1)
+      em-websocket (~> 0.5)
+      guard (~> 2.8)
+      guard-compat (~> 1.0)
+      multi_json (~> 1.8)
     guard-rails (0.7.2)
       guard (~> 2.11)
       guard-compat (~> 1.0)
@@ -229,6 +234,8 @@ GEM
     quiet_assets (1.1.0)
       railties (>= 3.1, < 5.0)
     rack (1.5.5)
+    rack-livereload (0.3.16)
+      rack
     rack-test (0.6.3)
       rack (>= 1.0)
     rails (4.1.8)
@@ -394,6 +401,7 @@ DEPENDENCIES
   faker
   guard-bundler
   guard-ctags-bundler
+  guard-livereload (~> 2.4)
   guard-rails
   guard-rspec
   haml-lint
@@ -411,6 +419,7 @@ DEPENDENCIES
   puma
   pundit
   quiet_assets
+  rack-livereload
   rails (= 4.1.8)
   rails_layout
   rb-fchange

GuardfileServer

@@ -98,3 +98,42 @@ guard 'ctags-bundler', src_path: ["app", "lib", "spec/support"], project_file: "
   watch(/^(app|lib|spec\/support)\/.*\.rb$/)
   watch('Gemfile.lock')
 end
+
+guard 'livereload' do
+  extensions = {
+    css: :css,
+    scss: :css,
+    sass: :css,
+    js: :js,
+    coffee: :js,
+    html: :html,
+    png: :png,
+    gif: :gif,
+    jpg: :jpg,
+    jpeg: :jpeg,
+    # less: :less, # uncomment if you want LESS stylesheets done in browser
+  }
+
+  rails_view_exts = %w(erb haml slim)
+
+  # file types LiveReload may optimize refresh for
+  compiled_exts = extensions.values.uniq
+  watch(%r{public/.+\.(#{compiled_exts * '|'})})
+
+  extensions.each do |ext, type|
+    watch(%r{
+          (?:app|vendor)
+          (?:/assets/\w+/(?<path>[^.]+) # path+base without extension
+           (?<ext>\.#{ext})) # matching extension (must be first encountered)
+          (?:\.\w+|$) # other extensions
+          }x) do |m|
+      path = m[1]
+      "/assets/#{path}.#{type}"
+    end
+  end
+
+  # file needing a full reload of the page anyway
+  watch(%r{app/views/.+\.(#{rails_view_exts * '|'})$})
+  watch(%r{app/helpers/.+\.rb})
+  watch(%r{config/locales/.+\.yml})
+end

app/assets/javascripts/components/game.js.jsx

@@ -89,9 +89,12 @@ var Game = React.createClass({
       return <div>Loading...</div>;
     }
     return (
-      <div>
+      <div id="game_show_container" style={{
+        display: 'flex',
+        flexDirection: 'column'
+      }}>
         <div>Title: {this.state.data.title}</div>
-        <div>Id: {this.state.data.id}</div>
+        <div>Game Id: {this.state.data.id}</div>
         <div>Current Player: {this.state.data.controlling_player_id}</div>
         <div>Hand to beat: {this.state.data.play_to_beat_string}</div>
         <div className='player-list'>

app/assets/javascripts/components/inventory.js.jsx

@@ -12,24 +12,21 @@ var Inventory = React.createClass({
   render: function() {
     if (this.props.cards) {
       return (
-        <div>
-          Inventory:
-          <ul>
-            {this.props.cards.map(function(card) {
-              return <li key={card.id}>
-                <label>
-                  <input
-                    form={"player_controls_" + card.player_id}
-                    type="checkbox"
-                    name="player_card_ids[]"
-                    value={card.id} />
-                  {/* TODO: Don't hard code face cards here */}
-                  {card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2')} {card.suit}
-                </label>
-              </li>;
-            })}
-          </ul>
-        </div>
+        <ul style={{ display: 'flex', flexDirection: 'row', justifyContent: 'center', listStyle: 'none' }} >
+          {this.props.cards.map(function(card) {
+            return <li key={card.id} style={{ paddingLeft: '16px' }}>
+              <label>
+                <input
+                  form={"player_controls_" + card.player_id}
+                  type="checkbox"
+                  name="player_card_ids[]"
+                  value={card.id} />
+                {/* TODO: Don't hard code face cards here */}
+                {card.rank.replace('11','J').replace('12','Q').replace('13','K').replace('14','A').replace('15','2')} {card.suit}
+              </label>
+            </li>;
+          })}
+        </ul>
       );
     }
     else {

app/assets/javascripts/components/player_controls.js.jsx

@@ -26,7 +26,7 @@ var PlayerControls = React.createClass({
         onSubmit={this.handleSubmit}>
 
         <input type="hidden" value="patch" name="_method"></input>
-        <div><Inventory ref="inventory" cards={this.props.inventory} player_id={this.props.id} /></div>
+        <Inventory ref="inventory" cards={this.props.inventory} player_id={this.props.id} />
         <input id={"play_hand_button_" + this.props.player_id}
           disabled={this.props.controlling_player_id == this.props.player_id ? null : 'disabled'}
           type="submit"

app/assets/stylesheets/application.css

@@ -1,20 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
- * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any styles
- * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
- * file per style scope.
- *
- *= require_tree .
- *= require_self
- */
-
-header li {
-  display: inline-block;
-  margin-right: 12px;
-}

app/assets/stylesheets/application.css.sass

@@ -0,0 +1,91 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_tree .
+ *= require_self
+ */
+
+html
+  box-sizing: border-box
+  display: flex
+  justify-content: center
+  min-height: 100vh
+
+body
+  flex: 1 1 auto
+  display: flex
+  flex-direction: column
+  min-height: 100vmin
+  margin: 0
+  background: darkgreen
+
+a
+  text-decoration: none
+  color: white
+  outline: none
+
+h1
+  font-size: 7vmin
+
+header
+  flex: 1 1 auto
+  font-size: 3vmin
+  nav
+    padding: 1vmin
+    background: #222
+    ul
+      margin: 0
+      display: flex
+      li
+        flex: 1 1 auto
+
+#content
+  flex: 3 1 auto
+  background: darkgreen
+  display: flex
+  flex-direction: column
+  flex-wrap: wrap
+  align-items: center
+
+
+#home-headline
+  flex: 1 1 auto
+  text-align: center
+  h1
+    font-size: 10vmin
+    background: green
+    padding: 5vmin
+    margin: 0
+    border: 3px solid black
+
+#main-menu
+  flex: 1 1 auto
+  font-size: 5vmin
+  display: flex
+  flex-direction: column
+  a
+    background: green
+    margin: 4px 0 4px
+    padding: 8px
+    border: 2px solid black
+    text-align: center
+    &:hover
+      background: #bada55
+      color: black
+    &:active
+      background: (#bada55 + 100)
+
+*, *:before, *:after
+  box-sizing: inherit
+
+li
+  list-style: none

app/assets/stylesheets/game.css.sass

@@ -0,0 +1,12 @@
+// Place all the styles related to the Game#show method here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/
+
+//#game-component
+  flex-grow: 3
+  background: hotpink
+
+.players
+  display: inline-block
+  width: 40%
+

app/assets/stylesheets/games.css.sass

@@ -2,14 +2,27 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.players
-  display: inline-block
-  width: 40%
+#content
+  h1
+    flex: 1 1 auto
 
-.table
-  display: inline-block
-  width: 40%
-  vertical-align: top
+.games-container
+  flex: 1 1 auto
+  display: flex
+  flex-direction: column
+  //align-items: flex-start
+  .game
+    flex: 1 1 auto
+    font-size: 4vmin
+    line-height: 4vmin
+    margin: 0 0 2vmin 0
+    background: green
+    padding: 2vmin
 
-.debug
-  display: none
+.button
+  flex: 1 1 auto
+  text-align: center
+  font-size: 4vmin
+  padding: 2vmin 4vmin
+  background: black
+  margin-bottom: 2vmin

app/policies/game_policy.rb

@@ -0,0 +1,25 @@
+class GamePolicy
+  attr_reader :current_user, :model
+
+  def initialize(current_user, model)
+    @current_user = current_user || User.new
+    @game = model
+  end
+
+  def index?
+    @current_user.admin?
+  end
+
+  def show?
+    @current_user.admin? || @current_user == @user
+  end
+
+  def update?
+    @current_user.admin? # TODO: Allow game owner to edit || @game.owner == @current_user
+  end
+
+  def destroy?
+    return false if @current_user == @user
+    @current_user.admin?
+  end
+end

app/views/games/index.html.haml

@@ -1,21 +1,15 @@
 %h1 Listing games
 
-%table
-  %thead
-    %tr
-      %th Title
-      %th
-      %th
-      %th
-      
-  %tbody
-    - @games.each do |game|
-      %tr
-        %td= game.title
-        %td= link_to 'Show', game
-        %td= link_to 'Edit', edit_game_path(game)
-        %td= link_to 'Destroy', game, :method => :delete, :data => { :confirm => 'Are you sure?' }
+.button= link_to 'New Game', new_game_path
 
-%br
+.games-container
+  - @games.each do |game|
+    .game
+      .title= link_to game.title, game
+      .player-count= "#{game.players.count} Players"
+
+      - if policy(game).update?
+        .owner-controls
+          = link_to 'Edit', edit_game_path(game)
+          = link_to 'Destroy', game, :method => :delete, :data => { :confirm => 'Are you sure?' }
 
-= link_to 'New Game', new_game_path

app/views/games/show.html.haml

@@ -1,4 +1,4 @@
-= react_component 'Game', url: "#{game_path @game}"
+#game-component= react_component 'Game', url: "#{game_path @game}"
 
 -# TODO: Remove deprecated commented out code
 -#%p

app/views/games/show.json.jbuilder

@@ -10,7 +10,7 @@ json.winner_player_id @game.winner_player_id
 json.is_joinable @game.joinable?(current_user)
 json.is_started !@game.status.nil?
 json.is_startable @game.startable?
-json.current_user_id current_user.id
+json.current_user_id current_user.try(:id)
 
 json.players @game.players do |player|
   json.id player.id

app/views/layouts/_navigation_links.html.erb

@@ -1,17 +1,19 @@
-<li><%= link_to 'Home', root_path %></li>
-<li><%= link_to 'Games', games_path %></li>
-<li><%= link_to 'Quick Play', quick_play_path %></li>
-<% if user_signed_in? %>
-  <li><%= link_to 'Edit account', edit_user_registration_path %></li>
-  <li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
-<% else %>
-  <li><%= link_to 'Sign in', new_user_session_path %></li>
-  <li><%= link_to 'Sign up', new_user_registration_path %></li>
-<% end %>
-<% if user_signed_in? %>
-  <% if current_user.admin? %>
-    <li><%= link_to 'Admin', '/admin' %></li>
-    <li><%= link_to 'Users', users_path %></li>
-  <% end %>
-<% end %>
-<li><%= link_to 'Debug', '#showDebugTools', id: 'showDebugTools' %></li>
+<nav>
+  <ul>
+    <li><%= link_to 'Main Menu', root_path %></li>
+    <li><%= link_to 'Browse', games_path %></li>
+    <% if user_signed_in? %>
+      <li><%= link_to 'Edit account', edit_user_registration_path %></li>
+      <li><%= link_to 'Sign out', destroy_user_session_path, :method=>'delete' %></li>
+    <% else %>
+      <li><%= link_to 'Sign in', new_user_session_path %></li>
+      <li><%= link_to 'Sign up', new_user_registration_path %></li>
+    <% end %>
+    <% if user_signed_in? %>
+      <% if current_user.admin? %>
+        <li><%= link_to 'Admin', '/admin' %></li>
+        <li><%= link_to 'Users', users_path %></li>
+      <% end %>
+    <% end %>
+  </ul>
+</nav>

app/views/layouts/application.html.erb

@@ -14,7 +14,9 @@
 
   <%= render "layouts/flashmessages" %>
 
-  <%= yield %>
+  <div id="content">
+    <%= yield %>
+  </div>
 
 </body>
 </html>

app/views/visitors/index.html.erb

@@ -1,2 +0,0 @@
-<h3>Welcome</h3>
-<p><%= link_to 'Users:', users_path %> <%= User.count %> registered</p>

app/views/visitors/index.html.haml

@@ -0,0 +1,7 @@
+#home-headline
+  %h1 Thirteen <br/>Tien Len
+
+#main-menu
+  = link_to 'Play Now', '#'
+  = link_to 'Browse Tables', '#'
+  = link_to 'Tutorial', '#'

config/environments/development.rb

@@ -50,4 +50,7 @@ Rails.application.configure do
 
   # Raises error for missing translations
   # config.action_view.raise_on_missing_translations = true
+
+  # Add Rack::LiveReload to the bottom of the middleware stack with the default options.
+  config.middleware.insert_after ActionDispatch::Static, Rack::LiveReload
 end

spec/features/visitors/home_page_spec.rb

@@ -6,9 +6,11 @@ feature 'Home page' do
   # Scenario: Visit the home page
   #   Given I am a visitor
   #   When I visit the home page
-  #   Then I see 'Welcome'
+  #   Then I see the main menu
   scenario 'visit the home page' do
     visit root_path
-    expect(page).to have_content 'Welcome'
+    expect(page).to have_link 'Play Now'
+    expect(page).to have_link 'Browse Tables'
+    expect(page).to have_link 'Tutorial'
   end
 end

spec/features/visitors/quick_play_spec.rb

@@ -10,7 +10,7 @@ feature 'Quick play', :devise do
   scenario 'visitor can join a quick play game' do
     pending('#EXPECT VISITOR TO JOIN FIRST OPEN QUICK PLAY GAME')
     visit root_path
-    click_link 'Quick Play'
+    click_link 'Play Now'
     # EXPECT VISITOR TO JOIN FIRST OPEN QUICK PLAY TABLE
     expect(fail)
   end