83 lines
3.0 KiB
JavaScript
83 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 || 'register';
|
|
|
|
const pageEl = () => {
|
|
if (page === 'login') return <Login />;
|
|
if (page === 'register') return <Register />;
|
|
if (page === 'help') return <Help />;
|
|
return false;
|
|
};
|
|
|
|
const news = (
|
|
<div class="news">
|
|
<p> Welcome to mnml.</p>
|
|
|
|
<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>
|
|
<p> Free to play, no pay to win. Register to start playing.<br /></p>
|
|
|
|
<a href='https://www.youtube.com/watch?v=VtZLlkpJuS8'>Tutorial Playthrough on YouTube</a>
|
|
</div>
|
|
);
|
|
|
|
const main = (['login', 'register', 'help'].includes(page))
|
|
? <section>{news}{pageEl()}</section>
|
|
: <Demo />;
|
|
|
|
return (
|
|
<main class="menu welcome">
|
|
<header>
|
|
<div class="options">
|
|
<button
|
|
onClick={() => this.setState({ page: 'login' })}
|
|
class='logo login-btn'>
|
|
|
|
</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 === 'info' ? 'highlight' : ''}`}
|
|
disabled={page === 'info'}
|
|
onClick={() => this.setState({ page: 'info' })}>
|
|
Info
|
|
</button>
|
|
<button
|
|
class={`login-btn ${page === 'help' ? 'highlight' : ''}`}
|
|
disabled={page === 'help'}
|
|
onClick={() => this.setState({ page: 'help' })}>
|
|
Help
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="top">
|
|
{main}
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|
|
|
|
module.exports = Welcome;
|