fukt a lot but wip

client/assets/styles/account.less

@@ -3,16 +3,25 @@
 
     div {
         padding-right: 1em;
+        // display: flex;
+        // flex-flow: column;
+        line-height: 2em;
+    }
+
+    h3 {
+        // text-transform: uppercase;
+        margin-bottom: 0.5em;
     }
 
     button {
         width: 100%;
+        height: 2.5em;
         display: block;
     }
 
     input {
         width: 100%;
-        height: 3em;
+        height: 2.5em;
         display: block;
     }
 

client/assets/styles/menu.less

@@ -75,10 +75,6 @@
             flex: 1;
             border-top: 0;
             border: 0.1em solid #222;
-            &:not(:last-child) {
-                border-right: 0;
-            }
-
             &:last-child {
                 float: right;
             }
@@ -93,6 +89,10 @@
             display: inline;
             margin: 0 1em;
         }
+
+        button {
+            padding: 0 0.5em;
+        }
     }
 }
 
@@ -117,10 +117,6 @@ section {
         grid-gap: 1em;
         flex-flow: row wrap;
         align-items: flex-end;
-        button {
-            border-radius: 0.25em;
-            // height: 3em;
-        }
 
         &.sub {
             grid-template-columns: 1fr;

client/assets/styles/styles.less

@@ -129,7 +129,7 @@ button, input {
     box-sizing: border-box;
     font-size: 1em;
     flex: 1;
-    border-radius: 0.5em;
+    border-radius: 0;
     line-height: 2em;
     padding-right: 0.1em;
     padding-left: 0.1em;
@@ -261,15 +261,6 @@ figure.gray {
     display: none;
 }
 
-header {
-    button {
-        height: 2.5em;
-        // border-radius: 0.1em;
-        border: none;
-        border-radius: 0;
-    }
-}
-
 .options {
     button {
         &.highlight {
@@ -279,7 +270,6 @@ header {
         }
 
         border: none;
-        border-radius: 0;
     }
 }
 

client/src/components/account.top.jsx

@@ -152,11 +152,9 @@ class AccountStatus extends Component {
 
         return (
             <section class='account top' onClick={tlClick}>
+                {subInfo()}
                 <div>
-                    {subInfo()}
-                </div>
-                <div>
-                    <label for="email">Email Settings:</label>
+                    <h3>Email</h3>
                     <dl>
                         <dt>Recovery Email</dt>
                         <dd>{email ? email.email : 'No email set'}</dd>
@@ -174,6 +172,7 @@ class AccountStatus extends Component {
                     <button onClick={() => sendSetEmail(emailState)}>Update</button>
                 </div>
                 <div>
+                    <h3>Password</h3>
                     <label for="current">Password:</label>
                     <input
                         class="login-input"
@@ -208,6 +207,7 @@ class AccountStatus extends Component {
                     </button>
                 </div>
                 <div>
+                    <h3>Other</h3>
                     <figure>
                         <figcaption>spawn new construct</figcaption>
                         <button onClick={() => sendConstructSpawn()} type="submit">

client/src/components/controls.jsx

@@ -10,6 +10,7 @@ const addState = connect(
     function receiveState(state) {
         const {
             ws,
+            authenticated,
             account,
             game,
             instance,
@@ -17,6 +18,7 @@ const addState = connect(
         } = state;
 
         return {
+            authenticated,
             account,
             game,
             instance,
@@ -28,6 +30,7 @@ const addState = connect(
 function Controls(args) {
     const {
         game,
+        authenticated,
         account,
         instance,
         nav,
@@ -38,6 +41,7 @@ function Controls(args) {
 
     if (game) return <GameCtrl />;
     if (instance) return <InstanceCtrl />;
+    if (!authenticated) return false;
     if (nav === 'play' || nav === 'shop' || nav === 'reshape' || !nav) return <PlayCtrl />
     if (nav === 'team' || nav === 'account') return <TeamCtrl />
 

client/src/components/noise.logo.jsx

@@ -0,0 +1,50 @@
+const preact = require('preact');
+const { Component } = require('preact');
+const anime = require('animejs').default;
+
+class Logo extends Component {
+    constructor() {
+        super();
+        this.animations = [];
+    }
+
+    render() {
+        return (
+            <div class='logo' style={{ filter: 'url("#noiseFilter")' }}>
+                <svg
+                    version="1.1"
+                    id="logo"
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 400 400">
+                    <filter id='noiseFilter'>
+                        <feTurbulence type="turbulence" baseFrequency="0" numOctaves="2" result="turbulence"></feTurbulence>
+                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="4" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                    </filter>
+                </svg>
+            </div>
+        );
+    }
+
+    componentDidMount() {
+        this.animations.push(anime({
+            targets: ['#noiseFilter feTurbulence', '#noiseFilter feDisplacementMap'],
+            baseFrequency: 1,
+            easing: 'easeInOutSine',
+            duration: () => anime.random(2000, 5000),
+            loop: true,
+            direction: 'alternate',
+        }));
+    }
+
+    // this is necessary because
+    // skipping / timing / unmounting race conditions
+    // can cause the animations to cut short, this will ensure the values are reset
+    // because preact will recycle all these components
+    componentWillUnmount() {
+        for (let i = this.animations.length - 1; i >= 0; i--) {
+            this.animations[i].reset();
+        }
+    }
+}
+
+module.exports = Logo;