@ -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 ) {
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 [ classSkillTreeWindowOpen , setClassSkillTreeWindowOpen ] = useState ( false )
const [ treePage , setTreePage ] = useState ( 1 )
const [ weaponSelectWindowOpen , setWeaponSelectWindowOpen ] = useState ( false )
const [ armorSelectWindowOpen , setArmorSelectWindowOpen ] = useState ( false )
@ -220,6 +210,7 @@ const [skillTreeGridSizeX,setSkillTreeGridSizeX] = useState(171)
const [ skillTreeGridSizeY , setSkillTreeGridSizeY ] = useState ( 148 )
const [ skillTreeGridPaddingX , setSkillTreeGridPaddingX ] = useState ( 10 )
const [ skillTreeGridPaddingY , setSkillTreeGridPaddingY ] = useState ( 48 )
const [ halflineheight , setHalfLineHeight ] = useState ( 60 )
const [ classNameSetter , setClassNameSetter ] = useState ( 0 )
@ -261,6 +252,7 @@ useEffect(()=>{
setSkillTreeGridSizeY ( skillTree . gridsizey )
setSkillTreeGridPaddingX ( skillTree . gridpaddingx )
setSkillTreeGridPaddingY ( skillTree . gridpaddingy )
setHalfLineHeight ( skillTree . halflineheight )
break ;
}
}
@ -286,7 +278,7 @@ useEffect(()=>{
< td colSpan = "2" > < EditBoxInput setData = { setbuildName } data = { buildName } / > < / t d >
< / t r >
< tr >
< td > Class < / t d >
< td onClick = { ( ) => { setClassSelectWindowOpen ( true ) } } > Class < / t d >
< 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 >
< / t d >
@ -310,10 +302,10 @@ useEffect(()=>{
< div className = "boxTitleBar" >
< h1 > Current Effects < / h 1 > < / d i v >
< PageControl pages = { 2 } currentPage = { effectPage } setCurrentPage = { setEffectPage } / >
< h3 > Effect Name < / h 3 >
< ul className = "infoBuffs" >
{
effectPage === 1 ? < > < li > Food Boost Effect
{ 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 >
< 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 >
@ -329,9 +321,9 @@ useEffect(()=>{
< ul >
< li > < img alt = "" src = "https://i.imgur.com/N6M74Qr.png" / > & ensp ; Potency + 5.0 % < / l i >
< / u l >
< /li></ > : < > < / >
}
< / u l >
< / l i > < / u l > < / > : < > < / >
}
< / d i v >
< / d i v >
< div className = "containerB" >
@ -414,6 +406,7 @@ AUGMENT
< div className = "boxTitleBar" >
< h1 > To Do List < / h 1 > < / d i v >
< ul className = "toDoList" >
< li className = "half" > Grids . Grids everywhere . < / l i >
< li > Finish "Item Details" for Weapons / Armor < / l i >
< li className = "half" > Class Skill Window < / l i >
< li > PA Select Window < / l i >
@ -548,56 +541,66 @@ AUGMENT
< / d i v >
< / d i v >
< ClassSelectorWindow setClassName = { setClassName } editClass = { classNameSetter } setSubClassName = { setSubClassName } modalOpen = { classSelectWindowOpen } setModalOpen = { setClassSelectWindowOpen } GetData = { p . GetData } / >
< Modal isOpen = { classSkillTreeWindowOpen } onRequestClose = { ( ) => { setClassSkillTreeWindowOpen ( false ) } } shouldFocusAfterRender = { true } shouldCloseOnOverlayClick = { true } shouldCloseOnEsc = { true } className = "modalSkillTree" overlayClassName = "modalOverlaySkillTree" >
< div className = "box treeSelectBox" >
< Modal isOpen = { classSelectWindowOpen } onRequestClose = { ( ) => { setClassSelectWindowOpen ( false ) } } shouldFocusAfterRender = { true } shouldCloseOnOverlayClick = { true } shouldCloseOnEsc = { true } className = "modal" overlayClassName = "modalOverlay" >
< div className = "box boxModalClassSelect" >
< div className = "boxTitleBar" >
< h1 > Class Skill Tree < / h 1 >
< h1 > Select Main Class < / h 1 >
< div className = "boxExit" onClick = { ( ) => { setClassSkillTreeWindowOpen ( false ) } } > < / d i v >
< / d i v >
< div className = "treeListContainer customScrollbar" >
< 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 >
< / 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 = "boxTitleBar" >
< h1 > Ranger01 < / h 1 >
< h1 > Class Skill Tree < / h 1 >
< div className = "boxExit" onClick = { ( ) => { setClassSkillTreeWindowOpen ( false ) } } > < / d i v >
< / d i v >
< div className = "skillTreeContainer customScrollbar" >
< div style = { { position : "relative" } } >
{ < SkillTree style = { { position : "absolute" } } strokeStyle = { skillTreeLineColor } lineWidth = { skillTreeLineWidth } lineDash = { [ ] }
gridDimensionsX = { skillTreeDimensionX } gridDimensionsY = { skillTreeDimensionY } gridSizeX = { skillTreeGridSizeX } gridSizeY = { skillTreeGridSizeY } gridPaddingX = { skillTreeGridPaddingX } gridPaddingY = { skillTreeGridPaddingY }
skillLines = { skillTreeData }
/ > }
< 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 = "skillMaxed" style = { { gridArea : "a2" } } > < span className = "skillTreeReqUnlock" > & nbsp ; < / s p a n > < i m g c l a s s N a m e = " s k i l l I c o n " a l t = " " s r c = " . / i c o n s / c l a s s _ s k i l l s / r a / B l i g h t _ R o u n d s _ R e i n f o r c e . p n g " / > < s p a n c l a s s N a m e = " s k i l l A l l o c a t e d " > 1 / 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 " > B l i g h t R o u n d s R e i n f o r c e < / e m > < / d i v >
< div style = { { gridArea : "b1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Bad_Condition_Ward.png" / > < span className = "skillAllocated" > 0 / 10 < / 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 a d C o n d i t i o n W a r d < / e m > < / d i v >
< div style = { { gridArea : "b2" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Spread_Shot.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 p r e a d S h o t < / e m > < / d i v >
< div className = "skillLocked" style = { { gridArea : "b3" } } > < span className = "skillTreeReqLock" > & nbsp ; < / s p a n > < i m g c l a s s N a m e = " s k i l l I c o n " a l t = " " s r c = " . / i c o n s / c l a s s _ s k i l l s / r a / S p r e a d _ S h o t _ Q u i c k _ G e t a w a y . p n g " / > < s p a n c l a s s N a m e = " s k i l l A l l o c a t e d " > 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 p r e a d S h o t Q u i c k G e t a w a y < / e m > < / d i v >
< div style = { { gridArea : "c1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Bad_Condition_Reduction.png" / > < span className = "skillAllocated" > 0 / 10 < / 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 a d C o n d i t i o n R e d u c t i o n < / e m > < / d i v >
< div style = { { gridArea : "c2" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Rifle_Grenadier.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 " > R i f l e G r e n a d i e r < / e m > < / d i v >
< div style = { { gridArea : "c3" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Slide_Shot_Advance.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 i d e S h o t A d v a n c e < / e m > < / d i v >
< div style = { { gridArea : "d2" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.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 t i c k y B o m b Q u i c k R e l o a d < / 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 : "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 >
< 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 style = { { position : "relative" } } >
{ < SkillTree style = { { position : "absolute" } } strokeStyle = { skillTreeLineColor } lineWidth = { skillTreeLineWidth } lineDash = { [ ] }
gridDimensionsX = { skillTreeDimensionX } gridDimensionsY = { skillTreeDimensionY } gridSizeX = { skillTreeGridSizeX } gridSizeY = { skillTreeGridSizeY } gridPaddingX = { skillTreeGridPaddingX } gridPaddingY = { skillTreeGridPaddingY }
skillLines = { skillTreeData } halflineheight = { halflineheight }
/ > }
< 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 = "skillMaxed" style = { { gridArea : "a2" } } > < span className = "skillTreeReqUnlock" > & nbsp ; < / s p a n > < i m g c l a s s N a m e = " s k i l l I c o n " a l t = " " s r c = " . / i c o n s / c l a s s _ s k i l l s / r a / B l i g h t _ R o u n d s _ R e i n f o r c e . p n g " / > < s p a n c l a s s N a m e = " s k i l l A l l o c a t e d " > 1 / 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 " > B l i g h t R o u n d s R e i n f o r c e < / e m > < / d i v >
< div style = { { gridArea : "b1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Bad_Condition_Ward.png" / > < span className = "skillAllocated" > 0 / 10 < / 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 a d C o n d i t i o n W a r d < / e m > < / d i v >
< div style = { { gridArea : "b2" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Spread_Shot.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 p r e a d S h o t < / e m > < / d i v >
< div className = "skillLocked" style = { { gridArea : "b3" } } > < span className = "skillTreeReqLock" > & nbsp ; < / s p a n > < i m g c l a s s N a m e = " s k i l l I c o n " a l t = " " s r c = " . / i c o n s / c l a s s _ s k i l l s / r a / S p r e a d _ S h o t _ Q u i c k _ G e t a w a y . p n g " / > < s p a n c l a s s N a m e = " s k i l l A l l o c a t e d " > 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 p r e a d S h o t Q u i c k G e t a w a y < / e m > < / d i v >
< div style = { { gridArea : "c1" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Bad_Condition_Reduction.png" / > < span className = "skillAllocated" > 0 / 10 < / 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 a d C o n d i t i o n R e d u c t i o n < / e m > < / d i v >
< div style = { { gridArea : "c2" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Rifle_Grenadier.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 " > R i f l e G r e n a d i e r < / e m > < / d i v >
< div style = { { gridArea : "c3" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Slide_Shot_Advance.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 i d e S h o t A d v a n c e < / e m > < / d i v >
< div style = { { gridArea : "d2" } } > < img className = "skillIcon" alt = "" src = "./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.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 t i c k y B o m b Q u i c k R e l o a d < / 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 : "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 >
< / 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 >
< / M o d a l >
< / M o d a l >
< SelectorWindow title = "Weapon Selection" modalOpen = { weaponSelectWindowOpen } setModalOpen = { setWeaponSelectWindowOpen } GetData = { p . GetData }
pageNames = { [ "All" , "Rifle" , "Launcher" , "Rod" , "Talis" ] }
dudleycu
3 years ago
