mirror of
https://github.com/seigler/bl3skills.com
synced 2025-07-27 01:36:12 +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;
|
||||
order: 1;
|
||||
font-size: 1em;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
.tree {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 1rem;
|
||||
background-image: linear-gradient(0deg, var(--themeColor), var(--themeColor));
|
||||
background-size: calc(3.5rem * 3) calc(100% - 1.5rem);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center bottom;
|
||||
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
|
||||
linear-gradient(0deg, var(--themeColor), var(--themeColor));
|
||||
background-size: calc(3.5rem * 3) calc((25 - var(--invested)) / 5 * 3.5rem + 1rem), calc(3.5rem * 3) calc(100% - 1.5rem);
|
||||
background-repeat: no-repeat, no-repeat;
|
||||
background-position: center bottom, center bottom;
|
||||
}
|
||||
|
||||
.tier {
|
||||
|
|
@ -31,76 +33,6 @@
|
|||
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 {
|
||||
--themeColor: #007;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,33 @@
|
|||
import { useState } from 'preact/hooks';
|
||||
import SKILLS from '@constants/skills';
|
||||
import Skill from '@components/Skill';
|
||||
import style from './index.css';
|
||||
|
||||
function getInitials (string) {
|
||||
const initials = string.match(/\b\w/g) || [];
|
||||
return ((initials.shift() || '') + (initials.pop() || '')).toUpperCase();
|
||||
}
|
||||
const initialState = {
|
||||
invested: [12, 0, 20],
|
||||
};
|
||||
|
||||
export default function VaultHunter ({ name = 'Unnamed', discipline = 'Classless', skills = {}, }) {
|
||||
const [build] = useState(skills);
|
||||
export default function VaultHunter ({
|
||||
name = 'Unnamed',
|
||||
discipline = 'Classless',
|
||||
skills = {},
|
||||
}) {
|
||||
const [build] = useState(initialState);
|
||||
const trees =
|
||||
Object.keys(build).map((treename, treeindex) =>
|
||||
<div class={`${style.tree} ${[style.green, style.blue, style.red][treeindex]}`}>
|
||||
Object.keys(skills).map((treename, treeindex) =>
|
||||
<div
|
||||
class={`${style.tree} ${[style.green, style.blue, style.red][treeindex]}`}
|
||||
style={{ '--invested': build.invested[treeindex] }}
|
||||
>
|
||||
<h2 class={style.treeName}>{ treename }</h2>
|
||||
{ Object.keys(build[treename]).map((tier, tierindex) =>
|
||||
{ Object.keys(skills[treename]).map((tier, tierindex) =>
|
||||
<div class={style.tier}>
|
||||
{ Object.keys(build[treename][tier]).map(skillname => {
|
||||
const skill = build[treename][tier][skillname];
|
||||
const isAugment = [
|
||||
SKILLS.AUGMENT_CHEVRON,
|
||||
SKILLS.AUGMENT_DIAMOND,
|
||||
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>
|
||||
);
|
||||
}) }
|
||||
{ Object.keys(skills[treename][tier]).map(
|
||||
skillname => <Skill
|
||||
{...skills[treename][tier][skillname]}
|
||||
name={skillname}
|
||||
enabled={build.invested[treeindex] >= 5 * tierindex - 5}
|
||||
/>
|
||||
) }
|
||||
</div>
|
||||
) }
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue