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

Almost done with food menu

Browse Source
master
dudleycu 3 years ago
parent f4bacba1d0
commit 66a53e4d10
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

@ -127,10 +127,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>
}
@ -709,25 +707,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