ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

targeting back

Browse Source
This commit is contained in:
ntr 2019-05-18 21:36:50 +10:00
parent 0383658360
commit 06c970fdc1
4 changed files with 56 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
client/assets/styles/game.css
View File

@ -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;*/

56
client/src/components/game.component.jsx
View File

@ -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) {
const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
return (
<main className="game">
<div className="instance-hdr">
<button
className="game-btn instance-btn instance-ui-btn left"
onClick={() => toggleLog(!showLog)}>
Game
</button>
<div className="spacer">
<div>&nbsp;</div>
</div>
</div>
<div className="logs">
{logs}
</div>
</main>
);
}
// if (showLog) {
// const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
// return (
// <main className="game">
// <div className="instance-hdr">
// <button
// className="game-btn instance-btn instance-ui-btn left"
// onClick={() => toggleLog(!showLog)}>
// Game
// </button>
// <div className="spacer">
// <div>&nbsp;</div>
// </div>
// </div>
// <div className="logs">
// {logs}
// </div>
// </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>
<div>{'< Attack'}</div>
<div>{'< Sustain'}</div>
{targeting}
</div>
<figure
className="img"

17
client/src/components/game.cryp.jsx
View File

@ -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>
<div>{'< Attack'}</div>
<div>{'< Sustain'}</div>
{targeting}
</div>
<figure
className="img"

10
client/src/components/main.jsx
View File

@ -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);