Merge branch 'develop' of ssh://git.mnml.gg:40022/~/mnml into develop

WORKLOG.md

@@ -20,8 +20,6 @@
 * msg pane
 * game invites
 
-* add speed to descriptions
-
 ## SOON
 *SERVER*
 * modules

client/assets/styles/controls.less

@@ -1,3 +1,5 @@
+@import 'colours.less';
+
 aside {
     grid-area: ctrl;
     display: grid;
@@ -93,3 +95,16 @@ aside {
 .team-page-ctrl h2 {
     padding: 0 0.75em 0 0.75em;
 }
+
+.abandon {
+    &:hover {
+        color: @red;
+        border-color: @red;
+    };
+
+    &:active, &.confirming {
+        background: @red;
+        color: black;
+        border: 1px solid black;
+    }
+}

client/src/components/anims/slay.jsx

@@ -91,7 +91,7 @@ class Slay extends Component {
         });
 
         anime.set('#slay', {
-            translateY: (window.screen.height) * 0.35 * this.props.direction.y,
+            translateY: -1 * (window.screen.height) * 0.35,
             translateX: 0,
         });
         anime.set('#explosion feDisplacementMap', {

client/src/components/collection.jsx

@@ -56,7 +56,7 @@ function Collection(args) {
         teamSelect[insert] = id;
         return setTeam(teamSelect);
     }
-    console.log(constructs.length);
+
     const dispConstructs = constructs.length >= ((teamPage + 1) * 6)
         ? constructs.slice(teamPage * 6, (teamPage + 1) * 6)
         : constructs.slice(teamPage * 6, constructs.length);

client/src/components/info.component.jsx

@@ -3,7 +3,7 @@ const range = require('lodash/range');
 const reactStringReplace = require('react-string-replace');
 
 const { INFO } = require('./../constants');
-const { convertItem } = require('../utils');
+const { convertItem, removeTier, itemSpeed } = require('../utils');
 const shapes = require('./shapes');
 
 function InfoComponent(args) {
@@ -40,12 +40,23 @@ function InfoComponent(args) {
         if (isSkill) {
             const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
             const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
-
+            const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
+            const itemSourceInfo = itemSource.length
+                ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
+                : false;
+            const itemRegEx = /(Red|Blue|Green)/;
+            const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
+            const calcSpeed = itemSource.length
+                ? (24 + (itemSpeed(itemSource[0].components[0]) + itemSpeed(itemSource[0].components[1])) * itemSpeed(itemSource[0].components[2])) * 4
+                : (24 + itemSpeed(info)) * 4;
+            const speed = <div> Speed {shapes.SpeedStat()} multiplier {calcSpeed}% </div>;
             return (
                 <div class="info-skill">
                     <h2>{fullInfo.item}</h2>
                     <h3>SKILL</h3>
+                    {itemSourceDescription}
                     <div>{infoDescription}</div>
+                    {speed}
                 </div>
             );
         }
@@ -135,11 +146,18 @@ function InfoComponent(args) {
             });
             const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
             const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+            const itemSource = itemInfo.combos.filter(c => c.item === info);
+            const itemSourceInfo = itemSource.length
+                ? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
+                : false;
+            const itemRegEx = /(Red|Blue|Green)/;
+            const itemSourceDescription = reactStringReplace(itemSourceInfo, itemRegEx, match => shapes[match]());
 
             return (
                 <div class="info-spec">
                     <h2>{info}</h2>
                     <h3>SPEC</h3>
+                    {itemSourceDescription}
                     <div>{infoDescription}</div>
                     <div class="thresholds">
                         {thresholds}

client/src/components/main.jsx

@@ -12,7 +12,7 @@ const Bottom = require('./main.bottom');
 const addState = connect(
     state => {
         const { game, instance, account, nav } = state;
-        return { game, instance, account, nav };
+        return { game, instance, account, nav  };
     }
 );
 

client/src/components/player.box.jsx

@@ -1,4 +1,5 @@
 const preact = require('preact');
+const { Component } = require('preact')
 const { connect } = require('preact-redux');
 
 const addState = connect(
@@ -8,48 +9,74 @@ const addState = connect(
     }
 );
 
-function Scoreboard(args) {
-    const {
-        abandon,
-        animating,
-        isPlayer,
-        player,
-        isGame,
-        clear,
-    } = args;
 
-    const scoreText = () => {
+class Scoreboard extends Component {
-        if (player.score === 'Zero') return '▫▫▫▫';
+    constructor(props) {
-        if (player.score === 'One') return '■▫▫▫';
+        super(props);
-        if (player.score === 'Two') return '■■▫▫';
+        this.state = {
-        if (player.score === 'Three') return '■■■▫';
+            abandonState: false,
-        if (player.score === 'Adv') return '■■■+';
+        };
-        if (player.score === 'Win') return '■■■■';
+    }
-        return '';
-    };
 
-    if (!isPlayer) {
+    render(args, state) {
+        const {
+            abandon,
+            animating,
+            isPlayer,
+            player,
+            isGame,
+            clear,
+        } = args;
+
+        const { abandonState } = state;
+
+        const scoreText = () => {
+            if (player.score === 'Zero') return '▫▫▫▫';
+            if (player.score === 'One') return '■▫▫▫';
+            if (player.score === 'Two') return '■■▫▫';
+            if (player.score === 'Three') return '■■■▫';
+            if (player.score === 'Adv') return '■■■+';
+            if (player.score === 'Win') return '■■■■';
+            return '';
+        };
+
+        const divClick = e => {
+            e.stopPropagation();
+            return this.setState({ abandonState: false });
+        };
+        const abandonStateTrue = e => {
+            e.stopPropagation();
+            this.setState({ abandonState: true });
+        };
+
+        if (!isPlayer) {
+            return (
+                <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
+                    <div class="ctrl">&nbsp;</div>
+                    <div class="score">{scoreText()}</div>
+                    <div class="img">
+                        <div>{player.name}</div>
+                    </div>
+                </div>
+            );
+        }
+        const abandonClasses = `abandon ${abandonState ? 'confirming' : ''}`;
+        const abandonAction = abandonState ? abandon : abandonStateTrue;
         return (
-            <div class={`player-box top ${player.ready ? 'ready' : ''}`}>
+            <div onClick={divClick} class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
-                <div class="ctrl">&nbsp;</div>
                 <div class="score">{scoreText()}</div>
                 <div class="img">
                     <div>{player.name}</div>
                 </div>
+                <div>
+                    {(isPlayer && isGame) ? <button disabled={animating} onClick={clear}>Clear</button> : null}
+                </div>
+                <div>
+                    {(abandon) ? <button class={abandonClasses} disabled={animating} onClick={abandonAction}>Abandon</button> : null}
+                </div>
             </div>
         );
     }
-
-    return (
-        <div class={`player-box bottom ${player.ready ? 'ready' : ''}`}>
-            <div class="score">{scoreText()}</div>
-            <div class="img">
-                <div>{player.name}</div>
-            </div>
-            {(isPlayer && isGame) ? <button disabled={animating} onClick={clear}>Clear</button> : null}
-            {(abandon) ? <button disabled={animating} onClick={abandon}>Abandon</button> : null}
-        </div>
-    );
 }
 
 module.exports = addState(Scoreboard);

client/src/events.jsx

@@ -169,7 +169,7 @@ function registerEvents(store) {
     }
 
     function setInstance(v) {
-        const { account, instance } = store.getState();
+        const { account, instance, ws } = store.getState();
         if (v) {
             const player = v.players.find(p => p.id === account.id);
             store.dispatch(actions.setPlayer(player));
@@ -180,7 +180,11 @@ function registerEvents(store) {
                 store.dispatch(actions.setActiveConstruct(first));
             }
         }
-        if (v.phase === 'Finished') setGame(null);
+        if (v.phase === 'Finished') {
+            setGame(null);
+            ws.sendAccountInstances();
+        }
+
         return store.dispatch(actions.setInstance(v));
     }
 

client/src/utils.jsx

@@ -187,6 +187,20 @@ const removeTier = skill => {
     return skill;
 };
 
+function itemSpeed(item) {
+    switch (item) {
+    case 'Attack': return 1;
+    case 'Stun': return 2;
+    case 'Block': return 3;
+    case 'Buff': return 4;
+    case 'Debuff': return 4;
+    case 'Red': return 3;
+    case 'Green': return 2;
+    case 'Blue': return 1;
+    default: return 0;
+    }
+}
+
 function postData(url = '/', data = {}) {
     // Default options are marked with *
     return fetch(`/api${url}`, {
@@ -250,5 +264,6 @@ module.exports = {
     TARGET_COLOURS,
     randomPoints,
     removeTier,
+    itemSpeed,
     match,
 };

server/src/rpc.rs

@@ -83,6 +83,7 @@ pub enum RpcRequest {
 
     AccountState {},
     AccountShop {},
+    AccountInstances {},
     AccountConstructs {},
     AccountSetTeam { ids: Vec<Uuid> },
 
@@ -154,7 +155,8 @@ impl Connection {
                         Ok(RpcMessage::AccountState(account.clone())),
                     RpcRequest::AccountConstructs {} =>
                         Ok(RpcMessage::AccountConstructs(account::constructs(&mut tx, &account)?)),
-
+                    RpcRequest::AccountInstances {} =>
+                        Ok(RpcMessage::AccountInstances(account::account_instances(&mut tx, account)?)),
                     RpcRequest::AccountSetTeam { ids } =>
                         Ok(RpcMessage::AccountTeam(account::set_team(&mut tx, &account, ids)?)),