stack

html-client/src/components/game.component.jsx

@@ -18,10 +18,35 @@ function GamePanel(props) {
 
     if (!game) return <div>...</div>;
 
+    function findCryp(id) {
+        const team = game.teams.find(t => t.cryps.find(c => c.id === id));
+        if (team) return team.cryps.find(c => c.id === id);
+        return null;
+    }
+
     const otherTeams = game.teams.filter(t => t.id !== account.id);
 
     const playerTeam = game.teams.find(t => t.id === account.id);
 
+    function stackElement(c, i) {
+        let skills = game.stack.filter(s => s.source_cryp_id === c.id).map((s, j) => {
+            const target = findCryp(s.target_cryp_id);
+            return (
+                <div key={j}>{s.skill} -> {target.name}</div>
+            );
+        });
+
+        if (!skills.length) skills = (<div>&nbsp;</div>);
+
+        return (
+            <div
+                key={i}
+                className="stack-line">
+                {skills}
+            </div>
+        );
+    }
+
     function Cryp(cryp) {
         const skills = range(0, 4).map(i => {
             const s = cryp.skills[i]
@@ -42,6 +67,8 @@ function GamePanel(props) {
             );
         });
 
+        const stackSkills = stackElement(cryp);
+
         const stats = [
             { stat: 'hp', colour: '#1FF01F' },
             { stat: 'red_shield', colour: '#a52a2a' },
@@ -54,22 +81,25 @@ function GamePanel(props) {
         ));
 
         return (
-            <div
-                key={cryp.id}
-                style={ activeSkill ? { cursor: 'pointer' } : {}}
-                className="cryp-box" >
-                <figure
-                    className="img"
-                    onClick={() => selectSkillTarget(cryp.id)} >
-                    {molecule}
-                    <figcaption>{cryp.name}</figcaption>
-                </figure>
-                <div className="skills">
-                    {skills}
-                </div>
-                <div className="stats">
-                    {stats}
+            <div className="game-cryp-ctr" >
+                <div
+                    key={cryp.id}
+                    style={ activeSkill ? { cursor: 'pointer' } : {}}
+                    className="cryp-box" >
+                    <figure
+                        className="img"
+                        onClick={() => selectSkillTarget(cryp.id)} >
+                        {molecule}
+                        <figcaption>{cryp.name}</figcaption>
+                    </figure>
+                    <div className="skills">
+                        {skills}
+                    </div>
+                    <div className="stats">
+                        {stats}
+                    </div>
                 </div>
+                {stackSkills}
             </div>
         );
     }
@@ -78,7 +108,7 @@ function GamePanel(props) {
         const cryps = team.cryps.map(c => Cryp(c));
 
         return (
-            <div className="three columns cryp-list">
+            <div className="five columns cryp-list">
                 {cryps}
             </div>
         );
@@ -139,11 +169,8 @@ function GamePanel(props) {
                     <div>&nbsp;</div>
                 </div>
             </div>
-            <div className="row">
+            <div className="row game">
                 {PlayerTeam(playerTeam, setActiveSkill)}
-                <div className="two columns skill-lines-ctr">
-                    <div>&nbsp;</div>
-                </div>
                 <div className="three columns">
                     {otherTeams.map(OpponentTeam)}
                 </div>