ping update

client/src/components/header.component.jsx

@@ -3,12 +3,20 @@ const preact = require('preact');
 
 const { saw } = require('./shapes');
 
+function pingColour(ping) {
+    if (ping < 100) return 'forestgreen';
+    if (ping < 200) return 'yellow';
+    return 'red';
+}
+
 function renderHeader(args) {
-    const { account } = args;
+    const { account, ping } = args;
+
     const accountStatus = account ?
         (<div className="header-status">
             <h1 className="header-username">{account.name}</h1>
-            {saw('stat-icon')}
+            {saw(pingColour(ping))}
+            <div className="ping-text">{ping}ms</div>
         </div>)
         : '';
 

client/src/components/header.container.jsx

@@ -3,8 +3,8 @@ const { connect } = require('preact-redux');
 const Header = require('./header.component');
 
 const addState = connect(
-    ({ account }) => {
-        return { account };
+    ({ account, ping }) => {
+        return { account, ping };
     },
 );
 

client/src/components/svgs/saw.jsx

@@ -3,8 +3,8 @@ const preact = require('preact');
 module.exports = function saw(colour) {
     return (
         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" style={{ stroke: colour }}>
-          <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
-          <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
+            <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
+            <path d="M0,50l50,-50v100l50,-50" className="ping-path"/>
         </svg>
     );
 };