wip
This commit is contained in:
ntr
parent
4f071d3804
commit
bab62afba2
@ -73,8 +73,8 @@
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.vbox-hdr div:first-child {
|
||||
flex-grow: 1;
|
||||
.vbox-hdr h3 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.vbox-hdr .bits {
|
||||
@ -117,15 +117,16 @@
|
||||
|
||||
.instance-cryp {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: min-content 1fr min-content min-content;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: min-content min-content min-content min-content min-content min-content;
|
||||
grid-template-areas:
|
||||
"specs specs"
|
||||
"avatar skills"
|
||||
"name skills"
|
||||
"stats stats";
|
||||
margin-left: 1em;
|
||||
border: 1px solid whitesmoke;
|
||||
"name "
|
||||
"avatar "
|
||||
"skills"
|
||||
"stats "
|
||||
"specs ";
|
||||
margin: 0 2em;
|
||||
/*border: 1px solid whitesmoke;*/
|
||||
transition-property: all;
|
||||
transition-duration: 0.5s;
|
||||
transition-delay: 0;
|
||||
@ -170,22 +171,36 @@
|
||||
.instance-cryp .skills {
|
||||
grid-area: skills;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
min-width: 150px;
|
||||
flex-flow: row;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.instance-cryp .skills button {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
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 {
|
||||
grid-area: specs;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
border-bottom: 1px solid whitesmoke;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.instance-cryp .specs figure {
|
||||
@ -208,7 +223,7 @@
|
||||
grid-template-areas:
|
||||
"dl sl ll"
|
||||
"st st st";
|
||||
border-top: 1px solid whitesmoke;
|
||||
border-width: 0px;
|
||||
}
|
||||
|
||||
.instance-cryp .stats figcaption {
|
||||
@ -257,38 +272,32 @@
|
||||
|
||||
|
||||
/* Equipment */
|
||||
.instance-equip {
|
||||
grid-area: e;
|
||||
.equip {
|
||||
display: flex;
|
||||
min-height: 15%;
|
||||
padding-bottom: 1em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.instance-equip .items {
|
||||
.equip .specs {
|
||||
display: flex;
|
||||
flex: 1 1 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.instance-equip .label {
|
||||
display: flex;
|
||||
font-size: 20pt;
|
||||
|
||||
.label {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
.instance-equip .skills {
|
||||
|
||||
.equip .skills {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.instance-equip .skills button {
|
||||
.equip .skills button {
|
||||
flex: 1 1 100%;
|
||||
color: whitesmoke;
|
||||
font-size: 16pt;
|
||||
padding: 5px;
|
||||
border-width: 0px;
|
||||
border-bottom-width: 1px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 1px;
|
||||
border-top-width: 1px;
|
||||
height: 100%;
|
||||
|
||||
}
|
||||
@ -310,13 +319,13 @@ button.equip {
|
||||
}
|
||||
|
||||
|
||||
.instance-equip .specs {
|
||||
.equip .specs {
|
||||
display: flex;
|
||||
padding-left: 5%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.instance-equip .specs figure {
|
||||
.equip .specs figure {
|
||||
flex: 1;
|
||||
border: 0;
|
||||
padding: 0.5em 1em 0 0;
|
||||
@ -340,6 +349,6 @@ button.equip {
|
||||
}
|
||||
|
||||
|
||||
.instance-equip .specs figcaption {
|
||||
.equip .specs figcaption {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
@ -111,7 +111,7 @@ function Cryp(props) {
|
||||
if (!s) {
|
||||
const equip = specList.includes(vbox.bound[activeVar]) ? 'equip-spec' : 'gray';
|
||||
return (
|
||||
<figure key={i} onClick={blankSpecClick}>
|
||||
<figure key={i} onClick={blankSpecClick} className={equip} >
|
||||
{shapes.diamond(`stat-icon ${equip}`)}
|
||||
<figcaption>+</figcaption>
|
||||
</figure>
|
||||
@ -155,7 +155,7 @@ function Cryp(props) {
|
||||
return (
|
||||
<div key={cryp.id} className="instance-cryp" onClick={onClick} >
|
||||
{crypAvatar(cryp.name)}
|
||||
<div className="name" >{cryp.name}</div>
|
||||
<h2 className="name" >{cryp.name}</h2>
|
||||
<div className="skills">
|
||||
{skills}
|
||||
</div>
|
||||
@ -163,13 +163,13 @@ function Cryp(props) {
|
||||
{specs}
|
||||
</div>
|
||||
<div className="stats">
|
||||
<div className="damage-label">
|
||||
<div className="damage-label label">
|
||||
Damage
|
||||
</div>
|
||||
<div className="speed-label">
|
||||
<div className="speed-label label">
|
||||
Speed
|
||||
</div>
|
||||
<div className="life-label">
|
||||
<div className="life-label label">
|
||||
Life
|
||||
</div>
|
||||
<div className="icons">
|
||||
|
||||
@ -74,23 +74,16 @@ function Equipment(props) {
|
||||
} return false;
|
||||
});
|
||||
|
||||
const skillLabel = skills.every(i => i === false) ? '' : 'Skills';
|
||||
const specLabel = specs.every(i => i === false) ? '' : 'Specs';
|
||||
|
||||
return (
|
||||
<div className="equip" >
|
||||
<div className="skills">
|
||||
<div className="label">
|
||||
{skillLabel}
|
||||
</div>
|
||||
<h3>Skills</h3>
|
||||
<div className ="items">
|
||||
{skills}
|
||||
</div>
|
||||
</div>
|
||||
<div className="specs">
|
||||
<div className="label">
|
||||
{specLabel}
|
||||
</div>
|
||||
<h3>Specs</h3>
|
||||
<div className ="items">
|
||||
{specs}
|
||||
</div>
|
||||
|
||||
@ -218,7 +218,7 @@ function Vbox(args) {
|
||||
<div className={classes}>
|
||||
<div className='vbox-box' onClick={() => setReclaiming(false)} >
|
||||
<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>
|
||||
<button
|
||||
@ -233,7 +233,7 @@ function Vbox(args) {
|
||||
</table>
|
||||
</div>
|
||||
<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
|
||||
className={reclaimClass}
|
||||
onClick={reclaimClick}>
|
||||
@ -246,7 +246,7 @@ function Vbox(args) {
|
||||
</table>
|
||||
</div>
|
||||
<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
|
||||
className="instance-btn instance-ui-btn vbox-btn"
|
||||
onClick={() => sendVboxCombine()}>
|
||||
|
||||
@ -311,9 +311,8 @@ function createSocket(events) {
|
||||
events.setAccount(account);
|
||||
sendAccountInstances();
|
||||
sendAccountCryps();
|
||||
// console.log(testGame);
|
||||
// events.setGame(testGame(account.id));
|
||||
clearGameStateTimeout();
|
||||
// clearGameStateTimeout();
|
||||
}
|
||||
|
||||
sendPing();
|
||||
|
||||
@ -46,6 +46,11 @@ h2 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.25em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
@ -151,20 +156,6 @@ button.left:hover, button.left:focus {
|
||||
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 {
|
||||
fill: none;
|
||||
stroke: whitesmoke;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user