diff --git a/client/cryps.css b/client/cryps.css index 34aafc5e..84c918dc 100644 --- a/client/cryps.css +++ b/client/cryps.css @@ -596,19 +596,6 @@ table td svg { transition-timing-function: ease; } -.cryp-box-top { - display: flex; - flex: 1 1 75%; - width: 100%; - justify-content: center; - align-items: stretch; -} - -.cryp-box .particle { - position: fixed; - z-index: -10; -} - .cryp-box figure { margin: 0; flex: 0 0 50%; @@ -678,11 +665,23 @@ table td svg { margin-right: 0.5em; } +.cryp-skill-btn { + color: #333333; +} + +.cryp-skill-btn.active { + color: whitesmoke; +} + .cryp-skill-btn[disabled] { color: #333333; font-size: 14pt; } +.cryp-skill-btn:hover { + color: whitesmoke; +} + .cryp-box.ko { animation: none; opacity: 0.5; @@ -690,6 +689,10 @@ table td svg { filter: grayscale(100%); } +.cryp-box.ko .cryp-skill-btn:hover { + color: #333; +} + .cryp-box.unfocus { /*opacity: 0.65;*/ filter: blur(5px); @@ -728,20 +731,6 @@ table td svg { align-items: flex-end; } -/*.logs { - flex: 0 0 100%; -} -*/ -.selected-skills { - flex: 1 1 25%; - - display: flex; - flex-flow: column; - height: 95%; - padding: 0 2em 0 2em; - justify-content: center; -} - .stack-line { display: flex; align-items: center; @@ -842,11 +831,6 @@ CRYP DAMAGE /* MOBILE */ -@media (max-width: 1000px) { - .selected-skills { - display: none; - } -} @media (max-width: 800px) { h2 { @@ -856,11 +840,13 @@ CRYP DAMAGE main { flex: 1 1 auto; flex-flow: column; + overflow: hidden; } main.game { flex-flow: column-reverse; justify-content: space-between; + height: 100%; } main.game .instance-hdr { @@ -912,11 +898,6 @@ CRYP DAMAGE height: unset; } - .cryp-box-top figure { - flex: 1; - font-size: 60%; - } - .menu-instance-btn { font-size: 1em; } @@ -947,6 +928,7 @@ CRYP DAMAGE .cryp-box { margin: 0 0.2em; + flex-flow: column-reverse; } .spawn-btn button { @@ -959,8 +941,13 @@ CRYP DAMAGE display: none; } - .selected-skills { + .mobile-spacer { + flex: 1 1 25%; + flex-flow: column; display: block; + height: 95%; + padding: 0 2em 0 2em; + justify-content: center; } .mobile-skills { @@ -977,21 +964,13 @@ CRYP DAMAGE .cryp-skill-btn { flex: 1; font-size: 16pt; - border-width: 1px; padding: 0; margin: 0; - border-bottom-width: 0px; - border-left-width: 1px; - border-top-width: 1px; - border-right-width: 0px; + border-width: 0px; } - .cryp-skill-btn:first-child { - border-top-width: 1px; - border-left-width: 0px; - } - - .cryp-box .stats figure { + .cryp-box .stats { + flex-flow: row; padding: 0.2em 0; } diff --git a/client/src/components/game.component.jsx b/client/src/components/game.component.jsx index 5c58be82..297ac614 100644 --- a/client/src/components/game.component.jsx +++ b/client/src/components/game.component.jsx @@ -179,10 +179,6 @@ function GamePanel(props) { ); } - const selectedSkills = resolution - ?
 
- : playerTeam.cryps.map((c, i) => stackElement(c, i)); - const mobileSkills = activeCryp && activeCryp.green_life.value ? range(0, 3).map(i => ) : (
); @@ -195,9 +191,7 @@ function GamePanel(props) {
{mobileSkills}
-
- {selectedSkills} -
+
 
{otherTeams.map(OpponentTeam)} ); diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx index aff80371..deedb500 100644 --- a/client/src/components/skill.btn.jsx +++ b/client/src/components/skill.btn.jsx @@ -7,10 +7,12 @@ const addState = connect( function receiveState(state) { const { activeSkill, + game, } = state; return { activeSkill, + game, }; }, @@ -27,6 +29,7 @@ const addState = connect( function Skill(props) { const { cryp, + game, i, mobile, activeSkill, @@ -63,13 +66,28 @@ function Skill(props) { return setActiveSkill(cryp.id, s.skill); } + function findCryp(id) { + const team = game.players.find(t => t.cryps.find(c => c.id === id)); + if (team) return team.cryps.find(c => c.id === id); + return null; + } + + const [target] = game.stack.filter(stack => stack.source_cryp_id === cryp.id && stack.skill === s.skill) + .map(stack => findCryp(stack.target_cryp_id)); + + const targetText = target + ? `-> ${target.name}` + : ''; + + console.log(target); + return ( ); }