sigonasr2/ngsplanner
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'master' of https://github.com/sigonasr2/ngsplanner

Browse Source
This commit is contained in:
dudleycu 2021-08-17 19:09:49 +09:00
commit 6023cdf1ec
12 changed files with 180 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
backup_class_selctor_stuff_lol Normal file
View File

@ -0,0 +1,31 @@
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")}</li>
}}
/>
}
<ClassSelectorWindow setClassName={setClassName} editClass={classNameSetter} setSubClassName={setSubClassName} modalOpen={classSelectWindowOpen} setModalOpen={setClassSelectWindowOpen} GetData={p.GetData}/>
<div className="box treeSelectBox">
<div className="boxTitleBar">
<h1>Class Skill Tree</h1>
<div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
</div>
<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}</li>)}
</ul>
</div>
</div>

BIN
public/icons/class/br.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 B

4
public/index.html
View File

@ -3,8 +3,6 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<!--<link rel="stylesheet" href="%PUBLIC_URL%/bootstrap.css"/>
<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />-->
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
@ -26,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title>NGS Planner</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

BIN
src/3.woff
View File

Binary file not shown.

BIN
src/4.woff
View File

Binary file not shown.

4
src/App.js
View File

@ -39,7 +39,7 @@ const PARRY_COUNTER = 4
//NOT USED YET*/ //NOT USED YET*/
const BACKENDURL=process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKENDURL||'https://projectdivar.com:4504' const BACKENDURL=process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKENDURL||'https://projectdivar.com:4504'
const APP_TITLE = "NGSplanner" const APP_TITLE = "NGS Planner"
function GetBackendURL(p) { function GetBackendURL(p) {
return (BACKENDURL)+(p.TESTMODE?"/test":"") return (BACKENDURL)+(p.TESTMODE?"/test":"")
@ -804,7 +804,7 @@ function App() {
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/test"}> <Route path={process.env.PUBLIC_URL+"/test"}>
<Helmet> <Helmet>
<title>{APP_TITLE+" - Test"}</title> <title>{"Test - "+APP_TITLE}</title>
</Helmet> </Helmet>
<TestHeader/> <TestHeader/>
<TestPanel <TestPanel

4
src/TestHeader.js
View File

@ -2,10 +2,10 @@ import React from 'react';
function TestHeader() { function TestHeader() {
return ( return (
<div id="header"> <div className="header">
<div> <div>
<ul> <ul>
<li className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGSplanner.com</a></li> <li className="logo"><a href="."><img alt="" src={process.env.PUBLIC_URL + '/icons/logo_sm.png'} />&emsp;NGS<span>planner.com</span></a></li>
<li className="headermenuitem"><a href=".">Build Planner</a></li> <li className="headermenuitem"><a href=".">Build Planner</a></li>
<li className="headermenuitem"><a href=".">Guides</a></li> <li className="headermenuitem"><a href=".">Guides</a></li>
<li className="headermenuitem"><a href=".">Blog</a></li> <li className="headermenuitem"><a href=".">Blog</a></li>

111
src/TestPanel.js
View File

@ -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")}</li>
}}
/>
}
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}/></td> <td colSpan="2"><EditBoxInput setData={setbuildName} data={buildName}/></td>
</tr> </tr>
<tr> <tr>
<td>Class</td> <td onClick={()=>{setClassSelectWindowOpen(true)}}>Class</td>
<td> <td>
<EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass> <EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass>
</td> </td>
@ -310,10 +302,10 @@ useEffect(()=>{
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Current Effects</h1></div> <h1>Current Effects</h1></div>
<PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/> <PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
<h3>Effect Name</h3> {effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li>Food Boost Effect
<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%</li> <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li> <li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
@ -329,9 +321,9 @@ useEffect(()=>{
<ul> <ul>
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li> <li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
</ul> </ul>
</li></>:<></> </li></ul></>:<></>
}
</ul> }
</div> </div>
</div> </div>
<div className="containerB"> <div className="containerB">
@ -414,6 +406,7 @@ AUGMENT
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>To Do List</h1></div> <h1>To Do List</h1></div>
<ul className="toDoList"> <ul className="toDoList">
<li className="half">Grids. Grids everywhere.</li>
<li>Finish "Item Details" for Weapons/Armor</li> <li>Finish "Item Details" for Weapons/Armor</li>
<li className="half">Class Skill Window</li> <li className="half">Class Skill Window</li>
<li>PA Select Window</li> <li>PA Select Window</li>
@ -548,56 +541,66 @@ AUGMENT
</div> </div>
</div> </div>
<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</h1> <h1>Select Main Class</h1>
<div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div> <div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
</div> </div>
<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}</li>)} <li><img alt="" src={DisplayIcon("/icons/class/hu.png")} />Hunter</li>
<li><img alt="" src={DisplayIcon("/icons/class/fi.png")} />Fighter</li>
<li className="treeListMain"><img alt="" src={DisplayIcon("/icons/class/ra.png")} />Ranger</li>
<li><img alt="" src={DisplayIcon("/icons/class/gu.png")} />Gunner</li>
<li className="treeListSub"><img alt="" src={DisplayIcon("/icons/class/fo.png")} />Force</li>
<li><img alt="" src={DisplayIcon("/icons/class/te.png")} />Techter</li>
<li><img alt="" src={DisplayIcon("/icons/class/br.png")} />Braver</li>
</ul> </ul>
</div> </div>
</div> </div>
</Modal>
<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</h1> <h1>Class Skill Tree</h1>
<div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div> <div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
</div> </div>
<div className="skillTreeContainer customScrollbar"> <PageControl pages={2} pageNames={[<><img alt="" src={DisplayIcon("/icons/class/ra.png")} /> Ranger</>, <><img alt="" src={DisplayIcon("/icons/class/fo.png")} /> Force</>, "Launcher", "Rod", "Talis"]} currentPage={treePage} setCurrentPage={setTreePage} />
<div style={{position:"relative"}}> {treePage === 1 ? <>
{<SkillTree style={{position:"absolute"}} strokeStyle={skillTreeLineColor} lineWidth={skillTreeLineWidth} lineDash={[]} <div className="skillTreeContainer customScrollbar">
gridDimensionsX={skillTreeDimensionX} gridDimensionsY={skillTreeDimensionY} gridSizeX={skillTreeGridSizeX} gridSizeY={skillTreeGridSizeY} gridPaddingX={skillTreeGridPaddingX} gridPaddingY={skillTreeGridPaddingY} <div style={{ position: "relative" }}>
skillLines={skillTreeData} {<SkillTree style={{ position: "absolute" }} strokeStyle={skillTreeLineColor} lineWidth={skillTreeLineWidth} lineDash={[]}
/>} gridDimensionsX={skillTreeDimensionX} gridDimensionsY={skillTreeDimensionY} gridSizeX={skillTreeGridSizeX} gridSizeY={skillTreeGridSizeY} gridPaddingX={skillTreeGridPaddingX} gridPaddingY={skillTreeGridPaddingY}
<div className="skillTreeGrid"> skillLines={skillTreeData} halflineheight={halflineheight}
<div className="skillActive" style={{ gridArea: "a1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds.png" /><span className="skillAllocated">1/5</span><em className="skillName">Blight Rounds</em></div> />}
<div className="skillMaxed" style={{ gridArea: "a2" }}><span className="skillTreeReqUnlock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds_Reinforce.png" /><span className="skillAllocated">1/1</span><em className="skillName">Blight Rounds Reinforce</em></div> <div className="skillTreeGrid">
<div style={{ gridArea: "b1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Ward.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Ward</em></div> <div className="skillActive" style={{ gridArea: "a1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds.png" /><span className="skillAllocated">1/5</span><em className="skillName">Blight Rounds</em></div>
<div style={{ gridArea: "b2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot</em></div> <div className="skillMaxed" style={{ gridArea: "a2" }}><span className="skillTreeReqUnlock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Blight_Rounds_Reinforce.png" /><span className="skillAllocated">1/1</span><em className="skillName">Blight Rounds Reinforce</em></div>
<div className="skillLocked" style={{ gridArea: "b3" }}><span className="skillTreeReqLock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot_Quick_Getaway.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot Quick Getaway</em></div> <div style={{ gridArea: "b1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Ward.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Ward</em></div>
<div style={{ gridArea: "c1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Reduction.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Reduction</em></div> <div style={{ gridArea: "b2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot</em></div>
<div style={{ gridArea: "c2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Rifle_Grenadier.png" /><span className="skillAllocated">0/1</span><em className="skillName">Rifle Grenadier</em></div> <div className="skillLocked" style={{ gridArea: "b3" }}><span className="skillTreeReqLock">&nbsp;</span><img className="skillIcon" alt="" src="./icons/class_skills/ra/Spread_Shot_Quick_Getaway.png" /><span className="skillAllocated">0/1</span><em className="skillName">Spread Shot Quick Getaway</em></div>
<div style={{ gridArea: "c3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slide_Shot_Advance.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slide Shot Advance</em></div> <div style={{ gridArea: "c1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Bad_Condition_Reduction.png" /><span className="skillAllocated">0/10</span><em className="skillName">Bad Condition Reduction</em></div>
<div style={{ gridArea: "d2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png" /><span className="skillAllocated">0/1</span><em className="skillName">Sticky Bomb Quick Reload</em></div> <div style={{ gridArea: "c2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Rifle_Grenadier.png" /><span className="skillAllocated">0/1</span><em className="skillName">Rifle Grenadier</em></div>
<div style={{ gridArea: "d3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span className="skillAllocated">0/1</span><em className="skillName">Launcher Charge Grouping</em></div> <div style={{ gridArea: "c3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slide_Shot_Advance.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slide Shot Advance</em></div>
<div style={{ gridArea: "e1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Attack-Ranger</em></div> <div style={{ gridArea: "d2" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Sticky_Bomb_Quick_Reload.png" /><span className="skillAllocated">0/1</span><em className="skillName">Sticky Bomb Quick Reload</em></div>
<div style={{ gridArea: "f1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div> <div style={{ gridArea: "d3" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Launcher_Charge_Grouping.png" /><span className="skillAllocated">0/1</span><em className="skillName">Launcher Charge Grouping</em></div>
<div style={{ gridArea: "a5" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div> <div style={{ gridArea: "e1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Attack-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Attack-Ranger</em></div>
<div style={{ gridArea: "a6" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div> <div style={{ gridArea: "f1" }}><img className="skillIcon" alt="" src="./icons/class_skills/ra/Slow_Landing_Charge-Ranger.png" /><span className="skillAllocated">0/1</span><em className="skillName">Slow Landing Charge-Ranger</em></div>
</div>
</div> </div>
</div></> : <></>}
<div className="skillPoints">
<div>Your Skill Points<span>6</span></div>
<div>SP<span></span>0</div>
</div> </div>
</div> <div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
<div className="skillPoints">Your Skill Points&emsp;&emsp;6&emsp;&emsp;&emsp;SP&emsp;&emsp;&emsp;&emsp;0</div>
<div className="skillConfirm"><span>Confirm</span><span>Cancel</span></div>
</div> </div>
</Modal>
</Modal>
<SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData} <SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData}
pageNames={["All","Rifle","Launcher","Rod","Talis"]} pageNames={["All","Rifle","Launcher","Rod","Talis"]}

BIN
src/fonts/seguisym.ttf Normal file
View File

Binary file not shown.

30
src/skilltree/skillTree.js
View File

@ -7,8 +7,8 @@ function SkillTree(p) {
useEffect(() => { useEffect(() => {
setWidth(p.gridSizeX*p.gridDimensionsX+p.gridPaddingX*(p.gridDimensionsX-1)) setWidth(p.gridSizeX*p.gridDimensionsX+p.gridPaddingX*(p.gridDimensionsX-1))
setHeight(p.gridSizeY*p.gridDimensionsY+p.gridPaddingY*(p.gridDimensionsY-1)) setHeight(p.gridSizeY*Math.ceil(p.gridDimensionsY/2)+p.halflineheight*Math.floor(p.gridDimensionsY/2)+p.gridPaddingY*(p.gridDimensionsY-1))
}, [p.skillLines,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.gridDimensionsX,p.gridDimensionsY]) }, [p.halflineheight,p.skillLines,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.gridDimensionsX,p.gridDimensionsY])
useEffect(()=>{ useEffect(()=>{
const canvas = canvasRef.current const canvas = canvasRef.current
@ -25,25 +25,25 @@ function SkillTree(p) {
var padX = x!==0?p.gridPaddingX*x:0 var padX = x!==0?p.gridPaddingX*x:0
var padY = y!==0?p.gridPaddingY*y:0 var padY = y!==0?p.gridPaddingY*y:0
switch (char) { switch (char) {
case "─":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; case "─":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break;
case "│":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; case "│":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break;
case "└":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; case "└":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break;
case "┌":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; case "┌":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break;
case "┘":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; case "┘":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break;
case "┐":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; case "┐":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break;
case "├":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; case "├":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break;
case "┤":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; case "┤":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break;
case "┬":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break; case "┬":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.stroke();break;
case "┴":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; case "┴":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break;
case "┼":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,y*p.gridSizeY+(padY)+p.gridSizeY+p.gridPaddingY);context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,y*p.gridSizeY+(padY)+p.gridSizeY/2);context.stroke();break; case "┼":context.beginPath();context.moveTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)-p.gridPaddingY);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX/2,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY+p.gridPaddingY);context.moveTo(x*p.gridSizeX+(padX)-p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.lineTo(x*p.gridSizeX+(padX)+p.gridSizeX+p.gridPaddingX,Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY)+p.gridSizeY/2);context.stroke();break;
case "□":context.fillRect(x*p.gridSizeX+(padX), y*p.gridSizeY+(padY), p.gridSizeX, p.gridSizeY);break; case "□":context.fillRect(x*p.gridSizeX+(padX), Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY), p.gridSizeX, p.gridSizeY);break;
default: default:
} }
x++ x++
} }
y++ y++
} }
},[width,height,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.lineDash,p.lineWidth,p.skillLines,p.strokeStyle]) },[width,height,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.lineDash,p.lineWidth,p.skillLines,p.strokeStyle,p.halflineheight])
return <canvas return <canvas
width={width} width={width}

6
src/skilltree/skillTreeEditor.js
View File

@ -25,6 +25,7 @@ function SkillTreeEditor(p) {
const [skillData,setSkillData] = useState([]) const [skillData,setSkillData] = useState([])
const [message,setMessage] = useState("") const [message,setMessage] = useState("")
const [loading,setLoading] = useState(false) const [loading,setLoading] = useState(false)
const [halflineheight,setHalfLineHeight] = useState(60)
function GetSkills(x,y) { function GetSkills(x,y) {
var filtered = skillData.filter((skill)=>Number(skill.split(",")[0])===Number(x)&&Number(skill.split(",")[1])===Number(y)) var filtered = skillData.filter((skill)=>Number(skill.split(",")[0])===Number(x)&&Number(skill.split(",")[1])===Number(y))
@ -46,6 +47,7 @@ function SkillTreeEditor(p) {
gridsizey:gridSizeY, gridsizey:gridSizeY,
gridpaddingx:gridPaddingX, gridpaddingx:gridPaddingX,
gridpaddingy:gridPaddingY, gridpaddingy:gridPaddingY,
halflineheight:halflineheight,
class_id:cl class_id:cl
}) })
.then((data)=>{ .then((data)=>{
@ -85,6 +87,7 @@ function SkillTreeEditor(p) {
setGridSizeY(skillTreeData[id].gridsizey) setGridSizeY(skillTreeData[id].gridsizey)
setGridPaddingX(skillTreeData[id].gridpaddingx) setGridPaddingX(skillTreeData[id].gridpaddingx)
setGridPaddingY(skillTreeData[id].gridpaddingy) setGridPaddingY(skillTreeData[id].gridpaddingy)
setHalfLineHeight(skillTreeData[id].halflineheight)
found=true found=true
} }
} }
@ -171,7 +174,7 @@ function SkillTreeEditor(p) {
<div style={{width:"800px",position:"relative",left:"300px"}}> <div style={{width:"800px",position:"relative",left:"300px"}}>
<SkillTree strokeStyle={lineColor} lineWidth={lineWidth} lineDash={[]} <SkillTree strokeStyle={lineColor} lineWidth={lineWidth} lineDash={[]}
gridDimensionsX={dimensionX} gridDimensionsY={dimensionY} gridSizeX={gridSizeX} gridSizeY={gridSizeY} gridPaddingX={gridPaddingX} gridPaddingY={gridPaddingY} gridDimensionsX={dimensionX} gridDimensionsY={dimensionY} gridSizeX={gridSizeX} gridSizeY={gridSizeY} gridPaddingX={gridPaddingX} gridPaddingY={gridPaddingY}
skillLines={skillLines} skillLines={skillLines} halflineheight={halflineheight}
/> />
{renderedInputs.map((control)=>control)} {renderedInputs.map((control)=>control)}
<br/> <br/>
@ -181,6 +184,7 @@ function SkillTreeEditor(p) {
<label for="lineWidth">Line Width:</label><input type="number" id="lineWidth" value={lineWidth} onChange={(f)=>{setLineWidth(f.currentTarget.value)}}/><br/> <label for="lineWidth">Line Width:</label><input type="number" id="lineWidth" value={lineWidth} onChange={(f)=>{setLineWidth(f.currentTarget.value)}}/><br/>
<label for="gridSizeX">Grid Size X:</label><input type="number" id="gridSizeX" value={dimensionX} onChange={(f)=>{setDimensionX(f.currentTarget.value)}}/><br/> <label for="gridSizeX">Grid Size X:</label><input type="number" id="gridSizeX" value={dimensionX} onChange={(f)=>{setDimensionX(f.currentTarget.value)}}/><br/>
<label for="gridSizeY">Grid Size Y:</label><input type="number" id="gridSizeY" value={dimensionY} onChange={(f)=>{setDimensionY(f.currentTarget.value)}}/><br/> <label for="gridSizeY">Grid Size Y:</label><input type="number" id="gridSizeY" value={dimensionY} onChange={(f)=>{setDimensionY(f.currentTarget.value)}}/><br/>
<label for="subrowHeight">Sub-row Height:</label><input type="number" id="subrowHeight" value={halflineheight} onChange={(f)=>{setHalfLineHeight(f.currentTarget.value)}}/><br/>
<label for="boxSizeX">Box Size X:</label><input type="number" id="boxSizeX" value={gridSizeX} onChange={(f)=>{setGridSizeX(f.currentTarget.value)}}/><br/> <label for="boxSizeX">Box Size X:</label><input type="number" id="boxSizeX" value={gridSizeX} onChange={(f)=>{setGridSizeX(f.currentTarget.value)}}/><br/>
<label for="boxSizeY">Box Size Y:</label><input type="number" id="boxSizeY" value={gridSizeY} onChange={(f)=>{setGridSizeY(f.currentTarget.value)}}/><br/> <label for="boxSizeY">Box Size Y:</label><input type="number" id="boxSizeY" value={gridSizeY} onChange={(f)=>{setGridSizeY(f.currentTarget.value)}}/><br/>
<label for="gridPaddingX">Grid Padding X:</label><input type="number" id="gridPaddingX" value={gridPaddingX} onChange={(f)=>{setGridPaddingX(f.currentTarget.value)}}/><br/> <label for="gridPaddingX">Grid Padding X:</label><input type="number" id="gridPaddingX" value={gridPaddingX} onChange={(f)=>{setGridPaddingX(f.currentTarget.value)}}/><br/>

175
src/style.css
View File

@ -3,6 +3,10 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
} }
@font-face { @font-face {
font-family: "ngs"; font-family: "ngs";
@ -20,6 +24,10 @@
font-family: "ngs4"; font-family: "ngs4";
src: url("./fonts/1.woff") format("woff"); src: url("./fonts/1.woff") format("woff");
} }
@font-face {
font-family: "Segoe UI Symbol";
src: url("./fonts/seguisym.ttf") format("truetype");
}
a, a:visited { a, a:visited {
color: white; color: white;
text-decoration: none; text-decoration: none;
@ -34,20 +42,7 @@ hr {
} }
img { img {
vertical-align: middle; vertical-align: middle;
}/* }
body {
background-image: url("./icons/d_global_bg_header.png"),url("./icons/gl_main_bg.jpg");
background-size: 1903px,2560px;
background-color: #e8ecf4;
background-repeat: no-repeat,repeat-y;
background-position: center 0;
color: black;
font-family: ngs,Arial,sans-serif;
font-size: 11pt;
font-weight: normal;
text-align: center;
-webkit-font-smoothing: antialiased;
}*/
body { body {
background-image: url("https://pbs.twimg.com/media/E8tfm23VUAQTAAu?format=jpg&name=4096x4096"); background-image: url("https://pbs.twimg.com/media/E8tfm23VUAQTAAu?format=jpg&name=4096x4096");
background-color: #e8ecf4; background-color: #e8ecf4;
@ -57,10 +52,10 @@ body {
background-size: cover; background-size: cover;
color: black; color: black;
font-family: ngs,Arial,sans-serif; font-family: ngs,Arial,sans-serif;
font-size: 11pt; font-size: 16px;
font-weight: normal; font-weight: normal;
text-align: center; text-align: center;
-webkit-font-smoothing: antialiased;
} }
table td { table td {
vertical-align: top; vertical-align: top;
@ -73,47 +68,29 @@ em {
font-style: normal; font-style: normal;
} }
#header { #header {
background-color: white; background-color: rgba(0,0,0,0.33);
min-height: 50px; min-height: 50px;
padding: 20px; padding: 20px;
text-align: left; text-align: left;
margin-bottom: 20px; color:white;
} }
#header a { .header a {
color: #151f25; /*color: #151f25;*/
color:white;
text-decoration: none; text-decoration: none;
} }
#header a:hover { .header a:hover {
color: #454f85; background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
text-decoration: none; text-decoration: none;
} }
#header div {
margin: 0 auto;
width: 80%;
}
#header ul {
display: flex;
flex-flow: row wrap;
align-items: center;
margin-left: -40px;
justify-content: flex-end;
}
#header ul li {
flex: 0 1;
color: black;
font-family: "ngs2";
text-align: center;
white-space:nowrap;
}
.headermenuitem {
font-size:14pt;
margin-left: 40px;
}
.logo { .logo {
font-family: "ngs2";
margin-right: auto; margin-right: auto;
font-weight:bold; font-size:24px;
font-size:20px; }
.logo span{
font-size:16px;
text-transform: uppercase;
} }
.logo img { .logo img {
height:28px; height:28px;
@ -128,24 +105,12 @@ em {
display:none; display:none;
} }
} }
.main { .main,.header {
display: flex; display: grid;
flex-flow: row wrap; grid-template-columns: repeat(auto-fit,minmax(300px,450px));
justify-content: center; justify-content: center;
} gap: 10px;
.containerA, .containerC { margin: 0 10px;
flex-grow: 1;
flex-shrink: 1;
flex-basis: 240px;
max-width: 360px;
margin: 0 5px;
}
.containerB {
flex-grow: 1;
flex-shrink: auto;
flex-basis: auto;
max-width: 480px;
margin: 0 5px;
} }
.box { .box {
color: #97e2fc; color: #97e2fc;
@ -155,8 +120,6 @@ em {
text-align: left; text-align: left;
text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66); text-shadow: -1px -1px 0 rgba(0,0,0,0.66), 1px -1px 0 rgba(0,0,0,0.66), -1px 1px 0 rgba(0,0,0,0.66), 1px 1px 0 rgba(0,0,0,0.66);
padding-bottom:10px; padding-bottom:10px;
/*filter: drop-shadow(0 5px 5px rgba(0,0,0,0.8));*/
/*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;*/
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
} }
@ -210,25 +173,20 @@ em {
}*/ }*/
.boxTitleBar { .boxTitleBar {
/* background-color: #495a61; */
background-color: rgba(124, 144, 148, 0.66); background-color: rgba(124, 144, 148, 0.66);
color: white; color: white;
font-weight: normal; font-weight: normal;
font-size: 13pt; font-size: 18px;
text-align: left; text-align: left;
white-space: nowrap;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: space-between; justify-content: space-between;
} }
.boxTitleBar h1 { .boxTitleBar h1 {
/* background-color: #495a61; */
color: white; color: white;
font-weight: normal; font-weight: normal;
font-size: 13pt; font-size: 18px;
overflow: hidden;
text-overflow: ellipsis;
margin-right: 10px; margin-right: 10px;
padding: 13px 13px 7px 13px; padding: 13px 13px 7px 13px;
} }
@ -709,7 +667,7 @@ option {
top: -10px; top: -10px;
} }
.treeList { .treeList {
padding: 0 2px; padding: 0 2px 2px 2px;
} }
.treeList li { .treeList li {
background-color: rgba(128,128,128,0.33); background-color: rgba(128,128,128,0.33);
@ -719,12 +677,16 @@ option {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right center; background-position: right center;
background-origin: content-box; background-origin: content-box;
line-height: 20px;
} }
li.treeListMain { li.treeListMain:after, li.treeListSub:after {
background-image: url("./icons/class_main.png"); margin-left: 10px;
} }
li.treeListSub { li.treeListMain:after {
background-image: url("./icons/class_sub.png"); content: url("./icons/class_main.png");
}
li.treeListSub:after {
content: url("./icons/class_sub.png");
} }
.treeList li img { .treeList li img {
vertical-align: middle; vertical-align: middle;
@ -735,7 +697,6 @@ li.treeListSub {
margin: 0; margin: 0;
min-width: 181px; min-width: 181px;
min-height: auto; min-height: auto;
/*box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;*/
outline: 1px solid rgba(54,255,255,1); outline: 1px solid rgba(54,255,255,1);
} }
.skillTreeBox .boxTitleBar, .treeSelectBox .boxTitleBar { .skillTreeBox .boxTitleBar, .treeSelectBox .boxTitleBar {
@ -854,6 +815,18 @@ div.skillMaxed .skillAllocated {
padding: 16px 0 10px 0; padding: 16px 0 10px 0;
color: white; color: white;
font-size: 14pt; font-size: 14pt;
display: grid;
grid-template-columns: repeat(auto-fit,292px);
justify-content: center;
gap: 10px;
}
.skillPoints div:first-child {
text-align: center;
}
.skillPoints div span {
display: inline-block;
width: calc(292px / 2);
text-align: center;
} }
.skillConfirm { .skillConfirm {
justify-content: center; justify-content: center;
@ -986,35 +959,14 @@ button{
display: grid; display: grid;
justify-items: stretch; justify-items: stretch;
align-items: center; align-items: center;
grid-template-columns: minmax(10px, 1fr) minmax(200px, 580px) minmax(10px, 1fr); grid-template-columns: minmax(10px, 1fr) minmax(200px, auto) minmax(10px, 1fr);
grid-template-rows: 10px minmax(0, 1fr) 10px; grid-template-rows: 10px minmax(10px, 1fr) 10px;
}
.modalOverlaySkillTree {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.8));
display: grid;
justify-items: stretch;
align-items: center;
grid-template-columns: minmax(220px, 1fr) minmax(0, auto) minmax(10px, 1fr);
grid-template-rows: 10px minmax(0, 1fr) 10px;
} }
.modal { .modal {
outline: 0; outline: 0;
grid-column: 2; grid-column: 2;
grid-row: 2; grid-row: 2;
} }
.modalSkillTree {
position: relative;
outline: 0;
grid-column: 2;
grid-row: 2;
/* display: flex;
flex-flow: row nowrap;*/
}
.boxModal { .boxModal {
animation: fadeIn 0.15s; animation: fadeIn 0.15s;
max-width: 580px; max-width: 580px;
@ -1022,19 +974,26 @@ button{
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important; box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;
outline: 1px solid rgba(54,255,255,1); outline: 1px solid rgba(54,255,255,1);
} }
.boxModalClassSelect {
animation: fadeIn 0.15s;
width: 300px;
margin: 0 auto;
box-shadow: 0 10px 16px 0 rgba(0,0,0,0.5), 0 6px 20px 0 rgba(0,0,0,0.5) !important;
outline: 1px solid rgba(54,255,255,1);
}
@keyframes fadeIn { @keyframes fadeIn {
0% {opacity:0;margin-bottom:30px;} 0% {opacity:0;margin-bottom:30px;}
100% {opacity:1;margin-bottom:0;} 100% {opacity:1;margin-bottom:0;}
} }
.boxModal .boxTitleBar { .boxModal .boxTitleBar, .boxModalClassSelect .boxTitleBar {
background: linear-gradient(45deg, rgba(47,153,193,0.66),rgba(46,94,137,0.66) 30%,rgba(46,94,137,0.66) 70%, rgba(47,153,193,1)); background: linear-gradient(45deg, rgba(47,153,193,0.66),rgba(46,94,137,0.66) 30%,rgba(46,94,137,0.66) 70%, rgba(47,153,193,1));
} }
.modalItemListContainer { .modalItemListContainer {
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
margin: 10px 5px 0 0; margin: 10px 5px 0 0;
padding: 2px; padding: 2px;
max-height: calc(90vh - 115px); max-height: calc(90vh - 115px);
} }
.webicon{ .webicon{
color:maroon; color:maroon;