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

instance wip

Browse Source
This commit is contained in:
ntr 2019-05-16 16:25:52 +10:00
parent 14165f12cb
commit 4280f52781
5 changed files with 22 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
client/instance.css
View File

@ -147,30 +147,39 @@
.instance-cryp { .instance-cryp {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: min-content auto min-content; grid-template-rows: min-content 1fr min-content min-content;
grid-template-areas: grid-template-areas:
"sp sp" "specs specs"
"av sk" "avatar skills"
"st st"; "name skills"
"stats stats";
margin-left: 1em; margin-left: 1em;
border: 1px solid whitesmoke; border: 1px solid whitesmoke;
transition-property: all; transition-property: all;
transition-duration: 0.5s; transition-duration: 0.5s;
transition-delay: 0; transition-delay: 0;
transition-timing-function: ease; transition-timing-function: ease;
max-height: 450px; /*max-height: 450px;*/
} }
.instance-cryp:first-child { .instance-cryp:first-child {
margin-left: 0; margin-left: 0;
} }
.instance-cryp .name {
grid-area: name;
}
.instance-cryp .avatar { .instance-cryp .avatar {
grid-area: av; grid-area: avatar;
display: flex; display: flex;
flex: 1 1 auto; flex: 1 1 auto;
} }
.instance-cryp img {
grid-area: avatar;
}
.instance-cryp .avatar figure { .instance-cryp .avatar figure {
margin: 0; margin: 0;
height: 80%; height: 80%;
@ -183,7 +192,7 @@
} }
.instance-cryp .skills { .instance-cryp .skills {
grid-area: sk; grid-area: skills;
display: flex; display: flex;
flex-flow: column; flex-flow: column;
min-width: 150px; min-width: 150px;
@ -196,7 +205,7 @@
} }
.instance-cryp .specs { .instance-cryp .specs {
grid-area: sp; grid-area: specs;
display: flex; display: flex;
flex: 1; flex: 1;
justify-content: center; justify-content: center;
@ -216,7 +225,7 @@
} }
.instance-cryp .stats { .instance-cryp .stats {
grid-area: st; grid-area: stats;
display: grid; display: grid;
grid-template-rows: 1fr 3fr; grid-template-rows: 1fr 3fr;
grid-template-columns: 3fr 1fr 3fr; grid-template-columns: 3fr 1fr 3fr;

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

@ -154,12 +154,8 @@ function Cryp(props) {
// const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` }; // const border = { border: `${thickness(cTotal)}px solid rgba(${colours.red}, ${colours.green}, ${colours.blue}, ${alpha})` };
return ( return (
<div key={cryp.id} className="instance-cryp" onClick={onClick} > <div key={cryp.id} className="instance-cryp" onClick={onClick} >
<div className="avatar"> {crypAvatar(cryp.name)}
<figure className="img"> <div className="name" >{cryp.name}</div>
{crypAvatar(cryp.name)}
<figcaption>{cryp.name}</figcaption>
</figure>
</div>
<div className="skills"> <div className="skills">
{skills} {skills}
</div> </div>

1
client/src/components/nav.jsx
View File

@ -35,7 +35,6 @@ function Nav(args) {
<nav> <nav>
<h2>Instances</h2> <h2>Instances</h2>
<button>list</button> <button>list</button>
<button>create</button>
<hr /> <hr />
{joined} {joined}
</nav> </nav>

2
client/src/socket.jsx
View File

@ -1,7 +1,7 @@
const toast = require('izitoast'); const toast = require('izitoast');
const cbor = require('borc'); const cbor = require('borc');
// const testGame = require('./test.game'); const testGame = require('./test.game');
const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://cryps.gg/ws' : 'ws://localhost:40000'; const SOCKET_URL = process.env.NODE_ENV === 'production' ? 'wss://cryps.gg/ws' : 'ws://localhost:40000';

2
client/styles.css
View File

@ -23,7 +23,7 @@ html, body, main {
/*padding: 0 20%;*/ /*padding: 0 20%;*/
/* stops inspector going skitz*/ /* stops inspector going skitz*/
overflow: hidden; /*overflow: hidden;*/
} }
html { html {