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

wip

Browse Source
This commit is contained in:
ntr 2019-05-14 22:24:56 +10:00
parent 8e98546a9c
commit ac36a7166e
4 changed files with 89 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
client/game.css
View File

@ -1,12 +1,52 @@
/* GAME */
.game-cryp {
/* flex: 1 1 100%;
display: flex;
flex-flow: column;
*/ /*border: 1px solid whitesmoke;*/
/*margin-bottom: 1em;*/
/*justify-content: center;*/
.game {
display: grid;
grid-template-columns: repeat(3, 1fr));
grid-template-columns: repeat(6, 1fr));
grid-template-areas:
"opponent opponent opponent"
"opponent opponent opponent"
"middle middle middle"
"player player player";
"player player player";
"player player player";
}
.team {
grid-area: player;
display: grid;
grid-template-columns: repeat(3, 1fr);
text-align: center;
}
.opponent {
grid-area: opponent;
}
.opponent .combat-text {
left: 40%;
transform: translate(-50%, -50%);
}
.target-svg {
background: green;
flex: 1;
}
.target-svg path {
stroke: whitesmoke;
stroke-width: 4px;
}
.game-cryp {
display: grid;
grid-template-areas:
"stats"
"effects"
"avatar";
transition-property: all;
transition-duration: 0.5s;
@ -14,23 +54,29 @@
transition-timing-function: ease;
}
.player .game-cryp {
grid-template-areas:
"skills"
"avatar"
"effects"
"stats";
}
.game-cryp .stats {
grid-area: stats;
display: flex;
flex: row;
}
.game-cryp .skills {
grid-area: skills;
display: flex;
flex-flow: row wrap;
flex: 1 0 25%;
height: 100%;
z-index: 10;
flex-flow: row;
}
.game-cryp .effects {
max-height: 100%;
font-size: 1.5em;
flex: 1;
grid-area: effects;
}
.game-btn {
@ -90,13 +136,6 @@
text-align: center;
}
.cryp-list {
display: flex;
flex-flow: row;
width: 100%;
}
/*
CRYP DAMAGE
*/
@ -180,3 +219,7 @@ CRYP DAMAGE
.purple-damage .stats {
border-top: 1px solid purple;
}
.img {
position: relative;
}

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

@ -99,7 +99,7 @@ function GamePanel(props) {
const cryps = team.cryps.map((c, i) => <GameCryp key={c.id} cryp={c} />);
return (
<div className="team-player cryp-list">
<div className="team player">
{cryps}
</div>
);
@ -151,7 +151,7 @@ function GamePanel(props) {
function OpponentTeam(team) {
const cryps = team.cryps.map(OpponentCryp);
return (
<div className="team-opponent cryp-list">
<div className="team opponent">
{cryps}
</div>
);
@ -159,13 +159,15 @@ function GamePanel(props) {
const gameClasses = `game ${resolution ? 'resolving': ''}`;
// {header}
// {timer}
return (
<section className={gameClasses} onClick={() => setActiveCryp(null)} >
{header}
{timer}
{PlayerTeam(playerTeam, setActiveSkill)}
<TargetingArrows />
{otherTeams.map(OpponentTeam)}
{PlayerTeam(playerTeam, setActiveSkill)}
</section>
);
}

26
client/src/components/targeting.arrows.jsx
View File

@ -24,8 +24,8 @@ function TargetSvg(args) {
const skillIndex = playerTeam.cryps[source].skills.findIndex(s => s.skill === cast.skill);
const skillOffset = (100 * skillIndex) + 50;
const sourceX = 0;
const sourceY = (source * 300) + skillOffset;
const sourceY = 0;
const sourceX = (source * 300) + skillOffset;
const targetY = (target * 300) + 150;
const curveStart = 150 + (150 * source);
const curveEnd = 450 + curveStart;
@ -33,12 +33,12 @@ function TargetSvg(args) {
if (defensive) {
const path = `
M${sourceX},${sourceY}
L150,${sourceY}
C150,${sourceY} 150,${targetY} 150,${targetY}
L0,${targetY}
L50,${targetY - 4}
M0,${targetY}
L50,${targetY + 4}
L${sourceY},150
C${sourceY},150 ${targetY},150 ${targetY},150
L${targetY},0
L${targetY - 4},50
M${targetY},0
L${targetY + 4},0
`;
return <path d={path} />;
@ -48,10 +48,10 @@ function TargetSvg(args) {
M${sourceX},${sourceY}
L${curveStart},${sourceY}
C${curveEnd},${sourceY} ${curveStart},${targetY} ${curveEnd},${targetY}
L900,${targetY}
L850,${targetY - 4}
M900,${targetY}
L850,${targetY + 4}
L${targetY},900
L${targetY - 4},850
M${targetY},900
L${targetY + 4},850
`;
return <path d={path} />;
@ -62,7 +62,7 @@ function TargetSvg(args) {
: outgoing.map(getPath);
return (
<svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-svg">
<svg viewBox="0 0 900 900" preserveAspectRatio="none" className="target-arrows">
{arrows}
</svg>
);

29
client/styles.css
View File

@ -21,6 +21,9 @@ html, body, main {
max-height: 100%;
min-height: 100%;
/*padding: 0 20%;*/
/* stops inspector going skitz*/
overflow: hidden;
}
html {
@ -50,8 +53,8 @@ figure {
main {
padding: 0 2em;
display: grid;
grid-template-columns: repeat(10, minmax(min-content, 10%));
grid-template-rows: repeat(10, min-content);
grid-template-columns: repeat(10, 10%));
grid-template-rows: min-content 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"hd hd hd hd hd hd hd hd hd hd"
@ -62,8 +65,8 @@ main {
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main"
"nav main main main main main main main main main";
/*"ft ft ft ft ft ft ft ft ft ft";*/
}
nav {
@ -545,23 +548,3 @@ figure.gray {
}
.team-opponent .combat-text {
left: 40%;
transform: translate(-50%, -50%);
}
.img {
position: relative;
}
.game .target-svg {
flex: 1;
height: 94%;
max-width: 100%;
}
.game .target-svg path {
stroke: whitesmoke;
stroke-width: 4px;
}