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

whew

Browse Source
This commit is contained in:
ntr 2019-04-02 17:59:21 +11:00
parent 0044205e9f
commit 595e2683c0
4 changed files with 71 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
html-client/cryps.css
View File

@ -44,6 +44,11 @@ main {
flex: 1 1 90%;
padding-top: 1em;
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
}
button, input {
@ -93,6 +98,7 @@ header {
.header-title {
flex: 1;
font-size: 2em;
letter-spacing: 0.05em;
}
.header-username {
@ -163,7 +169,7 @@ header {
font-size: 2em;
}
.instance-list {
.menu-instance-list {
flex: 0 0 50%;
flex-flow: row wrap;
@ -172,7 +178,7 @@ header {
height: 100%;
}
.instance-btn {
.menu-instance-btn {
box-sizing: border-box;
flex: 1 0 20%;
font-size: 150%;
@ -182,7 +188,7 @@ header {
margin: 0.5em;
}
.instance-btn.full {
.menu-instance-btn.full {
flex: 1 0 100%;
}
@ -291,11 +297,6 @@ header {
}
.cryp-list {
display: flex;
flex-flow: column;
}
.instance-cryp-list {
flex: 1 1 25%;
display: flex;
@ -320,6 +321,7 @@ header {
flex: 1 1 80%;
width: 100%;
justify-content: center;
align-items: stretch;
}
.cryp-box figure {
@ -378,27 +380,22 @@ header {
/* GAME */
.game {
display: flex;
flex-flow: row wrap;
align-content: flex-start;
justify-content: flex-start;
align-items: flex-start;
}
.game-back-btn {
flex: 0 0 20%;
}
.team-player {
flex: 1 0 40%;
display: flex;
flex: 1 0 20%;
height: 90%;
padding: 0;
}
.team-opponent {
display: flex;
flex: 1 0 20%;
height: 90%;
padding: 0;
}
.logs {
@ -409,6 +406,8 @@ header {
}
.game-cryp-ctr {
flex: 1 1 100%;
max-height: 33%;
display: flex;
flex-flow: row;
align-items: center;
@ -428,7 +427,19 @@ header {
opacity: 0.5;
}
.stack-line {
padding-left: 2em;
flex: 1 0 50%;
.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;
padding-left: 2em;
flex: 1;
}

76
html-client/src/components/game.component.jsx
View File

@ -83,8 +83,6 @@ function GamePanel(props) {
);
});
const stackSkills = stackElement(cryp);
const stats = [
{ stat: 'hp', colour: '#1FF01F' },
{ stat: 'red_shield', colour: '#a52a2a' },
@ -98,27 +96,24 @@ function GamePanel(props) {
return (
<div className={`game-cryp-ctr ${ko}`} >
<div
key={cryp.id}
style={ activeSkill ? { cursor: 'pointer' } : {}}
className="cryp-box" >
<div className="cryp-box-top">
<figure
className="img"
onClick={() => selectSkillTarget(cryp.id)} >
{molecule}
<figcaption>{cryp.name}</figcaption>
</figure>
<div className="skills">
{skills}
</div>
</div>
<div className="stats">
{stats}
<div
key={cryp.id}
style={ activeSkill ? { cursor: 'pointer' } : {}}
className={`cryp-box ${ko}`} >
<div className="cryp-box-top">
<figure
className="img"
onClick={() => selectSkillTarget(cryp.id)} >
{molecule}
<figcaption>{cryp.name}</figcaption>
</figure>
<div className="skills">
{skills}
</div>
</div>
{stackSkills}
<div className="stats">
{stats}
</div>
</div>
);
}
@ -168,35 +163,38 @@ function GamePanel(props) {
function OpponentTeam(team) {
const cryps = team.cryps.map(OpponentCryp);
return (
<div>
<div className="cryp-list" >
{cryps}
</div>
);
}
const selectedSkills = playerTeam.cryps.map((c, i) => stackElement(c, i));
const logs = game.log.map((l, i) => (<div key={i}>{l}</div>)).reverse();
return (
<main>
<div className="game">
<div className="instance-hdr">
<button
className="game-back-btn instance-btn instance-ui-btn left"
onClick={quit}>
Back
</button>
<div className="spacer">
<div>&nbsp;</div>
</div>
</div>
{PlayerTeam(playerTeam, setActiveSkill)}
<div className="team-opponent">
{otherTeams.map(OpponentTeam)}
</div>
<div className="logs">
{logs}
<div className="instance-hdr">
<button
className="game-back-btn instance-btn instance-ui-btn left"
onClick={quit}>
Back
</button>
<div className="spacer">
<div>&nbsp;</div>
</div>
</div>
{PlayerTeam(playerTeam, setActiveSkill)}
<div className="selected-skills">
{selectedSkills}
</div>
<div className="team-opponent">
{otherTeams.map(OpponentTeam)}
</div>
<div className="logs">
{logs}
</div>
</main>
);
}

2
html-client/src/components/instance.component.jsx
View File

@ -99,7 +99,7 @@ function InstanceComponent(args) {
</button>
</div>
<VboxContainer />
<div className="instance-cryp-list">
<div className="cryp-list">
{cryps}
</div>
<InfoContainer />

6
html-client/src/components/instance.list.component.jsx
View File

@ -8,7 +8,7 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
const instanceJoin = (
<button
className="instance-btn full right"
className="menu-instance-btn full right"
onClick={() => sendInstanceJoin()}>
Join New Instance
</button>
@ -22,7 +22,7 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
return (
<button
className={`instance-btn right ${globalInstance ? 'full' : ''}`}
className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
key={instance.id}
onClick={() => setActiveInstance(instance)}>
{name}
@ -33,7 +33,7 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
// <h2>Instances</h2>
return (
<section className="instance-list" >
<section className="menu-instance-list" >
{instanceJoin}
{instancePanels}
</section>