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

UI changes + rarity thing sig did

Browse Source
This commit is contained in:
dudleycu 2021-08-11 00:14:50 +09:00
parent aa3bec89e1
commit c17f8ee763
2 changed files with 48 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/TestPanel.js
View File

@ -201,6 +201,10 @@ const WEAPON_WEAPONTYPE=0;const WEAPON_WEAPON=1;const WEAPON_POTENTIAL=2;const W
const [selectedWeapon,setSelectedWeapon] = useState([]) const [selectedWeapon,setSelectedWeapon] = useState([])
function rarityCheck(v) {
return v!==undefined?v.rarity!==undefined?" r"+v.rarity:"":""
}
useEffect(()=>{ useEffect(()=>{
if (p.bp>1000) { if (p.bp>1000) {
setbpGraphMax(3000) setbpGraphMax(3000)
@ -290,10 +294,10 @@ useEffect(()=>{
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equip</h1></div> <h1>Equip</h1></div>
<div className="equipPalette"> <div className="equipPalette">
<div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot r4"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img alt="" className="r4" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div></div> <div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className={"equipPaletteSlotWrapper"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><span>1</span><img alt="" className="r4" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div></div>
<div className="equipPaletteSlot r3"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/GtusK2X.png")} /></div></div> <div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/3Gq2JO6.png")} /></div></div>
<div className="equipPaletteSlot r3"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/GtusK2X.png")} /></div></div> <div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/fes50s0.png")} /></div></div>
<div className="equipPaletteSlot r3"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/GtusK2X.png")} /></div></div> <div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" src={DisplayIcon("https://i.imgur.com/fyhy1la.png")} /></div></div>
</div> </div>
</div> </div>
@ -305,8 +309,8 @@ useEffect(()=>{
{weaponPage === 1 ? {weaponPage === 1 ?
<> <>
<div className="itemDetailsGrid1"> <div className="itemDetailsGrid">
<div className="itemDetailsIcon r3"><img src={process.env.PUBLIC_URL+"/icons/items/124/ui_item_1150003.png"} /></div> <div className={"itemDetailsIcon"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><img src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div>
<div className="itemDetailsProperties"> <div className="itemDetailsProperties">
RARITY<br /> RARITY<br />
ATTACK<br /> ATTACK<br />

51
src/style.css
View File

@ -334,6 +334,9 @@ em {
.equipPaletteSlotWrapper img { .equipPaletteSlotWrapper img {
height: 48px; height: 48px;
border: 1px; border: 1px;
border-style: solid;
background: radial-gradient(rgb(196,196,196),rgb(128,128,128));
border-color: rgba(128,128,128,1);
} }
.equipPaletteSlot { .equipPaletteSlot {
text-align: center; text-align: center;
@ -483,43 +486,41 @@ em {
} }
.itemimg { .itemimg {
background: radial-gradient(rgb(196,196,196),rgb(128,128,128)); background: radial-gradient(rgb(196,196,196),rgb(128,128,128));
border: 4px solid rgba(128,128,128,1) !important; border: 4px solid rgba(128,128,128,1);
float: left; float: left;
margin-right: 10px; margin-right: 10px;
width: 48px; width: 48px;
box-sizing: content-box; box-sizing: content-box;
border-style: solid;
} }
li.r1 { li.r1 {
background-image: url("./icons/NGSUIRarity1Star.png"); background-image: url("./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)) !important;
border-color: rgb(64,150,183); border-color: rgb(64,150,183) !important;
border-style: solid;
} }
li.r2 { li.r2 {
background-image: url("./icons/NGSUIRarity2Star.png"); background-image: url("./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)) !important;
border-color: rgb(64,150,183); border-color: rgb(64,150,183) !important;
border-style: solid;
} }
li.r3 { li.r3 {
background-image: url("./icons/NGSUIRarity3Star.png"); background-image: url("./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)) !important;
border-color: rgb(64,150,183); border-color: rgb(64,150,183) !important;
border-style: solid;
} }
li.r4 { li.r4 {
background-image: url("./icons/NGSUIRarity4Star.png"); background-image: url("./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)) !important;
border-color: rgb(101,178,77); border-color: rgb(101,178,77) !important;
border-style: solid;
} }
.itemlist li span { .itemlist li span {
background-repeat: no-repeat; background-repeat: no-repeat;
@ -1220,6 +1221,30 @@ p.adminNav hr {
position:relative; position:relative;
top:16px; top:16px;
} }
.itemDetailsGrid {
display: grid;
grid-template-areas:
"icon properties"
"content content";
grid-template-columns: 124px 1fr;
grid-template-rows: auto;
margin: 10px 10px 0 10px;
}
.itemDetailsIcon {
background-color: hsl(0, 17%, 70%);
grid-area: icon;
}
.itemDetailsProperties {
grid-area: properties;
}
.itemDetailsContent {
grid-area: content;
}
.itemDetailsIcon img { .itemDetailsIcon img {
background: radial-gradient(rgb(196,196,196),rgb(128,128,128));
border-color: rgba(128,128,128,1);
border-width: 2px; border-width: 2px;
width: 124px;
box-sizing: content-box;
border-style: solid;
} }