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

UI Stuff

Browse Source
This commit is contained in:
dudleycu 2021-08-10 00:17:09 +09:00
parent 1363c8c835
commit 3d351df078
4 changed files with 21874 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21815
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

38
src/App.js
View File

@ -1074,31 +1074,19 @@ function App() {
<DamageCalculator/> <DamageCalculator/>
</Route> </Route>
<Route path="/"> <Route path="/">
<div id="main"> <div className="modalOverlay">
<Col> <div className="modal">
<MainBox author={author} setAuthor={setAuthor} buildName={buildName} setBuildName={setBuildName} className={className} setClassName={setClassName} secondaryClassName={secondaryClassName} setSecondaryClassName={setSecondaryClassName}/> <div className="box boxModal" style={{textAlign:"center"}}>
<EffectsBox effectList={effectList} setEffectList={setEffectList}/> <div className="boxTitleBar"><h1>Under Construction</h1></div>
</Col> <br /><img src={process.env.PUBLIC_URL+"/spinner.gif"} alt="" style={{background:"linear-gradient(white,#bca9f5)",marginTop:"10px"}} />
<Col> <p style={{textAlign:"justify",width:"33%",margin:"0 auto"}}>
<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}/> NGSplanner.com is currently under construction! Please check back after Sig yells at me enough to help finish it.<br />
<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}/> </p>
</Col> <p style={{textAlign:"center",width:"66%",margin:"0 auto"}}>
<Col> Repo: <a href="https://github.com/sigonasr2/ngsplanner/">github.com/sigonasr2/ngsplanner</a>
</p>
<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}/> </div>
<DamageBox criticalHitRate={criticalHitRate} setCriticalHitRate={setCriticalHitRate} criticalMultiplier={criticalMultiplier} setCriticalMultiplier={setCriticalMultiplier} midRange={midRange} setMidRange={setMidRange} critical={critical} setCritical={setCritical} effective={effective} setEffective={setEffective}/> </div>
</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>
</Route> </Route>
</Switch> </Switch>

46
src/TestPanel.js
View File

@ -87,7 +87,7 @@ function ExpandTooltip(p) {
placement="top" placement="top"
radius={5} radius={5}
zIndex={1} zIndex={1}
className="xTooltip" content={p.tooltip}>{p.mouseOverText}</Tooltip> className="xTooltip" content={p.tooltip}>{p.children}</Tooltip>
} }
function Class(p) { 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)}} />} {p.filter&&<input className="itemBarForm" type="text" placeholder="Filter" value={filter} onChange={(f)=>{setFilter(f.currentTarget.value)}} />}
</div> </div>
</div> </div>
} }<div className="tooltipAnchor">
<div className="modalItemListContainer customScrollbar"> <div className="modalItemListContainer customScrollbar">
<ul className="itemlist"> <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))} {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} {p.children}
</ul> </ul>
</div> </div>
</div>
</PopupWindow> </PopupWindow>
} }
@ -292,23 +293,36 @@ useEffect(()=>{
<h1>Equipped Weapon</h1></div> <h1>Equipped Weapon</h1></div>
<h2 className="rifle">Resurgir Rifle+40</h2> <h2 className="rifle">Resurgir Rifle+40</h2>
<PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}/> <PageControl pages={3} currentPage={weaponPage} setCurrentPage={setWeaponPage}/>
<div className="equipDetails">
<div className="equipAugs">
{weaponPage===1? {weaponPage===3?
<div class="equipDetails">
<div class="equipAugs">
<h3>Ability Details</h3>
<ul> <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><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><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><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><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><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><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><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><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><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><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><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 className="addAug"><img alt="" src={process.env.PUBLIC_URL+"/icons/aug_plus.png"} /></li> <li><img alt="" src="./icons/aug_plus.png" /></li>
</ul> </ul>
</div>
<div class="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>
: :
<>hi</> <>hi</>
} }
</div>
</div>
</div> </div>
</div> </div>
<div className="containerC"> <div className="containerC">
@ -465,7 +479,9 @@ useEffect(()=>{
} }
}} }}
displayFunction={(item)=>{ 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>}}
/> />

52
src/style.css
View File

@ -40,7 +40,7 @@ body {
background-size: 1903px,2560px; background-size: 1903px,2560px;
background-color: #e8ecf4; background-color: #e8ecf4;
background-repeat: no-repeat,repeat-y; background-repeat: no-repeat,repeat-y;
background-position: center 40px; background-position: center 0;
color: black; color: black;
font-family: ngs,Arial,sans-serif; font-family: ngs,Arial,sans-serif;
font-size: 11pt; font-size: 11pt;
@ -266,17 +266,11 @@ em {
} }
.da span:hover { .da span:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66)); background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
}
.basicInfoBox {
} }
.basicInfoTable { .basicInfoTable {
table-layout:fixed; table-layout:fixed;
width: 100%; width: 100%;
line-height: 23px; line-height: 23px;
}
.basicInfo td:nth-child(2) {
} }
.basicInfo td:nth-child(3) { .basicInfo td:nth-child(3) {
width: 33%; width: 33%;
@ -312,9 +306,6 @@ em {
color: white; color: white;
} }
.box h3 { .box h3 {
/* background-image: url("tr_bg.png");
background-repeat: no-repeat;
background-position: left bottom;*/
font-size: 12pt; font-size: 12pt;
font-weight: normal; font-weight: normal;
padding: 0 5px; padding: 0 5px;
@ -406,11 +397,18 @@ em {
white-space: normal; white-space: normal;
left: 1em; left: 1em;
} }
.tooltipAnchor {
position: relative;
}
.xTooltip { .xTooltip {
margin: 0 10px 0 0; margin: 0 10px 0 0;
display: inline; display: inline;
cursor: help; cursor: help;
color: white;
font-size:10pt;
text-align: left;
} }
[class*="BaseToolTop"] { [class*="BaseToolTop"] {
min-width: 200px; min-width: 200px;
} }
@ -429,15 +427,12 @@ em {
.pr li span { .pr li span {
color:white color:white
} }
/*.pr li:hover {
background: linear-gradient(45deg,rgba(76,113,126,0.66),rgba(113,169,189,00.66));
}*/
.ye { .ye {
color: #ffb74c; color: #ffb74c;
} }
.itemlist { .itemlist {
margin: 0 10px; margin: 0 10px;
position: relative;
} }
.itemlist li { .itemlist li {
background-color: rgba(128,128,128,0.33); background-color: rgba(128,128,128,0.33);
@ -447,9 +442,7 @@ em {
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right top; background-position: right top;
background-origin: content-box; background-origin: content-box;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.aug:before { .aug:before {
content:url("./icons/UINGSItemSpecialAbility.png"); content:url("./icons/UINGSItemSpecialAbility.png");
@ -459,6 +452,12 @@ em {
.itemwep { .itemwep {
font-size: 10pt; font-size: 10pt;
} }
.itemWeaponWrapper {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding-right: 16px;
}
.itemwep em { .itemwep em {
font-size: 12pt; font-size: 12pt;
line-height: 28px; line-height: 28px;
@ -648,20 +647,29 @@ option {
background-color: rgb(128,128,128); background-color: rgb(128,128,128);
} }
.boxExit { .boxExit {
padding: 9px 9px 3px 9px; padding: 4px 9px 8px 9px;
margin: 4px; margin: 4px;
} }
.boxExit:hover { .boxExit:hover {
background-color: hsl(0, 100%, 33%); background-color: hsl(0, 100%, 33%);
outline: 2px solid hsl(0, 100%, 50%); outline: 2px solid hsl(0, 100%, 50%);
} }
.boxExit:after { /*.boxExit:after {
content: ' \2573'; content: ' \2573';
font-size:9pt; 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 { .exit {
color: white; color: white;
} }