79 lines
3.0 KiB
JavaScript
79 lines
3.0 KiB
JavaScript
// eslint-disable-next-line
|
|
const preact = require('preact');
|
|
|
|
const Login = require('./welcome.login');
|
|
const Register = require('./welcome.register');
|
|
const Help = require('./welcome.help');
|
|
const About = require('./welcome.about');
|
|
const Demo = require('./demo');
|
|
|
|
function Welcome() {
|
|
const page = this.state.page || 'login';
|
|
|
|
const navRegister = () => this.setState({ page: 'register' });
|
|
const pageEl = () => {
|
|
if (page === 'login') return <Login />;
|
|
if (page === 'register') return <Register />;
|
|
if (page === 'about') return <About navRegister={navRegister} />;
|
|
if (page === 'help') return <Help />;
|
|
return false;
|
|
};
|
|
|
|
return (
|
|
<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 class="news">
|
|
<h1>mnml.gg</h1>
|
|
<p>
|
|
mnml is a turn-based 1v1 strategy game in an abstract setting.<br />
|
|
outplay your opponents by building your team of 3 constructs from a shifting meta of skills, effects and specialisations.<br />
|
|
</p>
|
|
<p>
|
|
simple rules, complex interactions, simultaneous turns to increase the pace, and a unique speed mechanic;<br />
|
|
mnml is a tactical game unlike any other.
|
|
</p>
|
|
<p>
|
|
free to play<br />
|
|
no email required<br />
|
|
glhf
|
|
</p>
|
|
</div>
|
|
{pageEl()}
|
|
</section>
|
|
</div>
|
|
<Demo />
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = Welcome;
|