vbox sizing

CHANGELOG.md

@@ -16,6 +16,10 @@ Added `Buff` as a skill
     Duration 2T
     No CD
 
+### Changed
+
+`Clutch` now grants immunity to disables.
+
 *BALANCE*
 - purify
   - 1 effect from all cryps at level 2

client/assets/styles/styles.css

@@ -212,7 +212,8 @@ table tr {
 
 table td svg {
     stroke-width: 2px;
-    height: 96%;
+    overflow: hidden;
+    height: 1.5em;
     vertical-align: text-bottom;
 }
 

client/src/components/info.component.jsx

@@ -1,7 +1,8 @@
 const preact = require('preact');
 const range = require('lodash/range');
 
-const { ITEMS: { SPECS: SPEC_CONSTANT }, INFO } = require('./../constants');
+const { INFO } = require('./../constants');
+const { SPECS } = require('./../utils');
 const { COLOUR_ICONS, convertItem } = require('../utils');
 
 function Info(args) {
@@ -41,8 +42,8 @@ function Info(args) {
         }
 
         if (isSpec) {
-            const breaks = SPEC_CONSTANT[info].thresholds;
+            const breaks = SPECS[info].thresholds;
-            const colourReqs = SPEC_CONSTANT[info].colours || [];
+            const colourReqs = SPECS[info].colours || [];
 
             const thresholdEl = colourReqs.map((c, i) => {
                 const numIcons = Math.max(...breaks);

client/src/constants.jsx

@@ -57,326 +57,4 @@ module.exports = {
         },
 
     },
-
-    ITEMS: {
-        SKILLS: {
-            Amplify: {
-                description: 'increase the magic damage dealt by a cryp',
-                colours: '1 Green 1 Blue',
-            },
-
-            Attack: {
-                description: 'a fast attack with red damage',
-                upgrades: 'combine with 2 red / blue / green - red + blue attack not implemented',
-            },
-
-            Banish: {
-                description: 'target cryp is prevented from casting any skills and taking any damage',
-                colours: '1 Red 1 Green',
-            },
-
-            Blast: {
-                description: 'blast the target with magic damage',
-                colours: '2 Blue',
-            },
-
-            Block: {
-                description: 'decreases incoming red damage for 1T',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-            Buff: {
-                description: 'increase target cryp speed',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-            Clutch: {
-                description: '??????',
-                colours: '1 Red 1 Green',
-            },
-
-            Corrupt: {
-                description: 'Inflicts a dot to attacker while active',
-                colours: '2 Blue',
-            },
-
-            Curse: {
-                description: 'target cryp takes increased magic damage',
-                colours: '2 Blue',
-            },
-
-            Debuff: {
-                description: 'reduce target cryp speed',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-            Decay: {
-                description: 'afflict a cryp with a blue damage based damage over time debuff',
-                colours: '1 Green 1 Blue',
-            },
-
-            Empower: {
-                description: 'increase the red damage dealt by a cryp',
-                colours: '2 Red',
-            },
-
-            Haste: {
-                description: 'magical skill that increases speed of target cryp',
-                colours: '1 Red 1 Blue',
-            },
-
-            Heal: {
-                description: 'heal a cryp with blue damage',
-                colours: '2 Green',
-            },
-
-            Hex: {
-                description: 'magical bsed skill that prevents target cryp from using any skills',
-                colours: '1 Red 1 Blue',
-            },
-
-            Hostility: {
-                description: 'magical bsed skill that prevents target cryp from using any skills',
-                colours: '2 Blue',
-            },
-
-            Invert: {
-                description: 'reverse ???',
-                colours: '1 Red 1 Blue',
-            },
-
-            Parry: {
-                description: 'prevents all red damage for 1T',
-                colours: '2 Red',
-            },
-
-            Purge: {
-                description: 'remove magical buffs from target cryp',
-                colours: '2 Green',
-            },
-
-            Purify: {
-                description: 'remove magical debuffs from target cryp',
-                colours: '1 Red 1 Green',
-            },
-
-            Recharge: {
-                description: 'restore something',
-                colours: '1 Red 1 Blue',
-            },
-
-            Reflect: {
-                description: 'reflect damage back to attacker',
-                colours: '2 Green',
-            },
-
-            Riposte: {
-                description: '???',
-            },
-
-            Ruin: {
-                description: 'Stun the entire enemy team',
-                colours: '2 Blue',
-            },
-
-            Shield: {
-                description: 'grants immunity to magical skills to target cryp',
-                colours: '1 Green 1 Blue',
-            },
-
-            Silence: {
-                description: 'prevent target cryp from casting magical skills',
-                colours: '1 Green 1 Blue',
-            },
-
-            Siphon: {
-                description: 'siphon hp from target cryp with a blue damage based debuff',
-                colours: '1 Green 1 Blue',
-            },
-
-            Slay: {
-                description: '????',
-            },
-
-            Slow: {
-                description: 'magical skill that reduces speed of target cryp',
-                colours: '1 Red 1 Green',
-            },
-
-            Snare: {
-                description: 'prevents red skills from being used for 2T',
-                colours: '2 Red',
-            },
-
-            Strangle: {
-                description: 'Stun the enemy and inflict physical damage over 3T',
-                colours: '2 Red',
-            },
-
-            Strike: {
-                description: 'Fast attacking red skill',
-                colours: '2 Red',
-            },
-
-            Stun: {
-                description: 'red skill hat prevents target cryp from using any skills',
-                upgrades: 'combine with 2 red / blue / green',
-
-            },
-
-            Taunt: {
-                description: 'Enemy skills will prioritise cryps with this skill active',
-                colours: '1 Red 1 Green',
-            },
-
-            Throw: {
-                description: 'stuns and makes the target take increased red damage',
-                colours: '2 Green',
-            },
-
-            Triage: {
-                description: 'grants a blue damage based healing over time buff',
-                colours: '2 Green',
-            },
-        },
-
-        SPECS: {
-            Damage: {
-                description: 'Increase red / green / blue damage stats cryp',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-            GreenDamageI: {
-                description: 'Increases green damage',
-                colours: ['green'],
-                thresholds: [5, 10, 20],
-            },
-
-            RedDamageI: {
-                description: 'Increased red damage',
-                colours: ['red'],
-                thresholds: [5, 10, 20],
-            },
-
-            BlueDamageI: {
-                description: 'Increased blue damage',
-                colours: ['blue'],
-                thresholds: [5, 10, 20],
-            },
-
-            GRDI: {
-                description: 'Increased green and red damage',
-                colours: ['green', 'red'],
-                thresholds: [2, 5, 10],
-            },
-
-            GBDI: {
-                description: 'Increased green and blue damage',
-                colours: ['green', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            RBDI: {
-                description: 'Increased red and blue damage',
-                colours: ['red', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            Life: {
-                description: 'Increases life',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-            GreenLifeI: {
-                description: 'Increases life',
-                colours: ['green'],
-                thresholds: [5, 10, 20],
-            },
-
-            RedLifeI: {
-                description: 'Increased red shield',
-                colours: ['red'],
-                thresholds: [5, 10, 20],
-            },
-
-            BlueLifeI: {
-                description: 'Increased blue shield',
-                colours: ['blue'],
-                thresholds: [5, 10, 20],
-            },
-
-            GRLI: {
-                description: 'Increased life and red shield',
-                colours: ['green', 'red'],
-                thresholds: [2, 5, 10],
-            },
-
-            GBLI: {
-                description: 'Increased life and blue shield',
-                colours: ['green', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            RBLI: {
-                description: 'Increased red and blue shield',
-                colours: ['red', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            Speed: {
-                description: 'Increases speed of cryp',
-                upgrades: 'combine with 2 red / blue / green',
-            },
-
-            RedSpeedI: {
-                description: 'Increases red speed',
-                colours: ['red'],
-                thresholds: [5, 10, 20],
-            },
-
-            BlueSpeedI: {
-                description: 'Increases blue speed',
-                colours: ['blue'],
-                thresholds: [5, 10, 20],
-            },
-
-            GreenSpeedI: {
-                description: 'Increases green speed',
-                colours: ['green'],
-                thresholds: [5, 10, 20],
-            },
-
-            GRSpeedI: {
-                description: 'Increases green and red speed',
-                colours: ['green', 'red'],
-                thresholds: [2, 5, 10],
-            },
-
-            GBSpeedI: {
-                description: 'Increases green and blue speed',
-                colours: ['green', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-
-            RBSpeedI: {
-                description: 'Increases red and blue speed',
-                colours: ['red', 'blue'],
-                thresholds: [2, 5, 10],
-            },
-        },
-
-        COLOURS: {
-            Red: {
-                description: 'Used to create offensive type combos - fast and chaotic',
-            },
-
-            Green: {
-                description: 'Used to create defensive / healing type combos',
-            },
-
-            Blue: {
-                description: 'Used to create offensive type combos - slow and reliable',
-            },
-        },
-    },
 };

client/src/utils.jsx

@@ -66,39 +66,170 @@ function crypAvatar(name) {
 const NULL_UUID = '00000000-0000-0000-0000-000000000000';
 
 const STATS = {
-    redDamage: { stat: 'red_damage', colour: 'red', svg: shapes.circle },
+    redDamage: {
-    greenDamage: { stat: 'green_damage', colour: 'green', svg: shapes.circle },
+        stat: 'red_damage',
-    blueDamage: { stat: 'blue_damage', colour: 'blue', svg: shapes.circle },
+        colour: 'red',
-    speed: { stat: 'speed', colour: 'white', svg: shapes.triangle },
+        svg: shapes.circle,
-    redLife: { stat: 'red_life', colour: 'red', svg: shapes.square },
+    },
-    greenLife: { stat: 'green_life', colour: 'green', svg: shapes.square },
+    greenDamage: {
-    blueLife: { stat: 'blue_life', colour: 'blue', svg: shapes.square },
+        stat: 'green_damage',
+        colour: 'green',
+        svg: shapes.circle,
+    },
+    blueDamage: {
+        stat: 'blue_damage',
+        colour: 'blue',
+        svg: shapes.circle,
+    },
+    speed: {
+        stat: 'speed',
+        colour: 'white',
+        svg: shapes.triangle,
+    },
+    redLife: {
+        stat: 'red_life',
+        colour: 'red',
+        svg: shapes.square,
+    },
+    greenLife: {
+        stat: 'green_life',
+        colour: 'green',
+        svg: shapes.square,
+    },
+    blueLife: {
+        stat: 'blue_life',
+        colour: 'blue',
+        svg: shapes.square,
+    },
 };
 
 const SPECS = {
-    Life: { colour: 'white', caption: 'Life', svg: shapes.square },
+    Life: {
-    GreenLifeI: { colour: 'green', caption: 'Life', svg: shapes.square },
+        colour: 'white',
-    RedLifeI: { colour: 'red', caption: 'Life', svg: shapes.square },
+        caption: 'Life',
-    BlueLifeI: { colour: 'blue', caption: 'Life', svg: shapes.square },
+        svg: shapes.square
-    GRLI: { colour: 'yellow', caption: 'Life', svg: shapes.square },
+    },
-    GBLI: { colour: 'cyan', caption: 'Life', svg: shapes.square },
+    GreenLifeI: {
-    RBLI: { colour: 'purple', caption: 'Life', svg: shapes.square },
+        colour: 'green',
+        caption: 'Life',
+        thresholds: [5, 10, 20],
+        svg: shapes.square,
+    },
+    RedLifeI: {
+        colour: 'red',
+        caption: 'Life',
+        thresholds: [2, 5, 10],
+        svg: shapes.square,
+    },
+    BlueLifeI: {
+        colour: 'blue',
+        caption: 'Life',
+        thresholds: [2, 5, 10],
+        svg: shapes.square,
+    },
+    GRLI: {
+        colour: 'yellow',
+        caption: 'Life',
+        thresholds: [2, 5, 10],
+        svg: shapes.square
+    },
+    GBLI: {
+        colour: 'cyan',
+        caption: 'Life',
+        thresholds: [2, 5, 10],
+        svg: shapes.square
+    },
+    RBLI: {
+        colour: 'purple',
+        caption: 'Life',
+        thresholds: [2, 5, 10],
+        svg: shapes.square
+    },
 
-    Damage: { colour: 'white', caption: 'Damage', svg: shapes.circle },
+    Damage: {
-    RedDamageI: { colour: 'red', caption: 'DamageI', svg: shapes.circle },
+        colour: 'white',
-    BlueDamageI: { colour: 'blue', caption: 'DamageI', svg: shapes.circle },
+        caption: 'Damage',
-    GreenDamageI: { colour: 'green', caption: 'DamageI', svg: shapes.circle },
+        thresholds: [],
-    GRDI: { colour: 'yellow', caption: 'DamageI', svg: shapes.circle },
+        svg: shapes.circle
-    GBDI: { colour: 'cyan', caption: 'DamageI', svg: shapes.circle },
+    },
-    RBDI: { colour: 'purple', caption: 'DamageI', svg: shapes.circle },
+    RedDamageI: {
+        colour: 'red',
+        caption: 'DamageI',
+        thresholds: [5, 10, 20],
+        svg: shapes.circle
+    },
+    BlueDamageI: {
+        colour: 'blue',
+        caption: 'DamageI',
+        thresholds: [5, 10, 20],
+        svg: shapes.circle
+    },
+    GreenDamageI: {
+        colour: 'green',
+        caption: 'DamageI',
+        thresholds: [5, 10, 20],
+        svg: shapes.circle,
+    },
+    GRDI: {
+        colour: 'yellow',
+        caption: 'DamageI',
+        thresholds: [2, 5, 10],
+        svg: shapes.circle
+    },
+    GBDI: {
+        colour: 'cyan',
+        caption: 'DamageI',
+        thresholds: [2, 5, 10],
+        svg: shapes.circle,
+    },
+    RBDI: {
+        colour: 'purple',
+        caption: 'DamageI',
+        thresholds: [2, 5, 10],
+        svg: shapes.circle,
+    },
 
-    Speed: { colour: 'white', caption: 'Speed', svg: shapes.triangle },
+    Speed: {
-    RedSpeed: { colour: 'red', caption: 'Speed', svg: shapes.triangle },
+        colour: 'white',
-    BlueSpeedI: { colour: 'blue', caption: 'Speed', svg: shapes.triangle },
+        caption: 'Speed',
-    GreenSpeedI: { colour: 'green', caption: 'Speed', svg: shapes.triangle },
+        svg: shapes.triangle,
-    GRSpeedI: { colour: 'yellow', caption: 'Speed', svg: shapes.triangle },
+    },
-    GBSpeedI: { colour: 'cyan', caption: 'Speed', svg: shapes.triangle },
+    RedSpeedI: {
-    RBSpeedI: { colour: 'purple', caption: 'Speed', svg: shapes.triangle },
+        colour: 'red',
+        caption: 'Speed',
+        thresholds: [5, 10, 20],
+        svg: shapes.triangle,
+    },
+    BlueSpeedI: {
+        colour: 'blue',
+        caption: 'Speed',
+        thresholds: [2, 5, 10],
+        svg: shapes.triangle,
+    },
+    GreenSpeedI: {
+        colour: 'green',
+        caption: 'Speed',
+        thresholds: [2, 5, 10],
+        svg: shapes.triangle,
+    },
+    GRSpeedI: {
+        colour: 'yellow',
+        caption: 'Speed',
+        thresholds: [2, 5, 10],
+        svg: shapes.triangle,
+    },
+    GBSpeedI: {
+        colour: 'cyan',
+        caption: 'Speed',
+        thresholds: [2, 5, 10],
+        svg: shapes.triangle,
+    },
+    RBSpeedI: {
+        colour: 'purple',
+        caption: 'Speed',
+        thresholds: [2, 5, 10],
+        svg: shapes.triangle,
+    },
 
 };