passives and lots and lots of skills

client/cryps.css

@@ -0,0 +1,3 @@
+body {
+    background-color: #181818;
+}

client/index.js

@@ -1,2 +1,4 @@
+require('./cryps.css');
+
 // kick it off
 require('./src/main');

client/src/components/game.jsx

@@ -55,8 +55,8 @@ function GamePanel(props) {
             );
         });
 
-        const statuses = cryp.statuses.map((status, i) => (
-            <div key={i}>{status} for {status.turns}T</div>
+        const effects = cryp.effects.map((effect, i) => (
+            <div key={i}>{effect} for {effect.turns}T</div>
         ));
 
         return (
@@ -84,7 +84,7 @@ function GamePanel(props) {
                     <div className="has-text-centered">{cryp.xp} / {Math.pow(2, cryp.lvl + 1)} XP </div>
                     <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
                 </div>
-                {statuses}
+                {effects}
                 {skills}
             </div>
         );
@@ -101,8 +101,8 @@ function GamePanel(props) {
     }
 
     function OpponentCrypCard(cryp) {
-        const statuses = cryp.statuses.map((status, i) => (
-            <div key={i}>{status.status} for {status.turns}T</div>
+        const effects = cryp.effects.map((effect, i) => (
+            <div key={i}>{effect.effect} for {effect.turns}T</div>
         ));
 
         return (
@@ -127,7 +127,7 @@ function GamePanel(props) {
                     <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2, cryp.lvl + 1)}></progress>
 
                 </div>
-                {statuses}
+                {effects}
             </div>
         );
     }