Skip to content
GitLab
Commit ecdeb9fa authored by Joe Ziemba's avatar Joe Ziemba
Browse files

refactoring

parent 3cdc731a
Hide whitespace changes
Inline Side-by-side
src/App.js
View file @ ecdeb9fa
......@@ -9,7 +9,7 @@ import { CharacterBuilder, Home, StatblockGenerator } from "views"
import { TopBar } from "components"
import { firebase } from "services/Firebase"
import { RedesignAnnounceModal } from "PF2CharacterBuilder/_modals/RedesignAnnounceModal"
import { RedesignAnnounceModal } from "components/pfcb/_modals/RedesignAnnounceModal"
const App = () => {
const [currentUser, setUser] = useState(null)
......
src/PF2CharacterBuilder/_components/SelectStatbox.js deleted 100644 → 0
View file @ 3cdc731a
import React from "react"
import Statbox from "./Statbox"
const SelectStatbox = (props) => {
const levels = []
for (let i = 1; i < 21; i++) {
levels.push(i)
}
return (
<Statbox title="Level" large>
<select onChange={props.setLevel} className="c-statbox__select">
{levels.map((level, i) => {
return (
<option value={level} key={i}>
{level}
</option>
)
})}
</select>
</Statbox>
)
}
export default SelectStatbox
src/StatblockGenerator/StatBlockDisplay.js
View file @ ecdeb9fa
......@@ -2,7 +2,7 @@ import React from "react"
import { Property } from "components"
class StatBlockDisplay extends React.Component {
export class StatBlockDisplay extends React.Component {
renderAbilities() {
let { abilities } = this.props.stats
let orderedAbilities = ["str", "dex", "con", "int", "wis", "cha"]
......
src/StatblockGenerator/StatBlockForm.js
View file @ ecdeb9fa
import React from "react"
import "react-bootstrap-typeahead/css/Typeahead.css"
import { Typeahead } from "react-bootstrap-typeahead"
import { Accordion } from "components"
import { Actions } from "./_components/index"
import { FeatureForm } from "./FormSections/FeatureForm"
import { LegendaryActionsForm } from "./FormSections/LegendaryActionsForm"
import { AbilityScoresForm } from "./FormSections/AbilityScoresForm"
import { BasicsForm } from "./FormSections/BasicsForm"
const StatBlockForm = (props) => {
import {
Accordion,
AbilityScoresForm,
LegendaryActionsForm,
BasicsForm,
FeatureForm,
Actions,
} from "components"
export const StatBlockForm = (props) => {
return (
<div id="StatBlockForm" className="w-11/12 text-sm">
<Accordion title="Basic Details" open>
......
src/StatblockGenerator/_components/index.js deleted 100644 → 0
View file @ 3cdc731a
export { Actions } from "./Actions"
export { default as AttackForm } from "./AttackForm"
export { default as StatBlockDisplay } from "../StatBlockDisplay"
export { default as StatBlockForm } from "../StatBlockForm"
export { GeneratorNav } from "./GeneratorNav"
src/StatblockGenerator/index.js
View file @ ecdeb9fa
export { default as StatblockGenerator } from "./StatblockGenerator"
export { StatBlockDisplay } from "./StatBlockDisplay"
export { StatBlockForm } from "./StatBlockForm"
src/components/index.js
View file @ ecdeb9fa
......@@ -12,5 +12,21 @@ export { Modal } from "./common/Modal"
export { Property } from "./sbg/Property"
export { SBG_Input } from "./sbg/SBG_Input"
export { SBG_Select } from "./sbg/SBG_Select"
export { AbilityScoresForm } from "./sbg/FormSections/AbilityScoresForm"
export { BasicsForm } from "./sbg/FormSections/BasicsForm"
export { FeatureForm } from "./sbg/FormSections/FeatureForm"
export { LegendaryActionsForm } from "./sbg/FormSections/LegendaryActionsForm"
export { GeneratorNav } from "./sbg/GeneratorNav"
export { FeatureBlock } from "./sbg/FeatureBlock"
export { AttackForm } from "./sbg/AttackForm"
export { Actions } from "./sbg/Actions"
// Pathfinder Character Builder (PFCB)
export { AbilityScoreSection } from "./pfcb/AbilityScoresSection"
export { Card } from "./pfcb/Card"
export { CharacterBasics } from "./pfcb/CharacterBasics"
export { FeatsSection } from "./pfcb/FeatsSection"
export { FeatSelection } from "./pfcb/FeatSelection"
export { SkillsTable } from "./pfcb/SkillsTable2"
export { FreeSkillBoosts } from "./pfcb/FreeSkillBoosts"
export { default as SubNav } from "./pfcb/SubNav"
src/PF2CharacterBuilder/_components/AbilityScoresSection.js → src/components/pfcb/AbilityScoresSection.js
View file @ ecdeb9fa
......@@ -6,7 +6,7 @@ import { Select } from "./Select"
import { SubHeading } from "./SubHeading"
import { PlaceholderText } from "./PlaceholderText"
const AbilityScoreSection = ({ character, boostAbility }) => {
export const AbilityScoreSection = ({ character, boostAbility }) => {
function freeAbilityOptions(source) {
let { abilityBoosts } = character
let freebies = abilityBoosts.filter(
......@@ -165,5 +165,3 @@ const AbilityScoreSection = ({ character, boostAbility }) => {
</Card>
)
}
export default AbilityScoreSection
src/PF2CharacterBuilder/_components/CharacterBasics.js → src/components/pfcb/CharacterBasics.js
View file @ ecdeb9fa
import React from "react"
import React, { useContext, useState } from "react"
import { PF2CharacterContext } from "context"
import { SaveRow } from "./SaveRow"
import Statbox from "./Statbox"
......@@ -6,188 +6,169 @@ import TEMLbuttons from "./TEMLbuttons"
import { Card } from "./Card"
import { Select } from "./Select"
class CharacterBasics extends React.Component {
constructor(props) {
super(props)
this.state = {
showClassSelect: true,
}
}
toggleClassSelect() {
this.setState({ showClassSelect: !this.state.showClassSelect })
}
render() {
let {
selectAncestry,
selectBackground,
selectClass,
character,
setLevel,
} = this.props
let { Classes, Backgrounds, Ancestries } = this.context
export const CharacterBasics = ({
selectAncestry,
selectBackground,
selectClass,
character,
setLevel,
updateName,
}) => {
let { Classes, Backgrounds, Ancestries } = useContext(
PF2CharacterContext
)
return (
<React.Fragment>
<div
id="CharacterBasics"
className="flex flex-wrap justify-between"
>
<div className="flex-full md:flex-1">
<Card title="Details">
<label className="px-4">
<input
aria-label="Character Name"
id="character-name"
value={character.name}
className={`bg-gray-200 p-2 border-gray-500 w-full rounded-md text-lg
return (
<React.Fragment>
<div id="CharacterBasics" className="flex flex-wrap justify-between">
<div className="flex-full md:flex-1">
<Card title="Details">
<label className="px-4">
<input
aria-label="Character Name"
id="character-name"
value={character.name}
className={`bg-gray-200 p-2 border-gray-500 w-full rounded-md text-lg
${!character.name && " text-center"}`}
placeholder="Character Name"
onChange={this.props.updateName}
/>
</label>
placeholder="Character Name"
onChange={updateName}
/>
</label>
<label className="px-4">
<label className="px-4">
<Select
id="ancestry-select"
onChange={selectAncestry}
value={character.ancestry.name || ""}
aria-label="Ancestry"
isDefault={!character.ancestry.name}
>
<option value="">Choose Ancestry</option>
{Object.keys(Ancestries).map((ancestry) => (
<option value={ancestry} key={ancestry}>
{ancestry}
</option>
))}
</Select>
</label>
<label className="px-4">
<Select
onChange={selectBackground}
value={character.background.id || ""}
aria-label="Background"
isDefault={!character.background.name}
>
<option value="">Choose Background</option>
{Object.keys(Backgrounds).map((background) => (
<option value={background} key={background}>
{Backgrounds[background].name}
</option>
))}
</Select>
</label>
<div className="flex">
<label className="flex-1 flex-grow-2 pl-4 pr-2">
<Select
id="ancestry-select"
onChange={selectAncestry}
value={character.ancestry.name || ""}
aria-label="Ancestry"
isDefault={!character.ancestry.name}
id="classSelect"
onChange={selectClass}
value={character.class.name || ""}
aria-label="Class"
isDefault={!character.class.name}
>
<option value="">Choose Ancestry</option>
{Object.keys(Ancestries).map((ancestry) => (
<option value={ancestry} key={ancestry}>
{ancestry}
<option value="FREE">Choose Class</option>
{Object.keys(Classes).map((class_name) => (
<option value={class_name} key={class_name}>
{class_name}
</option>
))}
</Select>
</label>
<label className="px-4">
<label className="flex-1 pr-4 pl-2">
<Select
onChange={selectBackground}
value={character.background.id || ""}
aria-label="Background"
isDefault={!character.background.name}
id="levelSelect"
onChange={setLevel}
value={character.level}
aria-label="Level"
>
<option value="">Choose Background</option>
{Object.keys(Backgrounds).map((background) => (
<option value={background} key={background}>
{Backgrounds[background].name}
{[...Array(21).keys()].slice(1).map((x, i) => (
<option value={i + 1} key={i + 1}>
{i + 1}
</option>
))}
</Select>
</label>
<div className="flex">
<label className="flex-1 flex-grow-2 pl-4 pr-2">
<Select
id="classSelect"
onChange={selectClass}
value={character.class.name || ""}
aria-label="Class"
isDefault={!character.class.name}
>
<option value="FREE">Choose Class</option>
{Object.keys(Classes).map((class_name) => (
<option value={class_name} key={class_name}>
{class_name}
</option>
))}
</Select>
</label>
<label className="flex-1 pr-4 pl-2">
<Select
id="levelSelect"
onChange={setLevel}
value={character.level}
aria-label="Level"
>
{[...Array(21).keys()].slice(1).map((x, i) => (
<option value={i + 1} key={i + 1}>
{i + 1}
</option>
))}
</Select>
</label>
</div>
</Card>
</div>
<div className="flex-full md:flex-1">
<Card title="Stats">
<div className="flex-initial flex items-center">
<div className="flex-1">
<Statbox stat={character.level} title="Level" large />
</div>
</Card>
</div>
<div className="flex-full md:flex-1">
<Card title="Stats">
<div className="flex-initial flex items-center">
<div className="flex-1">
<Statbox stat={character.level} title="Level" large />
</div>
<div className="flex-1">
<Statbox stat={character.hitPoints} title="HP" large />
</div>
<div className="flex-1">
<Statbox stat={character.speed} title="Speed" large />
</div>
<div className="flex-1">
<Statbox stat={character.hitPoints} title="HP" large />
</div>
<div className="flex-1">
<Statbox stat={character.speed} title="Speed" large />
</div>
</div>
<div className="flex-initial flex items-center">
<div className="flex-1">
<Statbox
large
stat={
character.perceptionProficiency +
character.abilityMods.Wisdom +
character.level
}
title="PCPT"
/>
</div>
<div className="flex-1 flex items-center">
<span className="flex-none mr-2">=</span>
<Statbox
className="flex-1"
stat={character.abilityMods.Wisdom}
title="WIS"
/>
<span className="flex-none text-center mx-2">+</span>
<Statbox
className="flex-1"
stat={
character.perceptionProficiency + character.level
}
title="PROF"
/>
</div>
<div className="flex-1 flex justify-around">
<TEMLbuttons
skill={{
proficiency: character.perceptionProficiency,
id: "Perception",
name: "Perception",
}}
/>
</div>
<div className="flex-initial flex items-center">
<div className="flex-1">
<Statbox
large
stat={
character.perceptionProficiency +
character.abilityMods.Wisdom +
character.level
}
title="PCPT"
/>
</div>
<div className="flex-1 flex items-center">
<span className="flex-none mr-2">=</span>
<Statbox
className="flex-1"
stat={character.abilityMods.Wisdom}
title="WIS"
/>
<span className="flex-none text-center mx-2">+</span>
<Statbox
className="flex-1"
stat={character.perceptionProficiency + character.level}
title="PROF"
/>
</div>
<div className="flex-1 flex justify-around">
<TEMLbuttons
skill={{
proficiency: character.perceptionProficiency,
id: "Perception",
name: "Perception",
}}
/>
</div>
</div>
<AC character={character} />
</Card>
</div>
<div className="flex-full md:flex-1">
<Card title="Saves">
<SaveRow saveType="fortitude" character={character} />
<SaveRow saveType="reflex" character={character} />
<SaveRow saveType="will" character={character} />
</Card>
</div>
<AC character={character} />
</Card>
</div>
</React.Fragment>
)
}
<div className="flex-full md:flex-1">
<Card title="Saves">
<SaveRow saveType="fortitude" character={character} />
<SaveRow saveType="reflex" character={character} />
<SaveRow saveType="will" character={character} />
</Card>
</div>
</div>
</React.Fragment>
)
}
CharacterBasics.contextType = PF2CharacterContext
export default CharacterBasics
const AC = ({ character }) => {
function calculateAC(character) {
let ac = 10
......
src/PF2CharacterBuilder/_components/FeatSelection.js → src/components/pfcb/FeatSelection.js
View file @ ecdeb9fa
import React, { useState, useEffect, useCallback } from "react"
import _ from "lodash"
import FEATS from "_data/feats/allFeats.json"
const FeatSelection = ({ featKey, character, selectFeat }) => {
import { Modal } from "components"
export const FeatSelection = ({
featKey,
character,
selectFeat,
show,
closeFunction,
}) => {
const [query, setQuery] = useState("")
const [feats, setFeats] = useState([])
......@@ -82,7 +89,7 @@ const FeatSelection = ({ featKey, character, selectFeat }) => {
])
return (
<>
<Modal show={show} closeFunction={closeFunction} title="Feats" large>
<Search onChange={setQuery} query={query} />
{feats.length > 0 &&
......@@ -135,12 +142,10 @@ const FeatSelection = ({ featKey, character, selectFeat }) => {
</div>
)
})}
</>
</Modal>
)
}
export default FeatSelection
const Search = ({ onChange, query }) => {
return (
<div className="sticky top-0 w-full py-4 px-8 bg-white text-lg shadow-md">
......
src/PF2CharacterBuilder/_components/FeatsSection.js → src/components/pfcb/FeatsSection.js
View file @ ecdeb9fa
import React, { useState, useEffect, useContext } from "react"
import FeatEntry from "./FeatEntry"
import FeatSelection from "./FeatSelection"
import { Modal } from "components"
import { FeatSelection } from "./FeatSelection"
import { Card } from "./Card"
import { SubHeading } from "./SubHeading"
import { PlaceholderText } from "./PlaceholderText"
import { PF2CharacterContext } from "context"
const FeatsSection = () => {
export const FeatsSection = () => {
const { character, selectFeat, deleteFeat } = useContext(
PF2CharacterContext
)
......@@ -149,20 +148,14 @@ const FeatsSection = () => {
addFeat={() => openFeatSelection("misc_" + numMiscFeats)}
/>
</div>
<Modal
<FeatSelection
show={showFeatSelection}
closeFunction={() => setShowFeatSelection(false)}
title="Feats"
large
>
<FeatSelection
selectFeat={localSelectFeat}
featKey={featKey}
character={character}
/>
</Modal>
selectFeat={localSelectFeat}
featKey={featKey}
character={character}
/>
</Card>
)
}
export default FeatsSection
src/PF2CharacterBuilder/_components/SkillsTable2.js → src/components/pfcb/SkillsTable2.js
View file @ ecdeb9fa
......@@ -7,7 +7,7 @@ import { FreeSkillBoosts } from "./FreeSkillBoosts"
import { SubHeading } from "./SubHeading"
import { PF2CharacterContext } from "context"
const SkillsTable = () => {
export const SkillsTable = () => {
const { character } = useContext(PF2CharacterContext)
let upperLevelBoosts = character.skillBoosts
.filter((boost) => Number(boost.level > 1))
......@@ -100,5 +100,3 @@ const SkillsTable = () => {
</Card>
)
}
export default SkillsTable
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment