mnml/client/src/components/welcome.jsx
2019-09-19 15:07:16 +10:00

75 lines
2.8 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 === 'help') return <Help />;
return false;
};
return (
<main class="menu">
<header>
<div class="options">
<button
onClick={() => this.setState({ page: 'login' })}
class='logo login-btn'>
&nbsp;
</button>
<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 === 'help' ? 'highlight' : ''}`}
disabled={page === 'help'}
onClick={() => this.setState({ page: 'help' })}>
Help
</button>
</div>
</header>
<div class="top">
<section>
<div class="news">
<p>
Welcome to mnml.
</p>
<p> 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>
<p>
Free to play, no pay to win. Register to start playing.<br />
</p>
</div>
{pageEl()}
</section>
</div>
<Demo />
</main>
);
}
module.exports = Welcome;