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

Merge branch 'develop' of ssh://git.mnml.gg:40022/~/mnml into develop

Browse Source
This commit is contained in:
Mashy 2019-11-05 11:46:33 +10:00
commit 48ef08fd2a
16 changed files with 102 additions and 496 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -199,7 +199,7 @@
position: absolute;
top: 35%;
height: 15%;
width: 90%;
width: calc(90% - 1.25em);
}
.resolving-skill {
@ -239,6 +239,9 @@
overflow: hidden;
max-height: 100%;
max-width: 100%;
display: flex;
flex-flow: column;
}
.combat-anim svg {
@ -346,104 +349,4 @@
overflow: hidden;
max-height: 100%;
max-width: 100%;
// height: 5em;
}
@media (max-width: 1000px) {
.game {
grid-template-areas:
"opponent"
"target "
"player ";
grid-template-rows: 1fr 0.2fr 1.5fr;
grid-template-columns: 1fr;
.game-construct {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
.left {
width: 100%;
grid-template-areas:
"skills"
"effects";
grid-template-columns: 1fr;
grid-template-rows: min-content min-content;
}
.skills {
button {
padding: 0 0.5em ;
margin: 0;
}
button.active {
background: #2c2c2c;
}
}
.stats div {
padding: 0;
}
.stats .max {
display: none;
}
.stats .value {
display: flex;
}
.stats svg {
height: 1em;
}
.stats div {
margin: 0 0.2em;
}
.effects {
font-size: 100%;
}
.stats, .name {
font-size: 75%;
}
.skills button {
font-size: 50%;
}
.skill-description {
font-size: 65%;
}
}
.player {
width: calc(100% - 1em);
bottom: 3em;
height: calc(50% - 3em);
}
.opponent {
width: calc(100% - 1em);
.game-construct {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
}
}
#targeting, .resolving-skill {
width: calc(100% - 1em);
}
.player {
width: calc(100% - 1em);
bottom: 3em;
height: calc(50% - 3em);
}
}
}

4
client/assets/styles/instance.less
View File

@ -228,7 +228,7 @@
}
figcaption {
font-size: 75%;
// font-size: 75%;
line-height: initial;
}
@ -246,7 +246,7 @@
text-align: center;
figcaption {
font-size: 75%;
// font-size: 75%;
}
// give speed some space

141
client/assets/styles/instance.mobile.less
View File

@ -17,9 +17,7 @@
@media (max-width: 800px) {
.instance {
overflow-y: scroll;
font-size: 8pt;
display: grid;
font-size: 6pt;
grid-template-columns: 1fr;
grid-template-rows: min-content 1fr;
grid-template-areas:
@ -30,141 +28,4 @@
display: none;
}
}
.instance .nav-btn { display: initial; }
.vbox {
grid-area: vbox;
margin-bottom: 0;
display: grid;
grid-template-rows: min-content min-content min-content min-content;
grid-template-columns: 1fr;
grid-template-areas:
"vbox"
"varrow"
"inventory"
"combiner";
&:not(.visible) {
display: none;
}
.vbox-vbox {
margin-bottom: 1em;
}
}
.vbox-arrow {
display: none;
}
.vbox-inventory .vbox-hdr {
display: block;
}
.vbox-arrow-mobile {
display: block;
grid-area: varrow;
width: 100%;
text-align: center;
margin: 0;
}
.construct-list {
display: grid;
grid-auto-rows: 1fr;
.instance-construct:not(.visible) {
display: none;
};
}
.vbox-inventory {
margin-left: 0;
}
.vbox-combiner {
margin-left: 0;
}
.equip .specs {
margin-top: 0.5em;
border: none;
border-bottom: 1px solid #444;
}
.equip .skills {
border: none;
border-bottom: 1px solid #444;
}
.instance-construct {
display: grid;
grid-template-rows: min-content min-content min-content 1fr min-content;
grid-template-areas:
"name "
"skills "
"specs "
"avatar "
"stats ";
border: 0;
padding: 0;
transition-property: all;
transition-duration: 0.25s;
transition-delay: 0;
transition-timing-function: ease;
}
.instance-construct:first-child {
border-left-width: 0;
}
.instance-construct:not(:last-child) {
border-right: 1px solid #222;
}
.instance-construct .skills {
flex-flow: column;
}
.instance-construct .skills button {
margin: 0;
}
.instance-construct .specs {
margin: 0;
}
.construct-list .stats {
flex-flow: row wrap;
text-align: center;
}
.instance-construct .stats div.speed {
order: -1;
flex: 1 0 100%;
margin: 0;
}
.instance-construct .stats div {
flex: 1 1 33%;
}
.instance-nav {
display: flex;
grid-area: nav;
margin-right: 0;
border-top: 2px solid #444;
}
.instance-nav button {
font-size: 150%;
border-right: 2px solid #444;
}
.instance-nav button:last-child {
border: none;
}
}

