Added background view.

Added favorite button to character comparison view.

css/main-window.css

@@ -48,6 +48,32 @@ body {
   padding-top: 2vh;
   height: 100vh;
   overflow: scroll;
+  color: white;
+}
+
+/** Background **/
+
+.background-view {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  z-index: -1;
+  transition: all;
+  background: linear-gradient(135deg, #52edff, #0d057e)
+}
+
+.background-darkblue {
+  opacity: 1;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  transition: all;
+  transition-duration: 0.5s;
+  background: linear-gradient(135deg, #0d057e,  #52edff)
+}
+
+.hidden-background {
+  opacity: 0;
 }
 
 /** Navigation */
@@ -165,6 +191,7 @@ body {
   text-align: right;
   border: none;
   background: transparent;
+  color: white;
 }
 
 #character-trainer-view-header-text {
@@ -199,7 +226,7 @@ body {
 
 .battle-view-choice-button {
   margin: 10px;
-  background-color: rgba(200, 200, 200, 0.59);
+  background-color: rgba(255, 255, 255, 0.2);
   padding: 20px;
   cursor: pointer;
   width: 24vw;
@@ -252,10 +279,14 @@ body {
 
 /** Value List */
 
+#values-view {
+  padding-bottom: 5vh;
+}
+
 .value-list-container {
   border-width: 1px;
   border-color: black;
-  margin: 10px;
+  margin: 10px 0px;
   background-color: #AAA;
   padding: 20px;
   border-radius: 8px;
@@ -298,14 +329,18 @@ body {
   position: relative;
 }
 
+.comparison-character-view-container {
+  margin-right: 10px;
+}
+
 /** Character Favorites **/
 
 #favorite-pairs-holder {
-  margin: 20px;
+  margin: 20px 0px 20px 0px;
 }
 
 #favorite-values-holder {
-  margin: 20px;
+  margin: 20px 0px 20px 0px;
 }
 
 /** Value Difference **/
@@ -337,6 +372,24 @@ body {
   z-index: 999;
 }
 
+/** Character Selector **/
+.character-selector-button {
+  margin: 10px 10px 0px 0px;
+  border-width: 1px;
+  padding: 20px;
+  border-style: solid;
+  border-color: #CCC;
+  cursor: pointer;
+}
+
+.character-selector-button-selected {
+  background-color: #CCC;
+}
+
+.character-selector-button:hover {
+  background-color: #EEE;
+}
+
 /** deprecated **/
 .favorites-filter-button {
   padding: 20px 0px;

js/views/background-view.js

@@ -0,0 +1,39 @@
+const EventEmitter = require('events').EventEmitter
+
+module.exports = class MainBaseView extends EventEmitter {
+  constructor(properties) {
+    super()
+    this.isLight = true
+
+    this.root = document.createElement("div")
+    this.root.setAttribute("id", "background-view")
+    this.root.classList.add("background-view")
+
+    this.darkBackground = document.createElement("div")
+    this.darkBackground.classList.add("background-darkblue")
+    this.root.appendChild(this.darkBackground)
+  }
+
+  getView() {
+    return this.root
+  }
+
+  nextBackground() {
+    this.isLight = !this.isLight
+    if(this.isLight) {
+      this.darkBackground.classList.remove("hidden-background")
+    } else {
+      this.darkBackground.classList.add("hidden-background")
+    }
+
+  }
+
+  updateView() {
+
+  }
+
+  viewWillDisappear() {
+
+  }
+
+}

js/views/character-comparison-view.js

@@ -1,5 +1,6 @@
 const CharacterComparisonBaseView = require('./character-comparison-base-view.js')
 const CharacterView = require('./character-selector-multiple.js')
+const FavoriteButton = require('./favorite-button.js')
 
 module.exports = class CharacterComparisonView extends CharacterComparisonBaseView {
   constructor(properties) {
@@ -73,22 +74,24 @@ module.exports = class CharacterComparisonView extends CharacterComparisonBaseVi
         let valueView = document.createElement('div')
         valueView.setAttribute("class", "value-list-container")
 
-        let favButton = document.createElement('div')
-        favButton.setAttribute("style", "position: relative; z-index: 2; padding-top: 10px;")
-        favButton.innerHTML = `add favorite`
 
         let favoriteValues = characterValueFavorites.values
         let isFavorite = favoriteValues.indexOf(value.valueID) >= 0
-        if(isFavorite) {
-          favButton.innerHTML = `favorited`
-        } else {
-          var self = this
-          favButton.addEventListener('mouseup', function(event) {
-            event.target.innerHTML = `favorited`
-            self.emit('add-character-value-favorite', {valueID: value.id, characterID: characterID})
-          })
+        let favButtonProperties = {
+          checked: isFavorite,
+          enabled: !isFavorite,
+          className: "favorite-button-container-value-list-view"
         }
 
+        var self = this
+        let favButton = new FavoriteButton(favButtonProperties)
+        favButton.setHandler(function(event) {
+          self.emit('add-character-value-favorite', {valueID: value.valueID, characterID: characterID})
+          favButton.setChecked(true)
+          favButton.setEnabled(false)
+        })
+        valueView.appendChild(favButton.getView())
+
         let progressView = document.createElement('div')
         progressView.setAttribute("class", "value-list-progress")
         progressView.setAttribute("style", `width: ${value.score*100}%`)
@@ -97,7 +100,6 @@ module.exports = class CharacterComparisonView extends CharacterComparisonBaseVi
         nameView.setAttribute("class", "value-list-label")
         nameView.innerHTML = `${this.valuesMap[value.valueID.toString()].name} | ${value.score} | Wins: ${value.wins}, Losses: ${value.losses} | Battles: ${value.battleCount}`
         valueView.appendChild(nameView)
-        valueView.appendChild(favButton)
 
         if(this.isFiltering && isFavorite) {
           result.appendChild(valueView)

js/views/character-favorites-view.js

@@ -68,7 +68,9 @@ module.exports = class CharacterFavoritesView extends MainBaseView {
       let valueNames = []
       for(let valueID of values) {
         let value = this.valuesMap[valueID]
-        valueNames.push(value.name)
+        if(value && value.name) {
+          valueNames.push(value.name)
+        }
       }
       valueNames = valueNames.sort()
       for(let valueName of valueNames) {

js/views/character-selector-multiple.js

@@ -21,9 +21,9 @@ module.exports = class CharacterView extends MainBaseView {
 
   addCharacterView(characterName, characterID, isSelected) {
     let characterView = document.createElement('div')
-    characterView.classList.add("button")
+    characterView.classList.add("character-selector-button")
     if(isSelected) {
-      characterView.classList.add("button-selected")
+      characterView.classList.add("character-selector-button-selected")
     }
     characterView.setAttribute("data-id", characterID || 1)
     characterView.innerHTML = characterName

js/views/main-window.js

@@ -1,4 +1,5 @@
 const {ipcRenderer, remote} = require('electron')
+const BackgroundView = require('./background-view')
 const CharactersView = require('./characters-view.js')
 const CharacterTrainerView = require('./character-trainer-view.js')
 const ValueListView = require('./value-list-view.js')
@@ -109,6 +110,10 @@ knex.select().table('Values')
     remote.valuesMap = valuesMap
   })
 
+
+var backgroundView = new BackgroundView()
+container.insertBefore(backgroundView.getView(), container.firstChild)
+
 var mainViewSelector = new MainViewSelector({type: curViewType, mainViews: mainViews})
 document.getElementById("navigation").appendChild(mainViewSelector.getView())
 mainViewSelector.on('select-view', viewType => {
@@ -202,6 +207,8 @@ function onSelectView() {
     selectedCharacters = data
     onSelectView()
   })
+
+  backgroundView.nextBackground()
 }
 
 /**

js/views/value-list-view.js

@@ -96,7 +96,6 @@ module.exports = class ValueListView extends MainBaseView {
           let valueView = document.createElement('div')
           valueView.classList.add("value-list-container")
 
-          // let favButton = document.createElement('div')
           let favButtonProperties = {
             checked: isFavorite,
             enabled: !isFavorite,