login

client/cryps.css

@@ -86,6 +86,18 @@ button.left:hover, button.left:focus {
     box-shadow: inset 0.5em 0 0 0 whitesmoke;
 }
 
+/*
+    LOGIN
+*/
+
+.login {
+    flex: 0 1 25%;
+    display: flex;
+    flex-flow: column;
+}
+
+
+
 /*
     MENU
 */
@@ -117,11 +129,6 @@ header {
     background-color: black;
 }
 
-.login {
-    display: inline;
-    margin-right: 0;
-}
-
 .ping-path {
     fill: none;
     stroke-width: 4px;
@@ -180,7 +187,7 @@ header {
 
 .menu-instance-btn {
     box-sizing: border-box;
-    flex: 1 0 20%;
+    flex: 1 0 100%;
     font-size: 150%;
     /*min-width: 20%;*/
     border-width: 2px;
@@ -188,10 +195,6 @@ header {
     margin: 0.5em;
 }
 
-.menu-instance-btn.full {
-    flex: 1 0 100%;
-}
-
 /*
     INSTANCE
 */

client/src/components/body.component.jsx

@@ -3,25 +3,34 @@ const preact = require('preact');
 const { connect } = require('preact-redux');
 
 const InstanceListContainer = require('./instance.list.container');
+const LoginContainer = require('./login.container');
 const CrypListContainer = require('./cryp.list.container');
 const GameContainer = require('./game.container');
 const InstanceContainer = require('./instance.container');
 
 const addState = connect(
-    (state) => {
+    state => {
-        const { game, instance, ws } = state;
+        const { game, instance, ws, account } = state;
 
         if (!game) {
             console.log('clear gs interval');
             // ws.clearGameStateInterval();
         }
 
-        return { game, instance };
+        return { game, instance, account };
     }
 );
 
 function renderBody(props) {
-    const { game, instance } = props;
+    const { game, instance, account } = props;
+
+    if (!account) {
+        return (
+            <main>
+                <LoginContainer />
+            </main>
+        );
+    }
     if (game) {
         return (
             <GameContainer />

client/src/components/header.component.jsx

@@ -1,14 +1,23 @@
 // eslint-disable-next-line
 const preact = require('preact');
-const LoginContainer = require('./login.container');
 
-function renderHeader() {
+const saw = require('./saw.component');
+
+function renderHeader(args) {
+    const { account } = args;
+    const accountStatus = account ?
+        (<div className="header-status">
+            <h3 className="header-username">{account.name}</h3>
+            {saw('whitesmoke')}
+        </div>)
+        : '';
+
     return (
         <header>
             <h1 className="header-title">
                 cryps.gg
             </h1>
-            <LoginContainer />
+            {accountStatus}
         </header>
     );
 }

client/src/components/header.container.jsx

@@ -0,0 +1,11 @@
+const { connect } = require('preact-redux');
+
+const Header = require('./header.component');
+
+const addState = connect(
+    ({ account }) => {
+        return { account };
+    },
+);
+
+module.exports = addState(Header);

client/src/components/instance.list.component.jsx

@@ -25,7 +25,7 @@ function instanceList({ instances, setActiveInstance, sendInstanceJoin }) {
                 className={`menu-instance-btn right ${globalInstance ? 'full' : ''}`}
                 key={instance.id}
                 onClick={() => setActiveInstance(instance)}>
-                {name}
+                {name} | {instance.score.wins} : {instance.score.losses}
             </button>
         );
     });

client/src/components/login.component.jsx

@@ -1,74 +1,44 @@
 // eslint-disable-next-line
 const preact = require('preact');
 
-const saw = require('./saw.component');
+function renderLogin({ submitLogin, submitRegister, submitDemo }) {
-
-function renderLogin({ account, submitLogin, submitRegister }) {
-    if (account) return (
-        <div className="header-status">
-            <h3 className="header-username">{account.name}</h3>
-            {saw('whitesmoke')}
-        </div>
-    );
-
     const details = {
         name: '',
         password: '',
     };
 
     return (
-        <div className="login" >
+        <div className="login">
-            <div className="field">
+            <input
-                <p className="control has-icons-left has-icons-right">
+                className="login-input"
-                    <input
+                type="email"
-                        className="input"
+                placeholder="username"
-                        type="email"
+                onChange={e => (details.name = e.target.value)}
-                        placeholder="Email"
+            />
-                        onChange={e => (details.name = e.target.value)}
+            <input
-                    />
+                className="login-input"
-                    <span className="icon is-small is-left">
+                type="password"
-                        <i className="fas fa-user" />
+                placeholder="password"
-                    </span>
+                onChange={e => (details.password = e.target.value)}
-                    <span className="icon is-small is-right">
+            />
-                        <i className="fas fa-check" />
+            <button
-                    </span>
+                className="login-btn"
-                </p>
+                type="submit"
-            </div>
+                onClick={() => submitLogin(details.name, details.password)}>
-            <div className="field">
+                Login
-                <p className="control has-icons-left">
+            </button>
-                    <input
+            <button
-                        className="input"
+                className="login-btn"
-                        type="password"
+                type="submit"
-                        placeholder="Password"
+                onClick={() => submitRegister(details.name, details.password)}>
-                        onChange={e => (details.password = e.target.value)}
+                Register
-                    />
+            </button>
-                    <span className="icon is-small is-left">
+            <button
-                        <i className="fas fa-lock" />
+                className="login-btn"
-                    </span>
+                type="submit"
-                </p>
+                onClick={() => submitDemo()}>
-            </div>
+                demo
-            <div className="field">
+            </button>
-                <p className="control">
-                    <button
-                        className="button inverted"
-                        type="submit"
-                        onClick={() => submitLogin('ntr', 'grepgrepgrep')}>
-                        Default
-                    </button>
-                    <button
-                        className="button inverted"
-                        type="submit"
-                        onClick={() => submitLogin(details.name, details.password)}>
-                        Login
-                    </button>
-                    <button
-                        className="button inverted"
-                        type="submit"
-                        onClick={() => submitRegister(details.name, details.password)}>
-                        Register
-                    </button>
-                </p>
-            </div>
         </div>
     );
 }

client/src/components/login.container.jsx

@@ -11,7 +11,10 @@ const addState = connect(
         function submitRegister(name, password) {
             return ws.sendAccountRegister(name, password);
         }
-        return { account: state.account, submitLogin, submitRegister };
+        function submitDemo() {
+            return ws.sendAccountDemo();
+        }
+        return { account: state.account, submitLogin, submitRegister, submitDemo };
     },
 );
 

client/src/main.jsx

@@ -10,7 +10,7 @@ const setupKeys = require('./keyboard');
 const createSocket = require('./socket');
 const registerEvents = require('./events');
 
-const Header = require('./components/header.component');
+const Header = require('./components/header.container');
 const Body = require('./components/body.component');
 
 // Redux Store

client/src/socket.jsx

@@ -259,7 +259,7 @@ function createSocket(events) {
 
             // if (!account) events.loginPrompt();
             if (process.env.NODE_ENV !== 'production') {
-                send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
+                // send({ method: 'account_login', params: { name: 'ntr', password: 'grepgrepgrep' } });
             }
 
             return true;