26
client/assets/styles/menu.less
View File

@ -215,29 +215,3 @@ section {
}
}
@media (max-width: 800px) {
section {
grid-template-columns: 1fr;
.list {
grid-template-columns: 1fr 1fr;
&.play {
grid-template-columns: 1fr;
}
}
}
.menu .team {
grid-template-columns: 1fr;
.construct {
height: 10em;
}
}
.account {
grid-template-columns: 1fr;
}
}

181
client/assets/styles/styles.mobile.less
View File

@ -1,130 +1,71 @@
@media (max-width: 800px) {
@media (max-width: 1000px) {
body {
overflow-y: initial;
}
#mnml {
font-size: 12pt;
padding: 0;
grid-template-columns: 1fr;
grid-template-rows: 10fr 1fr;
grid-template-areas:
"main"
"footer";
height: 100vh;
max-height: initial;
min-height: initial;
}
table td {
height: 2.5em;
}
nav {
display: none;
}
aside {
display: none;
}
footer {
display: flex;
position: fixed;
bottom: 0;
width: 100%;
button {
font-size: 90%;
}
}
#nav-btn, #instance-nav {
display: unset;
}
#mnml.nav-visible nav {
padding: 0.5em;
margin: 0;
display: block;
grid-area: main;
}
#mnml.nav-visible main {
display: none;
}
main {
overflow-x: hidden;
overflow-y: initial;
max-height: 100vh;
padding: 0 0.5em;
}
.welcome .login {
width: 100%;
}
.welcome .options {
width: 100%;
flex-flow: row wrap;
}
.welcome .options button {
flex: 1 0 50%;
}
.timer-container {
margin: 0.5em 0 0 0;
}
.mobile-title {
display: block;
margin-bottom: 1em;
}
.menu-instances {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"constructs"
"inventory"
"games";
}
font-size: 8pt;
padding: 0.25em;
.menu {
.options {
display: grid;
grid-template-columns: 1fr;
button:not(:last-child) {
border: 2px solid #222;
}
button.logo {
border: none;
margin-right: 0;
margin-top: 0.5em;
background-position: center;
}
}
}
section {
.list {
grid-template-columns: 1fr;
}
}
.account {
div {
padding: 0;
}
}
.play-p {
.logo {
display: none;
}
.team {
height: 20em;
}
}
.instance {
svg {
stroke-width: 1.25em;
}
}
.game {
.team, #targeting, .resolving-skill {
width: calc(90% - 3em);
}
.game-construct {
.avatar {
grid-area: initial;
position: absolute;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
}
svg {
height: 1em;
}
}
}
.instance-construct {
position: relative;
.skills, .specs {
font-size: 75%;
}
.avatar {
grid-area: initial;
position: absolute;
top: 0;
height: 100%;
width: 100%;
z-index: -1;
}
}
.opponent {
.avatar {
bottom: 0;
}
}
}
}

2
client/assets/styles/vbox.less
View File

