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-16 18:12:35 +10:00
parent 4f071d3804
commit bab62afba2
6 changed files with 58 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
client/instance.css
View File

@ -73,8 +73,8 @@
flex: 1 0 100%; flex: 1 0 100%;
} }
.vbox-hdr div:first-child { .vbox-hdr h3 {
flex-grow: 1; flex: 1;
} }
.vbox-hdr .bits { .vbox-hdr .bits {
@ -117,15 +117,16 @@
.instance-cryp { .instance-cryp {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr;
grid-template-rows: min-content 1fr min-content min-content; grid-template-rows: min-content min-content min-content min-content min-content min-content;
grid-template-areas: grid-template-areas:
"specs specs" "name "
"avatar skills" "avatar "
"name skills" "skills"
"stats stats"; "stats "
margin-left: 1em; "specs ";
border: 1px solid whitesmoke; margin: 0 2em;
/*border: 1px solid whitesmoke;*/
transition-property: all; transition-property: all;
transition-duration: 0.5s; transition-duration: 0.5s;
transition-delay: 0; transition-delay: 0;
@ -170,22 +171,36 @@
.instance-cryp .skills { .instance-cryp .skills {
grid-area: skills; grid-area: skills;
display: flex; display: flex;
flex-flow: column; flex-flow: row;
min-width: 150px; border-width: 0px;
} }
.instance-cryp .skills button { .instance-cryp .skills button {
height: 100%; height: 100%;
width: 100%; width: 100%;
padding: 10px; padding: 10px;
border-width: 0px;
} }
/*button.action {
animation: action 1s infinite ease-in-out alternate;
}
@keyframes action {
0% {
box-shadow: inset 0 0 0 0 whitesmoke;
}
100% {
box-shadow: inset 0.5em 0 0 0 whitesmoke;
}
}
*/
.instance-cryp .specs { .instance-cryp .specs {
grid-area: specs; grid-area: specs;
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
border-bottom: 1px solid whitesmoke; border-width: 0px;
} }
.instance-cryp .specs figure { .instance-cryp .specs figure {
@ -208,7 +223,7 @@
grid-template-areas: grid-template-areas:
"dl sl ll" "dl sl ll"
"st st st"; "st st st";
border-top: 1px solid whitesmoke; border-width: 0px;
} }
.instance-cryp .stats figcaption { .instance-cryp .stats figcaption {
@ -257,38 +272,32 @@
/* Equipment */ /* Equipment */
.instance-equip { .equip {
grid-area: e;
display: flex; display: flex;
min-height: 15%; margin: 1em 0;
padding-bottom: 1em;
} }
.instance-equip .items { .equip .specs {
display: flex; display: flex;
flex: 1 1 100%; flex: 1;
} }
.instance-equip .label { .label {
display: flex; flex: 1 0 100%;
font-size: 20pt;
} }
.instance-equip .skills {
.equip .skills {
display: flex; display: flex;
flex: 1;
flex-direction: column; flex-direction: column;
} }
.instance-equip .skills button { .equip .skills button {
flex: 1 1 100%; flex: 1 1 100%;
color: whitesmoke; color: whitesmoke;
font-size: 16pt; font-size: 16pt;
padding: 5px; padding: 5px;
border-width: 0px; border-width: 0px;
border-bottom-width: 1px;
border-left-width: 1px;
border-right-width: 1px;
border-top-width: 1px;
height: 100%; height: 100%;
} }
@ -310,13 +319,13 @@ button.equip {
} }
.instance-equip .specs { .equip .specs {
display: flex; display: flex;
padding-left: 5%; padding-left: 5%;
flex-direction: column; flex-direction: column;
} }
.instance-equip .specs figure { .equip .specs figure {
flex: 1; flex: 1;
border: 0; border: 0;
padding: 0.5em 1em 0 0; padding: 0.5em 1em 0 0;
@ -340,6 +349,6 @@ button.equip {
} }
.instance-equip .specs figcaption { .equip .specs figcaption {
font-size: 75%; font-size: 75%;
} }

10
client/src/components/instance.cryps.jsx
View File

@ -111,7 +111,7 @@ function Cryp(props) {
if (!s) { if (!s) {
const equip = specList.includes(vbox.bound[activeVar]) ? 'equip-spec' : 'gray'; const equip = specList.includes(vbox.bound[activeVar]) ? 'equip-spec' : 'gray';
return ( return (
<figure key={i} onClick={blankSpecClick}> <figure key={i} onClick={blankSpecClick} className={equip} >
{shapes.diamond(`stat-icon ${equip}`)} {shapes.diamond(`stat-icon ${equip}`)}
<figcaption>+</figcaption> <figcaption>+</figcaption>
</figure> </figure>
@ -155,7 +155,7 @@ function Cryp(props) {
return ( return (
<div key={cryp.id} className="instance-cryp" onClick={onClick} > <div key={cryp.id} className="instance-cryp" onClick={onClick} >
{crypAvatar(cryp.name)} {crypAvatar(cryp.name)}
<div className="name" >{cryp.name}</div> <h2 className="name" >{cryp.name}</h2>
<div className="skills"> <div className="skills">
{skills} {skills}
</div> </div>
@ -163,13 +163,13 @@ function Cryp(props) {
{specs} {specs}
</div> </div>
<div className="stats"> <div className="stats">
<div className="damage-label"> <div className="damage-label label">
Damage Damage
</div> </div>
<div className="speed-label"> <div className="speed-label label">
Speed Speed
</div> </div>
<div className="life-label"> <div className="life-label label">
Life Life
</div> </div>
<div className="icons"> <div className="icons">

11
client/src/components/instance.equip.jsx
View File

@ -74,23 +74,16 @@ function Equipment(props) {
} return false; } return false;
}); });
const skillLabel = skills.every(i => i === false) ? '' : 'Skills';
const specLabel = specs.every(i => i === false) ? '' : 'Specs';
return ( return (
<div className="equip" > <div className="equip" >
<div className="skills"> <div className="skills">
<div className="label"> <h3>Skills</h3>
{skillLabel}
</div>
<div className ="items"> <div className ="items">
{skills} {skills}
</div> </div>
</div> </div>
<div className="specs"> <div className="specs">
<div className="label"> <h3>Specs</h3>
{specLabel}
</div>
<div className ="items"> <div className ="items">
{specs} {specs}
</div> </div>

6
client/src/components/vbox.component.jsx
View File

@ -218,7 +218,7 @@ function Vbox(args) {
<div className={classes}> <div className={classes}>
<div className='vbox-box' onClick={() => setReclaiming(false)} > <div className='vbox-box' onClick={() => setReclaiming(false)} >
<div className="vbox-hdr"> <div className="vbox-hdr">
<div onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</div> <h3 onTouchStart={e => e.target.scrollIntoView(true)}>VBOX</h3>
<div className="bits" >{vbox.bits}b</div> <div className="bits" >{vbox.bits}b</div>
</div> </div>
<button <button
@ -233,7 +233,7 @@ function Vbox(args) {
</table> </table>
</div> </div>
<div className='vbox-inventory' onClick={() => setReclaiming(false)} > <div className='vbox-inventory' onClick={() => setReclaiming(false)} >
<span onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</span> <h3 onTouchStart={e => e.target.scrollIntoView(true)}>INVENTORY</h3>
<button <button
className={reclaimClass} className={reclaimClass}
onClick={reclaimClick}> onClick={reclaimClick}>
@ -246,7 +246,7 @@ function Vbox(args) {
</table> </table>
</div> </div>
<div className="vbox-combiner"> <div className="vbox-combiner">
<span onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</span> <h3 onTouchStart={e => e.target.scrollIntoView(true)}>I-COMBINATOR</h3>
<button <button
className="instance-btn instance-ui-btn vbox-btn" className="instance-btn instance-ui-btn vbox-btn"
onClick={() => sendVboxCombine()}> onClick={() => sendVboxCombine()}>

3
client/src/socket.jsx
View File

@ -311,9 +311,8 @@ function createSocket(events) {
events.setAccount(account); events.setAccount(account);
sendAccountInstances(); sendAccountInstances();
sendAccountCryps(); sendAccountCryps();
// console.log(testGame);
// events.setGame(testGame(account.id)); // events.setGame(testGame(account.id));
clearGameStateTimeout(); // clearGameStateTimeout();
} }
sendPing(); sendPing();

19
client/styles.css
View File

@ -46,6 +46,11 @@ h2 {
margin: 0; margin: 0;
} }
h3 {
font-size: 1.25em;
margin: 0;
}
figure { figure {
margin: 0; margin: 0;
} }
@ -151,20 +156,6 @@ button.left:hover, button.left:focus {
box-shadow: inset 0.5em 0 0 0 whitesmoke; box-shadow: inset 0.5em 0 0 0 whitesmoke;
} }
button.action {
animation: action 1s infinite ease-in-out alternate;
}
@keyframes action {
0% {
box-shadow: inset 0 0 0 0 whitesmoke;
}
100% {
box-shadow: inset 0.5em 0 0 0 whitesmoke;
}
}
svg { svg {
fill: none; fill: none;
stroke: whitesmoke; stroke: whitesmoke;