stuns and statuses

client/src/components/game.jsx

@@ -55,6 +55,12 @@ function GamePanel(props) {
             );
         });
 
+        const statuses = cryp.statuses.map((status, i) => {
+            return (
+                <div key={i}>{status} for {status.turns}T</div>
+            )
+        })
+
         if (activeIncoming) console.log('should be a pointer');
         return (
             <div
@@ -81,6 +87,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}
                 {skills}
             </div>
         );
@@ -97,6 +104,12 @@ function GamePanel(props) {
     }
 
     function OpponentCrypCard(cryp) {
+        const statuses = cryp.statuses.map((status, i) => {
+            return (
+                <div key={i}>{status.status} for {status.turns}T</div>
+            )
+        });
+
         return (
             <div key={cryp.id} className="tile is-vertical">
                 <div className="tile is-child">
@@ -119,6 +132,7 @@ function GamePanel(props) {
                     <progress className="progress is-dark" value={cryp.xp} max={Math.pow(2,cryp.lvl+1)}></progress>
 
                 </div>
+                {statuses}
             </div>
         );
     }

client/src/socket.jsx

@@ -140,7 +140,7 @@ function createSocket(store) {
     }
 
     function sendGameTarget(gameId, crypId, skillId) {
-        send({ method: 'game_target', params: { game_id: gameId, cryp_id: crypId, skill_id: skillId } });
+        send({ method: 'game_target', params: { game_id: gameId, cryp_id: crypId, cast_id: skillId } });
         store.dispatch(actions.setActiveIncoming(null));
     }