@ -104,18 +104,7 @@ function ClassSelector(p){
< / > < / >
} }
function ClassSelectorWindow ( p ) {
return < SelectorWindow title = { ( p . editClass ) ? "Select Sub Class" : "Select Main Class" } modalOpen = { p . modalOpen } setModalOpen = { p . setModalOpen } GetData = { p . GetData }
dataFunction = { ( ) => {
var dat1 = p . GetData ( "class" )
return Object . keys ( dat1 )
}
}
displayFunction = { ( key ) => {
return < li className = "classSelect" onClick = { ( ) => { if ( p . editClass === 0 ) { p . setClassName ( key ) } else { p . setSubClassName ( key ) } ; p . setModalOpen ( false ) } } > < img alt = "" src = { DisplayIcon ( p . GetData ( "class" , key , "icon" ) ) } / > { p . GetData ( "class" , key , "name" ) } < / l i >
} }
/ >
}
function EditableClass ( p ) { function EditableClass ( p ) {
return < > < div className = "editClass" onClick = { ( ) => { p . setClassNameSetter ( p . editClass ) ; p . setClassSelectWindowOpen ( true ) } } > < Class GetData = { p . GetData } name = { p . name } / > return < > < div className = "editClass" onClick = { ( ) => { p . setClassNameSetter ( p . editClass ) ; p . setClassSelectWindowOpen ( true ) } } > < Class GetData = { p . GetData } name = { p . name } / >
@ -200,6 +189,7 @@ const [statPage,setStatPage] = useState(1)
const [ classSelectWindowOpen , setClassSelectWindowOpen ] = useState ( false ) const [ classSelectWindowOpen , setClassSelectWindowOpen ] = useState ( false )
const [ classSkillTreeWindowOpen , setClassSkillTreeWindowOpen ] = useState ( false ) const [ classSkillTreeWindowOpen , setClassSkillTreeWindowOpen ] = useState ( false )
const [ treePage , setTreePage ] = useState ( 1 )
const [ weaponSelectWindowOpen , setWeaponSelectWindowOpen ] = useState ( false ) const [ weaponSelectWindowOpen , setWeaponSelectWindowOpen ] = useState ( false )
const [ armorSelectWindowOpen , setArmorSelectWindowOpen ] = useState ( false ) const [ armorSelectWindowOpen , setArmorSelectWindowOpen ] = useState ( false )
@ -220,6 +210,7 @@ const [skillTreeGridSizeX,setSkillTreeGridSizeX] = useState(171)
const [ skillTreeGridSizeY , setSkillTreeGridSizeY ] = useState ( 148 ) const [ skillTreeGridSizeY , setSkillTreeGridSizeY ] = useState ( 148 )
const [ skillTreeGridPaddingX , setSkillTreeGridPaddingX ] = useState ( 10 ) const [ skillTreeGridPaddingX , setSkillTreeGridPaddingX ] = useState ( 10 )
const [ skillTreeGridPaddingY , setSkillTreeGridPaddingY ] = useState ( 48 ) const [ skillTreeGridPaddingY , setSkillTreeGridPaddingY ] = useState ( 48 )
const [ halflineheight , setHalfLineHeight ] = useState ( 60 )
const [ classNameSetter , setClassNameSetter ] = useState ( 0 ) const [ classNameSetter , setClassNameSetter ] = useState ( 0 )
@ -261,6 +252,7 @@ useEffect(()=>{
setSkillTreeGridSizeY ( skillTree . gridsizey ) setSkillTreeGridSizeY ( skillTree . gridsizey )
setSkillTreeGridPaddingX ( skillTree . gridpaddingx ) setSkillTreeGridPaddingX ( skillTree . gridpaddingx )
setSkillTreeGridPaddingY ( skillTree . gridpaddingy ) setSkillTreeGridPaddingY ( skillTree . gridpaddingy )
setHalfLineHeight ( skillTree . halflineheight )
break ; break ;
} }
} }
@ -286,7 +278,7 @@ useEffect(()=>{
< td colSpan = "2" > < EditBoxInput setData = { setbuildName } data = { buildName } / > < / t d > < td colSpan = "2" > < EditBoxInput setData = { setbuildName } data = { buildName } / > < / t d >
< / t r > < / t r >
< tr > < tr >
< td > Class < / t d > < td onClick = { ( ) => { setClassSelectWindowOpen ( true ) } } > Class < / t d >
< td > < td >
< EditableClass editClass = { 0 } setClassNameSetter = { setClassNameSetter } GetData = { p . GetData } setClassName = { setClassName } name = { className } setClassSelectWindowOpen = { setClassSelectWindowOpen } > < / E d i t a b l e C l a s s > < EditableClass editClass = { 0 } setClassNameSetter = { setClassNameSetter } GetData = { p . GetData } setClassName = { setClassName } name = { className } setClassSelectWindowOpen = { setClassSelectWindowOpen } > < / E d i t a b l e C l a s s >
< / t d > < / t d >
@ -310,10 +302,10 @@ useEffect(()=>{
< div className = "boxTitleBar" > < div className = "boxTitleBar" >
< h1 > Current Effects < / h 1 > < / d i v > < h1 > Current Effects < / h 1 > < / d i v >
< PageControl pages = { 2 } currentPage = { effectPage } setCurrentPage = { setEffectPage } / > < PageControl pages = { 2 } currentPage = { effectPage } setCurrentPage = { setEffectPage } / >
< h3 > Effect Name < / h 3 > { effectPage === 1 ? < > < h3 > Effect Name < / h 3 > < u l c l a s s N a m e = " i n f o B u f f s " > < l i > F o o d B o o s t E f f e c t
< ul className = "infoBuffs" >
{
effectPage === 1 ? < > < li > Food Boost Effect
< ul > < ul >
< li > < img alt = "" src = "https://i.imgur.com/TQ8EBW2.png" / > & ensp ; [ Meat ] Potency + 10.0 % < / l i > < li > < img alt = "" src = "https://i.imgur.com/TQ8EBW2.png" / > & ensp ; [ Meat ] Potency + 10.0 % < / l i >
< li > < img alt = "" src = "https://i.imgur.com/TQ8EBW2.png" / > & ensp ; [ Crisp ] Potency to Weak Point + 5.0 % < / l i > < li > < img alt = "" src = "https://i.imgur.com/TQ8EBW2.png" / > & ensp ; [ Crisp ] Potency to Weak Point + 5.0 % < / l i >
@ -329,9 +321,9 @@ useEffect(()=>{
< ul > < ul >
< li > < img alt = "" src = "https://i.imgur.com/N6M74Qr.png" / > & ensp ; Potency + 5.0 % < / l i > < li > < img alt = "" src = "https://i.imgur.com/N6M74Qr.png" / > & ensp ; Potency + 5.0 % < / l i >
< / u l > < / u l >
< /li></ > : < > < / > < / l i > < / u l > < / > : < > < / >
} }
< / u l >
< / d i v > < / d i v >
< / d i v > < / d i v >
< div className = "containerB" > < div className = "containerB" >
@ -414,6 +406,7 @@ AUGMENT
< div className = "boxTitleBar" > < div className = "boxTitleBar" >
< h1 > To Do List < / h 1 > < / d i v > < h1 > To Do List < / h 1 > < / d i v >
< ul className = "toDoList" > < ul className = "toDoList" >
< li className = "half" > Grids . Grids everywhere . < / l i >
< li > Finish "Item Details" for Weapons / Armor < / l i > < li > Finish "Item Details" for Weapons / Armor < / l i >
< li className = "half" > Class Skill Window < / l i > < li className = "half" > Class Skill Window < / l i >
< li > PA Select Window < / l i > < li > PA Select Window < / l i >
@ -548,32 +541,41 @@ AUGMENT
< / d i v > < / d i v >
< / d i v > < / d i v >
< ClassSelectorWindow setClassName = { setClassName } editClass = { classNameSetter } setSubClassName = { setSubClassName } modalOpen = { classSelectWindowOpen } setModalOpen = { setClassSelectWindowOpen } GetData = { p . GetData } / > < Modal isOpen = { classSelectWindowOpen } onRequestClose = { ( ) => { setClassSelectWindowOpen ( false ) } } shouldFocusAfterRender = { true } shouldCloseOnOverlayClick = { true } shouldCloseOnEsc = { true } className = "modal" overlayClassName = "modalOverlay" >
< div className = "box boxModalClassSelect" >
< Modal isOpen = { classSkillTreeWindowOpen } onRequestClose = { ( ) => { setClassSkillTreeWindowOpen ( false ) } } shouldFocusAfterRender = { true } shouldCloseOnOverlayClick = { true } shouldCloseOnEsc = { true } className = "modalSkillTree" overlayClassName = "modalOverlaySkillTree" >
< div className = "box treeSelectBox" >
< div className = "boxTitleBar" > < div className = "boxTitleBar" >
< h1 > Class Skill Tree < / h 1 > < h1 > Select Main Class < / h 1 >
< div className = "boxExit" onClick = { ( ) => { setClassSkillTreeWindowOpen ( false ) } } > < / d i v > < div className = "boxExit" onClick = { ( ) => { setClassSkillTreeWindowOpen ( false ) } } > < / d i v >
< / d i v > < / d i v >
< div className = "treeListContainer customScrollbar" > < div className = "treeListContainer customScrollbar" >
< ul className = "treeList" > < ul className = "treeList" >
{ Object . keys ( p . GetData ( "class" ) ) . map ( ( cl ) => < li className = { className === cl ? "treeListMain" : subclassName === cl ? "treeListSub" : "" } > < img alt = "" src = { p . GetData ( "class" ) [ cl ] . icon } / > { cl } < / l i > ) } < li > < img alt = "" src = { DisplayIcon ( "/icons/class/hu.png" ) } / > Hunter < / l i >
< li > < img alt = "" src = { DisplayIcon ( "/icons/class/fi.png" ) } / > Fighter < / l i >
< li className = "treeListMain" > < img alt = "" src = { DisplayIcon ( "/icons/class/ra.png" ) } / > Ranger < / l i >
< li > < img alt = "" src = { DisplayIcon ( "/icons/class/gu.png" ) } / > Gunner < / l i >
< li className = "treeListSub" > < img alt = "" src = { DisplayIcon ( "/icons/class/fo.png" ) } / > Force < / l i >
< li > < img alt = "" src = { DisplayIcon ( "/icons/class/te.png" ) } / > Techter < / l i >
< li > < img alt = "" src = { DisplayIcon ( "/icons/class/br.png" ) } / > Braver < / l i >
< / u l > < / u l >
< / d i v > < / d i v >
< / d i v > < / d i v >
< / M o d a l >
< Modal isOpen = { classSkillTreeWindowOpen } onRequestClose = { ( ) => { setClassSkillTreeWindowOpen ( false ) } } shouldFocusAfterRender = { true } shouldCloseOnOverlayClick = { true } shouldCloseOnEsc = { true } className = "modal" overlayClassName = "modalOverlay" >
< div className = "box skillTreeBox" > < div className = "box skillTreeBox" >
< div className = "boxTitleBar" > < div className = "boxTitleBar" >
< h1 > Ranger01 < / h 1 > < h1 > Class Skill Tree < / h 1 >
< div className = "boxExit" onClick = { ( ) => { setClassSkillTreeWindowOpen ( false ) } } > < / d i v > < div className = "boxExit" onClick = { ( ) => { setClassSkillTreeWindowOpen ( false ) } } > < / d i v >
< / d i v > < / d i v >
< PageControl pages = { 2 } pageNames = { [ < > < img alt = "" src = { DisplayIcon ( "/icons/class/ra.png" ) } / > Ranger < / > , < > < i m g a l t = " " s r c = { D i s p l a y I c o n ( " / i c o n s / c l a s s / f o . p n g " ) } / > F o r c e < / > , " L a u n c h e r " , " R o d " , " T a l i s " ] } c u r r e n t P a g e = { t r e e P a g e } s e t C u r r e n t P a g e = { s e t T r e e P a g e } / >
{ treePage === 1 ? < >
< div className = "skillTreeContainer customScrollbar" > < div className = "skillTreeContainer customScrollbar" >
< div style = { { position : "relative" } } > < div style = { { position : "relative" } } >
{ < SkillTree style = { { position : "absolute" } } strokeStyle = { skillTreeLineColor } lineWidth = { skillTreeLineWidth } lineDash = { [ ] } { < SkillTree style = { { position : "absolute" } } strokeStyle = { skillTreeLineColor } lineWidth = { skillTreeLineWidth } lineDash = { [ ] }
gridDimensionsX = { skillTreeDimensionX } gridDimensionsY = { skillTreeDimensionY } gridSizeX = { skillTreeGridSizeX } gridSizeY = { skillTreeGridSizeY } gridPaddingX = { skillTreeGridPaddingX } gridPaddingY = { skillTreeGridPaddingY } gridDimensionsX = { skillTreeDimensionX } gridDimensionsY = { skillTreeDimensionY } gridSizeX = { skillTreeGridSizeX } gridSizeY = { skillTreeGridSizeY } gridPaddingX = { skillTreeGridPaddingX } gridPaddingY = { skillTreeGridPaddingY }
skillLines = { skillTreeData } skillLines = { skillTreeData } halflineheight = { halflineheight }
/ > } / > }
< div className = "skillTreeGrid" > < div className = "skillTreeGrid" >
< div className = "skillActive" style = { { gridArea : "a1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Blight_Rounds.png" / > < span className = "skillAllocated" > 1 / 5 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > B l i g h t R o u n d s < / e m > < / d i v > < div className = "skillActive" style = { { gridArea : "a1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Blight_Rounds.png" / > < span className = "skillAllocated" > 1 / 5 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > B l i g h t R o u n d s < / e m > < / d i v >
@ -588,15 +590,16 @@ AUGMENT
< div style = { { gridArea : "d3" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Launcher_Charge_Grouping.png" / > < span className = "skillAllocated" > 0 / 1 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > L a u n c h e r C h a r g e G r o u p i n g < / e m > < / d i v > < div style = { { gridArea : "d3" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Launcher_Charge_Grouping.png" / > < span className = "skillAllocated" > 0 / 1 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > L a u n c h e r C h a r g e G r o u p i n g < / e m > < / d i v >
< div style = { { gridArea : "e1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" / > < span className = "skillAllocated" > 0 / 1 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > S l o w L a n d i n g A t t a c k - R a n g e r < / e m > < / d i v > < div style = { { gridArea : "e1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" / > < span className = "skillAllocated" > 0 / 1 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > S l o w L a n d i n g A t t a c k - R a n g e r < / e m > < / d i v >
< div style = { { gridArea : "f1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" / > < span className = "skillAllocated" > 0 / 1 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > S l o w L a n d i n g C h a r g e - R a n g e r < / e m > < / d i v > < div style = { { gridArea : "f1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" / > < span className = "skillAllocated" > 0 / 1 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > S l o w L a n d i n g C h a r g e - R a n g e r < / e m > < / d i v >
< div style = { { gridArea : "a5" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" / > < span className = "skillAllocated" > 0 / 1 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > S l o w L a n d i n g C h a r g e - R a n g e r < / e m > < / d i v >
< div style = { { gridArea : "a6" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" / > < span className = "skillAllocated" > 0 / 1 < / s p a n > < e m c l a s s N a m e = " s k i l l N a m e " > S l o w L a n d i n g C h a r g e - R a n g e r < / e m > < / d i v >
< / d i v > < / d i v >
< / d i v > < / d i v >
< /div></ > : < > < / > }
< div className = "skillPoints" >
< div > Your Skill Points < span > 6 < / s p a n > < / d i v >
< div > SP < span > < / s p a n > 0 < / d i v >
< / d i v > < / d i v >
< div className = "skillPoints" > Your Skill Points & emsp ; & emsp ; 6 & emsp ; & emsp ; & emsp ; SP & emsp ; & emsp ; & emsp ; & emsp ; 0 < / d i v >
< div className = "skillConfirm" > < span > Confirm < / s p a n > < s p a n > C a n c e l < / s p a n > < / d i v > < div className = "skillConfirm" > < span > Confirm < / s p a n > < s p a n > C a n c e l < / s p a n > < / d i v >
< / d i v >
< / d i v >
< / M o d a l > < / M o d a l >
< SelectorWindow title = "Weapon Selection" modalOpen = { weaponSelectWindowOpen } setModalOpen = { setWeaponSelectWindowOpen } GetData = { p . GetData } < SelectorWindow title = "Weapon Selection" modalOpen = { weaponSelectWindowOpen } setModalOpen = { setWeaponSelectWindowOpen } GetData = { p . GetData }
dudleycu
3 years ago
