diff --git a/client/assets/styles/game.css b/client/assets/styles/game.css index 55dae121..e91326cd 100644 --- a/client/assets/styles/game.css +++ b/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;*/ diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 50030d41..2de012a5 100644 --- a/client/src/components/game.component.jsx +++ b/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
...
; - console.log(showLog); - if (showLog) { - const logs = game.log.map((l, i) => (
{l}
)).reverse(); - return ( -
-
- -
-
 
-
-
-
- {logs} -
-
- ); - } + // if (showLog) { + // const logs = game.log.map((l, i) => (
{l}
)).reverse(); + // return ( + //
+ //
+ // + //
+ //
 
+ //
+ //
+ //
+ // {logs} + //
+ //
+ // ); + // } function backClick() { if (game.phase === 'Finish') sendInstanceState(game.instance); @@ -125,6 +120,11 @@ function GamePanel(props) { ? cryp.effects.map(c =>
{c.effect} - {c.duration}T
) :
 
; + 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) =>

{`< ${s.skill}`}

); + return (
-
{'< Decay'}
-
{'< Attack'}
-
{'< Sustain'}
+ {targeting}
); - 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 =>
{c.effect} - {c.duration}T
) :
 
; + 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) =>

{`< ${s.skill}`}

); + return (
-
{'< Decay'}
-
{'< Attack'}
-
{'< Sustain'}
+ {targeting}
; + if (nav === 'list') return ; + if (instance) { return ( @@ -38,17 +41,16 @@ function renderBody(props) { } if (game) { + console.log('game time'); return ( ); } - if (nav === 'team') return ; - if (nav === 'list') return ; return ( ); } -module.exports = addState(renderBody); +module.exports = addState(Main);