noisey buttons

client/src/components/front.page.jsx

@@ -8,7 +8,6 @@ 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) {
@@ -72,7 +71,7 @@ function Play(args) {
 
     return (
         <main>
-            <NoiseLogo />
+            <div class="logo"/>
             <hr />
             {list()}
             <hr />

client/src/components/mnml.jsx

@@ -5,7 +5,7 @@ const Main = require('./main');
 // const Nav = require('./nav');
 const Controls = require('./controls');
 const FrontPage = require('./front.page');
-const NoiseLogo = require('./noise.logo');
+const Noise = require('./noise');
 
 const addState = connect(
     ({ game, instance, authenticated }) => ({ game, instance, authenticated })
@@ -24,6 +24,7 @@ function Mnml(args) {
 
     if (!authenticated && !instance && !game) return (
         <div id="mnml" class='front-page'>
+            <Noise />
             <FrontPage />
             <div id="rotate" class={rotateClass} ></div>
         </div>
@@ -33,6 +34,7 @@ function Mnml(args) {
         <div id="mnml">
             <Main />
             <Controls />
+            <Noise />
             <div id="rotate" class={rotateClass} ></div>
         </div>
     );

client/src/components/noise.jsx

@@ -2,7 +2,7 @@ const preact = require('preact');
 const { Component } = require('preact');
 const anime = require('animejs').default;
 
-class Logo extends Component {
+class Noise extends Component {
     constructor() {
         super();
         this.animations = [];
@@ -10,18 +10,16 @@ class Logo extends Component {
 
     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.2" numOctaves="2" result="turbulence"></feTurbulence>
-                        <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
-                    </filter>
-                </svg>
-            </div>
+            <svg
+                version="1.1"
+                id="noise"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 400 400">
+                <filter id='noiseFilter'>
+                    <feTurbulence type="turbulence" baseFrequency="0.2" numOctaves="2" result="turbulence"></feTurbulence>
+                    <feDisplacementMap in2="turbulence" in="SourceGraphic" scale="2" xChannelSelector="R" yChannelSelector="G"></feDisplacementMap>
+                </filter>
+            </svg>
         );
     }
 
@@ -74,4 +72,4 @@ class Logo extends Component {
     }
 }
 
-module.exports = Logo;
+module.exports = Noise;