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

position absolute game

Browse Source
This commit is contained in:
ntr 2019-10-08 12:52:22 +11:00
parent 8a41778c9d
commit 9c1f0ba9e9
2 changed files with 33 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
client/assets/styles/game.less
View File

@ -3,13 +3,13 @@
.game { .game {
overflow: hidden; overflow: hidden;
display: grid; // display: grid;
grid-template-rows: 1fr 0.75fr 1.5fr; // grid-template-rows: 1fr 0.75fr 1.5fr;
grid-template-columns: 1fr; // grid-template-columns: 1fr;
grid-template-areas: // grid-template-areas:
"opponent" // "opponent"
"target " // "target "
"player "; // "player ";
} }
.game .team { .game .team {
@ -24,11 +24,22 @@
.player { .player {
grid-area: player; grid-area: player;
z-index: 5; z-index: 5;
position: absolute;
bottom: 0;
height: 50%;
width: 90%;
} }
.opponent { .opponent {
grid-area: opponent; grid-area: opponent;
position: absolute;
top: 0;
height: 35%;
width: 90%;
margin-top: 0.5em;
.game-construct { .game-construct {
align-items: flex-start; align-items: flex-start;
grid-template-columns: 1fr 2fr; grid-template-columns: 1fr 2fr;
@ -178,12 +189,19 @@
#targeting { #targeting {
grid-area: target; grid-area: target;
height: 100%; // height: 100%;
width: 100%; // width: 100%;
stroke-width: 2px; stroke-width: 2px;
stroke: whitesmoke; stroke: whitesmoke;
} }
#targeting, .resolving-skill {
position: absolute;
top: 35%;
height: 15%;
width: 90%;
}
.resolving-skill { .resolving-skill {
grid-area: target; grid-area: target;
align-self: center; align-self: center;
@ -381,6 +399,11 @@
} }
} }
.player {
bottom: 10%;
height: 40%;
}
.opponent { .opponent {
.game-construct { .game-construct {
display: grid; display: grid;

3
client/src/components/instance.component.jsx
View File

@ -93,8 +93,6 @@ class Instance extends Component {
if (!instance) return setTimeout(this.bindSwipes, 50); if (!instance) return setTimeout(this.bindSwipes, 50);
if (this.h) this.h.destroy(); if (this.h) this.h.destroy();
this.h = new Hammer(instance); this.h = new Hammer(instance);
const display = ['vbox', 'c0', 'c1', 'c2'];
this.h.on('swiperight', () => { this.h.on('swiperight', () => {
const { const {
navInstance, navInstance,
@ -111,6 +109,7 @@ class Instance extends Component {
setNavInstance((navInstance + 1) % 4); setNavInstance((navInstance + 1) % 4);
}); });
console.log('hammer gestures bound');
return true; return true;
} }
} }