targeting back

client/assets/styles/game.css

@@ -37,7 +37,7 @@
 .opponent .game-cryp {
     align-items: flex-start;
     grid-template-rows: min-content min-content 2fr;
-    grid-template-columns: 1fr min-content 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
     grid-template-areas:
         "stats  stats ."
         "effects effects ."
@@ -52,7 +52,7 @@
     /*align-items: flex-end;*/
 
     grid-template-rows: 1fr 2fr 1fr min-content;
-    grid-template-columns: 1fr min-content 1fr;
+    grid-template-columns: 1fr 1fr 1fr;
     grid-template-areas:
         "skills skills  ."
         "avatar target  ."
@@ -156,7 +156,7 @@
 .game-cryp button[disabled], .game-cryp button[disabled]:hover {
     color: #333333;
     font-size: 14pt;
-    /*text-decoration: line-through
+    text-decoration: line-through
 }
 
 .game-cryp button:hover {
@@ -166,7 +166,7 @@
 .game-cryp.ko {
     animation: none;
     opacity: 0.5;
-    /*opacity: 0.35;*/
+    opacity: 0.35;
     filter: grayscale(100%);
 }
 
@@ -175,10 +175,14 @@
 }
 
 .game-cryp.unfocus {
-    /*opacity: 0.65;*/
+    opacity: 0.65;
     filter: blur(5px);
 }
 
+.game-cryp.unfocus.ko {
+    filter: blur(5px) grayscale(100%);
+}
+
 .combat-text {
     fill: whitesmoke;
     font-size: 2em;
@@ -189,9 +193,8 @@
     text-align: center;
 }
 
-/*
 CRYP DAMAGE
-*/
+
 .game-cryp.active-skill {
     filter: drop-shadow(0 0 0.2em silver);
     /*border-color: silver;*/

client/src/components/game.component.jsx

@@ -1,14 +1,11 @@
 const preact = require('preact');
-const range = require('lodash/range');
-
 const { STATS, eventClasses, getCombatText, crypAvatar } = require('../utils');
-
 const GameCryp = require('./game.cryp');
-const TargetingArrows = require('./targeting.arrows');
 
 function GamePanel(props) {
     const {
         game,
+        account,
         resolution,
         activeSkill,
         setActiveSkill,
@@ -16,7 +13,6 @@ function GamePanel(props) {
         selectSkillTarget,
         sendInstanceState,
         sendGameReady,
-        account,
         showLog,
         toggleLog,
         quit,
@@ -24,27 +20,26 @@ function GamePanel(props) {
 
     if (!game) return <div>...</div>;
 
-    console.log(showLog);
+    // if (showLog) {
-    if (showLog) {
+    //     const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
-        const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
+    //     return (
-        return (
+    //         <main className="game">
-            <main className="game">
+    //             <div className="instance-hdr">
-                <div className="instance-hdr">
+    //                 <button
-                    <button
+    //                     className="game-btn instance-btn instance-ui-btn left"
-                        className="game-btn instance-btn instance-ui-btn left"
+    //                     onClick={() => toggleLog(!showLog)}>
-                        onClick={() => toggleLog(!showLog)}>
+    //                     Game
-                        Game
+    //                 </button>
-                    </button>
+    //                 <div className="spacer">
-                    <div className="spacer">
+    //                     <div>&nbsp;</div>
-                        <div>&nbsp;</div>
+    //                 </div>
-                    </div>
+    //             </div>
-                </div>
+    //             <div className="logs">
-                <div className="logs">
+    //                 {logs}
-                    {logs}
+    //             </div>
-                </div>
+    //         </main>
-            </main>
+    //     );
-        );
+    // }
-    }
 
     function backClick() {
         if (game.phase === 'Finish') sendInstanceState(game.instance);
@@ -125,6 +120,11 @@ function GamePanel(props) {
             ? cryp.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
             : <div>&nbsp;</div>;
 
+        const playerTeamIds = playerTeam.cryps.map(c => c.id);
+        const targeting = game.stack
+            .filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
+            .map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
+
         return (
             <div
                 key={i}
@@ -138,9 +138,7 @@ function GamePanel(props) {
                     {effects}
                 </div>
                 <div className="targeting">
-                    <div>{'< Decay'}</div>
+                    {targeting}
-                    <div>{'< Attack'}</div>
-                    <div>{'< Sustain'}</div>
                 </div>
                 <figure
                     className="img"

client/src/components/game.cryp.jsx

@@ -12,6 +12,7 @@ const addState = connect(
         const {
             ws,
             game,
+            account,
             resolution,
             activeSkill,
         } = state;
@@ -29,6 +30,8 @@ const addState = connect(
         }
 
         return {
+            game,
+            account,
             resolution,
             activeSkill,
             selectSkillTarget,
@@ -38,6 +41,8 @@ const addState = connect(
 
 function GameCryp(props) {
     const {
+        game,
+        account,
         cryp,
         resolution,
         activeSkill,
@@ -51,7 +56,6 @@ function GameCryp(props) {
     const skills = range(0, 3)
         .map(i => <SkillBtn key={i} cryp={cryp} i={i} />);
 
-
     const stats = [STATS.greenLife, STATS.redLife, STATS.blueLife].map((s, j) => {
         // i've seen this happen ;/
         if (cryp[s.stat].value < 0) console.warn(cryp);
@@ -71,6 +75,13 @@ function GameCryp(props) {
         ? cryp.effects.map(c => <div key={c.effect}>{c.effect} - {c.duration}T</div>)
         : <div>&nbsp;</div>;
 
+    const playerTeam = game.players.find(t => t.id === account.id);
+    const playerTeamIds = playerTeam.cryps.map(c => c.id);
+
+    const targeting = game.stack
+        .filter(s => playerTeamIds.includes(s.source_cryp_id) && s.target_cryp_id === cryp.id)
+        .map((s, i) => <h3 key={i}>{`< ${s.skill}`}</h3>);
+
     return (
         <div
             style={ activeSkill ? { cursor: 'pointer' } : {}}
@@ -79,9 +90,7 @@ function GameCryp(props) {
                 {skills}
             </div>
             <div className="targeting">
-                <div>{'< Decay'}</div>
+                {targeting}
-                <div>{'< Attack'}</div>
-                <div>{'< Sustain'}</div>
             </div>
             <figure
                 className="img"

client/src/components/main.jsx

@@ -15,7 +15,7 @@ const addState = connect(
     }
 );
 
-function renderBody(props) {
+function Main(props) {
     const {
         game,
         instance,
@@ -31,6 +31,9 @@ function renderBody(props) {
         );
     }
 
+    if (nav === 'team') return <Team />;
+    if (nav === 'list') return <List />;
+
     if (instance) {
         return (
             <InstanceContainer />
@@ -38,17 +41,16 @@ function renderBody(props) {
     }
 
     if (game) {
+        console.log('game time');
         return (
             <GameContainer />
         );
     }
 
-    if (nav === 'team') return <Team />;
-    if (nav === 'list') return <List />;
 
     return (
         <Team />
     );
 }
 
-module.exports = addState(renderBody);
+module.exports = addState(Main);