joshua/bl3skills.com
1
0
Fork 0
mirror of https://github.com/seigler/bl3skills.com synced 2025-07-27 01:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

more style and layout improvements

Browse source
This commit is contained in:
Joshua Seigler 2019-05-06 18:27:11 -04:00
parent d79fbc28b4
commit fe0387aac8
8 changed files with 98 additions and 81 deletions
Download patch file Download diff file Expand all files Collapse all files

46
src/components/Nav/index.css
View file

@ -1,46 +0,0 @@
.nav {
align-self: stretch;
justify-content: center;
background-image: linear-gradient(
to bottom,
hsla(0, 0%, 0%, 0.5) 0%,
hsla(0, 0%, 0%, 0.494) 8.1%,
hsla(0, 0%, 0%, 0.476) 15.5%,
hsla(0, 0%, 0%, 0.448) 22.5%,
hsla(0, 0%, 0%, 0.412) 29%,
hsla(0, 0%, 0%, 0.37) 35.3%,
hsla(0, 0%, 0%, 0.324) 41.2%,
hsla(0, 0%, 0%, 0.275) 47.1%,
hsla(0, 0%, 0%, 0.225) 52.9%,
hsla(0, 0%, 0%, 0.176) 58.8%,
hsla(0, 0%, 0%, 0.13) 64.7%,
hsla(0, 0%, 0%, 0.088) 71%,
hsla(0, 0%, 0%, 0.052) 77.5%,
hsla(0, 0%, 0%, 0.024) 84.5%,
hsla(0, 0%, 0%, 0.006) 91.9%,
hsla(0, 0%, 0%, 0) 100%
);
}
.links {
display: flex;
flex-direction: row;
justify-content: center;
list-style: none;
}
.link {
color: inherit;
background-color: hsla(0, 0%, 0%, 0.25);
}
.link > a {
display: inline-block;
text-decoration: none;
padding: 0.5em;
}
.current, .link:hover, .link:focus {
background-color: #FED600;
color: black;
}

15
src/components/Nav/index.js
View file

@ -1,5 +1,4 @@
import { Link } from 'preact-router';
import style from './index.css';
export default function Nav ({ path }) {
const pages = [
@ -9,14 +8,12 @@ export default function Nav ({ path }) {
{ name: 'Moze', path: '/bot-jock' },
];
return (
<nav class={style.nav}>
<ul class={style.links}>
{ pages.map(page => {
return (<li class={`${style.link} ${path === page.path ? style.current : ''}`}>
<Link href={page.path}>{page.name}</Link>
</li>);
}) }
</ul>
<nav>
{
pages.map(page => (
path === page.path ? null : <Link href={page.path}>{page.name}</Link>
))
}
</nav>
);
}

3
src/components/Skill/index.css
View file

@ -139,6 +139,7 @@
display: none;
z-index: 10;
text-align: left;
font-size: 0.9rem;
}
.effect {
@ -154,7 +155,7 @@
padding: 0.5rem;
display: block;
position: absolute;
bottom: 110%;
bottom: 100%;
width: 20rem;
transform: translateX(calc((1 - var(--treeindex)) * 40%));
}

2
src/components/Skill/index.js
View file

