merging from master

Gemfile

@@ -10,21 +10,19 @@ gem 'sass-rails', '~> 5.0'
 # Use Uglifier as compressor for JavaScript assets
 gem 'uglifier', '>= 1.3.0'
 # Use CoffeeScript for .coffee assets and views
-gem 'coffee-rails', '~> 4.1.0'
+  gem 'coffee-rails', '~> 4.1.0'
 # See https://github.com/rails/execjs#readme for more supported runtimes
 # gem 'therubyracer', platforms: :ruby
 
 # Use jquery as the JavaScript library
 gem 'jquery-rails'
-# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
-gem 'turbolinks'
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.0'
 # bundle exec rake doc:rails generates the API under doc/api.
 gem 'sdoc', '~> 0.4.0', group: :doc
 
 # Use ActiveModel has_secure_password
-# gem 'bcrypt', '~> 3.1.7'
+gem 'bcrypt', '~> 3.1.7'
 
 # Use Unicorn as the app server
 # gem 'unicorn'
@@ -38,10 +36,16 @@ gem 'wombat'
 # Use Whenever for scheduling scraping sports data
 gem 'whenever'
 
+# Use VueJS for the front end
+gem 'vuejs-rails'
+
+gem 'font-awesome-sass', '~> 4.7.0'
 gem 'omniauth-facebook'
 gem 'gmaps4rails'
 gem 'geocoder'
 gem 'bootstrap-sass', '~> 3.3.6'
+gem 'will_paginate', '~> 3.1.0'
+gem "rails-erd"
 
 
 group :development, :test do

app/assets/javascripts/application.js

@@ -12,10 +12,15 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require turbolinks
+
 //= require_tree .
 //= require bootstrap-sprockets
 
 // Dependencies for Google maps
 //= require underscore
 //= require gmaps/google
+
+// Dependencies for VueJS
+//= require vue
+//= require vue-router
+//= require vue-resource

app/assets/javascripts/home.js

@@ -0,0 +1,105 @@
+$(document).ready(function() {
+
+  Vue.component('game-info', {
+    data: function () {
+      return {
+        message: 'Hey there!',
+      }
+    },
+    template: '<div class="game-info">{{ message }}</div>'
+  });
+
+  Vue.component('game-box', {
+    props: ['datetime', 'sport', 'team1', 'team2'],
+    template:
+      `<div class="game" v-on:click="viewGame">
+        <div class="time-container col-sm-3">
+          <p class="time alt-text" v-text="datetime"></p>
+        </div>
+        <div class="info-container col-sm-9">
+          <p class="sport alt-text" v-text="sport"></p>
+          <div class="team1 col-sm-3" v-text="team1"></div>
+          <div class="vs col-sm-3">VS</div>
+          <div class="team2 col-sm-3" v-text="team2"></div>
+        </div>
+      </div>`,
+    methods: {
+      viewGame: function(event) {
+        var target = event.currentTarget;
+        $(target).addClass('game-click');
+        $('.game-info').show();
+        setTimeout(function() {
+          $(target).removeClass('game-click');
+        }, 400);
+      }
+    },
+  });
+
+  Vue.component('games', {
+    props: ['games_list'],
+    template:
+      `<div id="games">
+        <game-box
+          v-for="game in games_list"
+          :datetime="game.datetime"
+          :sport="game.sport.name"
+          :team1="game.team1.name"
+          :team2="game.team2.name">
+        </game-box>
+      </div>`
+  });
+
+  new Vue({
+    el: '#home',
+    data: {
+      games_list: [],
+    },
+    created: function() {
+      this.scroll();
+      this.getGames();
+    },
+    methods: {
+      scroll: function() {
+        var that = this;
+        window.addEventListener('scroll', function () {
+          if($(window).scrollTop() + $(window).height() == $(document).height()) {
+            that.getGames();
+          }
+        })
+      },
+      getGames: function() {
+        var that = this;
+        var lastDateTimeString = getLastDateTime(this.games_list)
+        var lock = true;
+
+        $.ajax({
+          url: `/games.json?game_datetime=${lastDateTimeString}`,
+          success: function(res) {
+            res.games.forEach(function(game) {
+              that.games_list.push(game);
+            });
+            lock = false;
+          }
+        });
+      }
+    }
+  });
+
+  function getDateTime() {
+    var today = new Date();
+    var yr = today.getFullYear();
+    var month = today.getMonth() + 1;
+    var day = today.getDate();
+    return yr + '-' + month + '-' + day + ' 00:00:00';
+  }
+
+  function getLastDateTime(games_array) {
+    if (games_array.length === 0) {
+      return getDateTime();
+    } else {
+      return games_array[games_array.length - 1].datetime;
+    }
+  }
+
+
+});

