Initial commit

Base functionality involving Vue components is largely complete
Working on user saving, sharing, security, and UI - mostly involving firebase

app.js

@@ -0,0 +1,208 @@
+// Vue.js
+var app = new Vue({
+    el: "#app",
+    data: {
+        currentId: 0,
+        options: [
+            new Pokemon(),
+            new Pokemon(),
+            new Pokemon(),
+        ],
+        detail: new Pokemon(),
+        leftJump: 3,
+        rightJump: 3,
+        teamOptionsToggle: false,
+        user: new User(),
+        signInUp: {
+            email: "",
+            pass: "",
+            passConf: ""
+        },
+    },
+    mounted: function() {
+        var id = this.currentId + 1;
+
+        this.populateOptions(id);
+
+        firebase.auth().onAuthStateChanged(function(user) {
+            if (user) {
+                app.user.isLoggedIn = true;
+                app.user.email = user.email;
+                app.user.uid = user.uid;
+
+                // console.log(user);
+                //
+                // db.ref('user/' + user.uid + '/team/').once('value').then(function(snapshot) {
+                //     console.log(snapshot);
+                // });
+            }
+        });
+
+        this.user.init(teamSize, startingMoney);
+    },
+    methods: {
+        populateOptions: function(startId) {
+            for (var id = startId, counter = 0 ; id < startId + displayOptions ; id++, counter++) {
+                this.firebaseRequest(id, counter);
+            }
+        },
+        firebaseRequest: function(id, index) {
+            db.ref('pokemon/' + id).once('value').then(function(snapshot) {
+                var val = snapshot.val();
+
+                if (val) {
+                    console.log(id, val);
+                    app.options[index].init(val);
+                } else {
+                    app.pokeApiRequest(id, index);
+                }
+
+                app.currentId++;
+            });
+        },
+        pokeApiRequest: function(id, index) {
+            $.ajax({
+                url: "http://pokeapi.co/api/v2/pokemon/" + id + "/",
+                type: "get",
+                dataType: "json",
+                success: function(data) {
+                    // console.log('api call');
+                    console.log(id, data);
+
+                    app.options[index].init(data);
+
+                    db.ref('pokemon/' + id).set(data);
+                },
+                error: function() {
+                    console.log("error");
+                }
+            });
+        },
+        cycleOptions: function(forward, jumpSize) {
+            app.currentId += jumpSize - displayOptions;
+
+            var startId = app.currentId;
+
+            if (forward) {
+                startId++;
+            } else {
+                startId -= displayOptions + 2;
+                app.currentId -= displayOptions + 3;
+            }
+
+            app.populateOptions(startId);
+        },
+        updateDetailView: function(pokemon, isTeamMember, index) {
+            app.detail.isTeamMember = isTeamMember;
+            app.detail.index = index;
+
+            app.detail.transferIn(pokemon);
+            app.createGraph(pokemon.name, pokemon.stats);
+
+            $('#pokemon-detail').modal('show');
+        },
+        closeDetailView: function(detail) {
+            if (detail.isTeamMember) {
+                app.user.updateTeamMember(detail);
+            }
+
+            $('#pokemon-detail').modal('hide');
+        },
+        typeLink: function(type) {
+            return "http://bulbapedia.bulbagarden.net/wiki/" + type + "_(type)";
+        },
+        searchPokemon: function() {
+
+        },
+        createGraph: function(name, stats) {
+            var statsArr = [];
+
+            stats.forEach(function(statObj) {
+                var idx = app.findGraphIdx(statObj);
+
+                statsArr[idx] = statObj.base_stat;
+            });
+
+            console.log(statsArr);
+
+            var data = {
+                    labels: ["HP", "Attack", "Defense", "Speed", "Sp Def", "Sp Atk"],
+                    datasets: [
+                        {
+                            label: name + " Stat Graph",
+                            backgroundColor: "rgba(255,99,132,0.2)",
+                            borderColor: "rgba(255,99,132,1)",
+                            pointBackgroundColor: "rgba(255,99,132,1)",
+                            pointBorderColor: "#fff",
+                            pointHoverBackgroundColor: "#fff",
+                            pointHoverBorderColor: "rgba(255,99,132,1)",
+                            data: statsArr
+                        },
+                    ]
+                },
+                myRadarChart = new Chart("stats-chart", {
+                    type: 'radar',
+                    data: data,
+                    options: {
+                        scale: {
+                            ticks: {
+                                beginAtZero: true,
+                                max: 260
+                            }
+                        },
+                        responsive: true,
+                        defaultFontSize: 1
+                    }
+                });
+        },
+        findGraphIdx: function(statObj) {
+            switch (statObj.stat.name) {
+                case "hp":
+                    return 0;
+                case "attack":
+                    return 1;
+                case "defense":
+                    return 2;
+                case "speed":
+                    return 3;
+                case "special-defense":
+                    return 4;
+                case "special-attack":
+                    return 5;
+                default:
+                    return false;
+            }
+        },
+        saveConfirm: function() {
+
+        }
+    },
+    computed: {
+        detailImg: function() {
+            return this.detail.updateImg();
+        },
+        moneyRemaining: function() {
+            var remaining = this.user.moneyRemaining;
+
+            this.user.team.forEach(function(teamMember) {
+                remaining -= teamMember.value;
+            });
+
+            if (remaining < 0) {
+                swal('Invalid team. Team value exceeds maximum limit.');
+            }
+
+            return parseFloat(remaining).toFixed(2);
+        },
+        detailInputs: function() {
+            // console.log(this.detail);
+            return this.detail.isTeamMember;
+        }
+    },
+    watch: {
+        // detailImg: function() {
+        //     // console.log('watcher');
+        //     this.detail.updateImg();
+        // }
+    }
+});

