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

equipbox

Browse Source
master
Dudley C 3 years ago
parent dbc0a878df
commit f8f89d38f5
5 changed files with 161 additions and 43 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. 74
      src/TestPanel.js
  2. BIN
      src/icons/mel.png
  3. BIN
      src/icons/rng.png
  4. BIN
      src/icons/tec.png
  5. 130
      src/style.css

74
src/TestPanel.js
Unescape View File

@ -515,7 +515,10 @@ useEffect(()=>{
<div className="box equipWindow">
<div className="boxTitleBar">
<h1>Equipped Weapon</h1></div>
<h2 className="viewedEquipName rifle">{GetSpecialWeaponName(selectedWeapon)}+40</h2>
<div className="equipNameWrapper">
<div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div>
<div className="equipEnhancement">+40</div>
</div>
<PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}><PencilFill /> Edit Details</PageControl>
{weaponPage === 1 ?
@ -560,29 +563,56 @@ useEffect(()=>{
</>
:weaponPage === 2 ?
<div className="statsDetails">
<div style={{gridArea:"enhance1"}}>Enhancement Lv.</div>
<div style={{gridArea:"variance1"}}>Damage Adj.</div>
<div style={{gridArea:"weaponup"}}>Weapon Up</div>
<div style={{gridArea:"ailment"}}>Ailment Resist.</div>
<div style={{gridArea:"class1"}}>Available Classes</div>
<div style={{gridArea:"mw1"}}>Multi-weapon</div>
<div style={{gridArea:"enhance2"}}>40</div>
<div style={{gridArea:"variance2"}}>75.0% ~ 100%</div>
<div style={{gridArea:"mel"}}>Weapon Up</div>
<div style={{gridArea:"ailment2"}}>Ailment Resist.</div>
<div style={{gridArea:"class2"}}>Available Classes</div>
<div style={{gridArea:"mw2"}}><img alt="" src={DisplayIcon("icons/food/NGSUIItemAssaultRifleMini.png")} /> <img alt="" src={DisplayIcon("icons/food/NGSUIItemTalisMini.png")} /></div>
</div>
:weaponPage === 3 ?
<div className="equipDetails">
<div className="equipAugs">
<h3>Ability Details</h3>
<ul>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</span></div><span className="pot">Dynamo Unit Lv.3</span></li>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +4%</span></div><span className="fixa">Fixa Attack Lv.3</span></li>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>PP +5<br />Ranged Weapon Potency +2.0%</span></div><span className="aug">Pettas Soul II</span></li>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</span></div><span className="aug">Alts Secreta II</span></li>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP +10<br />Ranged Weapon Potency +2.0%</span></div><span className="aug">Gigas Precision II</span></li>
<li><div className="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Ranged Weapon Potency +2.0%</span></div><span className="aug">Precision III</span></li>
<li><img alt="" src="./icons/aug_plus.png" /></li>
</ul>
</div>
<div className="pr">
<h3>Stat Adjustment</h3>
<ul>
<li>Enhancement Lv.&emsp;<span>+35</span></li>
<li>Multi-Weapon&emsp;<span>-</span></li>
<li>Element&emsp;<span>-</span></li>
</ul>
</div>
<div className="augmentDetails">
<div className="augmentDetailsListHeader"><h3>Ability Details</h3></div>
<div className="augmentDetailsStatsHeader"><h3>Stat Adjustment</h3></div>
<div className="augmentDetailsList customScrollbar">
<ul>
<li className="pot">Dynamo Unit Lv.3</li>
<li className="fixa">Fixa Attack Lv.3</li>
<li className="aug">test</li>
<li className="aug">test</li>
<li className="aug">test</li>
<li className="aug">test</li>
<li className="aug">test</li>
<li className="aug">test</li>
<li className="aug">test</li>
<li className="aug">test</li>
</ul>
</div>
<div className="augmentDetailsStats">
<table>
<tbody>
<tr>
<td>HP</td>
<td>+99</td>
</tr>
<tr>
<td>PP</td>
<td>+9</td>
</tr>
</tbody>
</table>
</div>
</div>
:
<>hi2</>

BIN
src/icons/mel.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 312 B

BIN
src/icons/rng.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 B

BIN
src/icons/tec.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 157 B

130
src/style.css
Unescape View File

@ -69,6 +69,7 @@ body {
}
table {
border-spacing: 0;
width: 100%;
}
table td {
vertical-align: top;
@ -205,6 +206,10 @@ header a {
padding-bottom:10px;
backdrop-filter: blur(10px);
}
.box h3 {
color: #97e2fc;
}
.box h3, dt {
font-size: 12pt;
font-weight: normal;
@ -213,24 +218,14 @@ header a {
border-bottom: 1px solid rgba(128,128,128,0.5);
}
.box tr {
background-repeat: no-repeat;
background-position: left bottom;
border-bottom: 1px solid rgba(128,128,128,0.5);
}
.box tr:last-child {
border-bottom: 0;
border-bottom: 1px solid rgba(128,128,128,0.13);
}
.box td {
padding: 0 5px;
white-space: nowrap;
}
.box td:first-child {
color: #97e2fc;
}
.box td:last-child {
text-align: right;
}
.basicInfo {
display: grid;
grid-template-columns: minmax(0,0.9fr) minmax(0,1fr) minmax(0,1fr);
@ -305,16 +300,32 @@ header a {
content: " \25C6";
margin-right: 10px;
}
.viewedEquipName {
.equipNameWrapper {
display:grid;
grid-template-columns: minmax(0,auto) minmax(0,1fr);
margin: 10px 10px 0;
gap: 10px;
}
.equipName {
max-width: 250px;
padding-right:2px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.equipName:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.equipName h2 {
color: white;
font-weight: normal;
font-size: 18px;
margin: 10px 10px 0 10px;
text-align: left;
}
.viewedEquipName img {
margin-right: 5px;
vertical-align: top;
.equipEnhancement:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.saveControls {
margin-top: 10px;
@ -400,6 +411,67 @@ header a {
margin: 10px 10px 0 0;
text-align: left;
}
.statsDetails {
display:grid;
grid-template-columns: minmax(0,auto) repeat(3,minmax(0,1fr));
grid-template-areas:
"enhance1 enhance2 enhance2 enhance2"
"variance1 variance2 variance2 variance2"
"weaponup mel rng tec"
"ailment ailment1 ailment2 ailment3"
"class1 class2 class2 class2"
"mw1 mw2 mw2 mw2"
}
.statsDetails > div:nth-child(-n+6){
color: #97e2fc;
}
.statsDetails > div {
border-bottom: 1px solid rgba(128,128,128,0.5);
}
.augmentDetails {
display: grid;
grid-template-columns: minmax(0,1fr) minmax(0,0.8fr);
grid-template-rows: auto minmax(0, 1fr);
gap: 10px;
flex: 1;
grid-template-areas:
"header1 header2"
"ability stats";
place-content: stretch;
place-items: stretch;
margin: 8px 10px 0 8px;
}
.augmentDetails h3 {
margin: 0;
}
.augmentDetailsListHeader {
grid-area: header1;
}
.augmentDetailsStatsHeader {
grid-area: header2;
}
.augmentDetailsList {
grid-area: ability;
overflow-y: scroll;
max-height: 280px;
}
.augmentDetailsList li {
background-color: rgba(128,128,128,0.25);
color: white;
margin: 2px 5px 5px 2px;
padding: 10px;
}
.augmentDetailsList li:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
outline: 2px solid hsl(180, 78%, 50%);
}
.augmentDetailsStats {
grid-area: stats;
margin: 0 0 0 10px;
}
.augmentDetailsStats td:last-child {
color: #ffb74c;
}
.equipAugs {
flex: 1 1 auto;
}
@ -611,7 +683,7 @@ header a {
vertical-align: middle;
}
.fixa {
color: rgb(255,135,80);
color: rgb(255,135,80) !important;
}
.fixa:before {
content: url("./icons/UINGSItemPresetAbility.png");
@ -619,7 +691,22 @@ header a {
vertical-align: middle;
}
.pot {
color: rgb(255,255,0);
color: rgb(255,255,0) !important;
}
.mel:before {
content: url("./icons/mel.png");
margin-right: 5px;
vertical-align: middle;
}
.rng:before {
content: url("./icons/rng.png");
margin-right: 5px;
vertical-align: middle;
}
.tec:before {
content: url("./icons/tec.png");
margin-right: 5px;
vertical-align: middle;
}
.pot:before {
content: url("./icons/NGSUIItemPotentialAbility.png");
@ -630,7 +717,6 @@ header a {
clear: both;
}
.itemlistcontainer {
/* max-height: 400px;*/
overflow-y: scroll;
overflow-x: hidden;
margin: 10px 5px 0 0;
@ -822,7 +908,6 @@ li.treeListSub:after {
margin-right: 5px;
}
.skillTreeBox {
/* flex: 1 1 auto;*/
margin: 0;
min-width: 181px;
min-height: auto;
@ -1468,6 +1553,8 @@ p.adminNav hr {
top:16px;
}
.equipWindow {
display: flex;
flex-direction: column;
min-height: 440px;
}
.itemDetailsGridTop {
@ -1484,6 +1571,7 @@ p.adminNav hr {
"augment augment";
grid-template-columns: repeat(2,minmax(0,1fr));
margin: 10px;
flex: 1;
}
.itemDetailsIcon {
grid-area: icon;
@ -1548,7 +1636,7 @@ p.adminNav hr {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(125px, 1fr));
gap: 10px 30px;
flex: 1;
}
.itemDetailsAugmentWrapper > div {
background-color:rgba(0,0,0,0.33);

Write Preview
Loading…
Cancel
Save