moved to requirejs

.gitignore

@@ -1,3 +1,4 @@
 node_modules/*
 lib/*
 css/*
+/api/resultats.json

bower.json

@@ -20,6 +20,7 @@
   "dependencies": {
     "uikit": "~2.24.3",
     "mithril": "~0.2.1",
-    "lodash": "~4.2.1"
+    "lodash": "~4.2.1",
+    "almond": "~0.3.1"
   }
 }

build.js

@@ -0,0 +1,11 @@
+({
+    baseUrl: "script",
+    paths: {
+        m: '../lib/mithril/mithril.min',
+        _: '../lib/lodash/dist/lodash.min',
+        requireLib: '../lib/requirejs/require'
+    },
+    include: 'main',
+    name: "../lib/almond/almond",
+    out: "main-built.js"
+})

data/resultats.yaml

@@ -6,8 +6,8 @@
     name: Jeudi 2 juin
     home: gris
     away: jaune
-    home_points: ~
+    home_points: 6
-    away_points: ~
+    away_points: 7
 
 -
     date: 2016/06/02  # year/month/day
@@ -15,16 +15,16 @@
     name: Jeudi 2 juin
     home: bleu
     away: rouge
-    home_points: ~
+    home_points: 9
-    away_points: ~
+    away_points: 2
 -
     date: 2016/06/09  # year/month/day
     time: "18:00"
     name: Jeudi 9 juin
     home: bleu
     away: jaune
-    home_points: ~
+    home_points: 7
-    away_points: ~
+    away_points: 6
 
 -
     date: 2016/06/09  # year/month/day
@@ -32,16 +32,16 @@
     name: Jeudi 9 juin
     home: gris
     away: rouge
-    home_points: ~
+    home_points: 4
-    away_points: ~
+    away_points: 8
 -
     date: 2016/06/16  # year/month/day
     time: "18:00"
     name: Jeudi 16 juin
     home: bleu
     away: jaune
-    home_points: ~
+    home_points: 4
-    away_points: ~
+    away_points: 7
 
 -
     date: 2016/06/16  # year/month/day

index.html

@@ -6,16 +6,8 @@
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="css/style.css" />
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
-
+        <script data-main="script/main" src="lib/requirejs/require.js"></script>
     </head>
     <body>
-        <script src="lib/mithril/mithril.min.js"></script>
-        <script src="lib/lodash/dist/lodash.min.js"></script>
-
-        <script src="script/results.js"></script>
-        <script src="script/structure.js"></script>
-        <script src="script/mainPage.js"></script>
-        <script src="script/calendarPage.js"></script>
-        <script src="script/phenix.js"></script>
     </body>
 </html>

package.json

@@ -8,7 +8,8 @@
     "gulp-bower": "0.0.13",
     "gulp-clean": "^0.3.1",
     "gulp-sass": "^2.1.1",
-    "gulp-task-listing": "^1.0.1"
+    "gulp-task-listing": "^1.0.1",
+    "requirejs": "^2.1.22"
   },
   "devDependencies": {
     "gulp-webserver": "^0.9.1",

script/calendarPage.js

@@ -1,130 +0,0 @@
-(function() {
-'use strict';
-
-var statsView = {};
-
-statsView.controller = function(){
-    var games = m.prop([]);
-    return m.request({method: "GET", url: "/api/resultats.json"})
-           .then(games)
-           .then(window.resultParser.getStats);
-};
-
-statsView.getStatRow = function(teamStats){
-    var formatStat = function(n){
-        return teamStats.gamePlayed === 0 ? '-' : n;
-    };
-    return m('tr', [
-        m('td', teamStats.team),
-        m('td', teamStats.gamePlayed),
-        m('td', formatStat(teamStats.victories)),
-        m('td', formatStat(teamStats.defeats)),
-        m('td', formatStat(teamStats.draws)),
-        m('td', formatStat(teamStats.pointsFor)),
-        m('td', formatStat(teamStats.pointsAgaint)),
-        m('td', formatStat(teamStats.pointsFor - teamStats.pointsAgaint)),
-        m('td', "? ")
-    ]);
-};
-
-statsView.mainTable = function(stats){
-    return m('table.uk-table.uk-table-hover.uk-table-striped',[
-        m('thead', m('tr', [
-            m('th', 'Équipes'),
-            m('th', 'PJ'),
-            m('th', 'V'),
-            m('th', 'D'),
-            m('th', 'N'),
-            m('th', 'PP'),
-            m('th', 'PC'),
-            m('th', 'DIF'),
-            m('th', 'PTS')
-        ])),
-        m('tbody', _.map(stats, statsView.getStatRow))
-    ]);
-};
-
-statsView.legend = function(){
-    var items = ["PJ : Parties joués", "V : Victoire",  "D : Défaite",
-                 "N : Nul", "PP : Points pour", "PC : Points contre",
-                 "DIF : Diférenciel","PTS : Points"];
-    return  m('ul.uk-subnav.uk-subnav-line.uk-flex-center',[
-                _.map(items, function(itm){
-                    return m('li', itm);
-                })
-            ]);
-};
-
-statsView.view = function(stats){
-    return  m('div.uk-grid',
-                m('div.uk-width-1-1',[
-                    m('h2', 'Classement 2016'),
-                    statsView.mainTable(stats()),
-                    statsView.legend()
-                ]));
-
-};
-
-
-var schedulView = {};
-window.schedulView = schedulView;
-
-schedulView.controller = function(){
-    var games = m.prop([]);
-    return m.request({method: "GET", url: "/api/resultats.json"})
-           .then(games)
-           .then(window.resultParser.getNightGames);
-};
-
-schedulView._getTeamTag = function(teamName){
-    var teamColor = teams.getTeamColor(teamName);
-    return [
-        m('i.fa.fa-flag', {style: {color: teamColor}}),
-        m('span', ' ' + teamName)
-    ];
-};
-schedulView._asGamePoints = function(points){
-    return !_.isNumber(points) ? '-' : points + '';
-};
-
-schedulView._gameRow = function(game){
-    return m('tr',[
-        m('td', game.time),
-        m('td', schedulView._getTeamTag(game.home)),
-        m('td', schedulView._asGamePoints(game.home_points)),
-        m('td', 'vs'),
-        m('td', schedulView._getTeamTag(game.away)),
-        m('td', schedulView._asGamePoints(game.away_points))
-    ]);
-};
-
-schedulView._gameView = function(gameNight){
-    return m('div', [m('h3', gameNight.date),
-        m('table.uk-table.uk-table-hover.uk-table-condensed.uk-table-striped',
-            m('tbody',[
-                _.map(gameNight.games, schedulView._gameRow),
-            ])
-        )
-    ]);
-
-};
-
-schedulView.view = function(games){
-    return m('div.uk-grid',
-               m('div.uk-width-3-5',
-                _.concat([m('h2', 'Calendrier 2016')], _.map(games(), schedulView._gameView))));
-};
-
-
-window.calendarPage = {};
-
-window.calendarPage.view  = function(){
-    return [m.component(window.topNavBar),
-            m('div.uk-grid',
-                m('div.uk-width-3-5.uk-push-1-5',[
-                    m.component(statsView),
-                    m.component(schedulView)])),
-            m.component(window.footer)];
-};
-
-}).call(this);

script/main.js

@@ -0,0 +1,16 @@
+requirejs.config({
+    // baseUrl: 'lib',
+    paths: {
+        '_': '../lib/lodash/dist/lodash.min',
+        'm': '../lib/mithril/mithril.min'
+    }
+});
+
+
+requirejs(['m', 'views/mainPage', 'views/calendarPage'], function(m, mainPage, calendarPage){
+    m.route.mode = "hash";
+    m.route(document.body, "/", {
+        "/": mainPage,
+        "/calendrier": calendarPage,
+    });
+});

script/mainPage.js

@@ -1,130 +0,0 @@
-(function() {
-'use strict';
-
-var mainPageLogo = {};
-
-mainPageLogo.view = function(){
-    return m('div.uk-grid', [
-        m('div.uk-width-1-3.uk-push-1-3', [
-            m('div.uk-cover-background', {style: 'height: 500px; background-size: 500px; background-image: url(images/phenix_logo.png);'})
-        ])
-    ]);
-};
-
-var mainPageNews = {};
-
-mainPageNews.view = function(){
-    return m('div.uk-panel.uk-panel-box',[
-        m('div.uk-panel-badge.uk-badge', [
-            m('i.fa.fa-newspaper-o')
-        ]),
-        m('h3.uk-panel-title', 'Nouvelles')
-    ], window.loremIpsum());
-};
-
-var nextGameDaySchedule = {};
-
-nextGameDaySchedule.controller = function(){
-    var games = m.prop([]);
-    return m.request({method: "GET", url: "/api/resultats.json"})
-           .then(games)
-           .then(resultParser.getNightGames)
-           .then(function(nightGames){
-               return nightGames[0].games;
-           });
-};
-
-nextGameDaySchedule._getTableHead = function(){
-    return m('thead', m('tr', [
-                m('td', 'Date'),
-                m('td', 'Heure'),
-                m('td', 'Visiteur'),
-                m('td', 'Receveur')
-            ]));
-};
-
-nextGameDaySchedule._getGamesRow = function(game){
-    return m('tr', [
-        m('td', 'small txt'),
-        m('td', game.time),
-        m('td', game.away),
-        m('td', game.home)
-    ]);
-};
-
-nextGameDaySchedule._getGamesRows = function(games){
-    return _.map(games(), nextGameDaySchedule._getGamesRow);
-};
-
-nextGameDaySchedule.view = function(games){
-    return  m('table.uk-table.uk-table-hover.uk-table-striped.uk-table-condensed',
-                m('tbody', [
-                    nextGameDaySchedule._getTableHead(),
-                    nextGameDaySchedule._getGamesRows(games)
-                ]));
-};
-
-var mainPageSchedule = {};
-
-mainPageSchedule.view = function(){
-    return m('div.uk-panel.uk-panel-box',[
-        m('div.uk-panel-badge.uk-badge', [
-            m('i.fa.fa-clock-o')
-        ]),
-        m('h3.uk-panel-title', 'Horaire'),
-        m.component(nextGameDaySchedule)
-    ]);
-};
-
-var mainMap = {};
-
-mainMap.getMap = function(){
-    var iframeUrl = "http://www.openstreetmap.org/export/embed.html?bbox=-73.55889558792114%2C45.53089890181621%2C-73.55181455612183%2C45.53426212742867&layer=mapnik";
-    var externalLink = "http://www.openstreetmap.org/#map=18/45.53258/-73.55536";
-    var iframeParams = {
-        style: {border: '1px solid black', 'min-height': '300px'},
-        width: '100%',
-        height: '100%',
-        frameborder: 0,
-        scrolling: 'no',
-        marginheight: 0,
-        src: iframeUrl
-    };
-    return [
-        m('iframe', iframeParams),
-        m('br'),
-        m('small', m('a', {href: externalLink}, 'Voir la carte'))
-    ];
-};
-
-mainMap.view = function(){
-    return m('div.uk-panel.uk-panel-box',[
-        m('div.uk-panel-badge.uk-badge', [
-            m('i.fa.fa-map-o')
-        ]),
-        m('h3.uk-panel-title', 'Parc Walter-Stewart'),
-        mainMap.getMap()
-    ]);
-};
-
-var mainPageBottom = {};
-
-mainPageBottom.view = function(){
-    return m('div.uk-grid',[
-        m('div.uk-width-1-5'),
-        m('div.uk-width-1-5', mainPageNews.view()),
-        m('div.uk-width-1-5', mainPageSchedule.view()),
-        m('div.uk-width-1-5', mainMap.view())
-    ]);
-};
-
-window.mainPage = {};
-
-window.mainPage.view  = function(){
-    return [window.topNavBar.view(),
-            mainPageLogo.view(),
-            mainPageBottom.view(),
-            window.footer.view()];
-};
-
-}).call(this);

script/phenix.js

@@ -1,27 +0,0 @@
-(function() {
-'use strict';
-window.loremIpsum = function(){
-    return "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a"+
-           " diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula "+
-           "ac quam viverra nec consectetur ante hendrerit. Donec et mollis"+
-           " dolor. Praesent et diam eget libero egestas mattis sit amet"+
-           " vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia "+
-           "consectetur. Donec ut libero sed arcu vehicula ultricies a non"+
-           " tortor. Lorem ipsum dolor sit amet, consectetur adipiscing "+
-           "elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a "+
-           "semper sed, adipiscing id dolor. Pellentesque auctor nisi id "+
-           "magna consequat sagittis. Curabitur dapibus enim sit amet elit "+
-           "pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero "+
-           "in urna ultrices accumsan. Donec sed od";
-};
-
-
-m.route.mode = "hash";
-
-//define a route
-m.route(document.body, "/", {
-    "/": window.mainPage,
-    "/calendrier": window.calendarPage,
-});
-
-}).call(this);

script/resultParser.js

@@ -0,0 +1,64 @@
+define(['_'], function(_) {
+    var resultParser = {};
+
+    resultParser._addJSDateToResult = function(res){
+        var date = res.date.split('/');
+        var time = res.time.split(':');
+        res.jsDate = new Date(
+            Number(date[0]),
+            Number(date[1]) - 1,
+            Number(date[2]),
+            Number(time[0]),
+            Number(time[1])
+        );
+        return res;
+    };
+
+    resultParser.parseResults = function(rawResults){
+        rawResults = _.map(rawResults, resultParser._addJSDateToResult);
+        rawResults = _.map(rawResults, resultParser._addCustomStyle);
+        return rawResults;
+    };
+
+    resultParser.getNightGames = function(rawResults){
+        var ret = {};
+        _.each(resultParser.parseResults(rawResults), function(res){
+            if(_.has(ret, res.date)){
+                ret[res.date].push(res);
+            }else{
+                ret[res.date] = [res];
+            }
+        });
+        return _.map(ret, function(games, date){
+            return {date: date, games: games};
+        });
+    };
+
+    resultParser._getAllTeams = function(rawResults){
+        var homeTeams = _.map(rawResults, 'home');
+        var awayTeams = _.map(rawResults, 'away');
+        return _.uniq(_.concat(homeTeams, awayTeams));
+    };
+
+
+
+    resultParser._getTeamStats = function(rawResults, team){
+        var ret = {team: team, gamePlayed: 0};
+        _.each(rawResults, function(res){
+            if((team != res.home && team != res.away) || !_.isNumber(res.home_points)){
+                return;
+            }
+            ret.gamePlayed += 1;
+        });
+        return ret;
+    };
+
+
+    resultParser.getStats = function(rawResults){
+        var allTeams = resultParser._getAllTeams(rawResults);
+        var getTeamStats = _.partial(resultParser._getTeamStats, rawResults);
+        return _.map(allTeams, getTeamStats);
+    };
+
+    return resultParser;
+});

script/results.js

@@ -1,83 +0,0 @@
-(function() {
-'use strict';
-
-
-window.teams = {};
-
-teams.getTeamColor = function(teamName){
-    if(teamName == 'jaune'){
-        return 'yellow';
-    }
-    if(teamName == 'rouge'){
-        return 'red';
-    }
-    if(teamName == 'bleu'){
-        return 'bleu';
-    }
-    if(teamName == 'gris'){
-        return 'grey';
-    }
-};
-
-window.resultParser = {};
-
-resultParser._addJSDateToResult = function(res){
-    var date = res.date.split('/');
-    var time = res.time.split(':');
-    res.jsDate = new Date(
-        Number(date[0]),
-        Number(date[1]) - 1,
-        Number(date[2]),
-        Number(time[0]),
-        Number(time[1])
-    );
-    return res;
-};
-
-resultParser.parseResults = function(rawResults){
-    rawResults = _.map(rawResults, resultParser._addJSDateToResult);
-    rawResults = _.map(rawResults, resultParser._addCustomStyle);
-    return rawResults;
-};
-
-resultParser.getNightGames = function(rawResults){
-    var ret = {};
-    _.each(resultParser.parseResults(rawResults), function(res){
-        if(_.has(ret, res.date)){
-            ret[res.date].push(res);
-        }else{
-            ret[res.date] = [res];
-        }
-    });
-    return _.map(ret, function(games, date){
-        return {date: date, games: games};
-    });
-};
-
-resultParser._getAllTeams = function(rawResults){
-    var homeTeams = _.map(rawResults, 'home');
-    var awayTeams = _.map(rawResults, 'away');
-    return _.uniq(_.concat(homeTeams, awayTeams));
-};
-
-
-
-resultParser._getTeamStats = function(rawResults, team){
-    var ret = {team: team, gamePlayed: 0};
-    _.each(rawResults, function(res){
-        if((team != res.home && team != res.away) || !_.isNumber(res.home_points)){
-            return;
-        }
-        ret.gamePlayed += 1;
-    });
-    return ret;
-};
-
-
-resultParser.getStats = function(rawResults){
-    var allTeams = resultParser._getAllTeams(rawResults);
-    var getTeamStats = _.partial(resultParser._getTeamStats, rawResults);
-    return _.map(allTeams, getTeamStats);
-};
-
-}).call(this);

script/structure.js

@@ -1,65 +0,0 @@
-(function() {
-'use strict';
-
-var topNavBar = {};
-window.topNavBar = topNavBar;
-
-topNavBar._urlMapping = {
-    acceuil: 'Acceuil',
-    calendrier: 'Calendrier',
-    reglement: 'Règlement',
-    photos: 'Photos',
-    membre: 'Membre',
-    contact: 'Nous Joindre'
-};
-
-var facebookLink = function(){
-    return m('a[href="https://www.facebook.com/LigueDeBalleLesPhenix"]',
-               m('i.fa.fa-facebook-square')
-           );
-};
-
-topNavBar.controller = function(){
-    return {id: m.route.param("page")};
-};
-
-topNavBar._getUrlForId = function(id_){
-    return  '#/' + id_;
-};
-
-topNavBar._isActive = function(id_){
-    return id_ == m.route.param("page");
-};
-
-topNavBar._getItem = function(name, id){
-    var class_ = topNavBar._isActive(id) ? 'uk-active' : 'uk-parent';
-    var url = topNavBar._getUrlForId(id);
-    return m("li", {class: class_}, [m("a",{href: url},  name)]);
-};
-
-topNavBar.view = function(controller){
-    return m("nav.uk-navbar",
-              [m("div.uk-navbar-content.uk-navbar-center", [
-                  m("ul.uk-navbar-nav",
-                     m('li.uk-parent', facebookLink()),
-                    _.map(topNavBar._urlMapping, topNavBar._getItem)
-                    )
-    ])]);
-};
-
-var footer = {};
-window.footer = footer;
-
-footer.view = function(){
-    return m('footer.uk-grid.ph-footer', {style: {padding: '80px'}},
-        m('div.uk-container.uk-container-center.uk-text-center', [
-            m('div.uk-panel', 'Ligue de balle les Phénix... pour le plaisir de jouer!'),
-            m('ul.uk-subnav.uk-subnav-line.uk-flex-center',
-                m('li', m('a[href="mailto:info@ballephenix.com"]', 'info@ballephenix.com'))),
-            m('h1', facebookLink())
-        ])
-    );
-};
-
-
-}).call(this);

script/teams.js

@@ -0,0 +1,20 @@
+define(['m', '_'], function (m, _) {
+    var teams = {};
+
+    teams.getTeamColor = function(teamName){
+        if(teamName == 'jaune'){
+            return 'yellow';
+        }
+        if(teamName == 'rouge'){
+            return 'red';
+        }
+        if(teamName == 'bleu'){
+            return 'bleu';
+        }
+        if(teamName == 'gris'){
+            return 'grey';
+        }
+    };
+
+    return teams;
+});

script/util.js

@@ -0,0 +1,25 @@
+define(['m'], function(m) {
+    var util = {};
+    util.loremIpsum = function(){
+        return "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a"+
+               " diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula "+
+               "ac quam viverra nec consectetur ante hendrerit. Donec et mollis"+
+               " dolor. Praesent et diam eget libero egestas mattis sit amet"+
+               " vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia "+
+               "consectetur. Donec ut libero sed arcu vehicula ultricies a non"+
+               " tortor. Lorem ipsum dolor sit amet, consectetur adipiscing "+
+               "elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a "+
+               "semper sed, adipiscing id dolor. Pellentesque auctor nisi id "+
+               "magna consequat sagittis. Curabitur dapibus enim sit amet elit "+
+               "pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero "+
+               "in urna ultrices accumsan. Donec sed od";
+    };
+
+    util.facebookLink = function(){
+        return m('a[href="https://www.facebook.com/LigueDeBalleLesPhenix"]',
+                   m('i.fa.fa-facebook-square')
+               );
+    };
+
+    return util;
+});

script/views/calendarPage.js

@@ -0,0 +1,128 @@
+define(['m', '_', 'resultParser', 'teams', 'views/topNavBar', 'views/footer'], function(m, _, resultParser, teams, topNavBar, footer) {
+    var statsView = {};
+
+    statsView.controller = function(){
+        var games = m.prop([]);
+        return m.request({method: "GET", url: "/api/resultats.json"})
+               .then(games)
+               .then(resultParser.getStats);
+    };
+
+    statsView.getStatRow = function(teamStats){
+        var formatStat = function(n){
+            return teamStats.gamePlayed === 0 ? '-' : n;
+        };
+        return m('tr', [
+            m('td', teamStats.team),
+            m('td', teamStats.gamePlayed),
+            m('td', formatStat(teamStats.victories)),
+            m('td', formatStat(teamStats.defeats)),
+            m('td', formatStat(teamStats.draws)),
+            m('td', formatStat(teamStats.pointsFor)),
+            m('td', formatStat(teamStats.pointsAgaint)),
+            m('td', formatStat(teamStats.pointsFor - teamStats.pointsAgaint)),
+            m('td', "? ")
+        ]);
+    };
+
+    statsView.mainTable = function(stats){
+        return m('table.uk-table.uk-table-hover.uk-table-striped',[
+            m('thead', m('tr', [
+                m('th', 'Équipes'),
+                m('th', 'PJ'),
+                m('th', 'V'),
+                m('th', 'D'),
+                m('th', 'N'),
+                m('th', 'PP'),
+                m('th', 'PC'),
+                m('th', 'DIF'),
+                m('th', 'PTS')
+            ])),
+            m('tbody', _.map(stats, statsView.getStatRow))
+        ]);
+    };
+
+    statsView.legend = function(){
+        var items = ["PJ : Parties joués", "V : Victoire",  "D : Défaite",
+                     "N : Nul", "PP : Points pour", "PC : Points contre",
+                     "DIF : Diférenciel","PTS : Points"];
+        return  m('ul.uk-subnav.uk-subnav-line.uk-flex-center',[
+                    _.map(items, function(itm){
+                        return m('li', itm);
+                    })
+                ]);
+    };
+
+    statsView.view = function(stats){
+        return  m('div.uk-grid',
+                    m('div.uk-width-1-1',[
+                        m('h2', 'Classement 2016'),
+                        statsView.mainTable(stats()),
+                        statsView.legend()
+                    ]));
+
+    };
+
+
+    var schedulView = {};
+
+    schedulView.controller = function(){
+        var games = m.prop([]);
+        return m.request({method: "GET", url: "/api/resultats.json"})
+               .then(games)
+               .then(resultParser.getNightGames);
+    };
+
+    schedulView._getTeamTag = function(teamName){
+        var teamColor = teams.getTeamColor(teamName);
+        return [
+            m('i.fa.fa-flag', {style: {color: teamColor}}),
+            m('span', ' ' + teamName)
+        ];
+    };
+
+    schedulView._asGamePoints = function(points){
+        return !_.isNumber(points) ? '-' : points + '';
+    };
+
+    schedulView._gameRow = function(game){
+        return m('tr',[
+            m('td', game.time),
+            m('td', schedulView._getTeamTag(game.home)),
+            m('td', schedulView._asGamePoints(game.home_points)),
+            m('td', 'vs'),
+            m('td', schedulView._getTeamTag(game.away)),
+            m('td', schedulView._asGamePoints(game.away_points))
+        ]);
+    };
+
+    schedulView._gameView = function(gameNight){
+        return m('div', [m('h3', gameNight.date),
+            m('table.uk-table.uk-table-hover.uk-table-condensed.uk-table-striped',
+                m('tbody',[
+                    _.map(gameNight.games, schedulView._gameRow),
+                ])
+            )
+        ]);
+
+    };
+
+    schedulView.view = function(games){
+        return m('div.uk-grid',
+                   m('div.uk-width-3-5',
+                    _.concat([m('h2', 'Calendrier 2016')], _.map(games(), schedulView._gameView))));
+    };
+
+    calendarPage = {};
+
+    calendarPage.view  = function(){
+        return [m.component(topNavBar),
+                m('div.uk-grid',
+                    m('div.uk-width-3-5.uk-push-1-5',[
+                        m.component(statsView),
+                        m.component(schedulView)])),
+                m.component(footer)];
+    };
+
+    return calendarPage;
+});

script/views/footer.js

@@ -0,0 +1,16 @@
+define(['m', '_', 'util'], function (m, _, util) {
+    var footer = {};
+
+    footer.view = function(){
+        return m('footer.uk-grid.ph-footer', {style: {padding: '80px'}},
+            m('div.uk-container.uk-container-center.uk-text-center', [
+                m('div.uk-panel', 'Ligue de balle les Phénix... pour le plaisir de jouer!'),
+                m('ul.uk-subnav.uk-subnav-line.uk-flex-center',
+                    m('li', m('a[href="mailto:info@ballephenix.com"]', 'info@ballephenix.com'))),
+                m('h1', util.facebookLink())
+            ])
+        );
+    };
+
+    return footer;
+});

script/views/mainPage.js

@@ -0,0 +1,130 @@
+define(['m', '_', 'util', 'resultParser', 'views/topNavBar', 'views/footer'], function (m, _ , util, resultParser, topNavBar, footer) {
+    var mainPageLogo = {};
+
+    mainPageLogo.view = function(){
+        return m('div.uk-grid', [
+            m('div.uk-width-1-3.uk-push-1-3', [
+                m('div.uk-cover-background', {style: 'height: 500px; background-size: 500px; background-image: url(images/phenix_logo.png);'})
+            ])
+        ]);
+    };
+
+    var mainPageNews = {};
+
+    mainPageNews.view = function(){
+        return m('div.uk-panel.uk-panel-box',[
+            m('div.uk-panel-badge.uk-badge', [
+                m('i.fa.fa-newspaper-o')
+            ]),
+            m('h3.uk-panel-title', 'Nouvelles')
+        ], util.loremIpsum());
+    };
+
+    var nextGameDaySchedule = {};
+
+    nextGameDaySchedule.controller = function(){
+        var games = m.prop([]);
+        return m.request({method: "GET", url: "/api/resultats.json"})
+               .then(games)
+               .then(resultParser.getNightGames)
+               .then(function(nightGames){
+                   return nightGames[0].games;
+               });
+    };
+
+    nextGameDaySchedule._getTableHead = function(){
+        return m('thead', m('tr', [
+                    m('td', 'Date'),
+                    m('td', 'Heure'),
+                    m('td', 'Visiteur'),
+                    m('td', 'Receveur')
+                ]));
+    };
+
+    nextGameDaySchedule._getGamesRow = function(game){
+        return m('tr', [
+            m('td', 'small txt'),
+            m('td', game.time),
+            m('td', game.away),
+            m('td', game.home)
+        ]);
+    };
+
+    nextGameDaySchedule._getGamesRows = function(games){
+        return _.map(games(), nextGameDaySchedule._getGamesRow);
+    };
+
+    nextGameDaySchedule.view = function(games){
+        return  m('table.uk-table.uk-table-hover.uk-table-striped.uk-table-condensed',
+                    m('tbody', [
+                        nextGameDaySchedule._getTableHead(),
+                        nextGameDaySchedule._getGamesRows(games)
+                    ]));
+    };
+
+    var mainPageSchedule = {};
+
+    mainPageSchedule.view = function(){
+        return m('div.uk-panel.uk-panel-box',[
+            m('div.uk-panel-badge.uk-badge', [
+                m('i.fa.fa-clock-o')
+            ]),
+            m('h3.uk-panel-title', 'Horaire'),
+            m.component(nextGameDaySchedule)
+        ]);
+    };
+
+    var mainMap = {};
+
+    mainMap.getMap = function(){
+        var iframeUrl = "http://www.openstreetmap.org/export/embed.html?bbox=-73.55889558792114%2C45.53089890181621%2C-73.55181455612183%2C45.53426212742867&layer=mapnik";
+        var externalLink = "http://www.openstreetmap.org/#map=18/45.53258/-73.55536";
+        var iframeParams = {
+            style: {border: '1px solid black', 'min-height': '300px'},
+            width: '100%',
+            height: '100%',
+            frameborder: 0,
+            scrolling: 'no',
+            marginheight: 0,
+            src: iframeUrl
+        };
+        return [
+            m('iframe', iframeParams),
+            m('br'),
+            m('small', m('a', {href: externalLink}, 'Voir la carte'))
+        ];
+    };
+
+    mainMap.view = function(){
+        return m('div.uk-panel.uk-panel-box',[
+            m('div.uk-panel-badge.uk-badge', [
+                m('i.fa.fa-map-o')
+            ]),
+            m('h3.uk-panel-title', 'Parc Walter-Stewart'),
+            mainMap.getMap()
+        ]);
+    };
+
+    var mainPageBottom = {};
+
+    mainPageBottom.view = function(){
+        return m('div.uk-grid',[
+            m('div.uk-width-1-5'),
+            m('div.uk-width-1-5', mainPageNews.view()),
+            m('div.uk-width-1-5', mainPageSchedule.view()),
+            m('div.uk-width-1-5', mainMap.view())
+        ]);
+    };
+
+    var mainPage = {};
+
+    mainPage.view  = function(){
+        return [topNavBar.view(),
+                mainPageLogo.view(),
+                mainPageBottom.view(),
+                footer.view()
+            ];
+    };
+
+    return mainPage;
+});

script/views/topNavBar.js

@@ -0,0 +1,42 @@
+define(['m', '_', 'util'], function (m, _, util) {
+    var topNavBar = {};
+
+    topNavBar._urlMapping = {
+        acceuil: 'Acceuil',
+        calendrier: 'Calendrier',
+        reglement: 'Règlement',
+        photos: 'Photos',
+        membre: 'Membre',
+        contact: 'Nous Joindre'
+    };
+
+    topNavBar.controller = function(){
+        return {id: m.route.param("page")};
+    };
+
+    topNavBar._getUrlForId = function(id_){
+        return  '#/' + id_;
+    };
+
+    topNavBar._isActive = function(id_){
+        return id_ == m.route.param("page");
+    };
+
+    topNavBar._getItem = function(name, id){
+        var class_ = topNavBar._isActive(id) ? 'uk-active' : 'uk-parent';
+        var url = topNavBar._getUrlForId(id);
+        return m("li", {class: class_}, [m("a",{href: url},  name)]);
+    };
+
+    topNavBar.view = function(controller){
+        return m("nav.uk-navbar",
+                  [m("div.uk-navbar-content.uk-navbar-center", [
+                      m("ul.uk-navbar-nav",
+                         m('li.uk-parent', util.facebookLink()),
+                        _.map(topNavBar._urlMapping, topNavBar._getItem)
+                        )
+        ])]);
+    };
+
+    return topNavBar;
+});