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>
master
Joshua Sigona 4 years ago
parent 73990957b5
commit 321e9c7c08
3 changed files with 51 additions and 41 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. BIN
      public/icons/UINGSClassBr.png
  2. 56
      src/TestPanel.js
  3. 36
      src/style.css

BIN
public/icons/UINGSClassBr.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 281 B

56
src/TestPanel.js
Unescape 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
Unescape 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;

Write Preview
Loading…
Cancel
Save