wip added svg icons into description strings

This commit is contained in:
Mashy 2019-08-14 00:51:01 +10:00
parent fe56528b3f
commit 8a74d9e3c4
4 changed files with 71 additions and 56 deletions

View File

@ -55,6 +55,11 @@
text-transform: uppercase; text-transform: uppercase;
} }
.instance .info svg {
display: inline;
height: 1.25em;
}
.instance .constructs { .instance .constructs {
grid-area: constructs; grid-area: constructs;
} }

View File

@ -28,6 +28,7 @@
"preact-compat": "^3.19.0", "preact-compat": "^3.19.0",
"preact-context": "^1.1.3", "preact-context": "^1.1.3",
"preact-redux": "^2.1.0", "preact-redux": "^2.1.0",
"react-string-replace": "^0.4.4",
"react-stripe-elements": "^3.0.0", "react-stripe-elements": "^3.0.0",
"redux": "^4.0.0" "redux": "^4.0.0"
}, },

View File

@ -1,5 +1,6 @@
const preact = require('preact'); const preact = require('preact');
const range = require('lodash/range'); const range = require('lodash/range');
const reactStringReplace = require('react-string-replace');
const { INFO } = require('./../constants'); const { INFO } = require('./../constants');
const { convertItem } = require('../utils'); const { convertItem } = require('../utils');
@ -24,10 +25,15 @@ function InfoComponent(args) {
const isSpec = fullInfo.spec; const isSpec = fullInfo.spec;
if (isSkill) { if (isSkill) {
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
const infoDescription = reactStringReplace(fullInfo.description, regEx, match => {
return shapes[match]();
});
return ( return (
<div class="info-skill"> <div class="info-skill">
<h2>{fullInfo.item}</h2> <h2>{fullInfo.item}</h2>
<div>{fullInfo.description}</div> <div> {infoDescription} </div>
</div> </div>
); );
} }
@ -103,11 +109,15 @@ function InfoComponent(args) {
</div> </div>
); );
}); });
const regEx = /(RedPower|BluePower|GreenPower|RedLife|BlueLife|GreenLife|SpeedStat)/;
const infoDescription = reactStringReplace(fullInfo.description, regEx, match => {
return shapes[match]();
});
return ( return (
<div class="info-spec"> <div class="info-spec">
<h2>{info}</h2> <h2>{info}</h2>
<div>{fullInfo.description}</div> <div>{infoDescription}</div>
<div class="thresholds"> <div class="thresholds">
{thresholds} {thresholds}
</div> </div>

View File

@ -479,75 +479,74 @@ impl Item {
Item::Red => format!("Combine with skills and specs to create upgraded items. \n Speed and chaos."), Item::Red => format!("Combine with skills and specs to create upgraded items. \n Speed and chaos."),
// base skills // base skills
Item::Attack => format!("Deal RedDamage based on {:?}% RedPower", Item::Attack => format!("Deal {:?}% RedPower as red damage",
self.into_skill().unwrap().multiplier()), self.into_skill().unwrap().multiplier()),
Item::Block => format!("Reduce incoming RedDamage by {:?}%", Item::Block => format!("Reduce red damage taken by {:?}%",
100 - self.into_skill().unwrap().effect()[0].get_multiplier()), 100 - self.into_skill().unwrap().effect()[0].get_multiplier()),
Item::Stun => format!("Stun target construct for {:?}T", Item::Stun => format!("Stun target construct for {:?}T",
self.into_skill().unwrap().effect()[0].get_duration()), self.into_skill().unwrap().effect()[0].get_duration()),
Item::Buff => format!("Increase target construct RedPower and speed by {:?}%", Item::Buff => format!("Increase target construct RedPower and SpeedStat by {:?}%",
self.into_skill().unwrap().effect()[0].get_multiplier() - 100), self.into_skill().unwrap().effect()[0].get_multiplier() - 100),
Item::Debuff => format!("Slow target construct speed by {:?}%", Item::Debuff => format!("Slow target construct SpeedStat by {:?}%",
100 - self.into_skill().unwrap().effect()[0].get_multiplier()), 100 - self.into_skill().unwrap().effect()[0].get_multiplier()),
// specs // specs
// Base // Base
Item::Power => format!("Base ITEM for increased Power. Power determines the damage caused by your SKILLS."), Item::Power => format!("Base item for increased power. Power determines the damage caused by your skills."),
Item::Life => format!("Base ITEM for increased LIFE. Item::Life => format!("Base item for increased life.
When your CONSTRUCT reaches 0 GreenLife it becomes KO and cannot cast SKILLS."), When your construct reaches 0 GreenLife it is knocked out and cannot cast skills."),
Item::Speed => format!("Base ITEM for increased SPEED. Item::Speed => format!("Base item for increased speed.
SPEED determines the order in which skills resolve. Speed SpeedStat determines the order in which skills resolve."),
Some SKILLS (such as STRIKE) have their damage increased by SPEED."),
// Lifes Upgrades // Lifes Upgrades
Item::LifeGG=> format!("Increases CONSTRUCT GreenLife. Item::LifeGG=> format!("Increases construct GreenLife.
When your CONSTRUCT reaches 0 GreenLife it becomes KO and cannot cast SKILLS."), When your construct reaches 0 GreenLife it is knocked out and cannot cast skills."),
Item::LifeRR=> format!("Increases CONSTRUCT RedLife. Item::LifeRR=> format!("Increases construct RedLife.
RedDamage dealt to your construct reduces RedLife before GreenLife."), RedLife mitigates red damage that would otherwise reduce your GreenLife."),
Item::LifeBB=> format!("Increases CONSTRUCT BlueLife. Item::LifeBB=> format!("Increases construct BlueLife.
BlueDamage dealt to your construct reduces BlueLife before GreenLife."), BlueDamage dealt to your construct reduces BlueLife before GreenLife."),
Item::LifeRG=> format!("Increases CONSTRUCT GreenLife + RedLife"), Item::LifeRG=> format!("Increases construct GreenLife and RedLife"),
Item::LifeGB=> format!("Increases CONSTRUCT GreenLife + BlueLife"), Item::LifeGB=> format!("Increases construct GreenLife and BlueLife"),
Item::LifeRB=> format!("Increases CONSTRUCT RedLife + BlueLife"), Item::LifeRB=> format!("Increases construct RedLife and BlueLife"),
Item::LifeGGPlus => format!("Increases CONSTRUCT GreenLife. Item::LifeGGPlus => format!("Increases construct GreenLife.
When your CONSTRUCT reaches 0 GreenLife it becomes KO and cannot cast SKILLS."), When your construct reaches 0 GreenLife it becomes KO and cannot cast SKILLS."),
Item::LifeRRPlus => format!("Increases CONSTRUCT RedLife. Item::LifeRRPlus => format!("Increases construct RedLife.
RedDamage dealt to your construct reduces RedLife before GreenLife."), RedDamage dealt to your construct reduces RedLife before GreenLife."),
Item::LifeBBPlus => format!("Increases CONSTRUCT BlueLife. Item::LifeBBPlus => format!("Increases construct BlueLife.
BlueDamage dealt to your construct reduces BlueLife before GreenLife."), BlueDamage dealt to your construct reduces BlueLife before GreenLife."),
Item::LifeRGPlus => format!("Increases CONSTRUCT GreenLife + RedLife"), Item::LifeRGPlus => format!("Increases construct GreenLife and RedLife"),
Item::LifeGBPlus => format!("Increases CONSTRUCT GreenLife + BlueLife"), Item::LifeGBPlus => format!("Increases construct GreenLife and BlueLife"),
Item::LifeRBPlus => format!("Increases CONSTRUCT RedLife + BlueLife"), Item::LifeRBPlus => format!("Increases construct RedLife and BlueLife"),
Item::LifeGGPlusPlus => format!("Increases CONSTRUCT GreenLife. Item::LifeGGPlusPlus => format!("Increases construct GreenLife.
When your CONSTRUCT reaches 0 GreenLife it becomes KO and cannot cast SKILLS."), When your construct reaches 0 GreenLife it becomes KO and cannot cast SKILLS."),
Item::LifeRRPlusPlus => format!("Increases CONSTRUCT RedLife. Item::LifeRRPlusPlus => format!("Increases construct RedLife.
RedDamage dealt to your construct reduces RedLife before GreenLife."), RedDamage dealt to your construct reduces RedLife before GreenLife."),
Item::LifeBBPlusPlus => format!("Increases CONSTRUCT BlueLife. Item::LifeBBPlusPlus => format!("Increases construct BlueLife.
BlueDamage dealt to your construct reduces BlueLife before GreenLife."), BlueDamage dealt to your construct reduces BlueLife before GreenLife."),
Item::LifeRGPlusPlus => format!("Increases CONSTRUCT GreenLife + RedLife"), Item::LifeRGPlusPlus => format!("Increases construct GreenLife and RedLife"),
Item::LifeGBPlusPlus => format!("Increases CONSTRUCT GreenLife + BlueLife"), Item::LifeGBPlusPlus => format!("Increases construct GreenLife and BlueLife"),
Item::LifeRBPlusPlus => format!("Increases CONSTRUCT RedLife + BlueLife"), Item::LifeRBPlusPlus => format!("Increases construct RedLife and BlueLife"),
// Power Upgrades // Power Upgrades
Item::PowerRR=> format!("Increases CONSTRUCT RedPower."), Item::PowerRR=> format!("Increases construct RedPower."),
Item::PowerBB=> format!("Increases CONSTRUCT BluePower."), Item::PowerBB=> format!("Increases construct BluePower."),
Item::PowerGG=> format!("Increases CONSTRUCT GreenPower."), Item::PowerGG=> format!("Increases construct GreenPower."),
Item::PowerRG=> format!("Increases CONSTRUCT GreenPower + RedPower."), Item::PowerRG=> format!("Increases construct GreenPower and RedPower."),
Item::PowerGB=> format!("Increases CONSTRUCT GreenPower + BluePower."), Item::PowerGB=> format!("Increases construct GreenPower and BluePower."),
Item::PowerRB=> format!("Increases CONSTRUCT RedPower + BluePower."), Item::PowerRB=> format!("Increases construct RedPower and BluePower."),
Item::PowerRRPlus => format!("Increases CONSTRUCT RedPower."), Item::PowerRRPlus => format!("Increases construct RedPower."),
Item::PowerBBPlus => format!("Increases CONSTRUCT BluePower."), Item::PowerBBPlus => format!("Increases construct BluePower."),
Item::PowerGGPlus => format!("Increases CONSTRUCT GreenPower."), Item::PowerGGPlus => format!("Increases construct GreenPower."),
Item::PowerRGPlus => format!("Increases CONSTRUCT GreenPower + RedPower."), Item::PowerRGPlus => format!("Increases construct GreenPower and RedPower."),
Item::PowerGBPlus => format!("Increases CONSTRUCT GreenPower + BluePower."), Item::PowerGBPlus => format!("Increases construct GreenPower and BluePower."),
Item::PowerRBPlus => format!("Increases CONSTRUCT RedPower + BluePower."), Item::PowerRBPlus => format!("Increases construct RedPower and BluePower."),
Item::PowerRRPlusPlus => format!("Increases CONSTRUCT RedPower."), Item::PowerRRPlusPlus => format!("Increases construct RedPower."),
Item::PowerBBPlusPlus => format!("Increases CONSTRUCT BluePower."), Item::PowerBBPlusPlus => format!("Increases construct BluePower."),
Item::PowerGGPlusPlus => format!("Increases CONSTRUCT GreenPower."), Item::PowerGGPlusPlus => format!("Increases construct GreenPower."),
Item::PowerRGPlusPlus => format!("Increases CONSTRUCT GreenPower + RedPower."), Item::PowerRGPlusPlus => format!("Increases construct GreenPower and RedPower."),
Item::PowerGBPlusPlus => format!("Increases CONSTRUCT GreenPower + BluePower."), Item::PowerGBPlusPlus => format!("Increases construct GreenPower and BluePower."),
Item::PowerRBPlusPlus => format!("Increases CONSTRUCT RedPower + BluePower."), Item::PowerRBPlusPlus => format!("Increases construct RedPower and BluePower."),
// Speed Upgrades // Speed Upgrades
Item::SpeedRR| Item::SpeedRR|
@ -567,12 +566,12 @@ impl Item {
Item::SpeedGGPlusPlus | Item::SpeedGGPlusPlus |
Item::SpeedRGPlusPlus | Item::SpeedRGPlusPlus |
Item::SpeedGBPlusPlus | Item::SpeedGBPlusPlus |
Item::SpeedRBPlusPlus => format!("Increases CONSTRUCT SPEED and provides COLOUR BONUSES"), Item::SpeedRBPlusPlus => format!("Increases construct SpeedStat and provides COLOUR BONUSES"),
// Skills <- need to move effect mulltipliers into skills // Skills <- need to move effect mulltipliers into skills
Item::Amplify| Item::Amplify|
Item::AmplifyPlus | Item::AmplifyPlus |
Item::AmplifyPlusPlus => format!("Increase red and blue power by {:?}%. Lasts {:?}T", Item::AmplifyPlusPlus => format!("Increase RedPower and BluePower by {:?}%. Lasts {:?}T",
self.into_skill().unwrap().effect()[0].get_multiplier() - 100, self.into_skill().unwrap().effect()[0].get_multiplier() - 100,
self.into_skill().unwrap().effect()[0].get_duration()), self.into_skill().unwrap().effect()[0].get_duration()),
@ -584,7 +583,7 @@ impl Item {
Item::Blast| Item::Blast|
Item::BlastPlus | Item::BlastPlus |
Item::BlastPlusPlus => format!("Deals Blue Damage {:?}% Blue Power.", self.into_skill().unwrap().multiplier()), Item::BlastPlusPlus => format!("Deals {:?}% BluePower as blue damage.", self.into_skill().unwrap().multiplier()),
Item::Chaos| Item::Chaos|
Item::ChaosPlus | Item::ChaosPlus |
@ -719,7 +718,7 @@ impl Item {
Item::Slay| Item::Slay|
Item::SlayPlus | Item::SlayPlus |
Item::SlayPlusPlus => format!( Item::SlayPlusPlus => format!(
"Deals RedDamage {:?}% RedPower and provides self healing based on damage dealt.", "Deals {:?}% RedPower as red damage and provides self healing based on damage dealt.",
self.into_skill().unwrap().multiplier()), self.into_skill().unwrap().multiplier()),
Item::Sleep| Item::Sleep|