ping update

client/cryps.css

@@ -220,6 +220,16 @@ header {
     stroke-width: 4px;
     stroke-dasharray: 121, 242;
     animation: saw 2s infinite linear;
+
+    transition-property: stroke-color;
+    transition-duration: 0.5s;
+    transition-timing-function: ease;
+}
+
+.ping-text {
+    margin-left: 1em;
+    min-width: 2em;
+    display: inline-block;
 }
 
 @keyframes saw {

client/src/actions.jsx

@@ -13,6 +13,9 @@ export const setInstance = value => ({ type: SET_INSTANCE, value });
 export const SET_PLAYER = 'SET_PLAYER';
 export const setPlayer = value => ({ type: SET_PLAYER, value });
 
+export const SET_PING = 'SET_PING';
+export const setPing = value => ({ type: SET_PING, value });
+
 export const SET_GAME = 'SET_GAME';
 export const setGame = value => ({ type: SET_GAME, value });
 

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/events.jsx

@@ -1,7 +1,6 @@
 const toast = require('izitoast');
 const eachSeries = require('async/eachSeries');
 const anime = require('animejs').default;
-const range = require('lodash/range');
 
 const actions = require('./actions');
 const { TIMES } = require('./constants');
@@ -11,7 +10,7 @@ function registerEvents(store) {
 
     // timeout handlers
     store.subscribe(() => {
-        const { game, instance, cryps, ws} = store.getState();
+        const { game, instance, cryps, ws } = store.getState();
 
         if (!game) ws.clearGameStateTimeout();
         if (!instance) ws.clearInstanceStateTimeout();
@@ -25,9 +24,10 @@ function registerEvents(store) {
         return anime({
             targets: 'img',
             translateX: () => anime.random(-20, 20),
-            translateY: () => anime.random(-20, 20),
+            translateY: () => anime.random(0, 40),
             rotate: () => anime.random(-35, 35),
             duration: () => anime.random(5000, 6000),
+            delay: () => anime.random(0, 1000),
             direction: 'alternate',
             easing: 'linear',
             loop: true,
@@ -36,6 +36,10 @@ function registerEvents(store) {
     setInterval(crypAnimations, 5000);
     crypAnimations();
 
+    function setPing(ping) {
+       store.dispatch(actions.setPing(ping));
+    }
+
     function setCryps(cryps) {
         console.log('EVENT ->', 'cryps', cryps);
     }
@@ -287,6 +291,7 @@ function registerEvents(store) {
         setWs,
         setGameList,
         setZone,
+        setPing,
         setScores,
     };
 }

client/src/main.jsx

@@ -28,6 +28,7 @@ const store = createStore(
         info: reducers.infoReducer,
         instance: reducers.instanceReducer,
         player: reducers.playerReducer,
+        ping: reducers.pingReducer,
         instances: reducers.instancesReducer,
         reclaiming: reducers.reclaimingReducer,
         selectedCryps: reducers.selectedCrypsReducer,

client/src/reducers.jsx

@@ -10,6 +10,16 @@ function accountReducer(state = defaultAccount, action) {
     }
 }
 
+const defaultPing = null;
+function pingReducer(state = defaultPing, action) {
+    switch (action.type) {
+        case actions.SET_PING:
+            return action.value;
+        default:
+            return state;
+    }
+}
+
 const defaultActiveSkill = null;
 function activeSkillReducer(state = defaultActiveSkill, action) {
     switch (action.type) {
@@ -177,4 +187,5 @@ module.exports = {
     resolutionReducer,
     wsReducer,
     infoReducer,
+    pingReducer,
 };

client/src/socket.jsx

@@ -28,8 +28,10 @@ function createSocket(events) {
     // -------------
     //   Outgoing
     // -------------
+    let ping = Date.now();
     function send(msg) {
         console.log('outgoing msg', msg);
+        ping = Date.now();
         msg.token = account && account.token && account.token;
         ws.send(cbor.encode(msg));
     }
@@ -281,6 +283,7 @@ function createSocket(events) {
         const { method, params } = res;
 
         console.log(res);
+        events.setPing(Date.now() - ping);
 
         // check for error and split into response type and data
         if (res.err) return errHandler(res.err);

server/src/cryp.rs

@@ -241,6 +241,10 @@ impl Cryp {
     }
 
     pub fn spec_add(&mut self, spec: Spec) -> Result<&mut Cryp, Error> {
+        if self.specs.len() >= 6 {
+            return Err(err_msg("maximum specs equipped"));
+        }
+
         self.specs.push(spec);
         return Ok(self.calculate_colours());
     }