mirror of
https://github.com/seigler/bl3skills.com
synced 2025-07-27 09:46:10 +00:00
show invested amount
This commit is contained in:
Joshua Seigler
parent
b233594643
commit
d0b516e662
4 changed files with 152 additions and 106 deletions
83
src/components/Skill/index.css
Normal file
83
src/components/Skill/index.css
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
.skill {
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
margin: 0.5rem;
|
||||||
|
padding: 0rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
width: 2.5rem;
|
||||||
|
line-height: 1;
|
||||||
|
display: flex;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: white;
|
||||||
|
filter: brightness(50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill.enabled {
|
||||||
|
filter: brightness(100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill:before {
|
||||||
|
content: '';
|
||||||
|
background-color: #333;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.skill.usable:before {
|
||||||
|
background-color: #A70;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionSkill:before {
|
||||||
|
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chevron:before {
|
||||||
|
clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 75%, 50% 100%, 0 75%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.diamond:before {
|
||||||
|
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.augment, .actionSkill {
|
||||||
|
margin: 0.25rem;
|
||||||
|
padding: 0.25rem;
|
||||||
|
height: 3em;
|
||||||
|
width: 3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.augment {
|
||||||
|
outline: calc(0.25em + 1px) solid var(--themeColor);
|
||||||
|
background-color: var(--themeColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.augment:first-child {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.augment:last-child {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.augment:only-child {
|
||||||
|
position: relative;
|
||||||
|
background-color: transparent;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranks {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -0.25rem;
|
||||||
|
right: -0.25rem;
|
||||||
|
font-size: 0.75em;
|
||||||
|
background-color: #333;
|
||||||
|
padding: 0.1em;
|
||||||
|
}
|
||||||
40
src/components/Skill/index.js
Normal file
40
src/components/Skill/index.js
Normal file
|
|
@ -0,0 +1,40 @@
|
||||||
|
// import { useState } from 'preact/hooks';
|
||||||
|
import SKILLS from '@constants/skills';
|
||||||
|
import style from './index.css';
|
||||||
|
|
||||||
|
function getInitials (string) {
|
||||||
|
const initials = string.match(/\b\w/g) || [];
|
||||||
|
return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function VaultHunter ({
|
||||||
|
name = '?',
|
||||||
|
text = 'Long description',
|
||||||
|
ranks = 0,
|
||||||
|
invested = 0,
|
||||||
|
effect = rank => `Rank ${rank} effect`,
|
||||||
|
type = null,
|
||||||
|
enabled = true,
|
||||||
|
}) {
|
||||||
|
const isAugment = [
|
||||||
|
SKILLS.AUGMENT_CHEVRON,
|
||||||
|
SKILLS.AUGMENT_DIAMOND,
|
||||||
|
SKILLS.ACTION_SKILL,
|
||||||
|
].includes(type);
|
||||||
|
let shapeStyle = null;
|
||||||
|
if (type === SKILLS.AUGMENT_CHEVRON) { shapeStyle = style.chevron; }
|
||||||
|
if (type === SKILLS.AUGMENT_DIAMOND) { shapeStyle = style.diamond; }
|
||||||
|
if (type === SKILLS.ACTION_SKILL) { shapeStyle = style.actionSkill; }
|
||||||
|
return (
|
||||||
|
<div class={[
|
||||||
|
style.skill,
|
||||||
|
isAugment ? style.augment : '',
|
||||||
|
shapeStyle,
|
||||||
|
enabled ? style.enabled : '',
|
||||||
|
enabled && (ranks === 0 || invested > 0) ? style.usable : '',
|
||||||
|
].join(' ')}>
|
||||||
|
{ getInitials(name) }
|
||||||
|
{ enabled && ranks > 0 && <div class={style.ranks}>{invested}/{ranks}</div>}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -13,16 +13,18 @@
|
||||||
color: white;
|
color: white;
|
||||||
order: 1;
|
order: 1;
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
line-height: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tree {
|
.tree {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 1rem;
|
margin: 1rem;
|
||||||
background-image: linear-gradient(0deg, var(--themeColor), var(--themeColor));
|
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||||
background-size: calc(3.5rem * 3) calc(100% - 1.5rem);
|
linear-gradient(0deg, var(--themeColor), var(--themeColor));
|
||||||
background-repeat: no-repeat;
|
background-size: calc(3.5rem * 3) calc((25 - var(--invested)) / 5 * 3.5rem + 1rem), calc(3.5rem * 3) calc(100% - 1.5rem);
|
||||||
background-position: center bottom;
|
background-repeat: no-repeat, no-repeat;
|
||||||
|
background-position: center bottom, center bottom;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tier {
|
.tier {
|
||||||
|
|
@ -31,76 +33,6 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.skill {
|
|
||||||
position: relative;
|
|
||||||
z-index: 1;
|
|
||||||
flex: 0 1 auto;
|
|
||||||
margin: 0.5rem;
|
|
||||||
padding: 0rem;
|
|
||||||
height: 2.5rem;
|
|
||||||
width: 2.5rem;
|
|
||||||
line-height: 1;
|
|
||||||
display: flex;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill:before {
|
|
||||||
content: '';
|
|
||||||
background-color: #333;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
z-index: -1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.skill.bought:before {
|
|
||||||
background-color: #A70;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actionSkill:before {
|
|
||||||
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chevron:before {
|
|
||||||
clip-path: polygon(0 0, 50% 25%, 100% 0, 100% 75%, 50% 100%, 0 75%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.diamond:before {
|
|
||||||
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.augment, .actionSkill {
|
|
||||||
margin: 0.25rem;
|
|
||||||
padding: 0.25rem;
|
|
||||||
height: 3em;
|
|
||||||
width: 3em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.augment {
|
|
||||||
outline: 0.25em solid var(--themeColor);
|
|
||||||
background-color: var(--themeColor);
|
|
||||||
}
|
|
||||||
|
|
||||||
.augment:first-child {
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
.augment:last-child {
|
|
||||||
position: absolute;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.augment:only-child {
|
|
||||||
position: relative;
|
|
||||||
background-color: transparent;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blue {
|
.blue {
|
||||||
--themeColor: #007;
|
--themeColor: #007;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,42 +1,33 @@
|
||||||
import { useState } from 'preact/hooks';
|
import { useState } from 'preact/hooks';
|
||||||
import SKILLS from '@constants/skills';
|
import Skill from '@components/Skill';
|
||||||
import style from './index.css';
|
import style from './index.css';
|
||||||
|
|
||||||
function getInitials (string) {
|
const initialState = {
|
||||||
const initials = string.match(/\b\w/g) || [];
|
invested: [12, 0, 20],
|
||||||
return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
|
};
|
||||||
}
|
|
||||||
|
|
||||||
export default function VaultHunter ({ name = 'Unnamed', discipline = 'Classless', skills = {}, }) {
|
export default function VaultHunter ({
|
||||||
const [build] = useState(skills);
|
name = 'Unnamed',
|
||||||
|
discipline = 'Classless',
|
||||||
|
skills = {},
|
||||||
|
}) {
|
||||||
|
const [build] = useState(initialState);
|
||||||
const trees =
|
const trees =
|
||||||
Object.keys(build).map((treename, treeindex) =>
|
Object.keys(skills).map((treename, treeindex) =>
|
||||||
<div class={`${style.tree} ${[style.green, style.blue, style.red][treeindex]}`}>
|
<div
|
||||||
|
class={`${style.tree} ${[style.green, style.blue, style.red][treeindex]}`}
|
||||||
|
style={{ '--invested': build.invested[treeindex] }}
|
||||||
|
>
|
||||||
<h2 class={style.treeName}>{ treename }</h2>
|
<h2 class={style.treeName}>{ treename }</h2>
|
||||||
{ Object.keys(build[treename]).map((tier, tierindex) =>
|
{ Object.keys(skills[treename]).map((tier, tierindex) =>
|
||||||
<div class={style.tier}>
|
<div class={style.tier}>
|
||||||
{ Object.keys(build[treename][tier]).map(skillname => {
|
{ Object.keys(skills[treename][tier]).map(
|
||||||
const skill = build[treename][tier][skillname];
|
skillname => <Skill
|
||||||
const isAugment = [
|
{...skills[treename][tier][skillname]}
|
||||||
SKILLS.AUGMENT_CHEVRON,
|
name={skillname}
|
||||||
SKILLS.AUGMENT_DIAMOND,
|
enabled={build.invested[treeindex] >= 5 * tierindex - 5}
|
||||||
SKILLS.ACTION_SKILL,
|
/>
|
||||||
].includes(skill.type);
|
) }
|
||||||
let shapeStyle = null;
|
|
||||||
if (skill.type === SKILLS.AUGMENT_CHEVRON) { shapeStyle = style.chevron; }
|
|
||||||
if (skill.type === SKILLS.AUGMENT_DIAMOND) { shapeStyle = style.diamond; }
|
|
||||||
if (skill.type === SKILLS.ACTION_SKILL) { shapeStyle = style.actionSkill; }
|
|
||||||
return (
|
|
||||||
<div class={[
|
|
||||||
style.skill,
|
|
||||||
isAugment ? style.augment : '',
|
|
||||||
shapeStyle,
|
|
||||||
skill.bought ? style.bought : '',
|
|
||||||
].join(' ')}>
|
|
||||||
{ getInitials(skillname) }
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}) }
|
|
||||||
</div>
|
</div>
|
||||||
) }
|
) }
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue