diff --git a/CHANGELOG.md b/CHANGELOG.md index d8674203..287876ae 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,40 @@ All notable changes to this project will be documented in this file. This project adheres to [Semantic Versioning](http://semver.org/). +## [1.6.0] - 2019-10-18 +### Added +- Subscriber chat! + +### Changed + - Made available skill / effect information during the combat phase. + - Highlighting a skill replace the effect area with the skill description including speed multiplier. + - Highlighting an effect will replace the targetting arrow / anim skill text with effect info. + - You can now preview combinations before you create them + - After selecting the three items for a combo hover over the combine button for info + + - Damage formula for Slay and Siphon reworked + - Slay now deals red damage based RedPower and GreenPower. Previously only based on RedPower. + - Siphon now deals blue damage based BluePower and GreenPower. Previously only based on BluePower. + +### Fixed +- Matchmaking bug where server matches you with yourself + +## [1.5.6] - 2019-10-17 +We've updated the UI during the vbox / buy phase to give a better indication of valid actions. + +### Changed + - Borders for skill combo's represent the base colours. + - Heal (GG) has a green border, Siphon (BG) has an alternating blue / green border etc. + - Borders are shown for items in inventory and as equipped skills during both phases. + + - Improvements to making item combo's + - If you select an item in your inventory it will now highlight other items that are valid for combining. + - This includes items that can be bought and in your inventory. + + - Improved the indicator for where to click for equipping and buying items where its valid. + - Now slowly flashes between black and grey, previously changed the border once. + + ## [1.5.5] - 2019-10-15 ### Changed * Purge diff --git a/VERSION b/VERSION index 03082db7..ce6a70b9 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -1.5.6 \ No newline at end of file +1.6.0 \ No newline at end of file diff --git a/WORKLOG.md b/WORKLOG.md index 4aa80673..10423c7d 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -3,10 +3,7 @@ *PRODUCTION* -* border colours for skills e.g. strike red border, slay half red half green * rename vbox to shop -* combat phase info system -* drag and drop buy / equip / unequip items * mobile styles * mobile info page @@ -16,6 +13,11 @@ * can't reset password without knowing password =\ * Invert recharge + * serde serialize privatise + * chat + +* Convert spec 'Plus' -> '+' when it appears as combo text in combiner and in info text + ## SOON * equip from shop (buy and equip without putting in your inventory) for bases @@ -23,7 +25,6 @@ * bot game grind * ACP * essential - * serde serialize privatise * msg pane / chatwheel * audio * treats @@ -71,6 +72,7 @@ $$$ * Highlight (dota) colour * fx colours + styles +* ??? (PROBS NOT) drag and drop buy / equip / unequip items ??? * modules * troll life -> dmg * prince of peace diff --git a/acp/package.json b/acp/package.json index a9ffeccf..f7dc99f5 100644 --- a/acp/package.json +++ b/acp/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.5.6", + "version": "1.6.0", "description": "", "main": "index.js", "scripts": { diff --git a/client/assets/styles/controls.less b/client/assets/styles/controls.less index ef8fbdeb..b2eb2337 100644 --- a/client/assets/styles/controls.less +++ b/client/assets/styles/controls.less @@ -132,10 +132,16 @@ aside { flex: 0; } - .ready, .quit { + .ready { flex: 1; font-size: 200%; } + + .quit { + flex: 1; + font-size: 200%; + animation: co 0.75s cubic-bezier(0, 0, 1, 1) 0s infinite alternate; + } } .abandon:not([disabled]) { diff --git a/client/assets/styles/footer.less b/client/assets/styles/footer.less index cf9b6012..96791e70 100644 --- a/client/assets/styles/footer.less +++ b/client/assets/styles/footer.less @@ -3,6 +3,7 @@ footer { flex-flow: row wrap; grid-area: footer; margin: 0; + z-index: 10; button { margin: 0; diff --git a/client/assets/styles/game.less b/client/assets/styles/game.less index 4f22174a..ef445028 100644 --- a/client/assets/styles/game.less +++ b/client/assets/styles/game.less @@ -123,7 +123,6 @@ button { width: 100%; height: 2em; - height: 25%; margin-right: 1em; } button.active { @@ -204,6 +203,7 @@ .resolving-skill { grid-area: target; + text-align: center; align-self: center; height: auto; svg { @@ -213,6 +213,17 @@ } } +.skill-description { + padding-left: 1em; + padding-right: 1em; + text-align: center; + svg { + display: inline; + height: 1em; + margin-right: 0.1em + } +} + /* some stupid bug in chrome makes it fill the entire screen */ @media screen and (-webkit-min-device-pixel-ratio:0) { #targeting { @@ -396,6 +407,10 @@ .skills button { font-size: 50%; } + + .skill-description { + font-size: 65%; + } } .player { diff --git a/client/assets/styles/player.less b/client/assets/styles/player.less index 03465f16..4eb448d9 100644 --- a/client/assets/styles/player.less +++ b/client/assets/styles/player.less @@ -45,5 +45,9 @@ grid-area: msg; color: @white; } - } + +.chat { + justify-content: flex-end; +} + diff --git a/client/assets/styles/styles.less b/client/assets/styles/styles.less index 7150057e..1cb6f712 100644 --- a/client/assets/styles/styles.less +++ b/client/assets/styles/styles.less @@ -14,7 +14,7 @@ html body { -ms-user-select: none; overflow-x: hidden; - // overflow-y: hidden; + overflow-y: hidden; } #mnml { @@ -26,7 +26,7 @@ html body { /* stops inspector going skitz*/ overflow-x: hidden; - // overflow-y: hidden; + overflow-y: hidden; } // @media (min-width: 1921px) { diff --git a/client/package.json b/client/package.json index 9d22f205..6eb572dd 100644 --- a/client/package.json +++ b/client/package.json @@ -1,6 +1,6 @@ { "name": "mnml-client", - "version": "1.5.6", + "version": "1.6.0", "description": "", "main": "index.js", "scripts": { diff --git a/client/src/actions.jsx b/client/src/actions.jsx index 85b113de..8c58ed0d 100644 --- a/client/src/actions.jsx +++ b/client/src/actions.jsx @@ -11,14 +11,22 @@ export const setAnimText = value => ({ type: 'SET_ANIM_TEXT', value }); export const setDemo = value => ({ type: 'SET_DEMO', value }); +export const setChatShow = value => ({ type: 'SET_CHAT_SHOW', value }); +export const setChatWheel = value => ({ type: 'SET_CHAT_WHEEL', value }); +export const setInstanceChat = value => ({ type: 'SET_INSTANCE_CHAT', value }); + export const setActiveItem = value => ({ type: 'SET_ACTIVE_VAR', value }); export const setActiveSkill = (constructId, skill) => ({ type: 'SET_ACTIVE_SKILL', value: constructId ? { constructId, skill } : null }); export const setCombiner = value => ({ type: 'SET_COMBINER', value: Array.from(value) }); export const setConstructEditId = value => ({ type: 'SET_CONSTRUCT_EDIT_ID', value }); export const setConstructs = value => ({ type: 'SET_CONSTRUCTS', value }); export const setConstructRename = value => ({ type: 'SET_CONSTRUCT_RENAME', value }); + export const setGame = value => ({ type: 'SET_GAME', value }); +export const setGameSkillInfo = value => ({ type: 'SET_GAME_SKILL_INFO', value }); +export const setGameEffectInfo = value => ({ type: 'SET_GAME_EFFECT_INFO', value }); export const setInfo = value => ({ type: 'SET_INFO', value }); + export const setEmail = value => ({ type: 'SET_EMAIL', value }); export const setInvite = value => ({ type: 'SET_INVITE', value }); export const setInstance = value => ({ type: 'SET_INSTANCE', value }); diff --git a/client/src/components/chat.jsx b/client/src/components/chat.jsx new file mode 100644 index 00000000..323d55c6 --- /dev/null +++ b/client/src/components/chat.jsx @@ -0,0 +1,65 @@ +const preact = require('preact'); +const { connect } = require('preact-redux'); + +const actions = require('../actions'); + +const addState = connect( + function receiveState(state) { + const { + ws, + chatShow, + chatWheel, + instance, + game, + } = state; + + function sendInstanceChat(instance, i) { + return ws.sendInstanceChat(instance, i); + } + + return { + instance, + game, + chatShow, + chatWheel, + + sendInstanceChat, + }; + }, + + function receiveDispatch(dispatch) { + function setChatShow(v) { + dispatch(actions.setChatShow(v)); + } + + return { + setChatShow, + }; + } +); + +function Chat(args) { + const { + instance, + game, + chatShow, + chatWheel, + + sendInstanceChat, + setChatShow, + } = args; + + function onClick(i) { + sendInstanceChat(instance ? instance.id : game && game.id, i); + setChatShow(false); + return true; + } + + return ( +
+ {chatWheel.map((c, i) => )} +
+ ); +} + +module.exports = addState(Chat); diff --git a/client/src/components/game.construct.jsx b/client/src/components/game.construct.jsx index 34349422..186a55ef 100644 --- a/client/src/components/game.construct.jsx +++ b/client/src/components/game.construct.jsx @@ -2,10 +2,13 @@ const { connect } = require('preact-redux'); const { Component } = require('preact'); const preact = require('preact'); const range = require('lodash/range'); +const reactStringReplace = require('react-string-replace'); const { STATS } = require('../utils'); const { ConstructAvatar, ConstructText } = require('./construct'); const shapes = require('./shapes'); +const { INFO } = require('./../constants'); +const actions = require('../actions'); const SkillBtn = require('./skill.btn'); @@ -19,6 +22,8 @@ const addState = connect( animFocus, animating, animText, + gameSkillInfo, + itemInfo, } = state; function selectSkillTarget(targetConstructId) { @@ -40,8 +45,19 @@ const addState = connect( animText, activeSkill, selectSkillTarget, + gameSkillInfo, + itemInfo, }; + }, + + function receiveDispatch(dispatch) { + function setGameEffectInfo(info) { + dispatch(actions.setGameEffectInfo(info)); + } + + return { setGameEffectInfo }; } + ); const eventClasses = (animating, animFocus, construct, postSkill) => { @@ -77,6 +93,10 @@ class GameConstruct extends Component { selectSkillTarget, animFocus, animText, + + setGameEffectInfo, + gameSkillInfo, + itemInfo, } = this.props; const ko = construct.green_life.value === 0 ? 'ko' : ''; @@ -96,9 +116,33 @@ class GameConstruct extends Component { let crypSkills =
; if (player) crypSkills = (
{skills}
); - const effects = construct.effects.length - ? construct.effects.map(c =>
{c.effect} - {c.duration}T
) - : null; + function hoverInfo(e, info) { + e.stopPropagation(); + return setGameEffectInfo(info); + } + const effectBox = () => { + if (gameSkillInfo && gameSkillInfo.constructId === construct.id) { + const fullInfo = itemInfo.items.find(k => k.item === gameSkillInfo.skill) || INFO[gameSkillInfo.skill]; + const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/; + const infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]()); + const speed =
Speed {shapes.SpeedStat()} multiplier {fullInfo.speed * 4}%
; + return ( +
+

{gameSkillInfo.skill}

+
{infoDescription}
+ {speed} +
); + } + const effects = construct.effects.length + ? construct.effects.map(c => +
hoverInfo(e, c)} + onMouseOut={e => hoverInfo(e, null)} + > {c.effect} - {c.duration}T
) + : null; + return (
{effects}
); + } return (
{crypSkills} -
{effects}
+ {effectBox()}
{stats}
diff --git a/client/src/components/game.ctrl.btns.jsx b/client/src/components/game.ctrl.btns.jsx index 30513961..671e9d62 100644 --- a/client/src/components/game.ctrl.btns.jsx +++ b/client/src/components/game.ctrl.btns.jsx @@ -8,6 +8,8 @@ const addState = connect( const { ws, game, + account, + chatShow, animating, } = state; @@ -30,6 +32,8 @@ const addState = connect( return { game, + account, + chatShow, sendAbandon, sendGameSkillClear, sendReady, @@ -45,7 +49,14 @@ const addState = connect( dispatch(actions.setInstance(null)); } - return { quit }; + function setChatShow(v) { + dispatch(actions.setChatShow(v)); + } + + return { + setChatShow, + quit, + }; } ); @@ -53,10 +64,13 @@ function GameCtrlBtns(args) { const { game, animating, + account, + chatShow, getInstanceState, sendGameSkillClear, sendReady, + setChatShow, quit, } = args; @@ -73,7 +87,7 @@ function GameCtrlBtns(args) { return (
- + {finished ? quitBtn : readyBtn}
diff --git a/client/src/components/game.ctrl.jsx b/client/src/components/game.ctrl.jsx index f4f778e1..4d7de121 100644 --- a/client/src/components/game.ctrl.jsx +++ b/client/src/components/game.ctrl.jsx @@ -4,6 +4,7 @@ const { connect } = require('preact-redux'); const actions = require('../actions'); const PlayerBox = require('./player.box'); +const Chat = require('./chat'); const GameCtrlButtons = require('./game.ctrl.btns'); const GameCtrlTopButtons = require('./game.ctrl.btns.top'); @@ -13,12 +14,16 @@ const addState = connect( animating, game, account, + chatShow, + instanceChat, } = state; return { animating, game, account, + chatShow, + instanceChat, }; }, ); @@ -28,6 +33,8 @@ function Controls(args) { animating, account, game, + chatShow, + instanceChat, } = args; if (!game) return false; @@ -37,7 +44,7 @@ function Controls(args) { const zero = Date.parse(game.phase_start); const now = animating ? zero : Date.now(); const end = Date.parse(game.phase_end); - + const timerPct = game.phase_end ? ((now - zero) / (end - zero) * 100) : 100; @@ -61,13 +68,17 @@ function Controls(args) {
); + const bottom = chatShow + ? + : ; + return ( diff --git a/client/src/components/instance.ctrl.btns.jsx b/client/src/components/instance.ctrl.btns.jsx index f1ca2be5..ecfded9c 100644 --- a/client/src/components/instance.ctrl.btns.jsx +++ b/client/src/components/instance.ctrl.btns.jsx @@ -7,7 +7,9 @@ const addState = connect( function receiveState(state) { const { ws, + chatShow, instance, + account, } = state; function sendReady() { @@ -21,19 +23,34 @@ const addState = connect( return { instance, + chatShow, + account, sendAbandon, sendReady, }; }, + + function receiveDispatch(dispatch) { + function setChatShow(v) { + dispatch(actions.setChatShow(v)); + } + + return { + setChatShow, + }; + } ); function InstanceCtrlBtns(args) { const { instance, + chatShow, + account, sendAbandon, sendReady, + setChatShow, } = args; const finished = instance && instance.phase === 'Finished'; @@ -49,7 +66,7 @@ function InstanceCtrlBtns(args) { return (
- +
); diff --git a/client/src/components/instance.ctrl.jsx b/client/src/components/instance.ctrl.jsx index aa4e2670..b025d239 100644 --- a/client/src/components/instance.ctrl.jsx +++ b/client/src/components/instance.ctrl.jsx @@ -1,21 +1,27 @@ const preact = require('preact'); const { connect } = require('preact-redux'); -const actions = require('../actions'); const PlayerBox = require('./player.box'); +const Chat = require('./chat'); const InstanceCtrlBtns = require('./instance.ctrl.btns'); const InstanceCtrlTopBtns = require('./instance.ctrl.top.btns'); +const actions = require('../actions'); + const addState = connect( function receiveState(state) { const { ws, instance, + instanceChat, account, + chatShow, } = state; return { + chatShow, instance, + instanceChat, account, }; }, @@ -25,6 +31,8 @@ function Controls(args) { const { account, instance, + instanceChat, + chatShow, } = args; if (!instance) return false; @@ -58,13 +66,17 @@ function Controls(args) {
); + const bottom = chatShow + ? + : ; + return ( diff --git a/client/src/components/mnml.jsx b/client/src/components/mnml.jsx index 70a184fe..5c4ae51b 100644 --- a/client/src/components/mnml.jsx +++ b/client/src/components/mnml.jsx @@ -2,7 +2,7 @@ const preact = require('preact'); const { connect } = require('preact-redux'); const Main = require('./main'); -const Nav = require('./nav'); +// const Nav = require('./nav'); const Controls = require('./controls'); const Footer = require('./footer'); @@ -12,7 +12,6 @@ const addState = connect( const Mnml = ({ showNav }) =>
-
); } return (
-
 
+
{chat || '\u00A0'}
{scoreText()}
{player.name}
diff --git a/client/src/components/skill.btn.jsx b/client/src/components/skill.btn.jsx index 32baa084..87d0cc89 100644 --- a/client/src/components/skill.btn.jsx +++ b/client/src/components/skill.btn.jsx @@ -23,18 +23,24 @@ const addState = connect( dispatch(actions.setActiveSkill(constructId, skill)); } - return { setActiveSkill }; + function setGameSkillInfo(info) { + dispatch(actions.setGameSkillInfo(info)); + } + + return { setActiveSkill, setGameSkillInfo }; } ); function Skill(props) { const { + animating, construct, game, i, activeSkill, setActiveSkill, + setGameSkillInfo, } = props; if (!game) return false; @@ -42,6 +48,11 @@ function Skill(props) { const s = construct.skills[i]; const ko = construct.green_life.value === 0 ? 'ko' : ''; + function hoverInfo(e, info) { + e.stopPropagation(); + if (animating) return false; + return setGameSkillInfo(info); + } if (!s || !game) { return (