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
This commit is contained in:
Joshua Sigona 2021-08-25 23:03:17 +09:00
commit dce852ace6
2 changed files with 54 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/TestPanel.js
View File

@ -130,10 +130,8 @@ function SelectorWindow(p) {
</div> </div>
} }
<div className="modalItemListContainer customScrollbar"> <div className="modalItemListContainer customScrollbar">
<ul className="itemlist">
{p.filter?itemList.filter((item)=>p.filterFunction(tabPage,item)).filter((item)=>p.searchFieldFunction(filter,item)).sort((a,b)=>p.sortOrderFunction(sortSelector,a,b)).map((item,i)=><React.Fragment key={i}>{p.displayFunction(item)}</React.Fragment>):itemList.map((item,i)=><React.Fragment key={i}>{p.displayFunction(item)}</React.Fragment>)} {p.filter?itemList.filter((item)=>p.filterFunction(tabPage,item)).filter((item)=>p.searchFieldFunction(filter,item)).sort((a,b)=>p.sortOrderFunction(sortSelector,a,b)).map((item,i)=><React.Fragment key={i}>{p.displayFunction(item)}</React.Fragment>):itemList.map((item,i)=><React.Fragment key={i}>{p.displayFunction(item)}</React.Fragment>)}
{p.children} {p.children}
</ul>
</div> </div>
</PopupWindow> </PopupWindow>
} }
@ -764,25 +762,36 @@ AUGMENT
} }
}} }}
displayFunction={(item)=>{ displayFunction={(item)=>{
return <li className={"itemwep r"+item.rarity} onClick={()=>{ return <div className={"itemWrapper r"+item.rarity} onClick={()=>{
switch(armorSlotSelection) { switch(armorSlotSelection) {
case 1:setSelectedArmor1(item);break; case 1:setSelectedArmor1(item);break;
case 2:setSelectedArmor2(item);break; case 2:setSelectedArmor2(item);break;
case 3:setSelectedArmor3(item);break; case 3:setSelectedArmor3(item);break;
default:setSelectedArmor1(item) default:setSelectedArmor1(item)
} }
setArmorSelectWindowOpen(false)}}><div className="itemWeaponWrapper"><img className="itemimg" alt="" src={DisplayIcon(item?.icon)} /><em className="rifle">{item.name}</em></div><br /><span className="atk">{item.def}</span></li>}} setArmorSelectWindowOpen(false)}}>
<div className="itemImgWrapper"><img alt="" src={DisplayIcon(item?.icon)} /></div>
<div className="itemNameWrapper rifle">{item.name}</div>
<div className="itemRarityWrapper">&nbsp;</div>
<div className="itemPropertiesWrapper"><span className="atk">{item.def}</span></div>
</div>
}}
/> />
<SelectorWindow className="itemBox" title={"Food Menu"} modalOpen={foodMenuWindowOpen} setModalOpen={setFoodMenuWindowOpen} GetData={p.GetData}> <SelectorWindow title={"Food Menu"} modalOpen={foodMenuWindowOpen} setModalOpen={setFoodMenuWindowOpen} GetData={p.GetData}>
<li className="itemWrapper"> <div className="itemWrapper r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div> <div className="itemWrapper r2"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_mushroom.png")} /></div><div className="itemNameWrapper meat">Potato 2</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemNameWrapper meat">meet</div> <div className="itemWrapper r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemRarityWrapper"><img alt="" src={DisplayIcon("icons/NGSUIRarity1Star.png")} /></div> <div className="itemWrapper r4"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_turban_shell.png")} /></div><div className="itemNameWrapper meat">If you put your ear to it you can hear the PSO2 lobby music</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div> <div className="itemWrapper r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div> <div className="itemWrapper r2"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_mushroom.png")} /></div><div className="itemNameWrapper meat">Potato 2</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
</li> <div className="itemWrapper r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemWrapper r4"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_turban_shell.png")} /></div><div className="itemNameWrapper meat">If you put your ear to it you can hear the PSO2 lobby music</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemWrapper r1"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div><div className="itemNameWrapper meat">XXXL Super Duper Extra Crispy Delicious Sweet Mouth-Watering Meat</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemWrapper r2"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_mushroom.png")} /></div><div className="itemNameWrapper meat">Potato 2</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemWrapper r3"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/robust_aelio_lobster.png")} /></div><div className="itemNameWrapper meat">Dog with Claws</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
<div className="itemWrapper r4"><div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/light_aelio_turban_shell.png")} /></div><div className="itemNameWrapper meat">If you put your ear to it you can hear the PSO2 lobby music</div><div className="itemRarityWrapper">&nbsp;</div><div className="itemPropertiesWrapper"><span className="atk">9999</span><span className="pot">Indomitable Unit</span></div><div className="itemControlsWrapper"><span>-</span><span>0</span><span>+</span></div></div>
</SelectorWindow> </SelectorWindow>

61
src/style.css
View File

