profesh... except the css
This commit is contained in:
ntr
parent
1991574b21
commit
eb645d03b1
@ -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;
|
||||
}
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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 = (
|
||||
<div class="news">
|
||||
<p> MNML is a turn-based 1v1 strategy game in an abstract setting. </p>
|
||||
<p>
|
||||
Build a unique team of 3 constructs from a range of skills and specialisations.<br />
|
||||
Outplay your opponent in multiple rounds by adapting to an always shifting meta. <br />
|
||||
Simple rules, complex interactions and unique mechanics.<br />
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
|
||||
const list = () => {
|
||||
return (
|
||||
<div class='list play'>
|
||||
<figure>
|
||||
<button
|
||||
class="ready"
|
||||
onClick={() => sendInstancePractice()}>
|
||||
Tutorial
|
||||
</button>
|
||||
<figcaption>Learn MNML</figcaption>
|
||||
</figure>
|
||||
<figure>
|
||||
<button
|
||||
class='discord-btn'
|
||||
onClick={() => window.open('https://discord.gg/YJJgurM') }>
|
||||
|
||||
</button>
|
||||
<figcaption>Join the Community</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<section class="top">
|
||||
<div class="news">
|
||||
<h1>Welcome to MNML</h1>
|
||||
{list()}
|
||||
<hr />
|
||||
{news}
|
||||
</div>
|
||||
<Welcome />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
module.exports = addState(Play);
|
||||
@ -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 <GuestTop />
|
||||
|
||||
if (nav === 'account') return <AccountTop />;
|
||||
if (nav === 'play') return <Play />
|
||||
if (nav === 'shop') return <Shop />
|
||||
|
||||
@ -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 (
|
||||
<div id="mnml" class='front-page'>
|
||||
<FrontPage />
|
||||
<div id="rotate" class={rotateClass} ></div>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div id="mnml">
|
||||
<Main />
|
||||
<Controls />
|
||||
<div id="rotate" class={rotateClass} >
|
||||
</div>
|
||||
<div id="rotate" class={rotateClass} ></div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user