merge with master

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>
         );
     }
@@ -155,6 +155,9 @@ function GamePanel(props) {
                 return 'Game over';
         }
     }
+
+    const logs = game.log.reverse().map((l, i) => (<div key={i}>{l}</div>));
+
     return (
         <section className="columns">
             <div className="column is-1">
@@ -175,9 +178,8 @@ function GamePanel(props) {
                     </div>
                 </section>
             </div>
-            <div className="column is-3">
-                <div className="title is-4">{phaseText(game.phase)}</div>
-                <div> log </div>
+            <div className="column is-2">
+                <div className="title is-4">{logs}</div>
             </div>
         </section>
     )