Working on #2

public/index.html

@@ -11,7 +11,7 @@
          More info: h5bp.com/i/378 -->
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
-    <title>Marionette-Require Boilerplate</title>
+    <title>Cara a Cara</title>
     <meta name="description" content="Marionette and Require.js Boilerplate Library">
 
     <!-- Mobile viewport optimized: h5bp.com/viewport -->
@@ -147,8 +147,6 @@
 
     <header data-role="header"></header>
 
-    <aside></aside>
-
     <div id="main" class="container-fluid" data-role="content"></div>
 
     <footer data-role="footer" class="footer navbar navbar-fixed-bottom">
@@ -161,5 +159,3 @@
 
 </body>
 </html>
-
-

public/js/app/App.js

@@ -11,7 +11,6 @@ define(['jquery', 'backbone', 'marionette', 'underscore', 'handlebars'],
         //Regions can contain views, Layouts, or subregions nested as necessary
         App.addRegions({
             headerRegion: "header",
-            goalRegion: "aside",
             mainRegion: "#main"
         });
 

public/js/app/controllers/DesktopController.js

@@ -1,29 +1,44 @@
-define(['App', 'jquery', 'backbone', 'marionette', 'views/PersonView', 'views/PeopleView', 'views/DesktopHeaderView', 'models/Person', 'collections/People', 'seedrandom'],
-    function (App, $, Backbone, Marionette, PersonView, PeopleView, DesktopHeaderView, Person, People) {
+define(['App', 'jquery', 'backbone', 'marionette', 'views/GameStartView', 'views/GoalView', 'views/PeopleView', 'views/DesktopHeaderView', 'models/Person', 'collections/People', 'seedrandom'],
+    function (App, $, Backbone, Marionette, GameStartView, GoalView, PeopleView, DesktopHeaderView, Person, People) {
     return Backbone.Marionette.Controller.extend({
         initialize:function (options) {
             App.headerRegion.show(new DesktopHeaderView());
         },
         //gets mapped to in AppRouter's appRoutes
-        index: function (hash) {
-            // Seed randomness with current hash.
-            Math.seedrandom(hash);
-            $.getJSON('data.json', function(data, jqXHR, code) {
-                // Pseudo-randomize and pick 24.
-                data = data.sort(
-                    function(){ return 0.5 - Math.random(); }
-                ).slice(-24);
-                // Populate.
-                App.people = new People(data);
-                // Pick a slightly more random goal.
-                Math.seedrandom(hash, true);
-                var pick = new Person(data[Math.floor(Math.random()*data.length)]);
-                // Draw :)
-                App.goalRegion.show(new PersonView({ model: pick }));
+        start: function() {
+            App.mainRegion.show(new GameStartView({
+            }));
+        },
+        goal: function() {
+        },
+        game: function (hash) {
+            if (App.hasOwnProperty('people')) {
+                $('.active').removeClass('active');
+                $('#game-link').parent().addClass('active');
                 App.mainRegion.show(new PeopleView({
                     collection: App.people
                 }));
-            });
+            } else {
+                // Seed randomness with current hash.
+                Math.seedrandom(hash);
+                $.getJSON('data.json', function(data, jqXHR, code) {
+                    // Pseudo-randomize and pick 24.
+                    data = data.sort(
+                        function(){ return 0.5 - Math.random(); }
+                    ).slice(-24);
+                    // Populate.
+                    App.people = new People(data);
+                    // Draw :)
+                    // App.goalRegion.show(new GoalView({hash: hash}));
+                    App.mainRegion.show(new PeopleView({
+                        collection: App.people
+                    }));
+                $('.active').removeClass('active');
+                $('#game-link').attr('href', '#game/' + hash).parent().addClass('active');
+                });
+            }
+        },
+        dismissed: function() {
         }
     });
 });

public/js/app/routers/AppRouter.js

@@ -2,7 +2,10 @@ define(['backbone', 'marionette'], function(Backbone, Marionette) {
    return Backbone.Marionette.AppRouter.extend({
        //"index" must be a method in AppRouter's controller
        appRoutes: {
-           ":hash": "index"
+           "": "start",
+           "game/new": "start",
+           "game/dismissed": "dismissed",
+           "game/:hash": "game"
        }
    });
 });

public/js/app/templates/desktopHeader.html

@@ -1,9 +1,10 @@
 <div class="navbar nav">
     <div class="navbar-inner">
-        <a class="brand" href="#">Marionette-Require-Boilerplate (MRB)</a>
+        <a class="brand" href="#">Cara a Cara</a>
         <ul class="nav">
-            <li class="active"><a href="#">Home</a></li>
-            <li><a href="#">Elsewhere</a></li>
+            <li class="active"><a href="#game/new">Novo Jogo</a></li>
+            <li><a href="#game/" id="game-link">Jogo Atual</a></li>
+            <li><a href="#game/dismissed">Eliminadas</a></li>
         </ul>
     </div>
 </div>

public/js/app/templates/gamestart.html

@@ -0,0 +1,10 @@
+<div class="hero-unit">
+    <h1>Cara a Cara</h1>
+    <p>Combine uma nova partida com outro jogador e divirta-se.</p>
+    <div class="input-append">
+      <input type="text" class="form-control" placeholder="Dê um nome para partida.">
+      <span class="input-group-btn">
+        <button class="btn btn-default" type="button">Jogar!</button>
+      </span>
+    </div><!-- /input-group -->
+</div>

public/js/app/templates/goal.html

@@ -0,0 +1,4 @@
+<div class="goal {{tagger this}}">
+  <div class="img"> <img src="pictures/{{ key }}.jpg"> </div>
+  <h4>{{ nome }}</h4>
+</div>

public/js/app/views/GameStartView.js

@@ -0,0 +1,18 @@
+define( ['App', 'backbone', 'marionette', 'jquery', 'underscore.string', 'models/Model', 'hbs!templates/gamestart'],
+    function(App, Backbone, Marionette, $, _str, Model, template) {
+        //ItemView provides some default rendering logic
+        return Backbone.Marionette.ItemView.extend( {
+            template: template,
+            model: new Model({
+                mobile: App.mobile
+            }),
+            newgame: function(e) {
+                var hash = _str.slugify(this.$el.find('input').val());
+                App.appRouter.navigate('game/' + hash, {trigger: true});
+            },
+            // View Event Handlers
+            events: {
+                "click button": 'newgame'
+            }
+        });
+    });

public/js/app/views/GoalView.js

@@ -0,0 +1,17 @@
+define( ['App', 'backbone', 'marionette', 'jquery', 'models/Person', 'hbs!templates/goal'],
+    function(App, Backbone, Marionette, $, Person, template) {
+        //ItemView provides some default rendering logic
+        return Backbone.Marionette.ItemView.extend({
+            template: template,
+            tagName: 'div',
+            initialize:function (options) {
+                // Pick a slightly more random goal.
+                Math.seedrandom(options.hash, true);
+                var people = App.people.models;
+                this.model = new Person(people[Math.floor(Math.random()*people.length)].attributes);
+            },
+            // View Event Handlers
+            events: {
+            }
+        });
+    });