fukt a lot but wip

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;