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

preview item combos in table

Browse Source
This commit is contained in:
Mashy 2019-11-12 11:39:34 +10:00
parent 357c38e375
commit 27c562d41b
6 changed files with 90 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
WORKLOG.md
View File

@ -8,8 +8,14 @@
* mobile info 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;

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

@ -9,12 +9,14 @@ 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;
}
@ -33,7 +35,8 @@ class InfoComponent extends preact.Component {
setInfo,
setTutorialNull,
} = args;
const { comboItem } = this.state;
console.log(comboItem);
function Info() {
if (tutorial) {
const tutorialStageInfo = tutorialStage(tutorial, ws, setTutorialNull, instance);
@ -42,7 +45,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 +57,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 +66,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 +80,18 @@ class InfoComponent extends preact.Component {
};
if (isSkill || isSpec) {
let infoName = info;
let infoName = fullInfo.item;
while (infoName.includes('Plus')) infoName = infoName.replace('Plus', '+');
console.log(fullInfo);
const header = isSkill ? <h3> SKILL </h3> : <h3> SPEC </h3>;
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
let itemSourceInfo = itemSource.length
const itemSource = itemInfo.combos.filter(c => c.item === removeTier(fullInfo.item));
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 +107,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 +127,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 +148,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>

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 |