@ -100,7 +100,7 @@
figure {
svg {
height: 2em;
stroke-width: 8px;
stroke-width: 0.5em;
}
figcaption {

2
client/src/actions.jsx
View File

@ -36,12 +36,10 @@ export const setItemInfo = value => ({ type: 'SET_ITEM_INFO', value });
export const setItemUnequip = value => ({ type: 'SET_ITEM_UNEQUIP', value });
export const setMtxActive = value => ({ type: 'SET_MTX_ACTIVE', value });
export const setNav = value => ({ type: 'SET_NAV', value });
export const setNavInstance = value => ({ type: 'SET_NAV_INSTANCE', value });
export const setPing = value => ({ type: 'SET_PING', value });
export const setPlayer = value => ({ type: 'SET_PLAYER', value });
export const setReclaiming = value => ({ type: 'SET_RECLAIMING', value });
export const setShowLog = value => ({ type: 'SET_SHOW_LOG', value });
export const setShowNav = value => ({ type: 'SET_SHOW_NAV', value });
export const setSkip = value => ({ type: 'SET_SKIP', value });
export const setShop = value => ({ type: 'SET_SHOP', value });
export const setSubscription = value => ({ type: 'SET_SUBSCRIPTION', value });

2
client/src/components/anims/siphon.tick.jsx
View File

@ -38,7 +38,7 @@ class SiphonTick extends Component {
render() {
return (
<svg
class={'skill-anim'}
class='skill-anim'
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"

4
client/src/components/demo.jsx
View File

@ -84,7 +84,7 @@ function Demo(args) {
function inventoryElement() {
return (
<div class="vbox visible">
<div class="vbox">
<div class='vbox-section'>
<h2 class='colour-info'>
VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()}
@ -117,7 +117,7 @@ function Demo(args) {
: 'empty gray';
const constructEl = c => (
<div class="instance-construct visible">
<div class="instance-construct">
<h2 class="name" >{c.name}</h2>
<ConstructAvatar construct={c} />
<div class="skills">

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

@ -1,9 +1,6 @@
const { Component } = require('preact');
const preact = require('preact');
const { connect } = require('preact-redux');
const Hammer = require('hammerjs');
const Vbox = require('./vbox.component');
const InfoContainer = require('./info.container');
const InstanceConstructsContainer = require('./instance.constructs');
@ -16,12 +13,10 @@ const addState = connect(
const {
instance,
nav,
navInstance,
} = state;
return {
instance,
nav,
navInstance,
};
},
@ -30,10 +25,6 @@ const addState = connect(
return dispatch(actions.setInfo(c));
}
function setNavInstance(c) {
return dispatch(actions.setNavInstance(c));
}
function clearItems() {
dispatch(actions.setCombiner([]));
@ -48,18 +39,11 @@ const addState = connect(
return {
setInfo,
clearItems,
setNavInstance,
};
}
);
class Instance extends Component {
shouldComponentUpdate(newProps) {
if (newProps.instance !== this.props.instance) return true;
return false;
}
render(args) {
function Instance(args) {
const {
instance,
clearItems,
@ -87,41 +71,6 @@ class Instance extends Component {
<InstanceConstructsContainer />
</main>
);
}
componentDidMount() {
if (!this.h) this.bindSwipes();
}
componentDidUpdate() {
if (!this.h) this.bindSwipes();
}
bindSwipes() {
const instance = document.getElementById('instance');
if (!instance) {
return setTimeout(this.bindSwipes, 50);
}
if (this.h) this.h.destroy();
this.h = new Hammer(instance);
this.h.on('swiperight', () => {
const {
navInstance,
setNavInstance,
} = this.props;
setNavInstance(navInstance === 0 ? 3 : navInstance - 1);
});
this.h.on('swipeleft', () => {
const {
navInstance,
setNavInstance,
} = this.props;
setNavInstance((navInstance + 1) % 4);
});
return true;
}
}
module.exports = addState(Instance);

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

@ -1,5 +1,6 @@
const { connect } = require('preact-redux');
const preact = require('preact');
const range = require('lodash/range');
const buttons = require('./buttons');
@ -20,7 +21,6 @@ const addState = connect(
itemInfo,
itemEquip,
itemUnequip,
navInstance,
vboxSelected,
tutorial,
} = state;
@ -51,7 +51,6 @@ const addState = connect(
itemInfo,
itemEquip,
itemUnequip,
navInstance,
sendUnequip,
vboxSelected,
tutorial,
@ -92,7 +91,6 @@ function Construct(props) {
itemEquip,
itemUnequip,
instance,
mobileVisible,
player,
vboxSelected,
tutorial,
@ -246,7 +244,7 @@ function Construct(props) {
</div>;
});
const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
const classes = `instance-construct`;
const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
return (
<div key={construct.id} class={classes} onClick={onClick} onDragOver={ev => ev.preventDefault()} onDrop={onClick}>
@ -270,7 +268,6 @@ class InstanceConstructs extends preact.Component {
if (newProps.itemEquip !== this.props.itemEquip) return true;
if (newProps.itemUnequip !== this.props.itemUnequip) return true;
if (newProps.tutorial !== this.props.tutorial) return true;
if (newProps.navInstance !== this.props.navInstance) return true;
// JSON or Array objects
if (newProps.player !== this.props.player) return true;
if (newProps.instance !== this.props.instance) return true;
@ -284,7 +281,6 @@ class InstanceConstructs extends preact.Component {
itemEquip,
itemUnequip,
instance,
navInstance,
player,
tutorial,
vboxSelected,
@ -306,7 +302,7 @@ class InstanceConstructs extends preact.Component {
if (instance.phase === 'Lobby') return false;
const constructs = range(0, 3).map(i => {
const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, navInstance, i);
const tutorialConstruct = tutorialConstructDisplay(player, instance, tutorial, i);
if (tutorialConstruct) return (tutorialConstruct);
return Construct({
@ -328,7 +324,6 @@ class InstanceConstructs extends preact.Component {
sendUnequip,
vboxSelected,
tutorial,
mobileVisible: navInstance === i + 1,
});
});

11
client/src/components/mnml.jsx
View File

@ -10,21 +10,14 @@ const addState = connect(
state => ({ showNav: state.showNav })
);
class Mnml extends preact.Component {
shouldComponentUpdate(newProps) {
if (newProps.showNav !== this.props.showNav) return true;
return false;
}
render(args) {
function Mnml(args) {
return (
<div id="mnml" class={args.showNav ? 'nav-visible' : ''}>
<div id="mnml">
<Main />
<Controls />
<Footer />
</div>
);
}
}
module.exports = addState(Mnml);

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

@ -20,7 +20,6 @@ const addState = connect(
vboxSelected,
itemInfo,
itemUnequip,
navInstance,
tutorial,
} = state;
@ -58,7 +57,6 @@ const addState = connect(
itemInfo,
itemUnequip,
sendItemUnequip,
navInstance,
tutorial,
};
},
@ -101,7 +99,6 @@ class Vbox extends preact.Component {
if (newProps.combiner !== this.props.combiner) return true;
if (newProps.itemUnequip !== this.props.itemUnequip) return true;
if (newProps.reclaiming !== this.props.reclaiming) return true;
if (newProps.navInstance !== this.props.navInstance) return true;
if (newProps.tutorial !== this.props.tutorial) return true;
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
if (newProps.player !== this.props.player) return true;
@ -117,7 +114,6 @@ class Vbox extends preact.Component {
player,
reclaiming,
tutorial,
navInstance,
vboxSelected,
instance,
@ -432,7 +428,7 @@ class Vbox extends preact.Component {
return setInfo(newInfo);
}
const classes = `vbox ${navInstance === 0 ? 'visible' : ''}`;
const classes = `vbox`;
return (
<div class={classes}>
{vboxElement()}

2
client/src/reducers.jsx
View File

@ -45,8 +45,6 @@ module.exports = {
itemUnequip: createReducer([], 'SET_ITEM_UNEQUIP'),
mtxActive: createReducer(null, 'SET_MTX_ACTIVE'),
nav: createReducer(null, 'SET_NAV'),
navInstance: createReducer(0, 'SET_NAV_INSTANCE'),
showNav: createReducer(null, 'SET_SHOW_NAV'),
ping: createReducer(null, 'SET_PING'),
player: createReducer(null, 'SET_PLAYER'),
reclaiming: createReducer(false, 'SET_RECLAIMING'),

5
client/src/tutorial.utils.jsx
View File

@ -1,11 +1,10 @@
const preact = require('preact');
const actions = require('./actions');
function tutorialConstructDisplay(player, instance, tutorial, navInstance, i) {
function tutorialConstructDisplay(player, instance, tutorial, i) {
if (instance.time_control === 'Practice' && instance.rounds.length === 1 && tutorial && tutorial < 6) {
if (tutorial <= 2 || (tutorial > 2 && i > 0)) {
const mobileVisible = navInstance === i + 1;
const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`;
const classes = `instance-construct`;
return (<div key={player.constructs[i].id} class={classes}></div>);
}
}

3
server/src/rpc.rs
View File

@ -1,6 +1,5 @@
use std::time::{Instant};
use std::thread::{spawn, sleep};
use std::time;
use std::thread::{spawn};
use std::str;