more description improvements

client/src/components/info.component.jsx

@@ -204,7 +204,10 @@ class InfoComponent extends preact.Component {
                 );
             }
             const cost = fullInfo.cost ? `- ${fullInfo.cost}b` : false;
-            const infoDescription = reactStringReplace(fullInfo.description, '\n', () => <br />);
+            
+            const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat|POWER|SPEED|LIFE)/;
+            let infoDescription = reactStringReplace(fullInfo.description, regEx, match => shapes[match]());
+            infoDescription = reactStringReplace(infoDescription, '\n', () => <br />);
             return (
                 <div class="info-item">
                     <h2>{fullInfo.item} {cost}</h2>

client/src/components/shapes.jsx

@@ -35,7 +35,9 @@ module.exports = {
     BluePower: () => circle(['blue']),
     SpeedStat: () => triangle(['white']),
 
-
+    POWER: () => circle(['white']),
+    LIFE: () => square(['white']),
+    SPEED: () => triangle(['white']),
     // specs
     // Base
 

client/src/constants.jsx

@@ -60,30 +60,23 @@ module.exports = {
         },
         constructSkills: {
             item: 'SKILLS',
-            description: <p>Skills are used by constructs in the game phase.<br />
-                Base skills can be bought from the VBOX.<br />
-                Equip skills from the inventory. Double-click to unequip.</p>,
+            description: 'Skills are used by constructs in the game phase.\nBase skills can be bought from the VBOX.\nEquip skills from the inventory. Double-click to unequip.',
         },
         constructSpecs: {
             item: 'SPECS',
-            description: <p>Specialisations increase the stats of a construct.<br />
-                Increased effect when your team meets the colour threshold.<br />Double-click to unequip.</p>,
+            description: 'Specialisations increase the stats of a construct.\nIncreased effect when your team meets the colour threshold.\nDouble-click to unequip.',
         },
         powerStat: {
             item: 'POWER',
-            description: <p>Power determines the base damage and healing of your construct skills.<br />
-                Combine POWER specs to increase construct power.</p>,
+            description: 'Power determines the damage and healing of your construct skills.\nRed power RedPower is used by red skills.\nGreen power GreenPower is used by green skills.\nBlue power BluePower is used by blue skills.\nCombine coloured POWER specs to increase specific construct power.',
         },
         lifeStat: {
             item: 'LIFE',
-            description: <p>The life of your construct.<br />
-                When your construct reaches 0 green life it is knocked out and cannot cast skills.<br />
-                Red life mitigates red damage and blue life mitigates blue damage.<br />
-                Combine LIFE specs to increase life totals.</p>,
+            description: 'The life of your construct.\nWhen your construct reaches 0 GreenLife it is knocked out.\nRed life RedLife mitigates red damage.\nBlue life BlueLife mitigates blue damage.\nCombine coloured LIFE specs to increase specific construct life.',
         },
         speedStat: {
             item: 'SPEED',
-            description: <p>Speed determines the order in which skills resolve.<br />Combine SPEED specs to increase speed.</p>,
+            description: 'Speed determines the order in which skills resolve.\nCombine SPEED specs to increase speed.',
         },
     },
 };

client/src/tutorial.utils.jsx

@@ -124,7 +124,7 @@ function tutorialStage(tutorial, ws, clearTutorial, instance) {
                     <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>
                     <p> Select the Attack item along with two colours. <br />
-                        When all three items are selected you can then press combine.
+                        Once selected press <b>COMBINE</b> to create a new combo.
                     </p>
                 </div>
             );