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

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

Browse Source
This commit is contained in:
ntr 2019-11-12 15:20:25 +11:00
commit 1824363de1
7 changed files with 101 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
WORKLOG.md
View File

@ -12,7 +12,13 @@
* Buttons / General UI Theming
* Front Page
* Don't drop out of game if you don't ready (esp. tutorial)
* Preview combo if you select 3 items
## SOON
* Graphical status effects instead of text
* Improve colour contrast / buttons
* supporter gold name in instance (anyone whos put any money into game)
* change cooldowns to delay & recharge

9
client/assets/styles/colours.less
View File

@ -122,6 +122,15 @@ svg {
}
}
@keyframes border-co {
0% {
border-color: @gray-box;
}
100% {
border-color: @gray-hint;
}
}
@keyframes co {
from {
background: @black;

40
client/assets/styles/instance.less
View File

@ -2,7 +2,7 @@
overflow: hidden;
display: grid;
grid-template-columns: 1fr minmax(min-content, 1fr);
grid-template-rows: min-content 1fr;
grid-template-rows: minmax(min-content, 0.75fr) 1fr;
grid-template-areas:
"vbox info"
@ -33,16 +33,15 @@
}
.instance .info {
/*font-size: 75%;*/
margin: 0 0 0 1em;
grid-area: info;
display: flex;
flex-flow: column;
display: grid;
font-size: 85%;
grid-template-rows: 0.8fr 1fr;
grid-template-areas:
"item"
"combos";
// flex-flow: column;
// white-space: pre-wrap;
> *:first-child {
margin-bottom: 1em;
}
}
.instance .info h2 {
@ -63,6 +62,29 @@
}
}
.instance .info-item {
grid-area: item;
margin: 0 0 0 1em;
}
.instance .combos {
grid-area: combos;
margin: 0 0 0 1em;
td.table-button {
padding:5px;
cursor: pointer;
animation: border-co 0.75s ease-in-out 0s infinite alternate;
&:hover {
color: whitesmoke;
background-color: @gray-hover;
}
svg {
height: 1em;
}
}
}
.instance .info figcaption {
font-size: 1em;
display: inline-block;

49
client/src/components/info.component.jsx
View File

@ -9,15 +9,22 @@ const shapes = require('./shapes');
class InfoComponent extends preact.Component {
shouldComponentUpdate(newProps) {
shouldComponentUpdate(newProps, newState) {
if (newProps.tutorial !== this.props.tutorial) return true;
// We don't care about info during tutorial
if (newProps.tutorial && this.props.instance.time_control === 'Practice'
&& this.props.instance.rounds.length === 1) return false;
if (newProps.info !== this.props.info) return true;
if (newState.comboItem !== this.state.comboItem) return true;
return false;
}
componentDidUpdate(prevProps) {
// Catch case where mouse events don't properly clear state and info changed
if (prevProps.info !== this.props.info && this.state.comboItem) this.setState({ comboItem: null });
}
render(args) {
const {
// Variables that will change
@ -33,7 +40,7 @@ class InfoComponent extends preact.Component {
setInfo,
setTutorialNull,
} = args;
const { comboItem } = this.state;
function Info() {
if (tutorial) {
const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance);
@ -42,7 +49,7 @@ class InfoComponent extends preact.Component {
if (!info) return false;
if (info.includes('constructName')) {
return (
<div>
<div class='info-item'>
<h2> {info.replace('constructName ', '')} </h2>
<p> This is the name of your construct. <br />
Names are randomly generated and are purely cosmetic. <br />
@ -54,7 +61,7 @@ class InfoComponent extends preact.Component {
if (info.includes('constructAvatar')) {
return (
<div>
<div class='info-item'>
<h2> {info.replace('constructAvatar ', '')} </h2>
<p> This is your construct avatar. <br />
Avatars are randomly generated and are purely cosmetic. <br />
@ -63,7 +70,9 @@ class InfoComponent extends preact.Component {
</div>
);
}
const fullInfo = itemInfo.items.find(i => i.item === info) || INFO[info];
const fullInfo = comboItem
? itemInfo.items.find(i => i.item === comboItem) || INFO[comboItem]
: itemInfo.items.find(i => i.item === info) || INFO[info];
if (!fullInfo) return false;
const isSkill = fullInfo.skill;
const isSpec = fullInfo.spec;
@ -75,16 +84,17 @@ class InfoComponent extends preact.Component {
};
if (isSkill || isSpec) {
let infoName = info;
let infoName = fullInfo.item;
while (infoName.includes('Plus')) infoName = infoName.replace('Plus', '+');
const header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(fullInfo.item));
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
let itemSourceInfo = itemSource.length
let itemSourceInfo = itemSource.length && !isSpec
? `${itemSource[0].components[0]} ${itemSource[0].components[1]} ${itemSource[0].components[2]}`
: false;
let header = null;
if (!itemSource.length) header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
if (itemSourceInfo) {
while (itemSourceInfo.includes('Plus')) itemSourceInfo = itemSourceInfo.replace('Plus', '+');
const itemRegEx = /(Red|Blue|Green)/;
@ -100,7 +110,7 @@ class InfoComponent extends preact.Component {
const thresholds = isSpec ? specThresholds(player, fullInfo, info) : null;
return (
<div class={isSkill ? 'info-skill' : 'info-spec'}>
<div class={isSkill ? 'info-item' : 'info-item'}>
<h2>{infoName} {fullInfo.cost}b</h2>
{header}
{itemSourceInfo}
@ -120,10 +130,10 @@ class InfoComponent extends preact.Component {
);
}
function Combos() {
const Combos = () => {
if (tutorial && instance.time_control === 'Practice' && instance.rounds.length === 1) return false;
const generalNotes = (
<div>
<div class="combos">
<h2> General </h2>
<p>
You can preview combos by clicking the combined item when it appears in this section. <br />
@ -141,18 +151,25 @@ class InfoComponent extends preact.Component {
<table class="combos">
<tbody>
{vboxCombos.map((c, i) =>
<tr key={i} >
<td class="highlight" onClick={() => setInfo(c.item)} >{convertItem(c.item)}</td>
<tr key={i}>
<td class="table-button"
onMouseOver={e => {
e.stopPropagation();
this.setState({ comboItem: c.item });
}}
onClick={() => setInfo(c.item)}
> {convertItem(c.item)} </td>
{c.components.map((u, j) => <td key={j} >{convertItem(u)}</td>)}
</tr>
)}
</tbody>
</table>
);
}
};
return (
<div class='info' >
<div class='info' onMouseOver={() => this.setState({ comboItem: null })}>
<Info />
<Combos />
</div>

10
client/src/components/vbox.component.jsx
View File

@ -213,6 +213,7 @@ class Vbox extends preact.Component {
const classes = `${v.toLowerCase()} ${selected ? 'highlight' : ''} ${comboHighlight}`;
const vboxObject = shapes[v] ? shapes[v]() : v;
const disabled = vbox.bits <= group;
return (
<label draggable='true'
onDragStart={ev => {
@ -223,6 +224,7 @@ class Vbox extends preact.Component {
onDragEnd={clearVboxSelected}>
<button
class={classes}
disabled={disabled}
onMouseOver={e => vboxHover(e, v)}
onMouseDown={onClick}
onClick={e => e.stopPropagation()}
@ -244,7 +246,7 @@ class Vbox extends preact.Component {
onTouchStart={e => e.target.scrollIntoView(true)}
onMouseOver={e => hoverInfo(e, 'vbox')}> VBOX
</h3>
<div class="bits" onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
<div class={`bits ${vbox.bits < 3 ? 'red' : false}`} onMouseOver={e => hoverInfo(e, 'bits')} >{vbox.bits}b</div>
</div>
<div class="vbox-colours">
{range(0, 6).map(i => availableBtn(vbox.free[0][i], 0, i))}
@ -285,7 +287,7 @@ class Vbox extends preact.Component {
const combinerItems = combiner.map(j => vbox.bound[j]);
const combinerCount = countBy(combinerItems, co => co);
const comboHighlight = combinerItems.length > 0 && itemInfo.combos.some(combo => {
const comboItem = itemInfo.combos.find(combo => {
if (combo.components.includes(v)) {
return combinerItems.every(c => {
if (!combo.components.includes(c)) return false;
@ -295,7 +297,8 @@ class Vbox extends preact.Component {
return true;
});
} return false;
}) ? 'combo-border' : '';
});
const comboHighlight = combinerItems.length > 0 && comboItem ? 'combo-border' : '';
function onClick(type) {
if (vboxSelecting) clearVboxSelected();
@ -321,6 +324,7 @@ class Vbox extends preact.Component {
}
combiner.push(i);
if (combiner.length === 3) setInfo(comboItem.item);
return combinerChange(combiner);
}

18
client/src/tutorial.utils.jsx
View File

@ -109,7 +109,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
const tutorialText = () => {
if (tutorial === 1) {
return (
<div>
<div class='info-item'>
<h2>Tutorial</h2>
<p> Welcome to the vbox phase tutorial.</p>
<p> Colours are used to create powerful combinations. </p>
@ -121,7 +121,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
if (tutorial === 2) {
return (
<div>
<div class='info-item'>
<h2>Tutorial</h2>
<p> In a normal game you start with three base <b>Attack</b> skill items. </p>
<p> The <b>Attack</b> item can be combined with <b>colours</b> to create a new skill. </p>
@ -135,7 +135,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
if (tutorial === 3) {
const constructOne = instance.players[0].constructs[0].name;
return (
<div>
<div class='info-item'>
<h2>Tutorial</h2>
<p> The first construct on your team is <b>{constructOne}</b>. </p>
<p> Skill items can be equipped to your constructs to be used in the combat phase. </p>
@ -147,7 +147,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
if (tutorial === 4) {
return (
<div>
<div class='info-item'>
<h2>Tutorial</h2>
<p> You can also buy specialisation items for your constructs. <br />
Specialisation items increase stats including power, speed and life. </p>
@ -159,7 +159,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
if (tutorial === 5) {
return (
<div>
<div class='info-item'>
<h2>Tutorial</h2>
<p> Equipping specialisation items will increase the stats of your constructs.</p>
<p> These can also be combined with colours for further specialisation. </p>
@ -173,7 +173,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
const constructTwo = instance.players[0].constructs[1].name;
const constructThree = instance.players[0].constructs[2].name;
return (
<div>
<div class='info-item'>
<h2>Tutorial</h2>
<p> You have now created a construct with an upgraded skill and base spec. </p>
<p> The goal is to create three powerful constructs for combat. </p>
@ -185,7 +185,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
if (tutorial === 7) {
return (
<div>
<div class='info-item'>
<h2>Tutorial</h2>
<p> Each round you start with a vbox full of different skills, specs and colours. </p>
<p> Bits are your currency for buying skills, specs and colours from the vbox. <br />
@ -204,7 +204,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
}
return (
<div>
<div class='info-item'>
<h2>Tutorial</h2>
<p>You've completed the tutorial! Try to create more skill and spec combinations. </p>
<p>You can unequip skills and specs back into the inventory by double clicking. <br />
@ -235,5 +235,5 @@ module.exports = {
tutorialConstructDisplay,
tutorialVbox,
tutorialStage,
tutorialShouldDisableEquip
tutorialShouldDisableEquip,
};

9
server/src/item.rs
View File

@ -900,11 +900,10 @@ impl Item {
Item::Bash|
Item::BashPlus |
Item::BashPlusPlus => format!(
"Bash the target increasing the cooldowns of target skills by 1T.
Deals {:?}% RedPower as red damage and 45% more damage per cooldown increased.
Stuns for {:?}T.",
self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier(),
self.into_skill().unwrap().effect()[0].get_duration()),
"Bash the target increasing the cooldowns of target skills by 1T. Stuns target for {:?}T.
Deals {:?}% RedPower as red damage and 45% more damage per cooldown increased.",
self.into_skill().unwrap().effect()[0].get_duration(),
self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier()),
Item::Strike|
Item::StrikePlus |