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

Icons are back.

Browse Source 
Co-authored-by: dudleycu <dudleyc.twitch@gmail.com>
This commit is contained in:
Joshua Sigona 2021-08-07 22:42:03 +09:00
parent 73990957b5
commit 321e9c7c08
3 changed files with 51 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/icons/UINGSClassBr.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 B

56
src/TestPanel.js
View File

@ -33,7 +33,7 @@ function EditBox(p) {
return () => { return () => {
clearTimeout(timer1); 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)=>{ 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)} if (e.key==="Enter") {p.setEdit(false)}
else if (e.key==="Escape") {p.setEdit(false)} else if (e.key==="Escape") {p.setEdit(false)}
@ -53,7 +53,7 @@ function EditBoxInput(p) {
return <> return <>
<div className={edit?"editBoxActive":"editBox"} onClick={(f)=>{setEdit(true)}}> <div className={edit?"editBoxActive":"editBox"} onClick={(f)=>{setEdit(true)}}>
{edit? {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}</>} :<>{p.prefix}{p.data}</>}
</div> </div>
</> </>
@ -86,8 +86,11 @@ const [author,setauthor] = useState("Player")
const [buildName,setbuildName] = useState("Character") const [buildName,setbuildName] = useState("Character")
const [className,setclassName] = useState("Hunter") const [className,setclassName] = useState("Hunter")
const [subclassName,setsubclassName] = useState("Force") const [subclassName,setsubclassName] = useState("Force")
const [level,setLevel] = useState(1) const [level,setLevel] = useState(20)
const [secondaryLevel,setsecondaryLevel] = useState(1) const [secondaryLevel,setsecondaryLevel] = useState(20)
const [effectPage,setEffectPage]=useState(1)
const [weaponPage,setWeaponPage]=useState(1)
const [statsPage,setStatsPage]=useState(1)
function Class(p) { function Class(p) {
const CLASSES = p.GetData("class") 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(()=>{ useEffect(()=>{
if (p.bp>1000) { if (p.bp>1000) {
setbpGraphMax(3000) setbpGraphMax(3000)
@ -139,9 +157,7 @@ useEffect(()=>{
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Basic Information</h1> <h1>Basic Information</h1>
<div className="boxExit"></div>
</div> </div>
<table className="basicInfo"> <table className="basicInfo">
<tr> <tr>
<td>Author</td> <td>Author</td>
@ -157,7 +173,7 @@ useEffect(()=>{
<EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass> <EditableClass GetData={p.GetData} setClassName={setclassName} class={className}></EditableClass>
</td> </td>
<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> </td>
</tr> </tr>
<tr> <tr>
@ -166,7 +182,7 @@ useEffect(()=>{
<EditableClass GetData={p.GetData} setClassName={setsubclassName} class={subclassName}></EditableClass> <EditableClass GetData={p.GetData} setClassName={setsubclassName} class={subclassName}></EditableClass>
</td> </td>
<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> </td>
</tr> </tr>
</table> </table>
@ -174,15 +190,12 @@ useEffect(()=>{
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Current Effects</h1> <h1>Current Effects</h1>
<div className="boxExit"></div>
</div> </div>
<ul className="boxmenu"> <PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
<li>1</li>
<li>2</li>
</ul>
<h3>Effect Name</h3> <h3>Effect Name</h3>
<ul className="infoBuffs"> <ul className="infoBuffs">
<li>Food Bost Effect {
effectPage===1?<><li>Food Bost Effect
<ul> <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;[Meat] Potency +10.0%</li>
<li><img src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.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> <ul>
<li><img src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li> <li><img src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
</ul> </ul>
</li> </li></>:<></>
}
</ul> </ul>
</div> </div>
</div> </div>
@ -206,19 +220,17 @@ useEffect(()=>{
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equip</h1> <h1>Equip</h1>
<div className="boxExit"></div>
</div> </div>
<div className="equipPalette"> <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>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="./photon_barrier.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="./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="./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> </div>
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equipped Weapon</h1> <h1>Equipped Weapon</h1>
<div className="boxExit"></div>
</div> </div>
<h2 className="rifle">Resurgir Rifle+40</h2> <h2 className="rifle">Resurgir Rifle+40</h2>
<ul className="boxmenu"> <ul className="boxmenu">
@ -257,7 +269,6 @@ useEffect(()=>{
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Basic Stats</h1> <h1>Basic Stats</h1>
<div className="boxExit"></div>
</div> </div>
<table className="statsInfo"> <table className="statsInfo">
<tr> <tr>
@ -309,7 +320,6 @@ useEffect(()=>{
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Damage Stats</h1> <h1>Damage Stats</h1>
<div className="boxExit"></div>
</div> </div>
<ul className="boxmenu"> <ul className="boxmenu">
<li>1</li> <li>1</li>

36
src/style.css
View File

@ -36,7 +36,7 @@ img {
vertical-align: middle; vertical-align: middle;
} }
body { body {
background-image: url("./icons/d_global_bg_header.png"),url("./icons/gl_main_bg.jpg"); background-image: url("../public/icons/d_global_bg_header.png"),url("../public/icons/gl_main_bg.jpg");
background-size: 1903px,2560px; background-size: 1903px,2560px;
background-color: #e8ecf4; background-color: #e8ecf4;
background-repeat: no-repeat,repeat-y; background-repeat: no-repeat,repeat-y;
@ -442,7 +442,7 @@ em {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.aug:before { .aug:before {
content:url("./icons/UINGSItemSpecialAbility.png"); content:url("../public/icons/UINGSItemSpecialAbility.png");
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }
@ -457,17 +457,17 @@ em {
clear:both; clear:both;
} }
.rifle:before { .rifle:before {
content: url("./icons/NGSUIItemAssaultRifleMini.png"); content: url("../public/icons/NGSUIItemAssaultRifleMini.png");
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }
.gb:before { .gb:before {
content: url("./icons/NGSUIItemGunbladeMini.png"); content: url("../public/icons/NGSUIItemGunbladeMini.png");
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }
.vege:before { .vege:before {
content: url("./icons/food/vege.png"); content: url("../public/icons/food/vege.png");
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }
@ -480,25 +480,25 @@ em {
box-sizing: content-box; box-sizing: content-box;
} }
li.r1 { li.r1 {
background-image: url("./icons/NGSUIRarity1Star.png"); background-image: url("../public/icons/NGSUIRarity1Star.png");
} }
.r1 img { .r1 img {
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
} }
li.r2 { li.r2 {
background-image: url("./icons/NGSUIRarity2Star.png"); background-image: url("../public/icons/NGSUIRarity2Star.png");
} }
.r2 img { .r2 img {
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
} }
li.r3 { li.r3 {
background-image: url("./icons/NGSUIRarity3Star.png"); background-image: url("../public/icons/NGSUIRarity3Star.png");
} }
.r3 img { .r3 img {
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)); background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
} }
li.r4 { li.r4 {
background-image: url("./icons/NGSUIRarity4Star.png"); background-image: url("../public/icons/NGSUIRarity4Star.png");
} }
.r4 img { .r4 img {
background: radial-gradient(rgb(101,178,77),rgb(83,146,63)); background: radial-gradient(rgb(101,178,77),rgb(83,146,63));
@ -525,7 +525,7 @@ li.r4 {
margin-right: 10px; margin-right: 10px;
} }
.atk:before { .atk:before {
content: url("./icons/NGSUIStatATKOutline.png"); content: url("../public/icons/NGSUIStatATKOutline.png");
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }
@ -533,7 +533,7 @@ li.r4 {
color: rgb(255,135,80); color: rgb(255,135,80);
} }
.fixa:before { .fixa:before {
content: url("./icons/UINGSItemPresetAbility.png"); content: url("../public/icons/UINGSItemPresetAbility.png");
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }
@ -541,7 +541,7 @@ li.r4 {
color: rgb(255,255,0); color: rgb(255,255,0);
} }
.pot:before { .pot:before {
content: url("./icons/NGSUIItemPotentialAbility.png"); content: url("../public/icons/NGSUIItemPotentialAbility.png");
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }
@ -704,10 +704,10 @@ option {
background-origin: content-box; background-origin: content-box;
} }
li.treeListMain { li.treeListMain {
background-image: url("./icons/class_main.png"); background-image: url("../public/icons/class_main.png");
} }
li.treeListSub { li.treeListSub {
background-image: url("./icons/class_sub.png"); background-image: url("../public/icons/class_sub.png");
} }
.treeList li img { .treeList li img {
vertical-align: middle; vertical-align: middle;
@ -763,7 +763,7 @@ div.skillMaxed {
.skillTreeGrid div:hover { .skillTreeGrid div:hover {
outline: 2px solid rgba(54,255,255,0.66); outline: 2px solid rgba(54,255,255,0.66);
background-color: rgba(113,169,189,0.33); background-color: rgba(113,169,189,0.33);
background-image: url("./icons/skilltree_div_overlay.png"); background-image: url("../public/icons/skilltree_div_overlay.png");
background-repeat: no-repeat; background-repeat: no-repeat;
} }
.skillTreeGrid div.skillActive:hover, .skillTreeGrid div.skillMaxed:hover { .skillTreeGrid div.skillActive:hover, .skillTreeGrid div.skillMaxed:hover {
@ -793,7 +793,7 @@ div.skillMaxed .skillAllocated {
position: absolute; position: absolute;
height: 22px; height: 22px;
width: 175px; width: 175px;
background-image: url("./icons/skilltree_req_unlock.png"); background-image: url("../public/icons/skilltree_req_unlock.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
top: -34px; top: -34px;
@ -805,7 +805,7 @@ div.skillMaxed .skillAllocated {
position: absolute; position: absolute;
height: 22px; height: 22px;
width: 175px; width: 175px;
background-image: url("./icons/skilltree_req_lock.png"); background-image: url("../public/icons/skilltree_req_lock.png");
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: center; background-position: center;
top: -34px; top: -34px;
@ -895,7 +895,7 @@ input#editBoxInput {
max-width: 250px; max-width: 250px;
min-width: 100px; min-width: 100px;
padding: 20px; padding: 20px;
z-index: 2;
} }
.popup button{ .popup button{
margin:5px; margin:5px;