add front page

client/src/components/front.page.jsx

@@ -0,0 +1,83 @@
+// const { connect } = require('preact-redux');
+const preact = require('preact');
+const { connect } = require('preact-redux');
+
+const { errorToast, infoToast } = require('../utils');
+const actions = require('./../actions');
+
+const VERSION = process.env.npm_package_version;
+
+const Welcome = require('./welcome');
+const NoiseLogo = require('./noise.logo');
+
+const addState = connect(
+    function receiveState(state) {
+        const {
+            ws,
+            account,
+        } = state;
+
+        function sendInstancePractice() {
+            ws.sendInstancePractice();
+        }
+
+        return {
+            account,
+            sendInstancePractice,
+        };
+    },
+);
+
+function Play(args) {
+    const {
+        account,
+        sendInstancePractice,
+    } = args;
+
+    const news = (
+        <div class="intro">
+            <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>
+        </div>
+    );
+
+    const list = () => {
+        return (
+            <div class='list play'>
+                <figure>
+                    <button
+                        class="ready"
+                        onClick={() => sendInstancePractice()}>
+                        Play
+                    </button>
+                    <figcaption>Learn MNML</figcaption>
+                </figure>
+                <figure>
+                    <button
+                        class='discord-btn'
+                        onClick={() => window.open('https://discord.gg/YJJgurM') }>
+                            &nbsp;
+                    </button>
+                    <figcaption>Join the Community</figcaption>
+                </figure>
+            </div>
+        );
+    };
+
+    return (
+        <main>
+            <NoiseLogo />
+            <hr />
+            {news}
+            <hr />
+            {list()}
+            <Welcome />
+        </main>
+    );
+}
+
+module.exports = addState(Play);