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

src/TestPanel.js

@@ -33,7 +33,7 @@ function EditBox(p) {
 		return () => {
 			clearTimeout(timer1);
 		};
-	})
+	},[p.edit])
 	return <input id="editBoxInput" type={p.type} max={p.type==="number"?20:undefined} min={p.type==="number"?1:undefined} onKeyDown={(e)=>{
 		if (e.key==="Enter") {p.setEdit(false)}
 		else if (e.key==="Escape") {p.setEdit(false)}
@@ -53,7 +53,7 @@ function EditBoxInput(p) {
 	return <>
 		<div className={edit?"editBoxActive":"editBox"} onClick={(f)=>{setEdit(true)}}>
 			{edit?
-			<EditBox maxlength={p.maxlength} type={p.type} setEdit={setEdit} originalName={p.data} setName={p.setData} value={p.data}/>
+			<EditBox maxlength={p.maxlength} type={p.type} edit={edit} setEdit={setEdit} originalName={p.data} setName={p.setData} value={p.data}/>
 			:<>{p.prefix}{p.data}</>}
 		</div>
 	</>
@@ -86,8 +86,11 @@ const [author,setauthor] = useState("Player")
 const [buildName,setbuildName] = useState("Character")
 const [className,setclassName] = useState("Hunter")
 const [subclassName,setsubclassName] = useState("Force")
-const [level,setLevel] = useState(1)
-const [secondaryLevel,setsecondaryLevel] = useState(1)
+const [level,setLevel] = useState(20)
+const [secondaryLevel,setsecondaryLevel] = useState(20)
+const [effectPage,setEffectPage]=useState(1)
+const [weaponPage,setWeaponPage]=useState(1)
+const [statsPage,setStatsPage]=useState(1)
 
 function Class(p) {
   const CLASSES = p.GetData("class")
@@ -115,6 +118,21 @@ function EditableClass(p){
 	</>
 }
 
+
+function PageControlButton(p) {
+	return <li onClick={()=>{p.setCurrentPage(p.page)}} className={(p.currentPage===p.page)?"selected":""}>{p.pageName?p.pageName:p.page}</li>
+}
+
+function PageControl(p) {
+	var pages = []
+	for (var i=0;i<p.pages;i++) {
+		pages.push(<PageControlButton pageName={p.pageNames?p.pageNames[i]:undefined} currentPage={p.currentPage} setCurrentPage={p.setCurrentPage} page={i+1}/>)
+	}
+	return <ul className="boxmenu">
+			{pages.map((page,i)=>{return <React.Fragment key={i}>{page}</React.Fragment>})}
+		</ul>
+}
+
 useEffect(()=>{
   if (p.bp>1000) {
     setbpGraphMax(3000)
@@ -139,9 +157,7 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Basic Information</h1>
-<div className="boxExit"></div>
 </div>
-
 <table className="basicInfo">
   <tr>
     <td>Author</td>
@@ -157,7 +173,7 @@ useEffect(()=>{
     <EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass>
     </td>
     <td>
-    <span className="ye"><EditBoxInput prefix="Lv." setData={setLevel} data={level} type="number"/></span>
+    <span className="ye"><EditBoxInput callback={()=>{if (level<1) {setLevel(1)} else if (level>20) {setLevel(20)}}} prefix="Lv." setData={setLevel} data={level} type="number"/></span>
     </td>
   </tr>
   <tr>
@@ -166,7 +182,7 @@ useEffect(()=>{
     <EditableClass GetData={p.GetData} setClassName={setsubclassName} class={subclassName}></EditableClass>
     </td>
     <td>
-    <EditBoxInput prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/>
+    <EditBoxInput callback={()=>{if (level<1) {setLevel(1)} else if (level>20) {setLevel(20)}}}  prefix="Lv." setData={setsecondaryLevel} data={secondaryLevel} type="number"/>
     </td>
   </tr>
 </table>
@@ -174,15 +190,12 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Current Effects</h1>
-<div className="boxExit"></div>
 </div>
-<ul className="boxmenu">
-<li>1</li>
-<li>2</li>
-</ul>
+<PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
 <h3>Effect Name</h3>
 <ul className="infoBuffs">
-	<li>Food Bost Effect
+{ 
+  effectPage===1?<><li>Food Bost Effect
 		<ul>
 			<li><img src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
 			<li><img src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
@@ -198,7 +211,8 @@ useEffect(()=>{
 		<ul>
 			<li><img src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
 		</ul>
-	</li>
+	</li></>:<></>
+}
 </ul>
 </div>
 </div>
@@ -206,19 +220,17 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Equip</h1>
-<div className="boxExit"></div>
 </div>
 <div className="equipPalette">
-	<div className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img className="r4" src="./64px-NGSUIItemResurgirRifle.png" /></div></div>
-	<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
-	<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
-	<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img className="r3" src="./photon_barrier.png" /></div></div>
+	<div className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img className="r4" src={process.env.PUBLIC_URL+"/64px-NGSUIItemResurgirRifle.png"} /></div></div>
+	<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img className="r3" src={process.env.PUBLIC_URL+"/photon_barrier.png"} /></div></div>
+	<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img className="r3" src={process.env.PUBLIC_URL+"/photon_barrier.png"} /></div></div>
+	<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img className="r3" src={process.env.PUBLIC_URL+"/photon_barrier.png"} /></div></div>
 </div>
 </div>
 <div className="box">
 <div className="boxTitleBar">
 <h1>Equipped Weapon</h1>
-<div className="boxExit"></div>
 </div>
 <h2 className="rifle">Resurgir Rifle+40</h2>
 <ul className="boxmenu">
@@ -257,7 +269,6 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Basic Stats</h1>
-<div className="boxExit"></div>
 </div>
 <table className="statsInfo">
   <tr>
@@ -309,7 +320,6 @@ useEffect(()=>{
 <div className="box">
 <div className="boxTitleBar">
 <h1>Damage Stats</h1>
-<div className="boxExit"></div>
 </div>
 <ul className="boxmenu">
 <li>1</li>