UI Stuff
This commit is contained in:
parent
1363c8c835
commit
3d351df078
21815
package-lock.json
generated
21815
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
40
src/App.js
40
src/App.js
@ -1074,32 +1074,20 @@ function App() {
|
||||
<DamageCalculator/>
|
||||
</Route>
|
||||
<Route path="/">
|
||||
<div id="main">
|
||||
<Col>
|
||||
<MainBox author={author} setAuthor={setAuthor} buildName={buildName} setBuildName={setBuildName} className={className} setClassName={setClassName} secondaryClassName={secondaryClassName} setSecondaryClassName={setSecondaryClassName}/>
|
||||
<EffectsBox effectList={effectList} setEffectList={setEffectList}/>
|
||||
</Col>
|
||||
<Col>
|
||||
<EquipBox weapon={weapon} setWeapon={setWeapon} armorSlot1={armorSlot1} setArmorSlot1={setArmorSlot1} armorSlot2={armorSlot2} setArmorSlot2={setArmorSlot2} armorSlot3={armorSlot3} setArmorSlot3={setArmorSlot3} weaponEnhancementLv={weaponEnhancementLv} setWeaponEnhancementLv={setWeaponEnhancementLv} armorSlot1EnhancementLv={armorSlot1EnhancementLv} setArmorSlot1EnhancementLv={setArmorSlot1EnhancementLv} armorSlot2EnhancementLv={armorSlot2EnhancementLv} setArmorSlot2EnhancementLv={setArmorSlot2EnhancementLv} armorSlot3EnhancementLv={armorSlot3EnhancementLv} setArmorSlot3EnhancementLv={setArmorSlot3EnhancementLv}/>
|
||||
<EquippedWeaponBox weapon={weapon} armorSlot1={armorSlot1} armorSlot2={armorSlot2} armorSlot3={armorSlot3} weaponAbilityList={weaponAbilityList} setWeaponAbilityList={setWeaponAbilityList} armor1AbilityList={armor1AbilityList} setArmor1AbilityList={setArmor1AbilityList} armor2AbilityList={armor2AbilityList} setArmor2AbilityList={setArmor2AbilityList} armor3AbilityList={armor3AbilityList} setArmor3AbilityList={setArmor3AbilityList} weaponEnhancementLv={weaponEnhancementLv}armorSlot1EnhancementLv={armorSlot1EnhancementLv}armorSlot2EnhancementLv={armorSlot2EnhancementLv}armorSlot3EnhancementLv={armorSlot3EnhancementLv}/>
|
||||
</Col>
|
||||
<Col>
|
||||
|
||||
<StatsBox bp={bp} setBP={setBP} hp={hp} setHP={setHP} pp={pp} setPP={setPP} def={def} setDef={setDef} weaponUp1={weaponUp1} setWeaponUp1={setWeaponUp1} weaponUp2={weaponUp2} setWeaponUp2={setWeaponUp2} weaponUp3={weaponUp3} setWeaponUp3={setWeaponUp3} damageResist={damageResist} setDamageResist={setDamageResist}/>
|
||||
<DamageBox criticalHitRate={criticalHitRate} setCriticalHitRate={setCriticalHitRate} criticalMultiplier={criticalMultiplier} setCriticalMultiplier={setCriticalMultiplier} midRange={midRange} setMidRange={setMidRange} critical={critical} setCritical={setCritical} effective={effective} setEffective={setEffective}/>
|
||||
</Col>
|
||||
<PopupWindow modalOpen={modalOpen} setModalOpen={setModalOpen} showCloseButton={true} title="Modal Title">Modal content goes here.{BACKENDURL}
|
||||
<br/><br/>
|
||||
<Toggle className="testmode" defaultChecked={TESTMODE} value={TESTMODE} onChange={(t)=>{setTESTMODE(t.target.checked)}}/>Test Mode: {JSON.stringify(TESTMODE)}
|
||||
<br/><br/>{"Fighter Icon URL: "+GetData("class","Fighter","icon")}
|
||||
<br/><br/>Gunner Level Stats:{
|
||||
[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20]
|
||||
.map((numb)=>{
|
||||
var data=GetData("class_level_data","Gunner Lv."+numb);
|
||||
return <><br/>{"Lv."+data.level+": "+data.hp+","+data.atk+","+data.def}</>
|
||||
})}
|
||||
</PopupWindow>
|
||||
</div>
|
||||
<div className="modalOverlay">
|
||||
<div className="modal">
|
||||
<div className="box boxModal" style={{textAlign:"center"}}>
|
||||
<div className="boxTitleBar"><h1>Under Construction</h1></div>
|
||||
<br /><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt="" style={{background:"linear-gradient(white,#bca9f5)",marginTop:"10px"}} />
|
||||
<p style={{textAlign:"justify",width:"33%",margin:"0 auto"}}>
|
||||
NGSplanner.com is currently under construction! Please check back after Sig yells at me enough to help finish it.<br />
|
||||
</p>
|
||||
<p style={{textAlign:"center",width:"66%",margin:"0 auto"}}>
|
||||
Repo: <a href="https://github.com/sigonasr2/ngsplanner/">github.com/sigonasr2/ngsplanner</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Route>
|
||||
</Switch>
|
||||
</HashRouter>
|
||||
|
@ -87,7 +87,7 @@ function ExpandTooltip(p) {
|
||||
placement="top"
|
||||
radius={5}
|
||||
zIndex={1}
|
||||
className="xTooltip" content={p.tooltip}>{p.mouseOverText}</Tooltip>
|
||||
className="xTooltip" content={p.tooltip}>{p.children}</Tooltip>
|
||||
}
|
||||
|
||||
function Class(p) {
|
||||
@ -162,13 +162,14 @@ function SelectorWindow(p) {
|
||||
{p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" value={filter} onChange={(f)=>{setFilter(f.currentTarget.value)}} />}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
}<div className="tooltipAnchor">
|
||||
<div className="modalItemListContainer customScrollbar">
|
||||
<ul className="itemlist">
|
||||
{itemList.filter((item)=>p.filterFunction(tabPage,item)).filter((item)=>p.searchFieldFunction(filter,item)).sort((a,b)=>p.sortOrderFunction(sortSelector,a,b)).map((item)=>p.displayFunction(item))}
|
||||
{p.children}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</PopupWindow>
|
||||
}
|
||||
|
||||
@ -292,23 +293,36 @@ useEffect(()=>{
|
||||
<h1>Equipped Weapon</h1></div>
|
||||
<h2 className="rifle">Resurgir Rifle+40</h2>
|
||||
<PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}/>
|
||||
<div className="equipDetails">
|
||||
<div className="equipAugs">
|
||||
{weaponPage===1?
|
||||
<ul>
|
||||
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +20%/<br />Critical Hit Rage +15% for 30 seconds after a successful sidestep</>}/><span className="pot">Dynamo Unit Lv.3</span></li>
|
||||
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Potency +4%</>}/><span className="fixa">Fixa Attack Lv.3</span></li>
|
||||
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>PP +5<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Pettas Soul II</span></li>
|
||||
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP -10, Potency +1.5%,<br />Potency Floor Increase +1.5%<br />Damage Resistance -1.5%</>}/><span className="aug">Alts Secreta II</span></li>
|
||||
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>HP +10<br />Ranged Weapon Potency +2.0%</>}/><span className="aug">Gigas Precision II</span></li>
|
||||
<li><ExpandTooltip mouseOverText={<img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} />} tooltip={<>Ranged Weapon Potency +2.0%</>}/><span className="aug">Precision III</span></li>
|
||||
<li className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li>
|
||||
</ul>
|
||||
|
||||
|
||||
{weaponPage===3?
|
||||
<div class="equipDetails">
|
||||
<div class="equipAugs">
|
||||
<h3>Ability Details</h3>
|
||||
<ul>
|
||||
<li><div class="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 class="pot">Dynamo Unit Lv.3</span></li>
|
||||
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Potency +4%</span></div><span class="fixa">Fixa Attack Lv.3</span></li>
|
||||
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>PP +5<br />Ranged Weapon Potency +2.0%</span></div><span class="aug">Pettas Soul II</span></li>
|
||||
<li><div class="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 class="aug">Alts Secreta II</span></li>
|
||||
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>HP +10<br />Ranged Weapon Potency +2.0%</span></div><span class="aug">Gigas Precision II</span></li>
|
||||
<li><div class="equipAugsExpand tooltip"><img alt="" src="./icons/aug_plus.png" /><span>Ranged Weapon Potency +2.0%</span></div><span class="aug">Precision III</span></li>
|
||||
<li><img alt="" src="./icons/aug_plus.png" /></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="pr">
|
||||
<h3>Stat Adjustment</h3>
|
||||
<ul>
|
||||
<li>Enhancement Lv. <span>+35</span></li>
|
||||
<li>Multi-Weapon <span>-</span></li>
|
||||
<li>Element <span>-</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
:
|
||||
<>hi</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="containerC">
|
||||
@ -465,7 +479,9 @@ useEffect(()=>{
|
||||
}
|
||||
}}
|
||||
displayFunction={(item)=>{
|
||||
return <li className={"itemwep r"+item[1].rarity}><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">{item[1].name} {item[0].name}</em><br /><span className="atk">{item[1].atk}</span> <span className="pot tooltip">{item[2].name} <span>{item[3].map((pot,i)=><>{(i!==0)&&<br/>}{pot.name}: {pot.description.replace("\\n","\n")}</>)}</span></span></li>}}
|
||||
return <li className={"itemwep r"+item[1].rarity}><div class="itemWeaponWrapper"><img className="itemimg" alt="" src="64px-NGSUIItemPrimmRifle.png" /><em className="rifle">{item[1].name} {item[0].name}</em></div><br /><span className="atk">{item[1].atk}</span> <ExpandTooltip tooltip={<>{item[3].map((pot,i)=><>{(i!==0)&&<br/>}{pot.name}: {pot.description.split("\\n").map((it)=><>{it}<br/> </>)}</>)}</>}>
|
||||
<span className="pot">{item[2].name}</span>
|
||||
</ExpandTooltip></li>}}
|
||||
|
||||
/>
|
||||
|
||||
|
@ -40,7 +40,7 @@ body {
|
||||
background-size: 1903px,2560px;
|
||||
background-color: #e8ecf4;
|
||||
background-repeat: no-repeat,repeat-y;
|
||||
background-position: center 40px;
|
||||
background-position: center 0;
|
||||
color: black;
|
||||
font-family: ngs,Arial,sans-serif;
|
||||
font-size: 11pt;
|
||||
@ -266,17 +266,11 @@ em {
|
||||
}
|
||||
.da span:hover {
|
||||
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
|
||||
}
|
||||
.basicInfoBox {
|
||||
|
||||
}
|
||||
.basicInfoTable {
|
||||
table-layout:fixed;
|
||||
width: 100%;
|
||||
line-height: 23px;
|
||||
}
|
||||
.basicInfo td:nth-child(2) {
|
||||
|
||||
}
|
||||
.basicInfo td:nth-child(3) {
|
||||
width: 33%;
|
||||
@ -312,9 +306,6 @@ em {
|
||||
color: white;
|
||||
}
|
||||
.box h3 {
|
||||
/* background-image: url("tr_bg.png");
|
||||
background-repeat: no-repeat;
|
||||
background-position: left bottom;*/
|
||||
font-size: 12pt;
|
||||
font-weight: normal;
|
||||
padding: 0 5px;
|
||||
@ -406,11 +397,18 @@ em {
|
||||
white-space: normal;
|
||||
left: 1em;
|
||||
}
|
||||
.tooltipAnchor {
|
||||
position: relative;
|
||||
}
|
||||
.xTooltip {
|
||||
margin: 0 10px 0 0;
|
||||
display: inline;
|
||||
cursor: help;
|
||||
color: white;
|
||||
font-size:10pt;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
[class*="BaseToolTop"] {
|
||||
min-width: 200px;
|
||||
}
|
||||
@ -429,15 +427,12 @@ em {
|
||||
.pr li span {
|
||||
color:white
|
||||
}
|
||||
/*.pr li:hover {
|
||||
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
|
||||
}*/
|
||||
.ye {
|
||||
color: #ffb74c;
|
||||
}
|
||||
.itemlist {
|
||||
margin: 0 10px;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
.itemlist li {
|
||||
background-color: rgba(128,128,128,0.33);
|
||||
@ -447,9 +442,7 @@ em {
|
||||
background-repeat: no-repeat;
|
||||
background-position: right top;
|
||||
background-origin: content-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
||||
}
|
||||
.aug:before {
|
||||
content:url("./icons/UINGSItemSpecialAbility.png");
|
||||
@ -459,9 +452,15 @@ em {
|
||||
.itemwep {
|
||||
font-size: 10pt;
|
||||
}
|
||||
.itemWeaponWrapper {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
padding-right: 16px;
|
||||
}
|
||||
.itemwep em {
|
||||
font-size: 12pt;
|
||||
line-height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
.itemwep:after {
|
||||
clear:both;
|
||||
@ -648,20 +647,29 @@ option {
|
||||
background-color: rgb(128,128,128);
|
||||
}
|
||||
.boxExit {
|
||||
padding: 9px 9px 3px 9px;
|
||||
padding: 4px 9px 8px 9px;
|
||||
margin: 4px;
|
||||
}
|
||||
.boxExit:hover {
|
||||
background-color: hsl(0, 100%, 33%);
|
||||
outline: 2px solid hsl(0, 100%, 50%);
|
||||
}
|
||||
.boxExit:after {
|
||||
/*.boxExit:after {
|
||||
content: ' \2573';
|
||||
font-size:9pt;
|
||||
}
|
||||
/*.itembox:hover {
|
||||
border: 1px solid #36ffff;
|
||||
}*/
|
||||
.boxExit:before, .boxExit:after {
|
||||
height: 28px;
|
||||
background-color:white;
|
||||
width: 2px;
|
||||
content: " ";
|
||||
}
|
||||
.boxExit:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
.boxExit:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
.exit {
|
||||
color: white;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user