From 6751254a9114cc54ed4d0765e5c70f2d3c15a33e Mon Sep 17 00:00:00 2001 From: ntr Date: Tue, 21 May 2019 16:31:41 +1000 Subject: [PATCH] vbox sizing --- CHANGELOG.md | 4 + client/assets/styles/styles.css | 3 +- client/src/components/info.component.jsx | 7 +- client/src/constants.jsx | 322 ----------------------- client/src/utils.jsx | 187 +++++++++++-- 5 files changed, 169 insertions(+), 354 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index aa8040cb..6598fa6d 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/client/assets/styles/styles.css b/client/assets/styles/styles.css index c605a92a..27c33658 100644 --- a/client/assets/styles/styles.css +++ b/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; } diff --git a/client/src/components/info.component.jsx b/client/src/components/info.component.jsx index 82ede657..15d86923 100644 --- a/client/src/components/info.component.jsx +++ b/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 colourReqs = SPEC_CONSTANT[info].colours || []; + const breaks = SPECS[info].thresholds; + const colourReqs = SPECS[info].colours || []; const thresholdEl = colourReqs.map((c, i) => { const numIcons = Math.max(...breaks); diff --git a/client/src/constants.jsx b/client/src/constants.jsx index f6b5f8df..2ea4f472 100644 --- a/client/src/constants.jsx +++ b/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', - }, - }, - }, }; diff --git a/client/src/utils.jsx b/client/src/utils.jsx index 15d63886..c3c0ae02 100644 --- a/client/src/utils.jsx +++ b/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 }, - greenDamage: { 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 }, + redDamage: { + stat: 'red_damage', + colour: 'red', + svg: shapes.circle, + }, + greenDamage: { + 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 }, - GreenLifeI: { colour: 'green', caption: 'Life', svg: shapes.square }, - RedLifeI: { colour: 'red', caption: 'Life', svg: shapes.square }, - BlueLifeI: { colour: 'blue', caption: 'Life', svg: shapes.square }, - GRLI: { colour: 'yellow', caption: 'Life', svg: shapes.square }, - GBLI: { colour: 'cyan', caption: 'Life', svg: shapes.square }, - RBLI: { colour: 'purple', caption: 'Life', svg: shapes.square }, + Life: { + colour: 'white', + caption: 'Life', + svg: shapes.square + }, + GreenLifeI: { + 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 }, - RedDamageI: { colour: 'red', caption: 'DamageI', svg: shapes.circle }, - BlueDamageI: { colour: 'blue', caption: 'DamageI', svg: shapes.circle }, - GreenDamageI: { colour: 'green', caption: 'DamageI', svg: shapes.circle }, - GRDI: { colour: 'yellow', caption: 'DamageI', svg: shapes.circle }, - GBDI: { colour: 'cyan', caption: 'DamageI', svg: shapes.circle }, - RBDI: { colour: 'purple', caption: 'DamageI', svg: shapes.circle }, + Damage: { + colour: 'white', + caption: 'Damage', + thresholds: [], + 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 }, - RedSpeed: { colour: 'red', caption: 'Speed', svg: shapes.triangle }, - BlueSpeedI: { colour: 'blue', caption: 'Speed', svg: shapes.triangle }, - GreenSpeedI: { colour: 'green', caption: 'Speed', svg: shapes.triangle }, - GRSpeedI: { colour: 'yellow', caption: 'Speed', svg: shapes.triangle }, - GBSpeedI: { colour: 'cyan', caption: 'Speed', svg: shapes.triangle }, - RBSpeedI: { colour: 'purple', caption: 'Speed', svg: shapes.triangle }, + Speed: { + colour: 'white', + caption: 'Speed', + svg: shapes.triangle, + }, + RedSpeedI: { + 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, + }, };