diff --git a/WORKLOG.md b/WORKLOG.md index 57b663fc..27d5432e 100644 --- a/WORKLOG.md +++ b/WORKLOG.md @@ -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 diff --git a/client/assets/styles/colours.less b/client/assets/styles/colours.less index d8ca2a5d..a1ae5dcb 100644 --- a/client/assets/styles/colours.less +++ b/client/assets/styles/colours.less @@ -122,6 +122,15 @@ svg { } } +@keyframes border-co { + 0% { + border-color: @gray-box; + } + 100% { + border-color: @gray-hint; + } +} + @keyframes co { from { background: @black; diff --git a/client/assets/styles/instance.less b/client/assets/styles/instance.less index 65032870..97faca8f 100644 --- a/client/assets/styles/instance.less +++ b/client/assets/styles/instance.less @@ -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; diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 0666010a..26c790a1 100644 --- a/client/src/components/info.component.jsx +++ b/client/src/components/info.component.jsx @@ -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 ( -
+

{info.replace('constructName ', '')}

This is the name of your construct.
Names are randomly generated and are purely cosmetic.
@@ -54,7 +57,7 @@ class InfoComponent extends preact.Component { if (info.includes('constructAvatar')) { return ( -

+

{info.replace('constructAvatar ', '')}

This is your construct avatar.
Avatars are randomly generated and are purely cosmetic.
@@ -63,7 +66,9 @@ class InfoComponent extends preact.Component {

); } - 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 ?

SKILL

:

SPEC

; - - 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 ?

SKILL

:

SPEC

; 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 ( -
+

{infoName} {fullInfo.cost}b

{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 = ( -
+

General

You can preview combos by clicking the combined item when it appears in this section.
@@ -141,18 +148,25 @@ class InfoComponent extends preact.Component { {vboxCombos.map((c, i) => - - + + + {c.components.map((u, j) => )} )}
setInfo(c.item)} >{convertItem(c.item)}
{ + e.stopPropagation(); + this.setState({ comboItem: c.item }); + }} + onClick={() => setInfo(c.item)} + > {convertItem(c.item)} {convertItem(u)}
); - } + }; return ( -

+
this.setState({ comboItem: null })}>
diff --git a/client/src/tutorial.utils.jsx b/client/src/tutorial.utils.jsx index 53268161..2c6e5d5f 100644 --- a/client/src/tutorial.utils.jsx +++ b/client/src/tutorial.utils.jsx @@ -109,7 +109,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) { const tutorialText = () => { if (tutorial === 1) { return ( -
+

Tutorial

Welcome to the vbox phase tutorial.

Colours are used to create powerful combinations.

@@ -121,7 +121,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) { if (tutorial === 2) { return ( -
+

Tutorial

In a normal game you start with three base Attack skill items.

The Attack item can be combined with colours to create a new skill.

@@ -135,7 +135,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) { if (tutorial === 3) { const constructOne = instance.players[0].constructs[0].name; return ( -
+

Tutorial

The first construct on your team is {constructOne}.

Skill items can be equipped to your constructs to be used in the combat phase.

@@ -147,7 +147,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) { if (tutorial === 4) { return ( -
+

Tutorial

You can also buy specialisation items for your constructs.
Specialisation items increase stats including power, speed and life.

@@ -159,7 +159,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) { if (tutorial === 5) { return ( -
+

Tutorial

Equipping specialisation items will increase the stats of your constructs.

These can also be combined with colours for further specialisation.

@@ -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 ( -
+

Tutorial

You have now created a construct with an upgraded skill and base spec.

The goal is to create three powerful constructs for combat.

@@ -185,7 +185,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) { if (tutorial === 7) { return ( -
+

Tutorial

Each round you start with a vbox full of different skills, specs and colours.

Bits are your currency for buying skills, specs and colours from the vbox.
@@ -204,7 +204,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) { } return ( -

+

Tutorial

You've completed the tutorial! Try to create more skill and spec combinations.

You can unequip skills and specs back into the inventory by double clicking.
@@ -235,5 +235,5 @@ module.exports = { tutorialConstructDisplay, tutorialVbox, tutorialStage, - tutorialShouldDisableEquip + tutorialShouldDisableEquip, }; diff --git a/server/src/item.rs b/server/src/item.rs index 92848763..a754ecbc 100644 --- a/server/src/item.rs +++ b/server/src/item.rs @@ -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 |