css/style.css

@@ -0,0 +1,147 @@
+.shrink-padding {
+    padding: 24px 0;
+    margin-bottom: 0px;
+}
+
+.big-arrow {
+    font-size: 50px;
+    cursor: pointer;
+    margin-bottom: 25px;
+}
+
+.cycle-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-self: center;
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+.row-buffer {
+    margin-bottom: 20px;
+}
+
+.type {
+    border: solid 2px black;
+    border-radius: 20px;
+    display: inline-block;
+    width: 100px;
+    color: #FFF;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.type:hover {
+    text-decoration: none;
+}
+
+#pokemon-detail .modal-content {
+    /*padding: 100px 0;*/
+    /*padding-top: 5em;*/
+    min-height: 100%;
+    border: 0;
+    border-radius: 0;
+    text-align: center;
+    background-clip: border-box;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    background-color: #d3d3d3;
+}
+
+#pokemon-detail .modal-content h2 {
+    margin-bottom: 15px;
+    font-size: 3em;
+    color: black;
+    text-shadow: 0px 0px #d3d3d3;
+}
+
+#pokemon-detail .modal-content p {
+    margin-bottom: 30px;
+}
+
+#pokemon-detail .modal-content p.item-intro {
+    margin: 20px 0 30px;
+    font-family: "Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;
+    font-size: 16px;
+    font-style: italic;
+}
+
+#pokemon-detail .modal-content ul.list-inline {
+    margin-top: 0;
+    margin-bottom: 30px;
+}
+
+#pokemon-detail .close-modal {
+    position: absolute;
+    top: 25px;
+    right: 25px;
+    width: 75px;
+    height: 75px;
+    background-color: transparent;
+    cursor: pointer;
+}
+
+#pokemon-detail .close-modal:hover {
+    opacity: .3;
+}
+
+#pokemon-detail .close-modal .lr {
+    z-index: 1051;
+    width: 1px;
+    height: 75px;
+    margin-left: 35px;
+    background-color: #222;
+    -webkit-transform: rotate(45deg);
+    -ms-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+#pokemon-detail .close-modal .lr .rl {
+    z-index: 1052;
+    width: 1px;
+    height: 75px;
+    background-color: #222;
+    -webkit-transform: rotate(90deg);
+    -ms-transform: rotate(90deg);
+    transform: rotate(90deg);
+}
+
+.footer {
+    padding-top: 4em;
+    text-align: center;
+}
+
+.footer .copyright {
+    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+    line-height: 30px;
+}
+
+.footer .quicklinks {
+  margin-bottom: 0;
+  font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
+  line-height: 30px;
+}
+
+.no-bullets {
+  list-style-type: none;
+}
+
+.fade {
+    opacity:0;
+    -webkit-transition:opacity 0.15s linear;
+    -o-transition:opacity 0.15s linear;
+    transition:opacity 0.15s linear
+}
+
+.modal-vertical-centered {
+  transform: translate(0, 35%) !important;
+  -ms-transform: translate(0, 35%) !important; /* IE 9 */
+  -webkit-transform: translate(0, 35%) !important; /* Safari and Chrome */
+}
+
+.sign-up-addon {
+    width: 120px;
+}