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 () => {
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>

36
src/style.css
View File

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