preview item combos in table

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

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;

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;
+    display: grid;
-    flex-flow: column;
+    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;

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 (
-                    <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(fullInfo.item));
-
+                
-                const itemSource = itemInfo.combos.filter(c => c.item === removeTier(info));
+                let itemSourceInfo = itemSource.length && !isSpec
-                let itemSourceInfo = itemSource.length
                     ? `${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} >
+                            <tr key={i}>
-                                <td class="highlight" onClick={() => setInfo(c.item)} >{convertItem(c.item)}</td>
+                                <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>

client/src/tutorial.utils.jsx

@@ -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,
 };

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.
+                "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.
+                Deals {:?}% RedPower as red damage and 45% more damage per cooldown increased.",
-                Stuns for {:?}T.",
+                self.into_skill().unwrap().effect()[0].get_duration(),
-                self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier(),
+                self.into_skill().unwrap().effect()[0].get_skill().unwrap().multiplier()),
-                self.into_skill().unwrap().effect()[0].get_duration()),
 
             Item::Strike|
             Item::StrikePlus |