fix ++ spec display in vbox

client/src/components/shapes.jsx

@@ -100,9 +100,79 @@ module.exports = {
         {square(['red', 'blue'])}
         <figcaption>Life</figcaption>
     </figure>,
+    LifeGGPlus: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life+</figcaption>
+    </figure>,
 
+    LifeRRPlus: () =>
+    <figure>
+        {square(['red'])}
+        <figcaption>Life+</figcaption>
+    </figure>,
 
-    // Power Upgrades
+    LifeBBPlus:() =>
+    <figure>
+        {square(['blue'])}
+        <figcaption>Life+</figcaption>
+    </figure>,
+
+    LifeRGPlus: () =>
+    <figure>
+        {square(['red', 'green'])}
+        <figcaption>Life+</figcaption>
+    </figure>,
+
+    LifeGBPlus: () =>
+    <figure>
+        {square(['green', 'blue'])}
+        <figcaption>Life+</figcaption>
+    </figure>,
+
+    LifeRBPlus:() =>
+    <figure>
+        {square(['red', 'blue'])}
+        <figcaption>Life+</figcaption>
+    </figure>,
+
+    LifeGGPlusPlus: () =>
+    <figure>
+        {square(['green'])}
+        <figcaption>Life++</figcaption>
+    </figure>,
+
+    LifeRRPlusPlus: () =>
+    <figure>
+        {square(['red'])}
+        <figcaption>Life++</figcaption>
+    </figure>,
+
+    LifeBBPlusPlus:() =>
+    <figure>
+        {square(['blue'])}
+        <figcaption>Life++</figcaption>
+    </figure>,
+
+    LifeRGPlusPlus: () =>
+    <figure>
+        {square(['red', 'green'])}
+        <figcaption>Life++</figcaption>
+    </figure>,
+
+    LifeGBPlusPlus: () =>
+    <figure>
+        {square(['green', 'blue'])}
+        <figcaption>Life++</figcaption>
+    </figure>,
+
+    LifeRBPlusPlus:() =>
+    <figure>
+        {square(['red', 'blue'])}
+        <figcaption>Life++</figcaption>
+    </figure>,
+
+    // Powers Upgrades
     PowerGG: () =>
     <figure>
         {circle(['green'])}
@@ -138,8 +208,79 @@ module.exports = {
         {circle(['red', 'blue'])}
         <figcaption>Power</figcaption>
     </figure>,
+    PowerGGPlus: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power+</figcaption>
+    </figure>,
 
-    // Speed Upgrades
+    PowerRRPlus: () =>
+    <figure>
+        {circle(['red'])}
+        <figcaption>Power+</figcaption>
+    </figure>,
+
+    PowerBBPlus:() =>
+    <figure>
+        {circle(['blue'])}
+        <figcaption>Power+</figcaption>
+    </figure>,
+
+    PowerRGPlus: () =>
+    <figure>
+        {circle(['red', 'green'])}
+        <figcaption>Power+</figcaption>
+    </figure>,
+
+    PowerGBPlus: () =>
+    <figure>
+        {circle(['green', 'blue'])}
+        <figcaption>Power+</figcaption>
+    </figure>,
+
+    PowerRBPlus:() =>
+    <figure>
+        {circle(['red', 'blue'])}
+        <figcaption>Power+</figcaption>
+    </figure>,
+
+    PowerGGPlusPlus: () =>
+    <figure>
+        {circle(['green'])}
+        <figcaption>Power++</figcaption>
+    </figure>,
+
+    PowerRRPlusPlus: () =>
+    <figure>
+        {circle(['red'])}
+        <figcaption>Power++</figcaption>
+    </figure>,
+
+    PowerBBPlusPlus:() =>
+    <figure>
+        {circle(['blue'])}
+        <figcaption>Power++</figcaption>
+    </figure>,
+
+    PowerRGPlusPlus: () =>
+    <figure>
+        {circle(['red', 'green'])}
+        <figcaption>Power++</figcaption>
+    </figure>,
+
+    PowerGBPlusPlus: () =>
+    <figure>
+        {circle(['green', 'blue'])}
+        <figcaption>Power++</figcaption>
+    </figure>,
+
+    PowerRBPlusPlus:() =>
+    <figure>
+        {circle(['red', 'blue'])}
+        <figcaption>Power++</figcaption>
+    </figure>,
+
+    // Speeds Upgrades
     SpeedGG: () =>
     <figure>
         {triangle(['green'])}
@@ -175,4 +316,75 @@ module.exports = {
         {triangle(['red', 'blue'])}
         <figcaption>Speed</figcaption>
     </figure>,
+    SpeedGGPlus: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed+</figcaption>
+    </figure>,
+
+    SpeedRRPlus: () =>
+    <figure>
+        {triangle(['red'])}
+        <figcaption>Speed+</figcaption>
+    </figure>,
+
+    SpeedBBPlus:() =>
+    <figure>
+        {triangle(['blue'])}
+        <figcaption>Speed+</figcaption>
+    </figure>,
+
+    SpeedRGPlus: () =>
+    <figure>
+        {triangle(['red', 'green'])}
+        <figcaption>Speed+</figcaption>
+    </figure>,
+
+    SpeedGBPlus: () =>
+    <figure>
+        {triangle(['green', 'blue'])}
+        <figcaption>Speed+</figcaption>
+    </figure>,
+
+    SpeedRBPlus:() =>
+    <figure>
+        {triangle(['red', 'blue'])}
+        <figcaption>Speed+</figcaption>
+    </figure>,
+
+    SpeedGGPlusPlus: () =>
+    <figure>
+        {triangle(['green'])}
+        <figcaption>Speed++</figcaption>
+    </figure>,
+
+    SpeedRRPlusPlus: () =>
+    <figure>
+        {triangle(['red'])}
+        <figcaption>Speed++</figcaption>
+    </figure>,
+
+    SpeedBBPlusPlus:() =>
+    <figure>
+        {triangle(['blue'])}
+        <figcaption>Speed++</figcaption>
+    </figure>,
+
+    SpeedRGPlusPlus: () =>
+    <figure>
+        {triangle(['red', 'green'])}
+        <figcaption>Speed++</figcaption>
+    </figure>,
+
+    SpeedGBPlusPlus: () =>
+    <figure>
+        {triangle(['green', 'blue'])}
+        <figcaption>Speed++</figcaption>
+    </figure>,
+
+    SpeedRBPlusPlus:() =>
+    <figure>
+        {triangle(['red', 'blue'])}
+        <figcaption>Speed++</figcaption>
+    </figure>,
 };

client/src/components/vbox.component.jsx

@@ -305,7 +305,6 @@ function Vbox(args) {
 
         const highlighted = combiner.indexOf(i) > -1;
         const classes = `${highlighted ? 'highlight' : ''}`;
-
         if (shapes[v]) {
             return (
                 <button