complete supersquad

15Dkatz · Jun 17, 2017 · 1e59001 · 1e59001
1 parent 805fa5e
commit 1e59001
Show file tree

Hide file tree

Showing 9 changed files with 148 additions and 7 deletions.
diff --git a/supersquad/public/index.html b/supersquad/public/index.html
@@ -19,6 +19,8 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <title>React App</title>
   </head>
   <body>

diff --git a/supersquad/src/actions/index.js b/supersquad/src/actions/index.js
@@ -1,9 +1,18 @@
 export const ADD_CHARACTER = 'ADD_CHARACTER';
+export const REMOVE_CHARACTER = 'REMOVE_CHARACTER';
 
 export function addCharacterById(id) {
   const action = {
     type: ADD_CHARACTER,
     id
   }
   return action;
+}
+
+export function removeCharacterById(id) {
+  const action = {
+    type: REMOVE_CHARACTER,
+    id
+  }
+  return action;
 }
diff --git a/supersquad/src/components/App.js b/supersquad/src/components/App.js
@@ -1,12 +1,23 @@
 import React, { Component } from 'react';
 import CharacterList from './CharacterList';
+import HeroList from './HeroList';
+import SquadStats from './SquadStats';
+import '../styles/index.css';
 
 class App extends Component {
   render() {
     return (
-      <div>
+      <div className="App">
         <h2>SuperSquad</h2>
-        <CharacterList />
+        <div className="col-md-4">
+          <CharacterList />
+        </div>
+        <div className="col-md-4">
+          <HeroList />
+        </div>
+        <div className="col-md-4">
+          <SquadStats />
+        </div>
       </div>
     )
   }

diff --git a/supersquad/src/components/CharacterList.js b/supersquad/src/components/CharacterList.js
@@ -10,13 +10,14 @@ class CharacterList extends Component {
     return (
       <div>
         <h4>Characters</h4>
-        <ul>
+        <ul className="list-group">
           {
             this.props.characters.map(character => {
               return (
-                <li key={character.id}>
-                  <div>{character.name}</div>
+                <li key={character.id} className="list-group-item">
+                  <div className="list-item">{character.name}</div>
                   <div
+                    className="list-item right-button"
                     onClick={() => this.props.addCharacterById(character.id)}
                   >
                     +

diff --git a/supersquad/src/components/HeroList.js b/supersquad/src/components/HeroList.js
@@ -0,0 +1,40 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+import { removeCharacterById } from '../actions';
+
+class HeroList extends Component {
+  render() {
+    return (
+      <div>
+        <h4>Your Hero Squad</h4>
+        <ul className="list-group">
+          {
+            this.props.heroes.map(hero => {
+              return (
+                <li key={hero.id} className="list-group-item">
+                  <div className="list-item">
+                    {hero.name}
+                  </div>
+                  <div 
+                    className="list-item right-button"
+                    onClick={() => this.props.removeCharacterById(hero.id)}
+                  >
+                    x
+                  </div>
+                </li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    heroes: state.heroes
+  }
+}
+
+export default connect(mapStateToProps, { removeCharacterById })(HeroList);
diff --git a/supersquad/src/components/SquadStats.js b/supersquad/src/components/SquadStats.js
@@ -0,0 +1,49 @@
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+class SquadStats extends Component {
+  strength() {
+    let strength = 0;
+    this.props.heroes.forEach(hero => strength += hero.strength);
+    return strength;
+  }
+
+  intelligence() {
+    let intelligence = 0;
+    this.props.heroes.forEach(hero => intelligence += hero.intelligence);
+    return intelligence;
+  }
+
+  speed() {
+    let speed = 0;
+    this.props.heroes.forEach(hero => speed += hero.speed);
+    return speed;
+  }
+
+  render() {
+    return (
+      <div>
+        <h4>Squad Stats</h4>
+        <ul className="list-group">
+          <li className="list-group-item">
+            <b>Overall Strength:</b> {this.strength()}
+          </li>
+          <li className="list-group-item">
+            <b>Overall Intelligence:</b> {this.intelligence()}
+          </li>
+          <li className="list-group-item">
+            <b>Overall Speed:</b> {this.speed()}
+          </li>
+        </ul>
+      </div>
+    )
+  }
+}
+
+function mapStateToProps(state) {
+  return {
+    heroes: state.heroes
+  }
+}
+
+export default connect(mapStateToProps, null)(SquadStats);
diff --git a/supersquad/src/reducers/characters_reducer.js b/supersquad/src/reducers/characters_reducer.js
@@ -1,11 +1,16 @@
 import characters_json from '../data/characters.json';
-import { ADD_CHARACTER } from '../actions';
+import { ADD_CHARACTER, REMOVE_CHARACTER } from '../actions';
+import { createCharacter } from './helpers';
+
 
 function characters(state = characters_json, action) {
   switch(action.type) {
     case ADD_CHARACTER:
       let characters = state.filter(item => item.id !== action.id);
       return characters;
+    case REMOVE_CHARACTER:
+      characters = [...state, createCharacter(action.id)];
+      return characters;
     default:
       return state;
   }

diff --git a/supersquad/src/reducers/heroes_reducer.js b/supersquad/src/reducers/heroes_reducer.js
@@ -1,11 +1,14 @@
-import { ADD_CHARACTER } from '../actions';
+import { ADD_CHARACTER, REMOVE_CHARACTER } from '../actions';
 import { createCharacter } from './helpers';
 
 function heroes(state = [], action) {
   switch(action.type) {
     case ADD_CHARACTER:
       let heroes = [...state, createCharacter(action.id)];
       return heroes;
+    case REMOVE_CHARACTER:
+      heroes = state.filter(item => item.id !== action.id);
+      return heroes;
     default: 
       return state;
   }

diff --git a/supersquad/src/styles/index.css b/supersquad/src/styles/index.css
@@ -0,0 +1,21 @@
+body {
+  background-image: url('../assets/background.jpg');
+  height: 100%;
+  background-size: cover;
+  background-repeat: none;
+  opacity: 0.8;
+}
+
+.App {
+  text-align: center;
+  padding: 5%;
+}
+
+.right-button {
+  cursor: pointer;
+  float: right;
+}
+
+.list-item {
+  display: inline-block;
+}