@ -387,18 +387,6 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
.pr li span { .pr li span {
color:white color:white
} }
.itemlist {
margin: 0 10px;
}
.itemlist li {
background-color: rgba(128,128,128,0.33);
color: white;
margin: 0 0 5px 0;
padding: 10px;
background-repeat: no-repeat;
background-position: right top;
background-origin: content-box;
}
.aug:before { .aug:before {
content:url("./icons/UINGSItemSpecialAbility.png"); content:url("./icons/UINGSItemSpecialAbility.png");
margin-right: 5px; margin-right: 5px;
@ -426,10 +414,21 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
margin-right: 5px; margin-right: 5px;
vertical-align: middle; vertical-align: middle;
} }
.meat:before, .vege:before, .fruit:before, .seafood:before {
margin-right: 5px;
vertical-align: bottom;
}
.meat:before { .meat:before {
content: url("./icons/food/meat.png"); content: url("./icons/food/meat.png");
margin-right: 5px; }
vertical-align: middle; .vege:before {
content: url("./icons/food/vege.png");
}
.fruit:before {
content: url("./icons/food/fruit.png");
}
.seafood:before {
content: url("./icons/food/seafood.png");
} }
.gb:before { .gb:before {
content: url("./icons/NGSUIItemGunbladeMini.png"); content: url("./icons/NGSUIItemGunbladeMini.png");
@ -451,6 +450,10 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
border-style: solid; border-style: solid;
} }
.itemWrapper { .itemWrapper {
background-color: rgba(128,128,128,0.33);
color: white;
margin: 5px 10px 5px;
padding: 10px;
display: grid; display: grid;
grid-template-columns: minmax(56px,auto) 1fr auto minmax(16px,auto); grid-template-columns: minmax(56px,auto) 1fr auto minmax(16px,auto);
grid-template-rows: auto 1fr auto; grid-template-rows: auto 1fr auto;
@ -474,12 +477,25 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
background-color:rgba(0,0,0,0.33); background-color:rgba(0,0,0,0.33);
grid-area: itemname; grid-area: itemname;
margin: 0 10px; margin: 0 10px;
padding: 2px 2px 0 2px;
white-space: nowrap; white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.itemRarityWrapper { .itemRarityWrapper {
grid-area: rarity; grid-area: rarity;
} }
.r1 .itemRarityWrapper {
content: url("./icons/NGSUIRarity1Star.png");
}
.r2 .itemRarityWrapper {
content: url("./icons/NGSUIRarity2Star.png");
}
.r3 .itemRarityWrapper {
content: url("./icons/NGSUIRarity3Star.png");
}
.r4 .itemRarityWrapper {
content: url("./icons/NGSUIRarity4Star.png");
}
.itemPropertiesWrapper { .itemPropertiesWrapper {
color:white; color:white;
grid-area: properties; grid-area: properties;
@ -487,6 +503,7 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
} }
.itemPropertiesWrapper > span { .itemPropertiesWrapper > span {
white-space: nowrap; white-space: nowrap;
margin-right: 10px;
} }
.itemControlsWrapper { .itemControlsWrapper {
grid-area: controls; grid-area: controls;
@ -510,31 +527,19 @@ border-bottom: 1px solid rgba(128,128,128,0.5);
text-align: center; text-align: center;
margin: 0 0 0 5px; margin: 0 0 0 5px;
} }
li.r1 {
background-image: url("./icons/NGSUIRarity1Star.png");
}
.r1 img { .r1 img {
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important; background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important;
border-color: rgb(64,150,183) !important; border-color: rgb(64,150,183) !important;
} }
li.r2 {
background-image: url("./icons/NGSUIRarity2Star.png");
}
.r2 img { .r2 img {
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important; background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important;
border-color: rgb(64,150,183) !important; border-color: rgb(64,150,183) !important;
} }
li.r3 {
background-image: url("./icons/NGSUIRarity3Star.png");
}
.r3 img { .r3 img {
background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important; background: radial-gradient(rgb(64,150,183),rgb(52,123,150)) !important;
border-color: rgb(64,150,183) !important; border-color: rgb(64,150,183) !important;
} }
li.r4 {
background-image: url("./icons/NGSUIRarity4Star.png");
}
.r4 img { .r4 img {
background: radial-gradient(rgb(101,178,77),rgb(83,146,63)) !important; background: radial-gradient(rgb(101,178,77),rgb(83,146,63)) !important;
border-color: rgb(101,178,77) !important; border-color: rgb(101,178,77) !important;
@ -579,7 +584,7 @@ li.r4 {
max-height: 300px; max-height: 300px;
} }
}*/ }*/
.itemlist li:hover, .treeList li:hover { .itemWrapper:hover, .treeList li:hover {
background-color: rgba(113,169,189,0.33); background-color: rgba(113,169,189,0.33);
outline: 2px solid rgba(54,255,255,0.66); outline: 2px solid rgba(54,255,255,0.66);
} }