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

UI Stuff

Browse Source
master
dudleycu 4 years ago
parent 1363c8c835
commit 3d351df078
4 changed files with 21874 additions and 85 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. 21815
      package-lock.json
  2. 40
      src/App.js
  3. 50
      src/TestPanel.js
  4. 54
      src/style.css

21815
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

40
src/App.js
Unescape View File

@ -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>

50
src/TestPanel.js
Unescape View File

@ -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.&emsp;<span>+35</span></li>
<li>Multi-Weapon&emsp;<span>-</span></li>
<li>Element&emsp;<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>}}
/>

54
src/style.css
Unescape View File

@ -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;
}

Write Preview
Loading…
Cancel
Save