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
master
dudleycu 4 years ago
parent c41043a074 624e00d7b6
commit 6023cdf1ec
12 changed files with 180 additions and 185 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 31
      backup_class_selctor_stuff_lol
  2. BIN
      public/icons/class/br.png
  3. 4
      public/index.html
  4. BIN
      src/3.woff
  5. BIN
      src/4.woff
  6. 4
      src/App.js
  7. 4
      src/TestHeader.js
  8. 67
      src/TestPanel.js
  9. BIN
      src/fonts/seguisym.ttf
  10. 30
      src/skilltree/skillTree.js
  11. 6
      src/skilltree/skillTreeEditor.js
  12. 165
      src/style.css

31
backup_class_selctor_stuff_lol
Unescape 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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 B

4
public/index.html
Unescape View File

@ -3,8 +3,6 @@
<head>
<meta charset="utf-8" />
<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="theme-color" content="#000000" />
<meta
@ -26,7 +24,7 @@
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`.
-->
<title>React App</title>
<title>NGS Planner</title>
</head>
<body>
<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
Unescape View File

@ -39,7 +39,7 @@ const PARRY_COUNTER = 4
//NOT USED YET*/
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) {
return (BACKENDURL)+(p.TESTMODE?"/test":"")
@ -804,7 +804,7 @@ function App() {
</Route>
<Route path={process.env.PUBLIC_URL+"/test"}>
<Helmet>
<title>{APP_TITLE+" - Test"}</title>
<title>{"Test - "+APP_TITLE}</title>
</Helmet>
<TestHeader/>
<TestPanel

4
src/TestHeader.js
Unescape View File

@ -2,10 +2,10 @@ import React from 'react';
function TestHeader() {
return (
<div id="header">
<div className="header">
<div>
<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=".">Guides</a></li>
<li className="headermenuitem"><a href=".">Blog</a></li>

67
src/TestPanel.js
Unescape 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){
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}/></td>
</tr>
<tr>
<td>Class</td>
<td onClick={()=>{setClassSelectWindowOpen(true)}}>Class</td>
<td>
<EditableClass editClass={0} setClassNameSetter={setClassNameSetter} GetData={p.GetData} setClassName={setClassName} name={className} setClassSelectWindowOpen={setClassSelectWindowOpen}></EditableClass>
</td>
@ -310,10 +302,10 @@ useEffect(()=>{
<div className="boxTitleBar">
<h1>Current Effects</h1></div>
<PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
<h3>Effect Name</h3>
<ul className="infoBuffs">
{
effectPage===1?<><li>Food Boost Effect
{effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li>Food Boost Effect
<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;[Crisp] Potency to Weak Point +5.0%</li>
@ -329,9 +321,9 @@ useEffect(()=>{
<ul>
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
</ul>
</li></>:<></>
</li></ul></>:<></>
}
</ul>
</div>
</div>
<div className="containerB">
@ -414,6 +406,7 @@ AUGMENT
<div className="boxTitleBar">
<h1>To Do List</h1></div>
<ul className="toDoList">
<li className="half">Grids. Grids everywhere.</li>
<li>Finish "Item Details" for Weapons/Armor</li>
<li className="half">Class Skill Window</li>
<li>PA Select Window</li>
@ -548,32 +541,41 @@ AUGMENT
</div>
</div>
<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</h1>
<h1>Select Main Class</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>)}
<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>
</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="boxTitleBar">
<h1>Ranger01</h1>
<h1>Class Skill Tree</h1>
<div className="boxExit" onClick={() => { setClassSkillTreeWindowOpen(false) }}></div>
</div>
<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} />
{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}
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</span><em className="skillName">Blight Rounds</em></div>
@ -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</span><em className="skillName">Launcher Charge Grouping</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: "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: "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: "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>
</div>
</div></> : <></>}
<div className="skillPoints">
<div>Your Skill Points<span>6</span></div>
<div>SP<span></span>0</div>
</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>
<SelectorWindow title="Weapon Selection" modalOpen={weaponSelectWindowOpen} setModalOpen={setWeaponSelectWindowOpen} GetData={p.GetData}

BIN
src/fonts/seguisym.ttf
View File

Binary file not shown.

30
src/skilltree/skillTree.js
Unescape View File

@ -7,8 +7,8 @@ function SkillTree(p) {
useEffect(() => {
setWidth(p.gridSizeX*p.gridDimensionsX+p.gridPaddingX*(p.gridDimensionsX-1))
setHeight(p.gridSizeY*p.gridDimensionsY+p.gridPaddingY*(p.gridDimensionsY-1))
}, [p.skillLines,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.gridDimensionsX,p.gridDimensionsY])
setHeight(p.gridSizeY*Math.ceil(p.gridDimensionsY/2)+p.halflineheight*Math.floor(p.gridDimensionsY/2)+p.gridPaddingY*(p.gridDimensionsY-1))
}, [p.halflineheight,p.skillLines,p.gridSizeX,p.gridSizeY,p.gridPaddingX,p.gridPaddingY,p.gridDimensionsX,p.gridDimensionsY])
useEffect(()=>{
const canvas = canvasRef.current
@ -25,25 +25,25 @@ function SkillTree(p) {
var padX = x!==0?p.gridPaddingX*x:0
var padY = y!==0?p.gridPaddingY*y:0
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.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,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+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,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,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,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.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,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.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,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.fillRect(x*p.gridSizeX+(padX), y*p.gridSizeY+(padY), p.gridSizeX, p.gridSizeY);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,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,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,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,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,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,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,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,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,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,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), Math.ceil(y/2)*p.gridSizeY+Math.floor(y/2)*p.halflineheight+(padY), p.gridSizeX, p.gridSizeY);break;
default:
}
x++
}
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
width={width}

6
src/skilltree/skillTreeEditor.js
Unescape View File

@ -25,6 +25,7 @@ function SkillTreeEditor(p) {
const [skillData,setSkillData] = useState([])
const [message,setMessage] = useState("")
const [loading,setLoading] = useState(false)
const [halflineheight,setHalfLineHeight] = useState(60)
function GetSkills(x,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,
gridpaddingx:gridPaddingX,
gridpaddingy:gridPaddingY,
halflineheight:halflineheight,
class_id:cl
})
.then((data)=>{
@ -85,6 +87,7 @@ function SkillTreeEditor(p) {
setGridSizeY(skillTreeData[id].gridsizey)
setGridPaddingX(skillTreeData[id].gridpaddingx)
setGridPaddingY(skillTreeData[id].gridpaddingy)
setHalfLineHeight(skillTreeData[id].halflineheight)
found=true
}
}
@ -171,7 +174,7 @@ function SkillTreeEditor(p) {
<div style={{width:"800px",position:"relative",left:"300px"}}>
<SkillTree strokeStyle={lineColor} lineWidth={lineWidth} lineDash={[]}
gridDimensionsX={dimensionX} gridDimensionsY={dimensionY} gridSizeX={gridSizeX} gridSizeY={gridSizeY} gridPaddingX={gridPaddingX} gridPaddingY={gridPaddingY}
skillLines={skillLines}
skillLines={skillLines} halflineheight={halflineheight}
/>
{renderedInputs.map((control)=>control)}
<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="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="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="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/>

165
src/style.css
Unescape View File

@ -3,6 +3,10 @@
margin: 0;
padding: 0;
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-family: "ngs";
@ -20,6 +24,10 @@
font-family: "ngs4";
src: url("./fonts/1.woff") format("woff");
}
@font-face {
font-family: "Segoe UI Symbol";
src: url("./fonts/seguisym.ttf") format("truetype");
}
a, a:visited {
color: white;
text-decoration: none;
@ -34,20 +42,7 @@ hr {
}
img {
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 {
background-image: url("https://pbs.twimg.com/media/E8tfm23VUAQTAAu?format=jpg&name=4096x4096");
background-color: #e8ecf4;
@ -57,10 +52,10 @@ body {
background-size: cover;
color: black;
font-family: ngs,Arial,sans-serif;
font-size: 11pt;
font-size: 16px;
font-weight: normal;
text-align: center;
-webkit-font-smoothing: antialiased;
}
table td {
vertical-align: top;
@ -73,47 +68,29 @@ em {
font-style: normal;
}
#header {
background-color: white;
background-color: rgba(0,0,0,0.33);
min-height: 50px;
padding: 20px;
text-align: left;
margin-bottom: 20px;
color:white;
}
#header a {
color: #151f25;
.header a {
/*color: #151f25;*/
color:white;
text-decoration: none;
}
#header a:hover {
color: #454f85;
.header a:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
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 {
font-family: "ngs2";
margin-right: auto;
font-weight:bold;
font-size:20px;
font-size:24px;
}
.logo span{
font-size:16px;
text-transform: uppercase;
}
.logo img {
height:28px;
@ -128,24 +105,12 @@ em {
display:none;
}
}
.main {
display: flex;
flex-flow: row wrap;
.main,.header {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(300px,450px));
justify-content: center;
}
.containerA, .containerC {
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;
gap: 10px;
margin: 0 10px;
}
.box {
color: #97e2fc;
@ -155,8 +120,6 @@ em {
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);
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);
}
@ -210,25 +173,20 @@ em {
}*/
.boxTitleBar {
/* background-color: #495a61; */
background-color: rgba(124, 144, 148, 0.66);
color: white;
font-weight: normal;
font-size: 13pt;
font-size: 18px;
text-align: left;
white-space: nowrap;
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
}
.boxTitleBar h1 {
/* background-color: #495a61; */
color: white;
font-weight: normal;
font-size: 13pt;
overflow: hidden;
text-overflow: ellipsis;
font-size: 18px;
margin-right: 10px;
padding: 13px 13px 7px 13px;
}
@ -709,7 +667,7 @@ option {
top: -10px;
}
.treeList {
padding: 0 2px;
padding: 0 2px 2px 2px;
}
.treeList li {
background-color: rgba(128,128,128,0.33);
@ -719,12 +677,16 @@ option {
background-repeat: no-repeat;
background-position: right center;
background-origin: content-box;
line-height: 20px;
}
li.treeListMain:after, li.treeListSub:after {
margin-left: 10px;
}
li.treeListMain {
background-image: url("./icons/class_main.png");
li.treeListMain:after {
content: url("./icons/class_main.png");
}
li.treeListSub {
background-image: url("./icons/class_sub.png");
li.treeListSub:after {
content: url("./icons/class_sub.png");
}
.treeList li img {
vertical-align: middle;
@ -735,7 +697,6 @@ li.treeListSub {
margin: 0;
min-width: 181px;
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);
}
.skillTreeBox .boxTitleBar, .treeSelectBox .boxTitleBar {
@ -854,6 +815,18 @@ div.skillMaxed .skillAllocated {
padding: 16px 0 10px 0;
color: white;
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 {
justify-content: center;
@ -986,35 +959,14 @@ button{
display: grid;
justify-items: stretch;
align-items: center;
grid-template-columns: minmax(10px, 1fr) minmax(200px, 580px) minmax(10px, 1fr);
grid-template-rows: 10px minmax(0, 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;
grid-template-columns: minmax(10px, 1fr) minmax(200px, auto) minmax(10px, 1fr);
grid-template-rows: 10px minmax(10px, 1fr) 10px;
}
.modal {
outline: 0;
grid-column: 2;
grid-row: 2;
}
.modalSkillTree {
position: relative;
outline: 0;
grid-column: 2;
grid-row: 2;
/* display: flex;
flex-flow: row nowrap;*/
}
.boxModal {
animation: fadeIn 0.15s;
max-width: 580px;
@ -1022,11 +974,18 @@ button{
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);
}
.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 {
0% {opacity:0;margin-bottom:30px;}
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));
}
.modalItemListContainer {

Write Preview
Loading…
Cancel
Save