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

better welcome

Browse Source
This commit is contained in:
ntr 2019-09-09 17:47:57 +10:00
parent 8c0b02e568
commit 7dbf8e2c89
3 changed files with 48 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -77,6 +77,12 @@
}
}
}
.login {
display: flex;
flex-flow: column;
margin-bottom: 2em;
}
}
section {
@ -126,5 +132,4 @@ section {
flex: 1;
display: inline;
}
}

22
client/assets/styles/styles.less
View File

@ -195,28 +195,6 @@ button[disabled] {
border-color: #222;
}
/*
LOGIN
*/
.welcome {
.login {
width: 50%;
display: flex;
flex-flow: column;
margin-bottom: 2em;
}
.options {
display: flex;
width: 50%;
}
h2 {
margin-bottom: 0.5em;
}
}
#mnml input, #mnml select {
border-color: #222;
background-color: #222;

77
client/src/components/welcome.jsx
View File

@ -20,42 +20,49 @@ function Welcome() {
};
return (
<main class="welcome">
<h1>mnml.gg</h1>
<div class="login">
<div>mnml is an abstract turn based strategy game</div>
<div>free to play</div>
<div>no email required</div>
<div>glhf</div>
<main class="menu">
<header>
<div class="options">
<button
class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
disabled={page === 'login'}
onClick={() => this.setState({ page: 'login' })}>
Login
</button>
<button
class={`login-btn ${page === 'register' ? 'highlight' : ''}`}
disabled={page === 'register'}
onClick={() => this.setState({ page: 'register' })}>
Register
</button>
<button
class={`login-btn ${page === 'about' ? 'highlight' : ''}`}
disabled={page === 'about'}
onClick={() => this.setState({ page: 'about' })}>
About
</button>
<button
class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
disabled={page === 'help'}
onClick={() => this.setState({ page: 'help' })}>
Help
</button>
</div>
</header>
<div class="top">
<section>
<div>
<h1>mnml.gg</h1>
<p>mnml is a turn-based 1v1 strategy game in an abstract setting.</p>
<p>form your team of 3 constructs from a deep pool of skills, effects and specialisations in order to outplay your opponents.</p>
<p>featuring complex interactions arising from simple rules, simultaneous turns to increase the pace, and a unique speed mechanic mnml is a tactical game in a genre of its own.</p>
<p>free to play</p>
<p>no email required</p>
<p>glhf</p>
</div>
{pageEl()}
</section>
</div>
<div class="options">
<button
class={`login-btn ${page === 'login' ? 'highlight' : ''}`}
disabled={page === 'login'}
onClick={() => this.setState({ page: 'login' })}>
Login
</button>
<button
class={`login-btn ${page === 'register' ? 'highlight' : ''}`}
disabled={page === 'register'}
onClick={() => this.setState({ page: 'register' })}>
Register
</button>
<button
class={`login-btn ${page === 'about' ? 'highlight' : ''}`}
disabled={page === 'about'}
onClick={() => this.setState({ page: 'about' })}>
About
</button>
<button
class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
disabled={page === 'help'}
onClick={() => this.setState({ page: 'help' })}>
Help
</button>
</div>
{pageEl()}
<hr />
<Demo />
</main>
);