Merge pull request #17 from PrincessMadMath/Feature/MissingSpellInfo

Feature/missing spell info

Author: PrincessMadMath

src/components/Spells/ComponentIcon.jsx

@@ -4,17 +4,11 @@ import React from 'react'
 /* Style */
 import './style/Component.css';
 
-function isComponentEnabled(component, requiredComponent) {
-    if (requiredComponent.toLowerCase().includes(component.toLowerCase())) {
-        return true;
-    } else {
-        return false;
-    }
-}
+
 
 const ComponentIcon = (prop) => {
     return (
-        <div className={ "component-item " + (isComponentEnabled(prop.valueToCheck, prop.requiredValue)
+        <div className={ "component-item " + (prop.isRequired
                      ? ""
                      : "component-disabled") }>
           <img src={ prop.icon } className="component-logo" alt={ prop.alternative } />

src/components/Spells/Components.jsx

@@ -13,28 +13,28 @@ import verbal from './icon/verbal.svg';
 import somatic from './icon/somatic.svg';
 import material from './icon/material.svg';
 
-const Components = ({spellToRender}) => {
+const Components = ({components}) => {
 
     return (
         <div>
           <div className="component-list">
-            <ComponentIcon valueToCheck="concentration" requiredValue={ spellToRender.Duration } icon={ concentration } alternative="Concentration" />
-            <ComponentIcon valueToCheck="v" requiredValue={ spellToRender.Components } icon={ verbal } alternative="Verbal" />
-            <ComponentIcon valueToCheck="s" requiredValue={ spellToRender.Components } icon={ somatic } alternative="Somatic" />
-            <ComponentIcon valueToCheck="m" requiredValue={ spellToRender.Components } icon={ material } alternative="Meterial" />
+            <ComponentIcon isRequired={ components.concentration } icon={ concentration } alternative="Concentration" />
+            <ComponentIcon isRequired={ components.verbal } icon={ verbal } alternative="Verbal" />
+            <ComponentIcon isRequired={ components.somatic } icon={ somatic } alternative="Somatic" />
+            <ComponentIcon isRequired={ components.material }icon={ material } alternative="Meterial" />
           </div>
         </div>
         );
 
 }
 
 Components.propTypes = {
-    spellToRender: React
-        .PropTypes
-        .shape({
-            Duration: React.PropTypes.string.isRequired,
-            Components: React.PropTypes.string.isRequired
-        })
+    components: React.PropTypes.shape({
+        concentration: React.PropTypes.bool.isRequired,
+        somatic: React.PropTypes.bool.isRequired,
+        verbal: React.PropTypes.bool.isRequired,
+        material: React.PropTypes.bool.isRequired,
+    })
 };
 
 export default Components;

src/components/Spells/SpellInfo.jsx

@@ -1,5 +1,6 @@
 /* Utils */
 import React from 'react';
+import { Grid, Row, Col } from 'react-bootstrap';
 
 /* Components */
 import Components from './Components'
@@ -20,24 +21,36 @@ const SpellInfo = ({spellToRender}) => {
 
   return (
     <div className="information-box">
-      <h1 className="spell-title">{ spellToRender.Name }</h1>
-      <div className="spell-components">
-        <Components spellToRender={ spellToRender } />
-      </div>
+      <Grid bsClass="grid">
+        <Row>
+          <Col xs={ 12 } sm={ 8 }>
+          <h1 className="spell-title">{ spellToRender.name }</h1>
+          <div className="spell-type">
+            <span>{ spellToRender.type }</span>
+            <span>{ spellToRender.canBeRitual && " (ritual)" } </span>
+          </div>
+          </Col>
+          <Col xs={ 12 } sm={ 4 }>
+          <div className="spell-components">
+            <Components components={ spellToRender.components } />
+          </div>
+          </Col>
+        </Row>
+      </Grid>
       <div className="spell-quick-info">
         <p>
-          <b>Range:</b>
-          { spellToRender.Range }
+          <b>Range: </b>
+          { spellToRender.range }
           <br/>
-          <b>Duration:</b>
-          { spellToRender.Duration }
+          <b>Duration: </b>
+          { spellToRender.duration }
           <br/>
-          <b>Casting time:</b>
-          { spellToRender.CastingTime }
+          <b>Casting time: </b>
+          { spellToRender.castingTime }
           <br/>
         </p>
       </div>
-      <p className="spell-description" dangerouslySetInnerHTML={ createMarkup(spellToRender.Description) } />
+      <p className="spell-description" dangerouslySetInnerHTML={ createMarkup(spellToRender.description) } />
     </div>
     );
 
@@ -46,15 +59,15 @@ const SpellInfo = ({spellToRender}) => {
 
 SpellInfo.propType = {
   spellToRender: React.PropTypes.shape({
-    Level: React.PropTypes.number.isRequired,
-    Name: React.PropTypes.string.isRequired,
-    Type: React.PropTypes.string.isRequired,
-    CastingTime: React.PropTypes.string.isRequired,
-    Range: React.PropTypes.string.isRequired,
-    Components: React.PropTypes.string.isRequired,
-    Duration: React.PropTypes.string.isRequired,
-    Description: React.PropTypes.string.isRequired,
-    Class: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
+    level: React.PropTypes.number.isRequired,
+    name: React.PropTypes.string.isRequired,
+    type: React.PropTypes.string.isRequired,
+    castingTime: React.PropTypes.string.isRequired,
+    range: React.PropTypes.string.isRequired,
+    components: React.PropTypes.string.isRequired,
+    duration: React.PropTypes.string.isRequired,
+    description: React.PropTypes.string.isRequired,
+    class: React.PropTypes.arrayOf(React.PropTypes.string).isRequired
   }).isRequired
 };
 

src/components/Spells/SpellsList.jsx

@@ -22,7 +22,7 @@ class SpellsList extends Component {
               { this.props.spellsToRender
                     .map(function(value) {
                         return (
-                            <LazyLoad key={ value.Name } height={ 200 } offset={ 500 }>
+                            <LazyLoad key={ value.name } height={ 200 } offset={ 500 }>
                               <SpellInfo spellToRender={ value }></SpellInfo>
                             </LazyLoad>
                             );
@@ -35,7 +35,7 @@ class SpellsList extends Component {
 SpellsList.propType = {
     spellsToRender: React.PropTypes.arrayOf(
         React.PropTypes.shape({
-            Name: React.PropTypes.string.isRequired,
+            name: React.PropTypes.string.isRequired,
         })
     ).isRequired
 };

src/components/Spells/style/Component.css

@@ -27,9 +27,9 @@ To style the spells components (vocal, somatic...)
     /* Create circle border */
     border-style: solid;
     border-color: #0A0;
-    border-radius: 35px;
-    width: 35px;
-    height: 35px;
+    border-radius: 38px;
+    width: 38px;
+    height: 38px;
 }
 
 
@@ -51,7 +51,7 @@ To style the spells components (vocal, somatic...)
 
 /*Logo inside component*/
 .component-logo {
-    height: 30px;
+    height: 28px;
     display: block;
     margin: auto;
 }

src/components/Spells/style/Spell.css

@@ -15,14 +15,9 @@ Adjustement for spell information box
     display: inline;
 }
 
-.spell-components {
-    float: right;
-}
-
-/*If small screen put components below*/
-@media (max-width: 550px) {
-    .spell-components {
-        float: none;
-    }
+/*Make the little description under title in italic*/
+.spell-type{
+    font-style: italic;
+    margin-bottom: 10px;
 }