@ -78,7 +78,7 @@ export default function Skill ({
{ type == null && invested < ranks &&
<div class={style.effect}>
Next Rank:<br />
{effect(invested, level)}
{effect(invested + 1, level)}
</div>
}
</div>

53
src/components/VaultHunter/index.css
View file

@ -5,6 +5,12 @@
cursor: default;
}
.header {
display: flex;
align-items: stretch;
margin: 1rem auto;
}
.title {
display: block;
margin: 0 auto;
@ -13,8 +19,6 @@
text-align: center;
font-size: 3rem;
color: hsl(51, 100%, 50%);
background-color: black;
padding: 0.2em;
line-height: 1;
}
.subtitle {
@ -22,6 +26,51 @@
font-size: 0.4em;
}
.sidepanel {
margin-left: 0.5rem;
display: flex;
flex-direction: column;
width: 5em;
}
.title, .level, .reset, .header > nav > a {
background-color: black;
padding: 0.5rem;
}
.level, .reset {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
}
.reset {
margin-top: 0.5rem;
cursor: pointer;
font-size: 0.8em;
}
.reset:hover {
color: white;
background-color: red;
}
.header > nav {
display: flex;
align-items: stretch;
}
.header > nav > a {
margin-left: 0.5rem;
writing-mode: vertical-rl;
text-orientation: mixed;
text-decoration: none;
color: hsl(51, 100%, 50%);
text-transform: uppercase;
font-weight: bold;
}
.header > nav > a:hover {
background-color: hsl(51, 100%, 50%);
color: black;
}
.trees, .tier {
display: flex;
}

28
src/components/VaultHunter/index.js
View file

@ -3,7 +3,7 @@ import { Component } from 'preact';
import Skill from '@components/Skill';
import Nav from '@components/Nav';
import Footer from '@components/Footer';
import { getHash } from './hashHandler';
import { getHash, setHash } from './hashHandler';
import reducer from './reducer';
import { getLevel } from './selectors';
import style from './index.css';
@ -32,7 +32,8 @@ export default class VaultHunter extends Component {
render ({
name = 'Unnamed',
discipline = 'Classless',
path
path,
skills: initialSkills,
}) {
const skillChangeListenerFactory = (skillName, treeIndex, treeName, tierIndex) => {
return (oldValue, newValue) => {
@ -48,6 +49,14 @@ export default class VaultHunter extends Component {
};
};
const resetSkills = () => {
setHash(initialSkills);
this.setState({
invested: [0, 0, 0],
skills: initialSkills || {},
});
};
const trees =
Object.keys(this.state.skills).map((treeName, treeIndex) => {
return (
@ -62,6 +71,7 @@ export default class VaultHunter extends Component {
{...this.state.skills[treeName][tier][skillName]}
name={skillName}
enabled={this.state.invested[treeIndex] >= 5 * tierIndex - 5}
level={getLevel(this.state)}
onChange={skillChangeListenerFactory(skillName, treeIndex, treeName, tierIndex)}
/>
) }
@ -74,12 +84,18 @@ export default class VaultHunter extends Component {
return (
<div>
<Nav path={path} />
<div class={style.header}>
<h1 class={style.title}>{ name }
<div class={style.subtitle}>the { discipline }</div>
</h1>
<div class={style.sidepanel}>
<div class={style.level}>Level { getLevel(this.state) + 2 }</div>
<div class={style.reset}><a onClick={resetSkills}>Reset</a></div>
</div>
<Nav path={path} />
</div>
<main>
<div class={style.VaultHunter} onContextMenu={contextKiller}>
<h1 class={style.title}>{ name }
<div class={style.subtitle}>the { discipline }</div>
</h1>
<div class={style.trees}>
{ trees }
</div>

12
src/pages/Operative/skills.js
View file

@ -4,7 +4,7 @@ function percent (rank, unit) {
return Math.round(rank * unit * 10) / 10;
}
function flat (rank, level, unit) {
return Math.round(rank * unit * (level ** 1.09));
return Math.floor(rank * unit * (1.09 ** level));
}
/* eslint-disable quotes */
@ -12,7 +12,7 @@ const skills = {
"Under Cover": {
"0": {
"Barrier": {
text: "Drop a deployable Barrier that blocks incoming projectiles. Zane and his allies can shooter through the Barrier, dealing increased Gun Damage. Pressing LB or RB (controller) while Barrier is active picks up and holds the Barrier, but the size and bonuses are decreased.",
text: "Drop a deployable Barrier that blocks incoming projectiles. Zane and his allies can shoot through the Barrier, dealing increased Gun Damage. Pressing LB or RB (controller) while Barrier is active picks up and holds the Barrier, but the size and bonuses are decreased.",
effect: (rank, level) => `Duration 9 sec, Cooldown 18 sec, Damage Amp +20%`,
type: SKILLS.ACTION_SKILL,
ranks: 0,
@ -182,7 +182,7 @@ const skills = {
"Bad Dose": {
text: "SNTNL occasionally shoots out a beam of Radiation that weakens enemies and buffs Zane.",
ranks: 0,
effect: (rank, level) => `Fire Rate +3% per enemy, Movement Speed +6% per enemy, Damage 2, Duration 12 sec, Cooldown 8 sec`,
effect: (rank, level) => `Fire Rate +3% per enemy, Movement Speed +6% per enemy, Damage ${flat(rank, level, 2)}, Duration 12 sec, Cooldown 8 sec`,
type: SKILLS.AUGMENT_CHEVRON,
},
"Seein' Red": {
@ -192,7 +192,7 @@ const skills = {
"Static Field": {
text: "SNTNL emits a static field that sends a Shock beam to nearby enemies, draining their shields and replenishing Zane's.",
ranks: 0,
effect: (rank, level) => `Shield Damage 2 per sec, Cooldown 2 sec`,
effect: (rank, level) => `Shield Damage ${flat(rank, level, 2)} per sec, Cooldown 2 sec`,
type: SKILLS.AUGMENT_CHEVRON,
},
},
@ -200,7 +200,7 @@ const skills = {
"Boomsday": {
text: "SNTNL adds a rocket pod to its primary weapons, allowing it to shoot rockets as well as machine guns.",
ranks: 0,
effect: (rank, level) => `Rocket Damage 50`,
effect: (rank, level) => `Rocket Damage ${flat(rank, level, 50)}`,
type: SKILLS.AUGMENT_CHEVRON,
},
"Violent Violence": {
@ -216,7 +216,7 @@ const skills = {
"Almighty Ordnance": {
text: "Hold down LB or RB (controller) while SNTNL is deployed to paint a target area. SNTNL fires a missile barrage at that area, and if an enemy is killed, Almighty Ordnance's duration is reset. This can only be used once per Action Skill use.",
ranks: 0,
effect: (rank, level) => `Missile Damage 25, 5 Missiles per Barrage`,
effect: (rank, level) => `Missile Damage ${flat(rank, level, 25)}, 5 Missiles per Barrage`,
type: SKILLS.AUGMENT_CHEVRON,
},
},

20
src/pages/Siren/skills.js
View file

@ -4,7 +4,7 @@ function percent (rank, unit) {
return Math.round(rank * unit * 10) / 10;
}
function flat (rank, level, unit) {
return Math.round(rank * unit * (level ** 1.09));
return Math.floor(rank * unit * (1.09 ** level));
}
/* eslint-disable quotes */
@ -62,7 +62,7 @@ const skills = {
"Fracture": {
ranks: 0,
text: "Amara summons a Handful of Fists that erupt from the ground, dealing damage in front of Amara.",
effect: (rank, level) => `Damage 124, Cooldown 26 sec`,
effect: (rank, level) => `Damage ${flat(rank, level, 124)}, Cooldown 26 sec`,
type: SKILLS.ACTION_SKILL,
},
"Mindfulness": {
@ -83,7 +83,7 @@ const skills = {
"Revelation": {
ranks: 0,
text: "Amara's Action Skill now creates a Nova when it damages enemies, dealing damage to all nearby enemies.",
effect: (rank, level) => `Nova Damage 41, Action Skill Damage -15%`,
effect: (rank, level) => `Nova Damage ${flat(rank, level, 41)}, Action Skill Damage -15%`,
type: SKILLS.AUGMENT_CHEVRON,
},
},
@ -91,7 +91,7 @@ const skills = {
"Downfall": {
ranks: 0,
text: "Amara leaps into the air and shoots an Elemental Beam below her, followed by a Slam.",
effect: (rank, level) => `Damage 141, Beam Damage 21 per sec, Cooldown 36 sec`,
effect: (rank, level) => `Damage ${flat(rank, level, 141)}, Beam Damage ${flat(rank, level, 21)} per sec, Cooldown 36 sec`,
type: SKILLS.ACTION_SKILL,
},
"Samsara": {
@ -104,7 +104,7 @@ const skills = {
"Do Unto Others": {
ranks: 1,
text: "Upon taking damage, automatically throw an Energy Orb back at enemy, dealing Action Skill Elemental Damage.",
effect: (rank, level) => `Projectile Damage 17, Cooldown 8 sec`,
effect: (rank, level) => `Projectile Damage ${flat(rank, level, 17)}, Cooldown 8 sec`,
},
"Jab Cross": {
ranks: 5,
@ -203,7 +203,7 @@ const skills = {
"Deliverance": {
ranks: 0,
text: "Amara sends forward an Astral Projection of herself that deals damage to everything in its path. Upon hitting enemies, it releases homing Elemental Projectiles that trigger Action Skill Elemental Effect on enemies.",
effect: (rank, level) => `Damage 124, Elemental Projectiles 3 per enemy hit, Cooldown 24 sec`,
effect: (rank, level) => `Damage ${flat(rank, level, 124)}, Elemental Projectiles 3 per enemy hit, Cooldown 24 sec`,
type: SKILLS.ACTION_SKILL,
},
"From Rest": {
@ -236,7 +236,7 @@ const skills = {
"Tandava": {
ranks: 0,
text: "Amara sends forward an Astral Projection of herself that explodes when it hits a target, damaging all nearby enemies.",
effect: (rank, level) => `Damage: 166, Cooldown 28 sec`,
effect: (rank, level) => `Damage: ${flat(rank, level, 166)}, Cooldown 28 sec`,
type: SKILLS.ACTION_SKILL,
},
},
@ -300,7 +300,7 @@ const skills = {
"The Eternal Fist": {
ranks: 0,
text: "Amara summons a giant fist that bursts into the ground and locks targeted enemy in place. If Grasped enemy is killed, up to 3 new targets can be Grasped as well.",
effect: (rank, level) => `Bonus Targets up to +4, Cooldown 23 sec, Grasp Immune Damage 66`,
effect: (rank, level) => `Bonus Targets up to +4, Cooldown 23 sec, Grasp Immune Damage ${flat(rank, level, 66)}`,
type: SKILLS.ACTION_SKILL,
},
"Dread": {
@ -334,7 +334,7 @@ const skills = {
"Ties That Bind": {
ranks: 0,
text: "Amara summons a giant fist that bursts from the ground and locks targeted enemy in place. Enemies near Grasped target are linked, and any damage dealt to a linked target is shared between all links.",
effect: (rank, level) => `Link Damage 35% of damage dealt, Cooldown 17 sec, Grasp Immune Damage 80`,
effect: (rank, level) => `Link Damage 35% of damage dealt, Cooldown 17 sec, Grasp Immune Damage ${flat(rank, level, 80)}`,
type: SKILLS.ACTION_SKILL,
},
},
@ -342,7 +342,7 @@ const skills = {
"Fist Over Matter": {
ranks: 0,
text: "Amara summons a giant fist that bursts from the ground and locks targeted enemy in place. After Grasping, large fists appear to smash the area, dealing damage to nearby enemies.",
effect: (rank, level) => `Damage 21, Cooldown 31 sec, Grasp Immune Damage 93`,
effect: (rank, level) => `Damage ${flat(rank, level, 21)}, Cooldown 31 sec, Grasp Immune Damage ${flat(rank, level, 93)}`,
type: SKILLS.ACTION_SKILL,
},
"Sustainment": {