Home Explore Help
Sign In
games
/
gamenchat
mirror of https://github.com/thatsmydoing/gamenchat.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

Add pseudo navigation

Thomas Dy 11 years ago
parent
f59da4c461
commit
c85e32f34a
3 changed files with 38 additions and 12 deletions
Split View Show Diff Stats
  1. 14 5
      app/views/chatRoomNg.scala.html
  2. 14 7
      public/javascripts/main.js
  3. 10 0
      public/partials/chatRoom.html

+ 14 - 5
app/views/chatRoomNg.scala.html
View File 

@@ -8,13 +8,21 @@
 
         <link rel="stylesheet" media="screen" href="@routes.Assets.at("stylesheets/main.css")">
 
         <link rel="shortcut icon" type="image/png" href="@routes.Assets.at("images/favicon.png")">
 
     </head>
 
-    <body>
 
+    <body ng-controller="ViewCtrl">
 
 
         <div class="topbar">
 
             <div class="fill">
 
-                <div class="container" ng-controller="LoginCtrl">
 
+                <div class="container">
 
                     <a class="brand">Game n' Chat</a>
 
-
 
+                    <div class="nav nav-collapse">
 
+                        <ul class="nav">
 
+                            <li ng-repeat="li in nav" class="{{li.partial == view ? 'active' : ''}}">
 
+                                <a ng-click="setView(li.partial)">{{li.name}}</a>
 
+                            </li>
 
+                        </ul>
 
+                    </div>
 
+
 
+                    <span ng-controller="LoginCtrl">
 
                     <p class="pull-right" ng-show="service.isConnected()">
 
                         Logged in as {{service.username}} —
 
                         <a ng-click="service.disconnect()">Disconnect</a>
 
@@ -24,14 +32,15 @@
 
                         <input id="username" name="username" class="input-small" type="text" ng-model="username" placeholder="Username">
 
                         <button class="btn" type="submit" ng-click="service.connect(username); username=''">Sign in</button>
 
                     </form>
 
+                    </span>
 
 
                 </div>
 
             </div>
 
         </div>
 
 
-        <div class="container" ng-controller="ViewCtrl">
 
+        <div class="container">
 
 
-            <div class="content" ng-include="view(service.isConnected())">
 
+            <div class="content" ng-include="partial(view)">
 
             </div>
 
 
             <footer>

+ 14 - 7
public/javascripts/main.js
View File 

@@ -6,14 +6,21 @@ function partial(template) {
 
 
 function ViewCtrl($scope, Connection) {
 
   $scope.service = Connection;
 
-  $scope.view = function(connected) {
 
-    if(connected) {
 
-      return partial("chatRoom");
 
-    }
 
-    else {
 
-      return partial("about");
 
-    }
 
+  $scope.partial = partial;
 
+  $scope.view = 'about';
 
+
 
+  $scope.nav = [
 
+    {partial: 'about', name: 'About'},
 
+    {partial: 'chatRoom', name: 'Chat'}
 
+  ];
 
+
 
+  $scope.setView = function(p) {
 
+    $scope.view = p;
 
   }
 
+
 
+  $scope.$on('ws:connected', function() {
 
+    $scope.view = 'chatRoom';
 
+  });
 
 }
 
 
 function LoginCtrl($scope, Connection) {

+ 10 - 0
public/partials/chatRoom.html
View File 

@@ -1,4 +1,13 @@
 
 <div ng-controller="ChatCtrl">
 
+<div ng-hide="service.isConnected()">
 
+  <div class="page-header">
 
+    <h1>Not connected</h1>
 
+  </div>
 
+  <div class="span10">
 
+    <p>Please sign in at the top bar.</p>
 
+  </div>
 
+</div>
 
+<div ng-show="service.isConnected()">
 
   <div class="page-header">
 
     <h1>Welcome <small>You are playing as {{service.username}}</small></h1>
 
   </div>
 
@@ -39,3 +48,4 @@
 
     </div>
 
   </div>
 
 </div>
 
+</div>