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

UI changes + rarity thing sig did

Browse Source
master
dudleycu 3 years ago
parent aa3bec89e1
commit c17f8ee763
2 changed files with 48 additions and 19 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. 16
      src/TestPanel.js
  2. 51
      src/style.css

16
src/TestPanel.js
Unescape View File

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

51
src/style.css
Unescape View File

@ -334,6 +334,9 @@ em {
.equipPaletteSlotWrapper img {
height: 48px;
border: 1px;
border-style: solid;
background: radial-gradient(rgb(196,196,196),rgb(128,128,128));
border-color: rgba(128,128,128,1);
}
.equipPaletteSlot {
text-align: center;
@ -483,43 +486,41 @@ em {
}
.itemimg {
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;
margin-right: 10px;
width: 48px;
box-sizing: content-box;
border-style: solid;
}
li.r1 {
background-image: url("./icons/NGSUIRarity1Star.png");
}
.r1 img {
background: radial-gradient(rgb(64,150,183),rgb(52,123,150));
border-color: rgb(64,150,183);
border-style: solid;
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));
border-color: rgb(64,150,183);
border-style: solid;
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));
border-color: rgb(64,150,183);
border-style: solid;
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));
border-color: rgb(101,178,77);
border-style: solid;
background: radial-gradient(rgb(101,178,77),rgb(83,146,63)) !important;
border-color: rgb(101,178,77) !important;
}
.itemlist li span {
background-repeat: no-repeat;
@ -1220,6 +1221,30 @@ p.adminNav hr {
position:relative;
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 {
background: radial-gradient(rgb(196,196,196),rgb(128,128,128));
border-color: rgba(128,128,128,1);
border-width: 2px;
width: 124px;
box-sizing: content-box;
border-style: solid;
}
Write Preview
Loading…
Cancel
Save