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
master
Joshua Sigona 3 years ago
parent b6fa20ecd3 1032ce0608
commit dce852ace6
2 changed files with 55 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. 35
      src/TestPanel.js
  2. 61
      src/style.css

35
src/TestPanel.js
Unescape View File

@ -130,10 +130,8 @@ function SelectorWindow(p) {
</div>
}
<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.children}
</ul>
</div>
</PopupWindow>
}
@ -764,25 +762,36 @@ AUGMENT
}
}}
displayFunction={(item)=>{
return <li className={"itemwep r"+item.rarity} onClick={()=>{
return <div className={"itemWrapper r"+item.rarity} onClick={()=>{
switch(armorSlotSelection) {
case 1:setSelectedArmor1(item);break;
case 2:setSelectedArmor2(item);break;
case 3:setSelectedArmor3(item);break;
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}>
<li className="itemWrapper">
<div className="itemImgWrapper"><img alt="" src={DisplayIcon("icons/food/aelio_meat.png")} /></div>
<div className="itemNameWrapper meat">meet</div>
<div className="itemRarityWrapper"><img alt="" src={DisplayIcon("icons/NGSUIRarity1Star.png")} /></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>
</li>
<SelectorWindow title={"Food Menu"} modalOpen={foodMenuWindowOpen} setModalOpen={setFoodMenuWindowOpen} GetData={p.GetData}>
<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>
<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>
<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>

61
src/style.css
Unescape View File

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

Write Preview
Loading…
Cancel
Save