Permalink
Browse files

adding players list to home page

  • Loading branch information...
1 parent 5ebfef5 commit 111a9318a5240272bf2a7cf6904b99f5b3885a65 @ryanb committed Dec 16, 2010
@@ -3,8 +3,8 @@ class GamesController < ApplicationController
before_filter :fetch_games, :only => [:index, :show, :other, :my, :new]
def index
- @other_games_limit = @my_games.blank? ? 8 : 4
- @other_games = @other_games.paginate(:page => 1, :per_page => @other_games_limit)
+ @users = User.where(:guest => false).paginate(:page => 1, :per_page => 7)
+ @other_games = @other_games.paginate(:page => 1, :per_page => 4)
@my_games = @my_games.paginate(:page => 1, :per_page => 4) if @my_games
end
@@ -1,4 +1,4 @@
-<div class="game">
+<div class="item game">
<%= link_to_game_thumbnail game %>
<div class="details">
<% game.profiles_with_current_first.each do |profile| %>
@@ -1,8 +1,21 @@
-<h2>My Games</h2>
-<% @my_games.each_with_index do |game, index| %>
- <% unless index.zero? %>
- <div class="game_divider"></div>
+<div id="my_games">
+ <h2>My Games <%= link_to "New Game", new_game_path(:board_size => 9) %></h2>
+ <% if @my_games.blank? %>
+ <div class="no_games">
+ <div class="details">
+ <strong>You do not have any games yet.</strong><br />
+ <%= link_to "Try a quick game", new_game_path(:board_size => 9) %>
+ or <%= link_to "watch a video tour", "http://media.railscasts.com/videos/govsgo.mov" %>.
+ </div>
+ <a href="http://media.railscasts.com/videos/govsgo.mov"><%= link_to image_tag("screencast.png", :size => "259x278", :alt => "Watch the Screencast"), "http://media.railscasts.com/videos/govsgo.mov", :class => "screencast" %></a>
+ </div>
+ <% else %>
+ <% @my_games.each_with_index do |game, index| %>
+ <% unless index.zero? %>
+ <div class="game_divider"></div>
+ <% end %>
+ <%= render game %>
+ <% end %>
+ <%= render "pagination", :games => @my_games, :game_type => "my" %>
<% end %>
- <%= render game %>
-<% end %>
-<%= render "pagination", :games => @my_games, :game_type => "my" %>
+</div>
@@ -1,8 +1,10 @@
-<h2>Watch a Game</h2>
-<% @other_games.each_with_index do |game, index| %>
- <% unless index.zero? %>
- <div class="game_divider"></div>
+<div id="other_games">
+ <h2>Watch a Game</h2>
+ <% @other_games.each_with_index do |game, index| %>
+ <% unless index.zero? %>
+ <div class="game_divider"></div>
+ <% end %>
+ <%= render game %>
<% end %>
- <%= render game %>
-<% end %>
-<%= render "pagination", :games => @other_games, :game_type => "other" %>
+ <%= render "pagination", :games => @other_games, :game_type => "other" %>
+</div>
@@ -1,10 +1,10 @@
<div id="side">
- <% unless @my_games.blank? %>
- <div id="my_games" class="games">
- <%= render "my_games" %>
- </div>
- <% end %>
- <div id="other_games" class="games">
- <%= render "other_games" %>
- </div>
- </div>
+ <% unless @my_games.blank? %>
+ <div class="column">
+ <%= render "my_games" %>
+ </div>
+ <% end %>
+ <div class="column">
+ <%= render "other_games" %>
+ </div>
+</div>
@@ -9,25 +9,34 @@
<p>We invite you to try a game against the computer or online with other players.</p>
</div>
- <div id="game_actions">
- <div id="play">
- <%= link_to image_tag("layout/right_triangle.png", :size => "14x23") + " Click to Try a Game", new_game_path(:board_size => 9), :id => "click_to_play" %>
- <div id="screencast">
- <p>or watch a screencast</p>
- <p><a href="http://media.railscasts.com/videos/govsgo.mov"><%= image_tag "screencast.png", :size => "259x278", :alt => "Watch the Screencast" %></a></p>
+ <div class="columns">
+ <div class="column">
+ <div class="column_padding">
+ <%= render "my_games" %>
</div>
</div>
-
- <div id="games"<%= " class='full'" if @other_games_limit == 8 %>>
- <div id="other_games" class="games">
+ <div class="column">
+ <div class="column_padding">
<%= render "other_games" %>
</div>
- <% unless @my_games.blank? %>
- <div id="my_games" class="games">
- <%= render "my_games" %>
+ </div>
+ <div class="column">
+ <div class="column_padding">
+ <h2>Looking for Games</h2>
+ <% @users.each_with_index do |user, index| %>
+ <% unless index.zero? %>
+ <div class="user_divider"></div>
+ <% end %>
+ <div class="item user">
+ <%= avatar_image_tag(user) %>
+ <div class="details">
+ <%= user.username %> <%= online_status(user) %>
+ </div>
+ <%= link_to image_tag("game/go_button.png"), user, :size => "46x31", :class => "go_button" %>
+ </div>
+ <% end %>
</div>
- <% end %>
- <div class="clear"></div>
</div>
+ <div class="clear"></div>
</div>
</div>
@@ -1 +1 @@
-$("#my_games").html("<%= escape_javascript(render("my_games")) %>");
+$("#my_games").replaceWith("<%= escape_javascript(render("my_games")) %>");
@@ -1 +1 @@
-$("#other_games").html("<%= escape_javascript(render("other_games")) %>");
+$("#other_games").replaceWith("<%= escape_javascript(render("other_games")) %>");
@@ -5,6 +5,7 @@
<h2>Go Resources</h2>
<p>Use these links to find everything you want to know about Go.</p>
<ul>
+ <li><a href="http://media.railscasts.com/videos/govsgo.mov">Go vs Go Screencast</a></li>
<li><a href="http://en.wikipedia.org/wiki/Go_(game)">About Go</a></li>
<li><a href="http://playgo.to/iwtg/en/">Interactive Go Tutorial</a></li>
<li><a href="http://www.goproblems.com/">Go Problems</a></li>
@@ -167,7 +167,7 @@ a {
background: #F5F1F9 url(/images/layout/three_stones.png) top right no-repeat;
}
-#container h2, #container h3 {
+h2, h3 {
color: #979797;
}
@@ -240,46 +240,45 @@ form label.inline {
/*** Games ***/
-.games .game {
+.column .game {
position: relative;
- width: 300px;
height: 80px;
}
-.games .game .thumbnail {
+.column .game .thumbnail {
position: absolute;
width: 80px;
height: 80px;
display: block;
}
-.games .game .details {
+.column .game .details {
position: absolute;
top: 8px;
left: 92px;
}
-.games .game .player {
+.column .game .player {
padding-top: 8px;
padding-left: 22px;
}
-.games .game .black {
+.column .game .black {
background: url(/images/game/small_black_stone.png) no-repeat 9px left;
}
-.games .game .white {
+.column .game .white {
background: url(/images/game/small_white_stone.png) no-repeat 9px left;
}
-.games .game .status {
+.column .game .status {
font-size: 10px;
color: #888;
padding-left: 22px;
padding-top: 2px;
}
-.games .game .go_button {
+.column .game .go_button {
position: absolute;
right: 15px;
top: 25px;
@@ -489,46 +489,58 @@ body {
top: 0px;
}
-.games {
+.column {
margin-bottom: 40px;
+ width: 300px;
}
-.games .game {
+.column .game {
background-image: url(/images/game/clear_white_overlay.png);
color: #FFF;
}
-.games .game .status {
+.column .game .status {
color: #CCC;
}
-.games .game_divider {
+.column .game_divider {
background-image: url(/images/game/solid_white_overlay.png);
height: 6px;
}
-#game .games h2 {
- color: #FFF;
- text-align: center;
- margin-top: 10px;
- margin-bottom: 8px;
- font-size: 17px;
- font-weight: normal;
- background-color: #0D1216;
- margin: 0;
- padding: 8px 0;
- font-weight: bold;
+.column h2 {
font-size: 14px;
+ background-color: #0D1216;
color: #E3E3E3;
+ padding: 8px 10px;
+ margin: 0;
+ position: relative;
+}
+
+.column h2 a {
+ position: absolute;
+ display: block;
+ right: 10px;
+ top: 6px;
+ font-size: 10px;
+ text-decoration: none;
+ padding: 4px 10px 5px 10px;
+ -moz-border-radius: 5px;
+ -webkit-border-radius: 5px;
+ color: #FFF;
+ background: #D3D3D3;
+ background: -webkit-gradient(linear, left top, left bottom, from(#6E6E6E), to(#323232));
+ background: -moz-linear-gradient(top, #6E6E6E, #323232);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6E6E6E', endColorstr='#323232');
}
-.games .pagination {
+.column .pagination {
margin: 10px 0;
text-align: center;
color: #DDD;
}
-.games .pagination a {
+.column .pagination a {
color: #DDD;
text-decoration: none;
background-color: #000;
@@ -539,7 +551,7 @@ body {
-webkit-border-radius: 4px;
}
-.games .pagination a:hover {
+.column .pagination a:hover {
color: #FFF;
background-color: #444;
}
Oops, something went wrong.

0 comments on commit 111a931

Please sign in to comment.