sigonasr2, Sig, Sigo 3 years ago
commit a08fceba12
  1. 73
      README.md
  2. 100
      src/App.js
  3. 152
      src/NOTES.md
  4. 214
      src/TestPanel.js
  5. 67
      src/search.js
  6. 2
      src/style.css

@ -1,70 +1,17 @@
# Getting Started with Create React App
# NGS Planner
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
![](https://cdn.discordapp.com/attachments/746396256842022984/872804680730816552/unknown.png "")
## Available Scripts
This tool was created for Phantasy Star Online 2: New Genesis. It is used to therorycraft builds and share them with other players!
In the project directory, you can run:
The goal of NGS Planner is be accurate, accessible, and shareable.
### `npm start`
### Contributers
Runs the app in the development mode.\
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
- Developer, Database Designer - [sigonasr2](https://twitter.com/sigonasr2)
- UI & Game Consultant - [Dudley](https://twitter.com/dudleyc_)
The page will reload if you make edits.\
You will also see any lint errors in the console.
### Resources Used:
### `npm test`
Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
### `npm run build`
Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!
See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
### `npm run eject`
**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
## Learn More
You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
To learn React, check out the [React documentation](https://reactjs.org/).
### Code Splitting
This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
### Analyzing the Bundle Size
This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
### Making a Progressive Web App
This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
### Advanced Configuration
This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
### Deployment
This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
### `npm run build` fails to minify
This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
- [NGS Verification Data Storage](https://docs.google.com/spreadsheets/d/1_OgubzM5QFe4rua4Xu0GSMAI8Idoq8r2yI8Ioyec6oY/edit#gid=661779228) created by [ものさし](https://twitter.com/flowerint1034) & [Theuberelite](https://twitter.com/TheuberClips)
- [Arks-Visiphone](https://pso2na.arks-visiphone.com/wiki/Portal:New_Genesis)

@ -24,9 +24,19 @@ const parse = require('csv-parse/lib/sync')
const BACKEND_URL = process.env.REACT_APP_GITPOD_WORKSPACE_URL||process.env.REACT_APP_BACKEND_URL||'https://projectdivar.com:4504'; //You can specify a .env file locally with REACT_APP_BACKEND_URL defining a URL to retrieve data from.
/*const MELEE_DMG = 0
/*
Damage types
const MELEE_DMG = 0
const RANGE_DMG = 1
const TECH_DMG = 2 //NOT USED YET*/
const TECH_DMG = 2
Art properties
const NORMAL = 0
const PHOTON_ART = 1
const WEAPON_ACTION = 2
const STEP_COUNTER = 3
const PARRY_COUNTER = 4
//NOT USED YET*/
function Col(p) {
return <div className="con">
@ -550,11 +560,14 @@ function AdminPanel(p) {
<Link to={process.env.PUBLIC_URL+"/admin/class"}>Class</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/classdata"}>Class Data</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/classweaponcompatibility"}>Class-Weapon Compatibility</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/classskills"}>Class Skills</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/classskilldata"}>Class Skill Data</Link><br/>
<hr/>
<Link to={process.env.PUBLIC_URL+"/admin/weapons"}>Weapons</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/weaponexistencedata"}>Weapon Existence Data</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/weapontypes"}>Weapon Types</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/classweaponcompatibility"}>Class-Weapon Compatibility</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/photonarts"}>Photon Arts</Link><br/>
<hr/>
<Link to={process.env.PUBLIC_URL+"/admin/armor"}>Armor</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/potentials"}>Potentials</Link><br/>
@ -565,9 +578,14 @@ function AdminPanel(p) {
<Link to={process.env.PUBLIC_URL+"/admin/skills"}>Skills</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/skilltypes"}>Skill Types</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/skilldata"}>Skill Data</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/photonarts"}>Photon Arts</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/classskills"}>Class Skills</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/classskilldata"}>Class Skill Data</Link><br/>
<hr/>
<Link to={process.env.PUBLIC_URL+"/admin/augments"}>Augments</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/augmenttypes"}>Augment Types</Link><br/>
<hr/>
<Link to={process.env.PUBLIC_URL+"/admin/enemydata"}>Enemy Data</Link><br/>
<hr/>
<Link to={process.env.PUBLIC_URL+"/admin/food"}>Food</Link><br/>
<Link to={process.env.PUBLIC_URL+"/admin/foodmultipliers"}>Food Multipliers</Link><br/>
@ -586,6 +604,9 @@ function AdminPanel(p) {
<Route path={process.env.PUBLIC_URL+"/admin/classweaponcompatibility"}>
<TableEditor path="/class_weapon_type_data"/>
</Route>
<Route path={process.env.PUBLIC_URL+"/admin/photonarts"}>
<TableEditor path="/photon_art"/>
</Route>
<Route path={process.env.PUBLIC_URL+"/admin/weapons"}>
<TableEditor path="/weapon"/>
</Route>
@ -616,12 +637,21 @@ function AdminPanel(p) {
<Route path={process.env.PUBLIC_URL+"/admin/skilldata"}>
<TableEditor path="/skill_data"/>
</Route>
<Route path={process.env.PUBLIC_URL+"/admin/classskills"}>
<TableEditor path="/class_skill"/>
</Route>
<Route path={process.env.PUBLIC_URL+"/admin/classskilldata"}>
<TableEditor path="/class_skill_data"/>
</Route>
<Route path={process.env.PUBLIC_URL+"/admin/augments"}>
<TableEditor path="/augment"/>
</Route>
<Route path={process.env.PUBLIC_URL+"/admin/augmenttypes"}>
<TableEditor path="/augment_type"/>
</Route>
<Route path={process.env.PUBLIC_URL+"/admin/enemydata"}>
<TableEditor path="/enemy_data"/>
</Route>
<Route path={process.env.PUBLIC_URL+"/admin/food"}>
<TableEditor path="/food"/>
</Route>
@ -661,23 +691,23 @@ function DamageCalculator(p) {
axios.get(BACKEND_URL+"/augment")
.then((data)=>{
var augmentData = {}
data.data.rows.forEach((entry)=>{augmentData[entry.id]=entry})
data.data.rows.forEach((entry)=>{augmentData[entry.name]=entry})
setAugmentData(augmentData)
})
},[])
const character = {
weapon:{
augments:[13,7,2,5]
augments:["1","2"]
},
armor1:{
augments:[13,1,5]
augments:["2"]
},
armor2:{
augments:[13,2,8]
augments:[]
},
armor3:{
augments:[13,4,1]
augments:[]
}
}
@ -704,7 +734,7 @@ function DamageCalculator(p) {
const [weaponEnhanceLvl,setWeaponEnhanceLvl] = useState(1)
useEffect(()=>{
setWeaponTotalAtk(weaponBaseAtk+weaponEnhanceLvl)
setWeaponTotalAtk(Number(weaponBaseAtk)+Number(weaponEnhanceLvl))
},[weaponBaseAtk,weaponEnhanceLvl])
const [dmgVariance,setDmgVariance] = useState(1)
@ -713,7 +743,7 @@ function DamageCalculator(p) {
const [augDmgVariance,setAugDmgVariance] = useState(1)
useEffect(()=>{
setDmgVariance(weaponDmgVariance+augDmgVariance)
setDmgVariance(Number(weaponDmgVariance)+Number(augDmgVariance))
},[weaponDmgVariance,augDmgVariance])
const [baseAtk,setBaseAtk] = useState(100)
@ -721,8 +751,34 @@ function DamageCalculator(p) {
const [multipliers,setMultipliers] = useState(1)
useEffect(()=>{
setRawDmg(((weaponTotalAtk*dmgVariance)+baseAtk-enemyDef)*multipliers/5)
setRawDmg(((Number(weaponTotalAtk)*Number(dmgVariance))+Number(baseAtk)-Number(enemyDef))*Number(multipliers)/5)
},[weaponTotalAtk,dmgVariance,baseAtk,enemyDef,multipliers])
const [atkmult,setAtkMult] = useState(1);
const [partmult,setPartMult] = useState(1);
const [elementalWeaknessMult,setElementalWeaknessMult] = useState(1.2)
const [mainClassWeaponBoost,setMainClassWeaponBoost] = useState(1.1)
const [classSkillMult,setClassSkillMult] = useState(1)
const [equipMult,setEquipMult] = useState(1)
const [augmentEquipMult,setAugmentEquipMult] = useState(1)
const [potencyFloorEquipMult,setPotencyFloorEquipMult] = useState(1)
const [elementalWeaponEquipMult,setElementalWeaponEquipMult] = useState(1.1)
const [critMult,setCritMult] = useState(1.2)
const [appropriateDistance,setAppropriateDistance] = useState(1)
const [foodBoost,setFoodBoost] = useState(1)
const [fieldEffects,setFieldEffects] = useState(1.05)
const [statusAilments,setStatusAilments] = useState(1)
const [enemyCorrectionMult,setEnemyCorrectionMult] = useState(1)
const [highLevelEnemy,setHighLevelEnemy] = useState(1)
useEffect(()=>{
setMultipliers(Number(atkmult)*Number(partmult)*Number(elementalWeaknessMult)*Number(mainClassWeaponBoost)*Number(classSkillMult)*Number(equipMult)*Number(augmentEquipMult)*Number(potencyFloorEquipMult)*Number(elementalWeaponEquipMult)*Number(critMult)*Number(appropriateDistance)*Number(foodBoost)*Number(fieldEffects)*Number(statusAilments)*Number(enemyCorrectionMult)*Number(highLevelEnemy))
},[atkmult,partmult,elementalWeaknessMult,mainClassWeaponBoost,classSkillMult,equipMult,augmentEquipMult,potencyFloorEquipMult,elementalWeaponEquipMult,critMult,appropriateDistance,foodBoost,fieldEffects,statusAilments,enemyCorrectionMult,highLevelEnemy])
return <>
<div style={{background:"rgba(200,255,200,1)"}}>
@ -741,6 +797,28 @@ function DamageCalculator(p) {
Base Attack:<EditStatBox value={baseAtk} callback={(val)=>{setBaseAtk(val)}}/>
Enemy Defense:<EditStatBox value={enemyDef} callback={(val)=>{setEnemyDef(val)}}/>
Multipliers:<EditStatBox value={multipliers} callback={(val)=>{setMultipliers(val)}}/>
<ul>
<li>Atk Mult:<EditStatBox value={atkmult} callback={(val)=>{setAtkMult(val)}}/></li>
<li>Part Mult:<EditStatBox value={partmult} callback={(val)=>{setPartMult(val)}}/></li>
<li>Elemental Weakness Mult:<EditStatBox value={elementalWeaknessMult} callback={(val)=>{setElementalWeaknessMult(val)}}/></li>
<li>Main Class Weapon Boost:<EditStatBox value={mainClassWeaponBoost} callback={(val)=>{setMainClassWeaponBoost(val)}}/></li>
<li>Class Skill Mult:<EditStatBox value={classSkillMult} callback={(val)=>{setClassSkillMult(val)}}/></li>
<li>Equip Mult:<EditStatBox value={equipMult} callback={(val)=>{setEquipMult(val)}}/></li>
<li>
<ul>
<li>Augment Equip Mult:<EditStatBox value={augmentEquipMult} callback={(val)=>{setAugmentEquipMult(val)}}/></li>
<li>Potency Floor Equip Mult:<EditStatBox value={potencyFloorEquipMult} callback={(val)=>{setPotencyFloorEquipMult(val)}}/></li>
<li>Elemental Weapon Equip Mult:<EditStatBox value={elementalWeaponEquipMult} callback={(val)=>{setElementalWeaponEquipMult(val)}}/></li>
</ul>
</li>
<li>Crit Mult:<EditStatBox value={critMult} callback={(val)=>{setCritMult(val)}}/></li>
<li>Appropriate Distance:<EditStatBox value={appropriateDistance} callback={(val)=>{setAppropriateDistance(val)}}/></li>
<li>Food Boost:<EditStatBox value={foodBoost} callback={(val)=>{setFoodBoost(val)}}/></li>
<li>Field Effects:<EditStatBox value={fieldEffects} callback={(val)=>{setFieldEffects(val)}}/></li>
<li>Status Ailments:<EditStatBox value={statusAilments} callback={(val)=>{setStatusAilments(val)}}/></li>
<li>Enemy Correction Multiplier:<EditStatBox value={enemyCorrectionMult} callback={(val)=>{setEnemyCorrectionMult(val)}}/></li>
<li>High Level Enemy:<EditStatBox value={highLevelEnemy} callback={(val)=>{setHighLevelEnemy(val)}}/></li>
</ul>
<br/><br/><br/>
Raw Dmg:{rawDmg}
</div>
@ -816,7 +894,7 @@ function App() {
</Route>
<Route path={process.env.PUBLIC_URL+"/test"}>
<TestHeader/>
<div id="main"><TestPanel/></div>
<TestPanel/>
</Route>
<Route path={process.env.PUBLIC_URL+"/formula"}>
<DamageCalculator/>

@ -0,0 +1,152 @@
useEffect(()=>{
setRawDmg(((weaponTotalAtk*dmgVariance)+baseAtk-enemyDef)*multipliers/5)
},[weaponTotalAtk,dmgVariance,baseAtk,enemyDef,multipliers])
**Hello**
Base Damage = (Attack Power - Enemy Defense)
* (all multipliers, including Attack Multiplier, Part Multiplier, Main Class Weapon Boost, Class Skill Multiplier, etc.)/5
Attack Multiplier based on Normal Atk or PA used NEED TO ADD TO DB
Part Multiplier Usually 1 or 1.5 CUSTOM FIELD - db way later?
Elemental Weakness Multiplier 1.2 CHECKBOX - db way later?
Main Class Weapon Boost 1.1 AUTO - already in db
Class Skill Multiplier NEED TO ADD TO DB
Equip Multipliers
Augment AUTO - already in db
Elemental Weapon 1.15 against weak, 1.1 against non-weak DROPDOWN
Crit Multis 1.2 base + whatever AUTO - (preset skill termina, already in db)
Appropriate Distance FOR UI, CHECK IF BELOW THEN SHOW DROPDOWN
Assault Rifle Close Range 1.1, Mid Range 1.2, Long Range 1.0
TMG Close Range 1.1, Mid Range 1.2, Long Range 1.0
Wired Lance Short Range 1.0, Mid Range 1.2
Food Boost AUTO - ALREADY IN DB
Field Effects Region Mag 1.05, Drone Boost 1.1 CHECKBOX
Status Ailment to Player burn 0.9-0.95 IDC RN - IMPLEMENTED VIA CUSTOM BOX
Enemy Special Corrections
UQ Boss BREAK damage 2.0 CHECKBOX -> ENEMY
Gigantix 0.5 CHECKBOX -> ENEMY
Enemy Shifta/Deband worry later
High-Level Enemy Enemy level >=5 player level, dmg x 0
https://docs.google.com/spreadsheets/d/1F952a5BxqlbnB2DWQWWdjiCB_6xI70Gc6FQDU2OUOT4/edit#gid=0
Data Verfication Data
https://docs.google.com/spreadsheets/d/1_OgubzM5QFe4rua4Xu0GSMAI8Idoq8r2yI8Ioyec6oY/edit#gid=661779228
MORE DATABASE STUFF
LATER Enemy Data
Level
Defense
Attack Power
-> custom field [Level, Defense, Atk Power] <-
Patty Size
5oz
7oz
2. The players maximum Attack Power is determined by the level of the enemy. If the attack power is over a certain value, it will be corrected down (e.g. Lv1=900, Lv10=1068, Lv20=1292).
3. Calculate the Base Damage using the following formula.
 Base Damage = (Attack Power - Enemy Defense) * (all multipliers, including Attack Multiplier, Part Multiplier, Main Class Weapon Boost, Class Skill Multiplier, etc.)/5
4. Round the Base Damage to the nearest whole number to get the final damage."
___
**Edge Cases**
**Hunter** Volkraptor
**Gunner Sux** Chain Boost
**Force** Photon Flare Short Charge
**Techter** Deband PP Recovery Boost
Deband Ward Bad Condition
Chain Build Power = 60 * (Power when building 100 chain with that PA + (Power of 100 Chain, C Point Blank * 1 + Point Blank * 2 + Onslaught) + (Power of S Roll * 3))
÷ (Frame Count when building 100 chain with that PA + (Frame Count of C Point Blank * 1 + Point Blank * 2 + Onslaught) + (Frames of S Roll * 3)) = 60 * (PA power * (100 / hit count) + 2*(C Point*1 + Point*2 + Onslaught) + S Roll*3 power)/((PA frames / 1.2)*(100 / hit count)+30+(62*3+38+38*3)/1.2)
___
TABLE class_skill{
id int [pk,increment,unique]
name text
class_id int
icon text
description text
}
TABLE class_skill_data{
id int [pk,increment,unique]
name text
class_skill_id int
dependency text
level int
effect text
duration int
cooldown int
damage_taken float
pa_potency float
conditional_buff boolean
pp_recovery float
property text
all_damage_buff float
active_pp_recovery float
status_ailment_accum float
status_ailment_duration float
pp_consumption float
max_hp_decrease float
natural_pp_recovery float
added_pp int
pb_gauge_fortification float
}
*/

@ -2,65 +2,197 @@ import React from 'react';
function TestPanel() {
return ( //Futasuke is a genius
<div className="container">
<div className="box itembox">
<div className="main">
<div className="containerA">
<div className="box">
<div className="boxTitleBar">
<h1>Weapon Select</h1>
<h1>Basic Information</h1>
<div className="boxExit"></div>
</div>
<table className="basicInfo">
<tr>
<td>Author</td>
<td>&nbsp;</td>
<td>Dudley</td>
</tr>
<tr>
<td>Build Name</td>
<td>&nbsp;</td>
<td>Fatimah</td>
</tr>
<tr>
<td>Class</td>
<td><img alt="" src="Ra.png" /> Ranger</td>
<td><span className="ye">Lv.20</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td><img alt="" src="Fo.png" /> Force</td>
<td>Lv.15</td>
</tr>
</table>
</div>
<div className="box">
<div className="boxTitleBar">
<h1>Current Effects</h1>
<div className="boxExit"></div>
</div>
<ul className="boxmenu">
<li>Rifle</li>
<li>Launcher</li>
<li>Rod</li>
<li>Talis</li>
<li>1</li>
<li>2</li>
</ul>
<div className="itemBar">
<div className="itemBarSort">
<select className="itemBarForm">
<option>Standard Sort</option>
<option>Rarity</option>
<option>Attack</option>
<option>Potency</option>
</select>
</div>
<div className="itemBarFilter">
<input className="itemBarForm" type="text" placeholder="Filter" />
</div>
</div>
<div className="itemlistcontainer customScrollbar">
<ul className="itemlist">
<li className="itemwep r1"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemPrimmRifle.png"} /><em className="rifle">Primm Rifle</em><br /><span className="atk">177</span> <span className="pot tooltip">Recycler Unit<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li>
<li className="itemwep r2"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemTzviaRifle.png"} /><em className="rifle">Tzvia Rifle</em><br /><span className="atk">195</span> <span className="pot tooltip">Indomitable Unit<span>Lv.4: Potency +26%/<br />All Down Resistances +20%</span></span></li>
<li className="itemwep r3"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemTheseusRifle.png"} /><em className="rifle">Theseus Rifle</em><br /><span className="atk">223</span> <span className="pot tooltip">Defensive Formation<span>Lv.4: Potency +22%/<br />Critical Hit Rate increases based on Defense, up to a maximum of +18% at 1,000 Defense.</span></span></li>
<li className="itemwep r4"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemResurgirRifle.png"} /><em className="rifle">Resurgir Rifle</em><br /><span className="atk">240</span> <span className="pot tooltip">Dynamo Unit<span>Lv.4: Potency +21%/<br />Critical Hit Rate +18% for 30 seconds after a successful Sidestep.</span></span></li>
<li className="itemwep r4"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemFoursisRifle.png"} /><em className="rifle">Foursis Rifle</em><br /><span className="atk">242</span> <span className="pot tooltip">Bastion Unit<span>Lv.4: Potency +24%/<br />Creates a barrier that provides Damage Resistance +50% when at Max HP.</span></span></li>
<li className="itemwep"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/logo_test.png"} /><em className="gb">Test</em><br /><span className="atk">999</span> <span className="pot tooltip" title="Test">Test<span>Test</span></span></li>
<li className="itemwep"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/logo_test.png"} /><em className="gb">Test</em><br /><span className="atk">999</span> <span className="pot tooltip" title="Test">Test<span>Test</span></span></li>
<li className="itemwep"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/logo_test.png"} /><em className="gb">Test</em><br /><span className="atk">999</span> <span className="pot tooltip" title="Test">Test<span>Test</span></span></li>
<h3>Effect Name</h3>
<ul className="infoBuffs">
<li>Food Bost Effect
<ul>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Meat] Potency +10.0%</li>
<li><img alt="" src="https://i.imgur.com/TQ8EBW2.png" />&ensp;[Crisp] Potency to Weak Point +5.0%</li>
</ul>
</li>
<li>Shifta / Deband
<ul>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Potency +5.0%</li>
<li><img alt="" src="https://i.imgur.com/VIYYNIm.png" />&ensp;Damage Resistance +10.0%</li>
</ul>
</li>
<li>Region Mag Boost
<ul>
<li><img alt="" src="https://i.imgur.com/N6M74Qr.png" />&ensp;Potency +5.0%</li>
</ul>
</li>
</ul>
</div>
</div>
<div className="box itembox">
<div className="containerB">
<div className="box">
<div className="boxTitleBar">
<h1>Food List</h1>
<h1>Equip</h1>
<div className="boxExit"></div>
</div>
<div className="itemBar">
<div className="itemBarSort">
<div className="equipPalette">
<div className="equipPaletteSlot"><h3>Weapons</h3><div className="equipPaletteSlotWrapper"><span>1</span><img className="r4" alt="" src="./64px-NGSUIItemResurgirRifle.png" /></div></div>
<div className="equipPaletteSlot"><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img className="r3" alt="" src="./photon_barrier.png" /></div></div>
<div className="equipPaletteSlot"><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img className="r3" alt="" src="./photon_barrier.png" /></div></div>
<div className="equipPaletteSlot"><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img className="r3" alt="" src="./photon_barrier.png" /></div></div>
</div>
<div className="itemBarFilter">
<input className="itemBarForm" type="text" placeholder="Filter" />
</div>
<div className="box">
<div className="boxTitleBar">
<h1>Equipped Weapon</h1>
<div className="boxExit"></div>
</div>
<div className="itemlistcontainer customScrollbar">
<ul className="itemlist">
<li className="itemwep r1"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/food/rich_aelio_herb.png"} /><em className="vege">Rich Aelio Herb</em><br /><span className="atk">177</span> </li>
<h2 className="rifle">Resurgir Rifle+40</h2>
<ul className="boxmenu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div className="equipDetails">
<div className="equipAugs">
<h3>Abilitiy 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>Properties</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>
</div>
</div>
<div className="containerC">
<div className="box">
<div className="boxTitleBar">
<h1>Basic Stats</h1>
<div className="boxExit"></div>
</div>
<table className="statsInfo">
<tr>
<td>Battle Power</td>
<td className="ri">1344</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>HP</td>
<td>289</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>PP</td>
<td>100</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Defense</td>
<td>402</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Weapon Up</td>
<td className="statsMelWeaponUp"><span className="ye">+34%</span></td>
<td className="statsRngWeaponUp"><span className="ye">+34%</span></td>
</tr>
<tr>
<td></td>
<td className="statsTecWeaponUp"><span className="ye">+34%</span></td>
<td>&nbsp;</td>
</tr>
<tr>
<td>Damage Resist.</td>
<td>18%</td>
<td>&nbsp;</td>
</tr>
</table>
</div>
<div className="box">
<div className="boxTitleBar">
<h1>Damage Stats</h1>
<div className="boxExit"></div>
</div>
<ul className="boxmenu">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<table className="basicInfo">
<tr>
<td>Critical Hit Rate</td>
<td>5%</td>
</tr>
<tr>
<td>Critical Multiplier</td>
<td>120%</td>
</tr>
<tr>
<td>Midrange</td>
<td>126</td>
</tr>
<tr>
<td>Critcal</td>
<td>152</td>
</tr>
<tr>
<td>Effective</td>
<td><span className="ye">127</span></td>
</tr>
</table>
</div>
</div>
</div>
)
}

@ -0,0 +1,67 @@
import React from 'react';
function TestPanel() {
return ( //Futasuke is a genius
<div className="container">
<div className="box itembox">
<div className="boxTitleBar">
<h1>Weapon Select</h1>
<div className="boxExit"></div>
</div>
<ul className="boxmenu">
<li>Rifle</li>
<li>Launcher</li>
<li>Rod</li>
<li>Talis</li>
</ul>
<div className="itemBar">
<div className="itemBarSort">
<select className="itemBarForm">
<option>Standard Sort</option>
<option>Rarity</option>
<option>Attack</option>
<option>Potency</option>
</select>
</div>
<div className="itemBarFilter">
<input className="itemBarForm" type="text" placeholder="Filter" />
</div>
</div>
<div className="itemlistcontainer customScrollbar">
<ul className="itemlist">
<li className="itemwep r1"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemPrimmRifle.png"} /><em className="rifle">Primm Rifle</em><br /><span className="atk">177</span> <span className="pot tooltip">Recycler Unit<span>Lv.4: Potency +24%/<br />20% chance of Restasigne not being consumed on use. Effect starts 10 sec after equip</span></span></li>
<li className="itemwep r2"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemTzviaRifle.png"} /><em className="rifle">Tzvia Rifle</em><br /><span className="atk">195</span> <span className="pot tooltip">Indomitable Unit<span>Lv.4: Potency +26%/<br />All Down Resistances +20%</span></span></li>
<li className="itemwep r3"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemTheseusRifle.png"} /><em className="rifle">Theseus Rifle</em><br /><span className="atk">223</span> <span className="pot tooltip">Defensive Formation<span>Lv.4: Potency +22%/<br />Critical Hit Rate increases based on Defense, up to a maximum of +18% at 1,000 Defense.</span></span></li>
<li className="itemwep r4"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemResurgirRifle.png"} /><em className="rifle">Resurgir Rifle</em><br /><span className="atk">240</span> <span className="pot tooltip">Dynamo Unit<span>Lv.4: Potency +21%/<br />Critical Hit Rate +18% for 30 seconds after a successful Sidestep.</span></span></li>
<li className="itemwep r4"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/64px-NGSUIItemFoursisRifle.png"} /><em className="rifle">Foursis Rifle</em><br /><span className="atk">242</span> <span className="pot tooltip">Bastion Unit<span>Lv.4: Potency +24%/<br />Creates a barrier that provides Damage Resistance +50% when at Max HP.</span></span></li>
<li className="itemwep"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/logo_test.png"} /><em className="gb">Test</em><br /><span className="atk">999</span> <span className="pot tooltip" title="Test">Test<span>Test</span></span></li>
<li className="itemwep"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/logo_test.png"} /><em className="gb">Test</em><br /><span className="atk">999</span> <span className="pot tooltip" title="Test">Test<span>Test</span></span></li>
<li className="itemwep"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/logo_test.png"} /><em className="gb">Test</em><br /><span className="atk">999</span> <span className="pot tooltip" title="Test">Test<span>Test</span></span></li>
</ul>
</div>
</div>
<div className="box itembox">
<div className="boxTitleBar">
<h1>Food List</h1>
<div className="boxExit"></div>
</div>
<div className="itemBar">
<div className="itemBarSort">
</div>
<div className="itemBarFilter">
<input className="itemBarForm" type="text" placeholder="Filter" />
</div>
</div>
<div className="itemlistcontainer customScrollbar">
<ul className="itemlist">
<li className="itemwep r1"><img className="itemimg" alt="" src={process.env.PUBLIC_URL+"/icons/food/rich_aelio_herb.png"} /><em className="vege">Rich Aelio Herb</em><br /><span className="atk">177</span> </li>
</ul>
</div>
</div>
</div>
)
}
export default TestPanel;

@ -111,7 +111,7 @@ em {
display:none;
}
}
#main {
.main {
display: flex;
flex-flow: row wrap;
justify-content: center;

Loading…
Cancel
Save