app/assets/stylesheets/application.scss

@@ -12,9 +12,124 @@
  *
  *= require_tree .
  *= require_self
- */
+*/
 
- @import "bootstrap-sprockets";
- @import "bootstrap";
+@import "bootstrap-sprockets";
+@import "bootstrap";
+// @import "font-awesome-sprockets";
+// @import "font-awesome";
 
-body { padding-top: 70px; }
+$ui-dark-gray: #212225;
+$ui-pale-gray: #5F5F60;
+$ui-dark-blue: #363A44;
+$ui-light-gray: #BCC4CA;
+$ui-blue: #5A82A5;
+$ui-dark-border: #191A1C;
+$ui-light-border: #292A2E;
+
+$brand-dark-red: #9f111b;
+$brand-light-red: #b11623;
+$brand-dark-blue: #292c37;
+$brand-light-gray: #cccccc;
+
+body {
+  box-sizing: border-box;
+  font-family: 'Open Sans', sans-serif;
+  padding-top: 70px;
+  background: $ui-dark-gray url("./bg-noise.png");
+  color: $ui-light-gray;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.5);
+
+  a {
+    color: $brand-dark-red;
+  }
+
+  a:hover {
+    color: $brand-light-red;
+  }
+}
+
+.home-container {
+  width: 50%;
+  margin: 0 auto;
+}
+
+.navbar {
+  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
+  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
+  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
+
+  background: rgba(95,95,96,1);
+  background: -moz-linear-gradient(top, rgba(95,95,96,1) 0%, rgba(51,51,51,1) 100%);
+  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(95,95,96,1)), color-stop(100%, rgba(51,51,51,1)));
+  background: -webkit-linear-gradient(top, rgba(95,95,96,1) 0%, rgba(51,51,51,1) 100%);
+  background: -o-linear-gradient(top, rgba(95,95,96,1) 0%, rgba(51,51,51,1) 100%);
+  background: -ms-linear-gradient(top, rgba(95,95,96,1) 0%, rgba(51,51,51,1) 100%);
+  background: linear-gradient(to bottom, rgba(95,95,96,1) 0%, rgba(51,51,51,1) 100%);
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5f5f60', endColorstr='#333333', GradientType=0 );
+
+  border-bottom: 1px solid $ui-pale-gray;
+
+  font-weight: 600;
+  text-shadow: 0px 1px 2px rgba(0, 0, 0, 1);
+
+  line-height: 50px;
+
+  .btn-facebook {
+    padding-left: 40px;
+    margin-top: 8px;
+  }
+  a {
+    color: white;
+  }
+  a:hover {
+    text-decoration: none;
+  }
+}
+
+.alt-text {
+  color: $ui-pale-gray;
+}
+
+#games {
+  border: 1px solid $ui-dark-border;
+
+  .game {
+    overflow: auto;
+    padding: 15px;
+
+    border-top: 1px solid $ui-light-border;
+    border-left: 1px solid $ui-light-border;
+    border-right: 1px solid $ui-light-border;
+    border-bottom: 1px solid $ui-dark-border;
+
+    .vs {
+      font-size: 3em;
+      color: $brand-light-red;
+    }
+  }
+
+  .game:hover {
+    cursor: pointer;
+  }
+
+  .game-click,
+  .game-click p {
+    animation: highlight-game 0.4s ease;
+
+    @keyframes highlight-game {
+      50% {
+        text-shadow: 0px 0px 1px $brand-light-red;
+        color: $brand-light-red;
+        background-color: $ui-dark-border;
+      }
+    }
+  }
+}
+
+.game-info {
+  display: none;
+  width: 100%;
+  z-index: 2;
+  background-color: red;
+}