{effect(Math.max(invested, 1))}
diff --git a/src/components/VaultHunter/hashHandler.js b/src/components/VaultHunter/hashHandler.js
new file mode 100644
index 0000000..7d255d7
--- /dev/null
+++ b/src/components/VaultHunter/hashHandler.js
@@ -0,0 +1,32 @@
+export function setHash (skillsState) {
+ const hashparts = [];
+ for (let tree of Object.values(skillsState)) {
+ for (let tier of Object.values(tree)) {
+ for (let skill of Object.values(tier)) {
+ if (skill.type == null) {
+ hashparts.push(skill.invested || 0);
+ }
+ };
+ };
+ };
+ const url = window.location.href.split('#')[0] + '#' + hashparts.join('');
+ window.location.replace(url);
+};
+
+export function getHash (skillsState) {
+ const hash = window.location.href.split('#')[1] || '';
+ const hashparts = hash.match(/./g) || [];
+ const skills = JSON.parse(JSON.stringify(skillsState));
+ for (let tree of Object.keys(skills)) {
+ for (let tier of Object.keys(skills[tree])) {
+ for (let skill of Object.keys(skills[tree][tier])) {
+ if (skills[tree][tier][skill].type == null) {
+ skills[tree][tier][skill] = { invested: parseInt(hashparts.shift() || 0) };
+ } else {
+ skills[tree][tier][skill] = {};
+ }
+ };
+ };
+ };
+ return skills;
+};
diff --git a/src/components/VaultHunter/index.css b/src/components/VaultHunter/index.css
index fd09dd1..1406381 100644
--- a/src/components/VaultHunter/index.css
+++ b/src/components/VaultHunter/index.css
@@ -19,7 +19,7 @@
}
.subtitle {
text-transform: uppercase;
- font-size: 0.5em;
+ font-size: 0.4em;
}
.trees, .tier {
@@ -50,6 +50,7 @@
.skills {
position: relative;
user-select: none;
+ height: calc(3.5rem * 7)
}
.skills:before {
@@ -84,3 +85,7 @@
.red {
--themeHue: 18;
}
+
+a {
+ color: inherit;
+}
diff --git a/src/components/VaultHunter/index.js b/src/components/VaultHunter/index.js
index 48e7154..c0182a1 100644
--- a/src/components/VaultHunter/index.js
+++ b/src/components/VaultHunter/index.js
@@ -1,99 +1,91 @@
-import { useReducer } from 'preact/hooks';
-import deepmerge from 'deepmerge';
+// import { useReducer } from 'preact/hooks'; // Downgraded from Preact 10 for compat with @pwa/cli
+import { Component } from 'preact';
import Skill from '@components/Skill';
-import investmentValidator from './investmentValidator';
+import Nav from '@components/Nav';
+import Footer from '@components/Footer';
+import { getHash } from './hashHandler';
+import reducer from './reducer';
import style from './index.css';
-function reducer (state, action) {
- switch (action.type) {
- case 'skillChange':
- var newInvested = state.invested.slice(0);
- newInvested[action.treeIndex] += action.newValue - action.oldValue;
- var newSkills = deepmerge(state.skills, {
- [action.treeName]: {
- [action.tierIndex + '']: {
- [action.skillName]: {
- invested: action.newValue,
- }
- }
- }
- });
- if (investmentValidator(newSkills)) {
- return {
- ...state,
- invested: newInvested,
- skills: newSkills,
- };
- } else {
- return state;
- }
- }
-}
-
function contextKiller (event) {
event.preventDefault();
return false;
}
-export default function VaultHunter ({
- name = 'Unnamed',
- discipline = 'Classless',
- skills = {},
-}) {
- const initialState = {
- invested: [0, 0, 0],
- skills,
- };
- const [state, dispatch] = useReducer(reducer, initialState);
- const trees =
- Object.keys(state.skills).map((treeName, treeIndex) =>
-
- );
-
- function skillChangeListenerFactory (skillName, treeIndex, treeName, tierIndex) {
- return (oldValue, newValue) => {
- dispatch({
- type: 'skillChange',
- skillName,
- treeIndex,
- treeName,
- tierIndex,
- newValue,
- oldValue,
- });
+export default class VaultHunter extends Component {
+ constructor (props) {
+ super(props);
+ this.state = {
+ invested: [0, 0, 0],
+ skills: props.skills || {},
};
}
- return (
-
-
{ name }
-
the { discipline }
-
-
- { trees }
+ componentDidMount () {
+ this.setState(reducer(this.state, {
+ type: 'loadSkills',
+ skills: getHash(this.state.skills),
+ }));
+ }
+
+ render ({
+ name = 'Unnamed',
+ discipline = 'Classless',
+ path
+ }) {
+ const skillChangeListenerFactory = (skillName, treeIndex, treeName, tierIndex) => {
+ return (oldValue, newValue) => {
+ this.setState(reducer(this.state, {
+ type: 'skillChange',
+ skillName,
+ treeIndex,
+ treeName,
+ tierIndex,
+ newValue,
+ oldValue,
+ }));
+ };
+ };
+
+ const trees =
+ Object.keys(this.state.skills).map((treeName, treeIndex) => {
+ return (
+
+
+
{ treeName }
+
+ { Object.keys(this.state.skills[treeName]).map((tier, tierIndex) =>
+
+ { Object.keys(this.state.skills[treeName][tier]).map(skillName =>
+ = 5 * tierIndex - 5}
+ onChange={skillChangeListenerFactory(skillName, treeIndex, treeName, tierIndex)}
+ />
+ ) }
+
+ ) }
+
+
+ );
+ });
+
+ return (
+
+
+
+
+
{ name }
+
the { discipline }
+
+
+ { trees }
+
+
+
-
- );
+ );
+ }
}
diff --git a/src/components/VaultHunter/investmentValidator.js b/src/components/VaultHunter/investmentValidator.js
index 105bbbe..a8e6d7e 100644
--- a/src/components/VaultHunter/investmentValidator.js
+++ b/src/components/VaultHunter/investmentValidator.js
@@ -1,11 +1,7 @@
export default function investmentValidator (skills) {
-// ok &= (
-// (level == thisLevel && total == 0 && treeTotal >= invested + total) ||
-// (level != thisLevel && total == 0) ||
-// (total > 0 && (level * 5 <= invested))
-// );
- console.log('----------------------');
let totalSpent = 0;
+ let treeTotals = [0, 0, 0];
+ let treeIndex = 0;
for (let tree of Object.values(skills)) {
let treeTotal = 0;
let tierIndex = 0;
@@ -15,13 +11,14 @@ export default function investmentValidator (skills) {
if (skill.invested < 0 || skill.invested > skill.ranks) { return false; }
tierTotal += skill.invested || 0;
};
- // console.log(`${tierTotal} > 0 && ${treeTotal} + 5 < ${tierIndex} * 5 = ${!(tierTotal > 0 && treeTotal + 5 < tierIndex * 5)}`);
if (tierTotal > 0 && treeTotal + 5 < tierIndex * 5) { return false; }
treeTotal += tierTotal;
tierIndex += 1;
};
+ treeTotals[treeIndex] = treeTotal;
totalSpent += treeTotal;
+ treeIndex += 1;
};
- if (totalSpent > 47) { return false; }
- return true;
+ if (totalSpent > 48) { return false; }
+ return treeTotals;
}
diff --git a/src/components/VaultHunter/reducer.js b/src/components/VaultHunter/reducer.js
new file mode 100644
index 0000000..e06e8d5
--- /dev/null
+++ b/src/components/VaultHunter/reducer.js
@@ -0,0 +1,40 @@
+import deepmerge from 'deepmerge';
+import investmentValidator from './investmentValidator';
+import { setHash } from './hashHandler';
+
+export default function reducer (state, action) {
+ switch (action.type) {
+ case 'skillChange':
+ var newSkills = deepmerge(state.skills, {
+ [action.treeName]: {
+ [action.tierIndex + '']: {
+ [action.skillName]: {
+ invested: action.newValue,
+ }
+ }
+ }
+ });
+ const skillChangeTotals = investmentValidator(newSkills);
+ if (skillChangeTotals) {
+ setHash(newSkills);
+ return {
+ ...state,
+ invested: skillChangeTotals,
+ skills: newSkills,
+ };
+ } else {
+ return state;
+ }
+ case 'loadSkills':
+ const loadSkillsTotals = investmentValidator(action.skills);
+ if (loadSkillsTotals) {
+ return {
+ ...state,
+ invested: loadSkillsTotals,
+ skills: deepmerge(state.skills, action.skills),
+ };
+ } else {
+ return state;
+ }
+ }
+}
diff --git a/src/index.css b/src/index.css
index 201022c..6d524a5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -27,29 +27,22 @@
body {
position: relative;
min-height: 100vh;
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- align-items: center;
color: #F8F8FA;
font-family: var(--font-list);
-webkit-font-smoothing: antialiased;
background-color: #333;
- background-image: url('@assets/backgrounds/background2.jpg');
+ background-image: url('@assets/backgrounds/background.jpg');
background-size: cover;
background-position: center;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: stretch;
}
-
-a {
- color: rgb(0,100,200);
- text-decoration: none;
-}
-
-a:hover {
- color: #E2264D;
- text-decoration: underline;
-}
-
-a:visited {
- color: inherit;
+body > * {
+ flex-grow: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: stretch;
}
diff --git a/src/pages/Beastmaster/index.css b/src/pages/Beastmaster/index.css
new file mode 100644
index 0000000..8ac6341
--- /dev/null
+++ b/src/pages/Beastmaster/index.css
@@ -0,0 +1,3 @@
+VaultHunter {
+ opacity: 0.5;
+}
diff --git a/src/pages/Beastmaster/index.js b/src/pages/Beastmaster/index.js
new file mode 100644
index 0000000..9495a14
--- /dev/null
+++ b/src/pages/Beastmaster/index.js
@@ -0,0 +1,14 @@
+import VaultHunter from '@components/VaultHunter';
+
+import skills from './skills.js';
+
+export default function Beastmaster ({ path }) {
+ return (
+
+ );
+}
diff --git a/src/pages/Beastmaster/skills.js b/src/pages/Beastmaster/skills.js
new file mode 100644
index 0000000..b01bae3
--- /dev/null
+++ b/src/pages/Beastmaster/skills.js
@@ -0,0 +1,34 @@
+import SKILLS from '@constants/skills';
+
+const skills = {
+ "Tree One": {
+ "0": {
+ "?": {
+ text: "?",
+ type: SKILLS.ACTION_SKILL,
+ ranks: 0,
+ effect: rank => `?`,
+ },
+ },
+ },
+ "Tree Two": {
+ "0": {
+ "?": {
+ text: "?",
+ type: SKILLS.ACTION_SKILL,
+ effect: rank => `?`,
+ },
+ },
+ },
+ "Tree Three": {
+ "0": {
+ "?": {
+ text: "?",
+ type: SKILLS.ACTION_SKILL,
+ effect: rank => `?`,
+ },
+ },
+ },
+};
+
+export default skills;
diff --git a/src/pages/BotJock/index.css b/src/pages/BotJock/index.css
new file mode 100644
index 0000000..8ac6341
--- /dev/null
+++ b/src/pages/BotJock/index.css
@@ -0,0 +1,3 @@
+VaultHunter {
+ opacity: 0.5;
+}
diff --git a/src/pages/BotJock/index.js b/src/pages/BotJock/index.js
new file mode 100644
index 0000000..0394b05
--- /dev/null
+++ b/src/pages/BotJock/index.js
@@ -0,0 +1,14 @@
+import VaultHunter from '@components/VaultHunter';
+
+import skills from './skills.js';
+
+export default function BotJock ({ path }) {
+ return (
+
+ );
+}
diff --git a/src/pages/BotJock/skills.js b/src/pages/BotJock/skills.js
new file mode 100644
index 0000000..b01bae3
--- /dev/null
+++ b/src/pages/BotJock/skills.js
@@ -0,0 +1,34 @@
+import SKILLS from '@constants/skills';
+
+const skills = {
+ "Tree One": {
+ "0": {
+ "?": {
+ text: "?",
+ type: SKILLS.ACTION_SKILL,
+ ranks: 0,
+ effect: rank => `?`,
+ },
+ },
+ },
+ "Tree Two": {
+ "0": {
+ "?": {
+ text: "?",
+ type: SKILLS.ACTION_SKILL,
+ effect: rank => `?`,
+ },
+ },
+ },
+ "Tree Three": {
+ "0": {
+ "?": {
+ text: "?",
+ type: SKILLS.ACTION_SKILL,
+ effect: rank => `?`,
+ },
+ },
+ },
+};
+
+export default skills;
diff --git a/src/pages/Home/index.css b/src/pages/Home/index.css
index e69de29..3117ec6 100644
--- a/src/pages/Home/index.css
+++ b/src/pages/Home/index.css
@@ -0,0 +1,34 @@
+.splash {
+ margin: auto;
+}
+
+.wrapper {
+ text-align: center;
+ padding: 1rem;
+ background-color: hsla(0, 0%, 0%, 0.5);
+}
+
+.link {
+ display: inline-block;
+ margin: 0.5rem;
+ background-color: black;
+ color: hsl(51, 100%, 50%);
+ padding: 0.25em;
+ text-align: center;
+ font-weight: bold;
+ font-size: 3rem;
+ text-decoration: none;
+}
+
+.link:hover, .link:focus {
+ color: black;
+ background-color: hsl(51, 100%, 50%);
+}
+
+.name, .job {
+ text-transform: uppercase;
+}
+
+.job {
+ font-size: 0.4em;
+}
diff --git a/src/pages/Home/index.js b/src/pages/Home/index.js
index 2bed08b..4de000b 100644
--- a/src/pages/Home/index.js
+++ b/src/pages/Home/index.js
@@ -1,9 +1,34 @@
-// import style from './index.css';
+import { Link } from 'preact-router';
+import Footer from '@components/Footer';
+import style from './index.css';
export default function () {
+ const pages = [
+ { name: 'Zane', job: 'the Operative', path: '/operative' },
+ { name: 'Amara', job: 'the Siren', path: '/siren' },
+ { name: 'FL4K', job: 'the Beastmaster', path: '/beastmaster' },
+ { name: 'Moze', job: 'the Bot Jock', path: '/bot-jock' },
+ ];
return (
- Home
+
+
+
Borderlands 3 skill calculator
+ { pages.map(page => {
+ return (
+
+
+ {page.name}
+
+ {page.job}
+
+
+
+ );
+ }) }
+
+
+
);
}
diff --git a/src/pages/Operative/index.js b/src/pages/Operative/index.js
index d5621e2..3ef877e 100644
--- a/src/pages/Operative/index.js
+++ b/src/pages/Operative/index.js
@@ -2,12 +2,13 @@ import VaultHunter from '@components/VaultHunter';
import skills from './skills.js';
-export default function Operative () {
+export default function Operative ({ path }) {
return (
);
}
diff --git a/src/pages/Siren/index.js b/src/pages/Siren/index.js
index 6d9be26..851222e 100644
--- a/src/pages/Siren/index.js
+++ b/src/pages/Siren/index.js
@@ -2,12 +2,13 @@ import VaultHunter from '@components/VaultHunter';
import skills from './skills.js';
-export default function Siren () {
+export default function Siren ({ path }) {
return (
);
}