Merge branch 'css-grid' of ssh://cryps.gg:40022/~/cryps into css-grid
This commit is contained in:
Mashy
commit
dfb372d8d2
@ -46,23 +46,26 @@
|
||||
.opponent .game-cryp {
|
||||
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
||||
grid-template-areas:
|
||||
"stats"
|
||||
"effects"
|
||||
"avatar"
|
||||
"skills";
|
||||
"stats ."
|
||||
"effects ."
|
||||
"avatar target"
|
||||
"skills .";
|
||||
}
|
||||
|
||||
.game-cryp {
|
||||
display: grid;
|
||||
|
||||
justify-items: center;
|
||||
/*justify-items: center;*/
|
||||
justify-items: start;
|
||||
|
||||
grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);
|
||||
/*grid-template-rows: minmax(0, 1fr) minmax(0, 2fr) auto minmax(0, 1fr);*/
|
||||
/*grid-template-columns: min-content minmax(0, 1fr);*/
|
||||
grid-template-columns: 1fr min-content 1fr;
|
||||
grid-template-rows: 1fr 2fr 1fr;
|
||||
grid-template-areas:
|
||||
"skills"
|
||||
"avatar"
|
||||
"effects"
|
||||
"stats";
|
||||
"skills . ."
|
||||
"avatar target ."
|
||||
"stats stats effects";
|
||||
|
||||
transition-property: all;
|
||||
transition-duration: 0.5s;
|
||||
@ -70,6 +73,15 @@
|
||||
transition-timing-function: ease;
|
||||
}
|
||||
|
||||
.game-cryp .targeting {
|
||||
grid-area: target;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.game-cryp .img {
|
||||
grid-area: avatar;
|
||||
}
|
||||
@ -80,10 +92,21 @@
|
||||
flex-flow: row;
|
||||
}
|
||||
|
||||
.game-cryp figure {
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.game-cryp figcaption {
|
||||
white-space: nowrap;
|
||||
font-size: 100%;
|
||||
}
|
||||
|
||||
.game-cryp .skills {
|
||||
grid-area: skills;
|
||||
display: flex;
|
||||
flex-flow: column-reverse;
|
||||
align-items: baseline;
|
||||
/*flex-flow: column;*/
|
||||
}
|
||||
|
||||
/*@media (max-width: 1000px) {
|
||||
|
||||
@ -6,12 +6,6 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.instance-hdr {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.instance-info {
|
||||
flex: 0 1 35%;
|
||||
padding-left: 1em;
|
||||
@ -44,11 +38,7 @@
|
||||
flex: 0 0 50%;
|
||||
}
|
||||
|
||||
.ready-btn {
|
||||
flex: 1 0 50%;
|
||||
}
|
||||
|
||||
.ready-btn:hover {
|
||||
.ready:hover {
|
||||
transition-property: all;
|
||||
transition-duration: 0.5s;
|
||||
transition-timing-function: ease;
|
||||
|
||||
@ -52,9 +52,9 @@ function GamePanel(props) {
|
||||
}
|
||||
|
||||
const header = (
|
||||
<div className="ready">
|
||||
<div className="top">
|
||||
<button
|
||||
className="game-btn instance-btn instance-ui-btn right"
|
||||
className="instance-btn instance-ui-btn right"
|
||||
onClick={() => sendGameReady()}>
|
||||
Ready
|
||||
</button>
|
||||
@ -137,6 +137,9 @@ function GamePanel(props) {
|
||||
<div className="effects">
|
||||
{effects}
|
||||
</div>
|
||||
<div className="targeting">
|
||||
<div>{'<'}</div>
|
||||
</div>
|
||||
<figure
|
||||
className="img"
|
||||
onClick={() => selectSkillTarget(cryp.id)} >
|
||||
|
||||
@ -78,6 +78,9 @@ function GameCryp(props) {
|
||||
<div className="skills">
|
||||
{skills}
|
||||
</div>
|
||||
<div className="targeting">
|
||||
<div>{'<'}</div>
|
||||
</div>
|
||||
<figure
|
||||
className="img"
|
||||
onClick={() => selectSkillTarget(cryp.id)} >
|
||||
|
||||
@ -18,7 +18,7 @@ function InstanceComponent(args) {
|
||||
|
||||
if (!instance) return false;
|
||||
|
||||
const rdyClasses = `instance-btn instance-ui-btn ready-btn ${player.ready ? 'ready' : ''}`;
|
||||
const rdyClasses = `instance-btn instance-ui-btn ${player.ready ? 'ready' : ''}`;
|
||||
const readyBtn = (
|
||||
<button
|
||||
className={rdyClasses}
|
||||
@ -49,7 +49,7 @@ function InstanceComponent(args) {
|
||||
|
||||
return (
|
||||
<section className="instance" >
|
||||
<div className="instance-hdr">
|
||||
<div className="top">
|
||||
{actionBtn}
|
||||
{timer}
|
||||
</div>
|
||||
|
||||
@ -67,7 +67,7 @@ function Menu(args) {
|
||||
// );
|
||||
|
||||
return (
|
||||
<section className="menu-instance-list" >
|
||||
<div className="menu-instance-list" >
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
@ -84,7 +84,7 @@ function Menu(args) {
|
||||
</tbody>
|
||||
</table>
|
||||
<InstanceCreateForm />
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -147,7 +147,6 @@ function Menu(args) {
|
||||
return (
|
||||
<section className="menu">
|
||||
{instanceList()}
|
||||
{crypList()}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -312,7 +312,7 @@ function createSocket(events) {
|
||||
sendAccountCryps();
|
||||
}
|
||||
|
||||
// sendPing();
|
||||
sendPing();
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
@ -94,7 +94,10 @@ const game = {
|
||||
"cd": 1
|
||||
}
|
||||
],
|
||||
"effects": [],
|
||||
"effects": [{
|
||||
effect: "Decay",
|
||||
duration: 2,
|
||||
}],
|
||||
"specs": [],
|
||||
"colours": {
|
||||
"red": 0,
|
||||
@ -238,7 +241,8 @@ const game = {
|
||||
"cd": 1
|
||||
}
|
||||
],
|
||||
"effects": [],
|
||||
"effects": [
|
||||
],
|
||||
"specs": [],
|
||||
"colours": {
|
||||
"red": 0,
|
||||
|
||||
@ -57,6 +57,7 @@ function crypAvatar(name) {
|
||||
return (
|
||||
<img
|
||||
src={`/molecules/${genAvatar(name)}.svg`}
|
||||
height="500"
|
||||
onError={event => event.target.setAttribute('src', '/molecules/726.svg')}
|
||||
/>
|
||||
);
|
||||
|
||||
@ -17,9 +17,9 @@ html, body, main {
|
||||
-ms-user-select: none;
|
||||
|
||||
/* this is the sweet nectar to keep it full page*/
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
min-height: 100%;
|
||||
height: 100vh;
|
||||
max-height: 100vh;
|
||||
min-height: 100vh;
|
||||
/*padding: 0 20%;*/
|
||||
|
||||
/* stops inspector going skitz*/
|
||||
@ -501,6 +501,7 @@ header {
|
||||
|
||||
.stats figcaption {
|
||||
font-size: 75%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.resolving .skills button {
|
||||
@ -535,3 +536,8 @@ figure.gray {
|
||||
fill: none;
|
||||
}
|
||||
|
||||
section .top {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user