diff --git a/client/assets/styles/menu.less b/client/assets/styles/menu.less index dddead54..bdb8da41 100644 --- a/client/assets/styles/menu.less +++ b/client/assets/styles/menu.less @@ -80,20 +80,6 @@ } } } - - .login { - display: flex; - flex-flow: column; - - .terms { - display: inline; - margin: 0 1em; - } - - button { - padding: 0 0.5em; - } - } } section { @@ -108,58 +94,14 @@ section { padding-right: 1em; } - .list { - letter-spacing: 0.25em; - text-transform: uppercase; - display: grid; - // grid-template-columns: repeat(4, 1fr); - grid-template-columns: 1fr 1fr; - grid-gap: 1em; - flex-flow: row wrap; - align-items: flex-end; - - &.sub { - grid-template-columns: 1fr; - } - - &.play { - grid-template-columns: repeat(2, 1fr); - align-items: flex-start; - - &.rejoin { - grid-template-columns: 1fr; - } - - button.ready:enabled { - color: forestgreen; - border-color: forestgreen; - - &:hover { - background: forestgreen; - color: black; - border-color: forestgreen; - } - } - - // // all green - // button.ready:enabled { - // background: forestgreen; - // color: black; - // border-color: forestgreen; - - // &:hover { - // color: forestgreen; - // border-color: forestgreen; - // background: 0; - // } - // } - } - } - .panes { display: grid; grid-template-columns: repeat(2, 1fr); } +} + +.list { + margin-bottom: 2em; figure { letter-spacing: 0.25em; @@ -168,5 +110,91 @@ section { display: flex; flex-flow: column; } + + letter-spacing: 0.25em; + text-transform: uppercase; + display: grid; + // grid-template-columns: repeat(4, 1fr); + grid-template-columns: 1fr 1fr; + grid-gap: 1em; + flex-flow: row wrap; + align-items: flex-end; + + &.sub { + grid-template-columns: 1fr; + } + + &.play { + grid-template-columns: repeat(2, 1fr); + align-items: flex-start; + + &.rejoin { + grid-template-columns: 1fr; + } + + button.ready:enabled { + color: forestgreen; + border-color: forestgreen; + + &:hover { + background: forestgreen; + color: black; + border-color: forestgreen; + } + } + + // // all green + // button.ready:enabled { + // background: forestgreen; + // color: black; + // border-color: forestgreen; + + // &:hover { + // color: forestgreen; + // border-color: forestgreen; + // background: 0; + // } + // } + } } + +.login { + display: flex; + flex-flow: column; + + .terms { + display: inline; + margin: 0 1em; + } + + button { + padding: 0 0.5em; + margin-top: 1em; + } +} + +.options { + grid-area: hdr; + + display: flex; + + .logo { + flex: 0 1 10%; + margin-right: 1em; + border: none; + } + + button { + flex: 1; + border-top: 0; + border: 0.1em solid #222; + &:last-child { + float: right; + } + } +} + +.intro { + text-align: center; +} diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 4d92875f..c3ba1e5e 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -27,23 +27,6 @@ html body { overflow-y: hidden; } -#mnml { - /* this is the sweet nectar to keep it full page*/ - height: 100vh; - max-height: 100vh; - min-height: 100vh; - - /* stops inspector going skitz*/ - overflow-x: hidden; - // overflow-y: hidden; -} - -// @media (min-width: 1921px) { -// html, body, #mnml { -// font-size: 16pt; -// } -// } - html { box-sizing: border-box; margin: 0; @@ -108,11 +91,33 @@ dl { padding: 0.5em 1em; + /* this is the sweet nectar to keep it full page*/ + height: 100vh; + max-height: 100vh; + min-height: 100vh; + + /* stops inspector going skitz*/ + overflow-x: hidden; + // overflow-y: hidden; + + &.animations-test { aside button { font-size: 50%; } } + + &.front-page { + display: block; + + main { + padding: 0 25%; + } + + .logo { + margin: 2em 0; + } + } } main { @@ -266,10 +271,7 @@ figure.gray { &.highlight { color: @white; box-shadow: inset 0px 5px 0px 0px @white; - border: 0; } - - border: none; } } @@ -288,10 +290,10 @@ li { .logo { height: 2em; - background-image: url("../../assets/mnml.logo.trim.svg"); + background-image: url("../../assets/mnml.logo.text.svg"); background-size: contain; background-repeat: no-repeat; - background-position: left; + background-position: center; } .discord-btn { diff --git a/client/src/components/guest.top.jsx b/client/src/components/guest.top.jsx deleted file mode 100644 index c6020b6f..00000000 --- a/client/src/components/guest.top.jsx +++ /dev/null @@ -1,137 +0,0 @@ -// const { connect } = require('preact-redux'); -const preact = require('preact'); -const { connect } = require('preact-redux'); - -const { errorToast, infoToast } = require('../utils'); -const actions = require('./../actions'); - -const VERSION = process.env.npm_package_version; - -const Welcome = require('./welcome'); - -const addState = connect( - function receiveState(state) { - const { - ws, - account, - instances, - invite, - pvp, - } = state; - - function sendInstanceState(id) { - ws.sendInstanceState(id); - } - - function sendInstancePractice() { - ws.sendInstancePractice(); - } - - function sendInstanceQueue() { - ws.sendInstanceQueue(); - } - - function sendInstanceInvite() { - ws.sendInstanceInvite(); - } - - function sendInstanceLeave() { - ws.sendInstanceLeave(); - } - - return { - account, - instances, - invite, - pvp, - - sendInstanceState, - sendInstanceQueue, - sendInstancePractice, - sendInstanceInvite, - sendInstanceLeave, - }; - }, - - function receiveDispatch(dispatch) { - function setMtxActive(mtx) { - dispatch(actions.setConstructRename(null)); - dispatch(actions.setMtxActive(mtx)); - return true; - } - - function setNav(place) { - return dispatch(actions.setNav(place)); - } - - return { - setMtxActive, - setNav, - }; - } -); - -function Play(args) { - const { - account, - instances, - invite, - pvp, - - sendInstanceState, - sendInstanceQueue, - sendInstancePractice, - sendInstanceInvite, - sendInstanceLeave, - - setNav, - } = args; - - const news = ( -
-

MNML is a turn-based 1v1 strategy game in an abstract setting.

-

- Build a unique team of 3 constructs from a range of skills and specialisations.
- Outplay your opponent in multiple rounds by adapting to an always shifting meta.
- Simple rules, complex interactions and unique mechanics.
-

-
- ); - - const list = () => { - return ( -
-
- -
Learn MNML
-
-
- -
Join the Community
-
-
- ); - }; - - return ( -
-
-

Welcome to MNML

- {list()} -
- {news} -
- -
- ); -} - -module.exports = addState(Play); diff --git a/client/src/components/main.top.jsx b/client/src/components/main.top.jsx index f56fe8c6..2e0d22f7 100644 --- a/client/src/components/main.top.jsx +++ b/client/src/components/main.top.jsx @@ -4,7 +4,6 @@ const preact = require('preact'); const actions = require('./../actions'); const AccountTop = require('./account.top'); -const GuestTop = require('./guest.top'); const Play = require('./play'); const Shop = require('./shop'); const Reshape = require('./reshape'); @@ -13,12 +12,10 @@ const addState = connect( function receiveState(state) { const { nav, - authenticated, } = state; return { nav, - authenticated, }; }, ); @@ -29,8 +26,6 @@ function Top(args) { authenticated, } = args; - if (!authenticated) return - if (nav === 'account') return ; if (nav === 'play') return if (nav === 'shop') return diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx index d1a632ce..db7b1471 100644 --- a/client/src/components/mnml.jsx +++ b/client/src/components/mnml.jsx @@ -4,27 +4,35 @@ const { connect } = require('preact-redux'); const Main = require('./main'); // const Nav = require('./nav'); const Controls = require('./controls'); +const FrontPage = require('./front.page'); const addState = connect( - ({ game, instance }) => ({ game, instance }) + ({ game, instance, authenticated }) => ({ game, instance, authenticated }) ); function Mnml(args) { const { game, instance, + authenticated, } = args; const rotateClass = (game || instance) && window.innerHeight < 900 && window.innerWidth < window.innerHeight ? 'show' : ''; + if (!authenticated) return ( +
+ +
+
+ ); + return (
-
-
+
); }