Fix up login on the homepage a bit. still less than optimal.

client/js/gamebrowser.js

@@ -0,0 +1,21 @@
+"use strict";
+
+window.onload = function() {
+    window.userID = parseInt($.cookie("user"));
+
+    if (!window.userID) {
+        nullActionButtons();
+        displayLoginPrompt();
+    }
+}
+
+function nullActionButtons() {
+
+}
+
+function displayLoginPrompt() {
+    $(".alert-message").removeClass("invis");
+    $(".alert-message").alert();
+    $("#login-button").removeClass("invis");
+    $("#create-game-button").addClass("invis");
+}

client/lib/bootstrap-alerts.js

@@ -0,0 +1,113 @@
+/* ==========================================================
+ * bootstrap-alerts.js v1.4.0
+ * http://twitter.github.com/bootstrap/javascript.html#alerts
+ * ==========================================================
+ * Copyright 2011 Twitter, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ========================================================== */
+
+
+!function( $ ){
+
+  "use strict"
+
+  /* CSS TRANSITION SUPPORT (https://gist.github.com/373874)
+   * ======================================================= */
+
+   var transitionEnd
+
+   $(document).ready(function () {
+
+     $.support.transition = (function () {
+       var thisBody = document.body || document.documentElement
+         , thisStyle = thisBody.style
+         , support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined
+       return support
+     })()
+
+     // set CSS transition event type
+     if ( $.support.transition ) {
+       transitionEnd = "TransitionEnd"
+       if ( $.browser.webkit ) {
+        transitionEnd = "webkitTransitionEnd"
+       } else if ( $.browser.mozilla ) {
+        transitionEnd = "transitionend"
+       } else if ( $.browser.opera ) {
+        transitionEnd = "oTransitionEnd"
+       }
+     }
+
+   })
+
+ /* ALERT CLASS DEFINITION
+  * ====================== */
+
+  var Alert = function ( content, options ) {
+    this.settings = $.extend({}, $.fn.alert.defaults, options)
+    this.$element = $(content)
+      .delegate(this.settings.selector, 'click', this.close)
+  }
+
+  Alert.prototype = {
+
+    close: function (e) {
+      var $element = $(this).parent('.alert-message')
+
+      e && e.preventDefault()
+      $element.removeClass('in')
+
+      function removeElement () {
+        $element.remove()
+      }
+
+      $.support.transition && $element.hasClass('fade') ?
+        $element.bind(transitionEnd, removeElement) :
+        removeElement()
+    }
+
+  }
+
+
+ /* ALERT PLUGIN DEFINITION
+  * ======================= */
+
+  $.fn.alert = function ( options ) {
+
+    if ( options === true ) {
+      return this.data('alert')
+    }
+
+    return this.each(function () {
+      var $this = $(this)
+
+      if ( typeof options == 'string' ) {
+        return $this.data('alert')[options]()
+      }
+
+      $(this).data('alert', new Alert( this, options ))
+
+    })
+  }
+
+  $.fn.alert.defaults = {
+    selector: '.close'
+  }
+
+  $(document).ready(function () {
+    new Alert($('body'), {
+      selector: '.alert-message[data-alert] .close'
+    })
+  })
+
+}( window.jQuery || window.ender );

client/style/join.css

@@ -7,7 +7,7 @@
     font: bold 20px sans-serif;
 }
 
-#float-right-link {
+.right {
     float: right;
     margin: 5px;
 }
@@ -23,4 +23,8 @@
 
 #header {
     margin: 20px;
+}
+
+.invis {
+    display: none;
 }

client/templates/index.html

@@ -2,6 +2,8 @@
 <script src="lib/jquery-1.7.1.min.js"></script>
 <script src="lib/jquery.cookie.js"></script>
 <script src="lib/jquery.tablesorter.min.js"></script>
+<script type="text/javascript" src="lib/bootstrap-alerts.js"></script>
+<script type="text/javascript" src="js/gamebrowser.js"></script>
 
 <link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">
 <link rel="stylesheet" type="text/css" href="style/main.css" />
@@ -21,16 +23,14 @@ <h1>Welcome to Catan!</h1>
 </div>
 
 <div id="table-div">
-  {% if request.cookies.get("user") %}
-  <a id = "float-right-link" href="/create_game" class="btn primary">New Game</a>
-  {% else %}
-  <div class="alert-message error">
-    <p>
-      <center><strong>Oh No!</strong> You'll need to log in before you can play any games.</center>
-    </p>
+
+  <div id="login-message-div" class="alert-message error invis">
+    <a class="close" href="#">×</a>
+    <p><strong>Oh Noes!</strong> You need to log in before you can start playing.</p>
   </div>
-  <a id = "float-right-link" href="/login" class="btn primary">Log In</a>
-  {% endif %}
+
+  <a id="create-game-button" href="/create_game" class="btn primary right">New Game</a>
+  <a id="login-button" href="/login" class="btn primary right invis">Log In</a>
   <table id="games-table" class="zebra-striped">
     <thead>
       <tr id="games-table-header">