Changes:

* Router functionality
* Custom active class - thanks to @spicyj - remix-run/react-router#86
* Update deps
* Namespace CSS
* Remove learn modules

gulpfile.js

@@ -111,8 +111,11 @@ gulp.task('css', function() {
 /* JavaScript */
 var bundler = browserify({
   'entries': [path.jsEntrypoint],
-  'transform': [babelify],
-  'debug': !isProduction,
+  'transform': [babelify.configure({
+    optional: ['es7.objectRestSpread']
+  })],
+  // 'debug': !isProduction,
+  'debug': true,
   'cache': {},
   'packageCache': {},
   'fullPaths': true
@@ -121,7 +124,11 @@ var bundler = browserify({
 var bundleIt = function(bundle) {
   var streamify = require('gulp-streamify');
   var uglify = require('gulp-uglify');
-  return bundle.bundle()
+  return bundle
+    .bundle()
+    .on('error', function (err) {
+      console.log('Error : ' + err.message);
+    })
     .pipe(source(path.out))
     .pipe(streamify(gulpif(isProduction, uglify())))
     .pipe(gulp.dest(path.destJs))
@@ -148,7 +155,8 @@ gulp.task('nodemon', function (cb) {
   var started = false;
 
   return nodemon({
-    script: 'server.js'
+    script: 'server.js',
+    watch: 'server.js'
   }).on('start', function () {
     // to avoid nodemon being started multiple times
     // thanks @matthisk

package.json

@@ -29,10 +29,10 @@
   "homepage": "https://github.com/christianv/pentire#readme",
   "dependencies": {
     "babelify": "^6.1.3",
-    "browser-sync": "^2.8.0",
-    "browserify": "^11.0.0",
-    "del": "^1.2.0",
-    "eslint": "^1.1.0",
+    "browser-sync": "^2.8.2",
+    "browserify": "^11.0.1",
+    "del": "^1.2.1",
+    "eslint": "^1.2.0",
     "express": "^4.13.3",
     "gulp": "^3.9.0",
     "gulp-autoprefixer": "^2.3.1",
@@ -48,13 +48,14 @@
     "gulp-uglify": "^1.2.0",
     "gulp-util": "^3.0.6",
     "jquery": "^2.1.4",
-    "minimist": "^1.1.2",
+    "minimist": "^1.1.3",
     "normalize.css": "^3.0.3",
     "pretty-hrtime": "^1.0.0",
     "react": "^0.13.3",
+    "react-router": "^0.13.3",
     "run-sequence": "^1.1.2",
     "streamqueue": "^1.1.0",
     "vinyl-source-stream": "^1.1.0",
-    "watchify": "^3.3.0"
+    "watchify": "^3.3.1"
   }
 }

src/css/index.scss

@@ -4,45 +4,97 @@ body {
   font-weight: 100;
 }
 
-h1 {
+.p-header {
   background: rgba(0, 0, 0, .8);
-  color: #fff;
-  font-family: Helvetica Neue;
-  font-size: 30px;
-  font-weight: 100;
-  letter-spacing: 1px;
+  h1 {
+    color: #fff;
+    font-family: Helvetica Neue;
+    font-size: 30px;
+    font-weight: 100;
+    letter-spacing: 1px;
+    margin: 0;
+    padding: 20px;
+    text-align: center;
+  }
+}
+
+.p-navigation {
+  background: rgba(0, 0, 0, .5);
+  display: flex;
+  justify-content: center;
   margin: 0;
-  padding: 20px;
+  padding: 0 5px;
+  li {
+    list-style: none;
+    a {
+      color: #fff;
+      display: block;
+      padding: 15px 15px;
+      text-decoration: none;
+      &:hover, &:focus {
+        background: rgba(0, 0, 0, .20);
+      }
+    }
+  }
+}
+
+.p-container {
+  margin: 0 auto;
+  max-width: 1200px;
 }
 
-.pictures-container {
+.p-pictures-container {
   display: flex;
   flex-wrap: wrap;
 }
 
-.picture-container {
+.p-picture-container {
   padding: 10px;
   text-align: center;
   width: 200px;
 }
 
-.picture-image {
+.p-picture-image {
+  animation-duration: 1s;
+  animation-fill-mode: both;
   border-radius: 50%;
   box-shadow: 0 0 15px rgba(0, 0, 0, .15);
   // We need to add this since otherwise it'll snap back instead of easing back after the hover
   // stackoverflow.com/questions/24895483
   display: inline-block;
+  height: 150px;
   opacity: 1;
   padding: 2px;
   // TranslateZ is necessary since otherwise we get into 3D mode
   // This will cause other images to move 1px in a random direction
-  transform: translateZ(0) scale(.9);
-  transition: opacity .3s ease, transform .3s ease;
+  // transform: translateZ(0) scale(.9);
+  // transition: opacity .3s ease, transform .3s ease;
   width: 150px;
+
   &:hover {
-    opacity: .9;
-    transform: rotate(-20deg);
-    transition: opacity .3s ease, transform .3s ease;
+    animation-name: bombRightOut;
+    // opacity: .9;
+    // transform: rotate(-20deg);
+    // transition: opacity .3s ease, transform .3s ease;
   }
 }
 
+@keyframes bombRightOut {
+  0% {
+    opacity: 1;
+    transform-origin: 50% 50%;
+    transform: rotate(0deg);
+  }
+
+  // 70% {
+  //   opacity: .5;
+  //   transform-origin: 200% 50%;
+  //   transform: rotate(160deg) scale(.5);
+  // }
+
+  100% {
+    opacity: 0;
+    transform-origin: 250% 10%;
+    transform: rotate(160deg) scale(.1);
+  }
+}

src/js/app.jsx

@@ -0,0 +1,35 @@
+var React = require('react');
+var Router = require('react-router');
+var Link = Router.Link;
+var RouteHandler = Router.RouteHandler;
+
+var CustomLink = React.createClass({
+  getDefaultProps: function () {
+    return { activeClassName: 'p-active' };
+  },
+  render: function () {
+    return <Link {...this.props}>{this.props.children}</Link>;
+  }
+});
+
+var App = React.createClass({
+  render: function () {
+    return (
+      <div>
+        <header className="p-header">
+          <h1>SIS Team Members</h1>
+        </header>
+        <ul className="p-navigation">
+          <li><CustomLink to="game">Game</CustomLink></li>
+          <li><CustomLink to="overview">Overview</CustomLink></li>
+        </ul>
+
+        <div className="p-container">
+          <RouteHandler/>
+        </div>
+      </div>
+    );
+  }
+});
+
+module.exports = App;

src/js/parent.jsx → src/js/game.jsx

@@ -2,7 +2,7 @@ var React = require('react');
 var Picture = require('./picture.jsx');
 var $ = require('jquery');
 
-var Parent = React.createClass({
+var Game = React.createClass({
   getInitialState() {
     return {
       pictures: []
@@ -20,15 +20,8 @@ var Parent = React.createClass({
   },
   render() {
     return (
-      <div>
-        <h1>SIS Team Members</h1>
-        <ul className="pictures-container">
-          {this.state.pictures.map(function(picture) {
-            return <Picture key={picture.image} data={picture}/>;
-          })}
-        </ul>
-      </div>
+      <div>Hey</div>
     );
   }
 });
-module.exports = Parent;
+module.exports = Game;

src/js/index.js

@@ -1,3 +1 @@
 require('./render.jsx');
-
-// require('./learn-es6')

src/js/overview.jsx

@@ -0,0 +1,31 @@
+var React = require('react');
+var Picture = require('./picture.jsx');
+var $ = require('jquery');
+
+var Overview = React.createClass({
+  getInitialState() {
+    return {
+      pictures: []
+    };
+  },
+  componentDidMount() {
+    let url = 'https://sisteam.herokuapp.com/api/pictures';
+    $.get(url, function(result) {
+      if (this.isMounted()) {
+        this.setState({
+          pictures: result.pictures
+        });
+      }
+    }.bind(this));
+  },
+  render() {
+    return (
+      <ul className="p-pictures-container">
+        {this.state.pictures.map(function(picture) {
+          return <Picture key={picture.image} data={picture}/>;
+        })}
+      </ul>
+    );
+  }
+});
+module.exports = Overview;