diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index fe5dd570..f0eb98ec 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -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); - } - } - } diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 841993a8..b6fc4c3f 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -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 diff --git a/client/assets/styles/instance.mobile.less b/client/assets/styles/instance.mobile.less index 9fec777b..925b487f 100644 --- a/client/assets/styles/instance.mobile.less +++ b/client/assets/styles/instance.mobile.less @@ -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; - } } \ No newline at end of file diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index 672e928e..5445b158 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -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; - } -} \ No newline at end of file diff --git a/client/assets/styles/styles.mobile.less b/client/assets/styles/styles.mobile.less index be259075..14b4a3d5 100644 --- a/client/assets/styles/styles.mobile.less +++ b/client/assets/styles/styles.mobile.less @@ -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"; + font-size: 8pt; + padding: 0.25em; - 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"; - } - - .menu { - .options { - display: grid; - grid-template-columns: 1fr; - - button:not(:last-child) { - border: 2px solid #222; + .menu { + .logo { + display: none; } - button.logo { - border: none; - margin-right: 0; - margin-top: 0.5em; - background-position: center; + .team { + height: 20em; } } - } - section { - .list { - grid-template-columns: 1fr; + .instance { + svg { + stroke-width: 1.25em; + } } - } - .account { - div { - padding: 0; + .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; + } + } } - } - .play-p { - display: none; + .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; + } + } } } diff --git a/client/assets/styles/vbox.less b/client/assets/styles/vbox.less index 0e0f9526..95b77615 100644 --- a/client/assets/styles/vbox.less +++ b/client/assets/styles/vbox.less @@ -100,7 +100,7 @@ figure { svg { height: 2em; - stroke-width: 8px; + stroke-width: 0.5em; } figcaption { diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 4b9d11ac..e42d349c 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -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 }); diff --git a/client/src/components/anims/siphon.tick.jsx b/client/src/components/anims/siphon.tick.jsx index 43155c07..1f7f4d47 100644 --- a/client/src/components/anims/siphon.tick.jsx +++ b/client/src/components/anims/siphon.tick.jsx @@ -38,7 +38,7 @@ class SiphonTick extends Component { render() { return ( +

VBOX PHASE {shapes.Red()} {shapes.Green()} {shapes.Blue()} @@ -117,7 +117,7 @@ function Demo(args) { : 'empty gray'; const constructEl = c => ( -
+

{c.name}

diff --git a/client/src/components/instance.component.jsx b/client/src/components/instance.component.jsx index b5e98674..23b0148a 100644 --- a/client/src/components/instance.component.jsx +++ b/client/src/components/instance.component.jsx @@ -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,80 +39,38 @@ const addState = connect( return { setInfo, clearItems, - setNavInstance, }; } ); -class Instance extends Component { - shouldComponentUpdate(newProps) { - if (newProps.instance !== this.props.instance) return true; - return false; +function Instance(args) { + const { + instance, + clearItems, + } = args; + + if (!instance) return false; + + if (instance.phase !== 'InProgress') { + return ; } - render(args) { - const { - instance, - clearItems, - } = args; - - if (!instance) return false; - - if (instance.phase !== 'InProgress') { - return ; - } - - function instanceClick(e) { - e.stopPropagation(); - clearItems(); - } - - function onTouchMove(e) { - e.preventDefault(); - } - - return ( -
- - - -
- ); + function instanceClick(e) { + e.stopPropagation(); + clearItems(); } - componentDidMount() { - if (!this.h) this.bindSwipes(); + function onTouchMove(e) { + e.preventDefault(); } - 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; - } + return ( +
+ + + +
+ ); } module.exports = addState(Instance); diff --git a/client/src/components/instance.constructs.jsx b/client/src/components/instance.constructs.jsx index 9aa57ffc..0012c1b8 100644 --- a/client/src/components/instance.constructs.jsx +++ b/client/src/components/instance.constructs.jsx @@ -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) {
; }); - const classes = `instance-construct ${mobileVisible ? 'visible' : ''}`; + const classes = `instance-construct`; const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`); return (
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, }); }); diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx index 60dad587..17d3203f 100644 --- a/client/src/components/mnml.jsx +++ b/client/src/components/mnml.jsx @@ -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) { - return ( -
-
- -
-
- ); - } +function Mnml(args) { + return ( +
+
+ +
+
+ ); } module.exports = addState(Mnml); diff --git a/client/src/components/vbox.component.jsx b/client/src/components/vbox.component.jsx index 1bb540c8..c09e07f1 100644 --- a/client/src/components/vbox.component.jsx +++ b/client/src/components/vbox.component.jsx @@ -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 (
{vboxElement()} diff --git a/client/src/reducers.jsx b/client/src/reducers.jsx index d2d06f43..96d8001c 100644 --- a/client/src/reducers.jsx +++ b/client/src/reducers.jsx @@ -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'), diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx index 1cdf0dfb..ea4ade3e 100644 --- a/client/src/tutorial.utils.jsx +++ b/client/src/tutorial.utils.jsx @@ -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 (
); } } diff --git a/server/src/rpc.rs b/server/src/rpc.rs index 253f6bcb..e0db439a 100644 --- a/server/src/rpc.rs +++ b/server/src/rpc.rs @@ -1,6 +1,5 @@ use std::time::{Instant}; -use std::thread::{spawn, sleep}; -use std::time; +use std::thread::{spawn}; use std::str;