ntr/mnml
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'develop' into force-landscape

Browse Source
This commit is contained in:
ntr
2019-11-05 12:35:27 +11:00
parent ce967109fb d270df8abb
commit 06a62ca3ae
21 changed files with 214 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/assets/styles/instance.less
+7
View File
@@ -203,6 +203,9 @@
button {
height: 3em;
}
label {
display: flex;
}
}
.specs {
@@ -228,6 +231,10 @@
// font-size: 75%;
line-height: initial;
}
label {
display: flex;
}
}
.stats {
client/assets/styles/vbox.less
+1 -1
View File
@@ -83,7 +83,7 @@
&.highlight {
color: black;
background: @white;
border: 1px solid @white;
// border: 1px solid @white; (this bangs around the vbox)
// overwrite the classes on white svg elements
svg {
client/package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mnml-client",
"version": "1.7.0",
"version": "1.7.1",
"description": "",
"main": "index.js",
"scripts": {
client/src/components/buttons.jsx
+5 -4
View File
@@ -1,4 +1,5 @@
module.exports = { // This will need to be edited if we change server recipes
// This will need to be edited if we change server recipes
module.exports = {
// Attack
Strike: () => 'red-border',
Blast: () => 'blue-border',
@@ -7,7 +8,7 @@ module.exports = { // This will need to be edited if we change server recipes
Slay: () => 'red-green-border',
Siphon: () => 'blue-green-border',
// Stun
Link: () => 'blue-greenborder',
Link: () => 'blue-green-border',
Bash: () => 'red-border',
Sleep: () => 'green-border',
Ruin: () => 'blue-border',
@@ -31,9 +32,9 @@ module.exports = { // This will need to be edited if we change server recipes
Restrict: () => 'red-border',
Purge: () => 'green-border',
Silence: () => 'blue-border',
Curse: () => 'red-green-border',
Invert: () => 'red-green-border',
Decay: () => 'blue-green-border',
Invert: () => 'red-blue-border',
Curse: () => 'red-blue-border',
// // Lifes Upgrades
// LifeGG: () => 'green-border',
client/src/components/instance.constructs.jsx
+57 -21
View File
@@ -20,9 +20,15 @@ const addState = connect(
account,
itemInfo,
itemEquip,
itemUnequip,
vboxSelected,
tutorial,
} = state;
function sendVboxAcceptEquip(constructId) {
return ws.sendVboxAcceptEquip(instance.id, vboxSelected[0], vboxSelected[1], constructId);
}
function sendVboxApply(constructId, i) {
return ws.sendVboxApply(instance.id, constructId, i);
}
@@ -31,14 +37,22 @@ const addState = connect(
return ws.sendVboxUnequip(instance.id, constructId, item);
}
function sendVboxUnequipApply(targetConstructId) {
return ws.sendVboxUnequipApply(instance.id, itemUnequip[0], itemUnequip[1], targetConstructId);
}
return {
instance,
player,
account,
sendVboxAcceptEquip,
sendVboxUnequipApply,
sendVboxApply,
itemInfo,
itemEquip,
itemUnequip,
sendUnequip,
vboxSelected,
tutorial,
};
},
@@ -75,20 +89,23 @@ function Construct(props) {
construct,
iter,
itemEquip,
itemUnequip,
instance,
player,
vboxSelected,
tutorial,
// Static Info
itemInfo,
// Function Calls
sendVboxApply,
sendVboxAcceptEquip,
sendVboxUnequipApply,
sendUnequip,
setActiveConstruct,
setItemUnequip,
setItemEquip,
setInfo,
} = props;
const { vbox } = player;
const duplicateSkill = construct.skills.length !== 0 && construct.skills.every(sk => {
@@ -97,14 +114,16 @@ function Construct(props) {
return sk.skill === vbox.bound[itemEquip];
});
const tutorialDisableEquip = tutorialShouldDisableEquip(tutorial, iter, instance, construct);
function onClick(e) {
e.stopPropagation();
e.preventDefault();
if (duplicateSkill || tutorialDisableEquip) return true;
if (itemEquip !== null) sendVboxApply(construct.id, itemEquip);
if (itemEquip !== null) return sendVboxApply(construct.id, itemEquip);
if (vboxSelected[0]) return sendVboxAcceptEquip(construct.id);
if (itemUnequip.length && itemUnequip[0] !== construct.id) return sendVboxUnequipApply(construct.id);
setItemEquip(null);
return setActiveConstruct(construct);
setItemUnequip([]);
return true;
}
function hoverInfo(e, info) {
@@ -151,15 +170,20 @@ function Construct(props) {
const classes = `${equipping ? 'equipping' : ''} ${!skill ? 'empty' : ''} ${border()}`;
return (
<button
key={i}
disabled={!skill && !equipping}
class={classes}
onClick={skillClick}
onDblClick={skillDblClick}
onMouseOver={e => hoverInfo(e, skill && skill.skill)} >
{s}
</button>
<label onDragStart={ev => {
ev.dataTransfer.setData('text', '');
skillClick(ev);
}} key={i} draggable="true" onDragEnd={() => setItemUnequip([])}>
<button
key={i}
disabled={!skill && !equipping}
class={classes}
onClick={skillClick}
onDblClick={skillDblClick}
onMouseOver={e => hoverInfo(e, skill && skill.skill)} >
{s}
</button>
</label>
);
});
@@ -193,13 +217,15 @@ function Construct(props) {
return (
<button
key={i}
onClick={specClick}
onDblClick={specDblClick}
onMouseOver={e => hoverInfo(e, s)} >
{shapes[s]()}
</button>
<label onDragStart={specClick} key={i} draggable="true" onDragEnd={() => setItemUnequip([])}>
<button
key={i}
onClick={specClick}
onDblClick={specDblClick}
onMouseOver={e => hoverInfo(e, s)} >
{shapes[s]()}
</button>
</label>
);
});
@@ -221,7 +247,7 @@ function Construct(props) {
const classes = `instance-construct`;
const avatarMouseOver = e => hoverInfo(e, `constructAvatar ${construct.name}`);
return (
<div key={construct.id} class={classes} onClick={onClick}>
<div key={construct.id} class={classes} onClick={onClick} onDragOver={ev => ev.preventDefault()} onDrop={onClick}>
<ConstructAvatar construct={construct} mouseOver={avatarMouseOver}/>
<h2 class="name" onMouseOver={e => hoverInfo(e, `constructName ${construct.name}`)}>{construct.name}</h2>
<div class="skills" onMouseOver={e => hoverInfo(e, 'constructSkills')} >
@@ -240,10 +266,12 @@ function Construct(props) {
class InstanceConstructs extends preact.Component {
shouldComponentUpdate(newProps) {
if (newProps.itemEquip !== this.props.itemEquip) return true;
if (newProps.itemUnequip !== this.props.itemUnequip) return true;
if (newProps.tutorial !== this.props.tutorial) return true;
// JSON or Array objects
if (newProps.player !== this.props.player) return true;
if (newProps.instance !== this.props.instance) return true;
if (newProps.vboxSelected !== this.props.vboxSelected) return true;
return false;
}
@@ -251,15 +279,19 @@ class InstanceConstructs extends preact.Component {
const {
// Changing state variables
itemEquip,
itemUnequip,
instance,
player,
tutorial,
vboxSelected,
// Static data
itemInfo,
// Function calls
setInfo,
setActiveConstruct,
sendVboxApply,
sendVboxAcceptEquip,
sendVboxUnequipApply,
setVboxHighlight,
setItemUnequip,
setItemEquip,
@@ -277,16 +309,20 @@ class InstanceConstructs extends preact.Component {
iter: i,
construct: player.constructs[i],
itemEquip,
itemUnequip,
instance,
setItemUnequip,
setItemEquip,
player,
sendVboxApply,
sendVboxAcceptEquip,
sendVboxUnequipApply,
setInfo,
setActiveConstruct,
itemInfo,
setVboxHighlight,
sendUnequip,
vboxSelected,
tutorial,
});
});
client/src/components/vbox.component.jsx
+25 -34
View File
@@ -28,6 +28,7 @@ const addState = connect(
}
function sendVboxAccept(group, index) {
document.activeElement.blur();
return ws.sendVboxAccept(instance.id, group, index);
}
@@ -190,8 +191,6 @@ class Vbox extends preact.Component {
e.stopPropagation();
setItemEquip(null);
setCombiner([]);
if (selected) return clearVboxSelected();
setInfo(vbox.free[group][index]);
return setVboxSelected([group, index]);
}
@@ -213,28 +212,20 @@ class Vbox extends preact.Component {
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
if (shapes[v]) {
return (
const vboxObject = shapes[v] ? shapes[v]() : v;
return (
<label draggable='true'
onDragStart={ev => ev.dataTransfer.setData('text', '')}
onDragEnd={clearVboxSelected}>
<button
class={classes}
onMouseOver={e => vboxHover(e, v)}
onMouseDown={onClick}
onClick={e => e.stopPropagation()}
onDblClick={onDblClick} >
{shapes[v]()}
onDblClick={onDblClick}
> {vboxObject}
</button>
);
}
return (
<button
class={classes}
onMouseDown={onClick}
onClick={e => e.stopPropagation()}
onDblClick={onDblClick}
onMouseOver={e => vboxHover(e, v)}>
{v}
</button>
</label>
);
}
@@ -314,7 +305,8 @@ class Vbox extends preact.Component {
// removing
const combinerIndex = combiner.indexOf(i);
if (combinerIndex > -1) {
return combinerChange(without(combiner, i));
return true;
// return combinerChange(without(combiner, i));
}
combiner.push(i);
@@ -330,26 +322,22 @@ class Vbox extends preact.Component {
const highlighted = combiner.indexOf(i) > -1;
const border = buttons[removeTier(v)] ? buttons[removeTier(v)]() : '';
const classes = `${highlighted ? 'highlight' : border} ${comboHighlight}`;
if (shapes[v]) {
return (
const invObject = shapes[v] ? shapes[v]() : v;
return (
<label
draggable='true'
onDragStart={ev => ev.dataTransfer.setData('text', '')}
onDragEnd={() => combinerChange([])}>
<button
class={classes}
onMouseOver={e => vboxHover(e, v)}
onClick={e => e.stopPropagation()}
onMouseDown={onClick}>
{shapes[v]()}
{invObject}
</button>
);
}
return (
<button
class={classes}
onMouseDown={onClick}
onClick={e => e.stopPropagation()}
onMouseOver={e => vboxHover(e, v)}>
{v}
</button>
</label>
);
}
@@ -404,7 +392,10 @@ class Vbox extends preact.Component {
<div class={inventoryClass}
onMouseDown={inventoryClick}
onClick={e => e.stopPropagation()}
style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}>
style={vboxSelecting || (itemUnequip.length) ? { cursor: 'pointer' } : null}
onDragOver={ev => ev.preventDefault()}
onDrop={inventoryClick}
>
<div class="vbox-hdr">
<h3
onTouchStart={e => e.target.scrollIntoView(true)}
client/src/events.jsx
+1
View File
@@ -190,6 +190,7 @@ function registerEvents(store) {
store.dispatch(actions.setItemEquip(null));
store.dispatch(actions.setItemUnequip([]));
store.dispatch(actions.setVboxHighlight([]));
store.dispatch(actions.setVboxSelected([]));
}
function setAccountInstances(v) {
client/src/socket.jsx
+13 -1
View File
@@ -82,6 +82,11 @@ function createSocket(events) {
events.clearInstance();
}
function sendVboxAcceptEquip(instanceId, group, index, constructId) {
send(['VboxAcceptEquip', { instance_id: instanceId, group, index, construct_id: constructId }]);
events.clearInstance();
}
function sendVboxApply(instanceId, constructId, index) {
send(['VboxApply', { instance_id: instanceId, construct_id: constructId, index }]);
events.clearInstance();
@@ -92,6 +97,11 @@ function createSocket(events) {
events.clearInstance();
}
function sendVboxUnequipApply(instanceId, constructId, target, targetConstructId) {
send(['VboxUnequipApply', { instance_id: instanceId, construct_id: constructId, target, target_construct_id: targetConstructId }]);
events.clearInstance();
}
function sendVboxDiscard(instanceId) {
send(['VboxDiscard', { instance_id: instanceId }]);
events.clearInstance();
@@ -99,7 +109,7 @@ function createSocket(events) {
function sendVboxCombine(instanceId, indices) {
send(['VboxCombine', { instance_id: instanceId, indices }]);
events.clearCombiner();
events.clearInstance();
}
function sendVboxReclaim(instanceId, index) {
@@ -382,11 +392,13 @@ function createSocket(events) {
sendInstanceChat,
sendVboxAccept,
sendVboxAcceptEquip,
sendVboxApply,
sendVboxReclaim,
sendVboxCombine,
sendVboxDiscard,
sendVboxUnequip,
sendVboxUnequipApply,
sendItemInfo,