62 lines
2.1 KiB
JavaScript
62 lines
2.1 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');
|
|
|
|
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="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>
|
|
</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()}
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = Welcome;
|