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

proper build load placeholders.

Browse Source
master
sigonasr2, Sig, Sigo 3 years ago
parent a60cca1be4
commit 42c267a224
3 changed files with 59 additions and 36 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. 3
      src/App.js
  2. 12
      src/Builds.js
  3. 32
      src/TestPanel.js

3
src/App.js
Unescape View File

@ -1088,7 +1088,8 @@ function App() {
/> />
<Builds <Builds
GetData={GetData} GetData={GetData}
BACKENDURL={GetBackendURL(BACKENDURL)}/> BACKENDURL={GetBackendURL(BACKENDURL)}
PANELPATHWBUILD={PANELPATHWBUILD}/>
</Route> </Route>
<Route path={process.env.PUBLIC_URL+"/formula"}> <Route path={process.env.PUBLIC_URL+"/formula"}>
<DamageCalculator/> <DamageCalculator/>

12
src/Builds.js
Unescape View File

@ -4,14 +4,17 @@ import ReactPlaceholder from 'react-placeholder';
import "react-placeholder/lib/reactPlaceholder.css"; import "react-placeholder/lib/reactPlaceholder.css";
import {HandThumbsUp} from 'react-bootstrap-icons' import {HandThumbsUp} from 'react-bootstrap-icons'
import { DisplayIcon } from './DEFAULTS'; import { DisplayIcon } from './DEFAULTS';
import { HashLink as Link } from 'react-router-hash-link';
const axios = require('axios'); const axios = require('axios');
function Build(p) { function Build(p) {
const {PANELPATHWBUILD} = p
const {build} = p const {build} = p
const {GetData} = p const {GetData} = p
const buildData = build.data?build.data[0]==='{'?JSON.parse(build.data):{}:{} const buildData = build.data?build.data[0]==='{'?JSON.parse(build.data):{}:{}
return <div> return <div>
<br/> <br/>
<Link to={PANELPATHWBUILD?.replace(":BUILDID",build.id)}>
<div className="build"> <div className="build">
<div className="buildID">#{build.id}</div><h2 className="buildTitle">&nbsp;{build.build_name}</h2> <div className="buildAuthor">(Created by <img className="buildAvatar"/>{build.creator})</div> <div className="buildID">#{build.id}</div><h2 className="buildTitle">&nbsp;{build.build_name}</h2> <div className="buildAuthor">(Created by <img className="buildAvatar"/>{build.creator})</div>
<div className="buildLikes"><HandThumbsUp/>{build.likes}</div> <div className="buildLikes"><HandThumbsUp/>{build.likes}</div>
@ -36,6 +39,7 @@ function Build(p) {
</div> </div>
{/*JSON.stringify(build)*/} {/*JSON.stringify(build)*/}
</div> </div>
</Link>
<br/> <br/>
<br/> <br/>
<hr/> <hr/>
@ -44,18 +48,20 @@ function Build(p) {
function Builds(p) { function Builds(p) {
const {GetData,BACKENDURL} = p const {GetData,BACKENDURL,PANELPATHWBUILD} = p
const [builds,setBuilds] = useState([]) const [builds,setBuilds] = useState([])
const [sort,setSort] = useState("date_updated") const [sort,setSort] = useState("date_updated")
const [filter,setFilter] = useState("") const [filter,setFilter] = useState("")
const [filter_type,setFilterType] = useState("") const [filter_type,setFilterType] = useState("")
const [page,setPage] = useState(0) const [page,setPage] = useState(0)
const [finished,setFinished] = useState(false)
useEffect(()=>{ useEffect(()=>{
axios.get(`${BACKENDURL}/getBuilds?sort_type=${sort}${filter_type!==""?`&filter_type=${filter_type}`:""}${filter_type!==""?`&filter=${encodeURI(filter)}`:""}${page!==0?`&offset=${page}`:""}`) axios.get(`${BACKENDURL}/getBuilds?sort_type=${sort}${filter_type!==""?`&filter_type=${filter_type}`:""}${filter_type!==""?`&filter=${encodeURI(filter)}`:""}${page!==0?`&offset=${page}`:""}`)
.then((data)=>{ .then((data)=>{
setBuilds(data.data) setBuilds(data.data)
setFinished(true)
}) })
},[BACKENDURL,sort,filter_type,filter,page]) },[BACKENDURL,sort,filter_type,filter,page])
@ -64,7 +70,9 @@ function Builds(p) {
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Builds List</h1> <h1>Builds List</h1>
</div> </div>
{builds.map((build)=><Build GetData={GetData} build={build}/>)} <ReactPlaceholder showLoadingAnimation ready={finished} type="media" rows={32}>
{builds.map((build)=><Build PANELPATHWBUILD={PANELPATHWBUILD} GetData={GetData} build={build}/>)}
</ReactPlaceholder>
</div></> </div></>
} }

32
src/TestPanel.js
Unescape View File

@ -467,6 +467,8 @@ const [prevFoodPointData,setPrevFoodPointData] = useState({})
const [BUFFS,setBUFFS] = useState({}) const [BUFFS,setBUFFS] = useState({})
const [buildLoad,setBuildLoad] = useState(false)
function SaveData() { function SaveData() {
var saveObj = { var saveObj = {
level:level, level:level,
@ -537,6 +539,7 @@ useEffect(()=>{
useEffect(()=>{ useEffect(()=>{
if (BUILDID) { if (BUILDID) {
setBuildLoad(false)
axios.get(BACKENDURL+"/getBuild?id="+BUILDID) axios.get(BACKENDURL+"/getBuild?id="+BUILDID)
.then((data)=>{ .then((data)=>{
setAuthor(data.data.creator) setAuthor(data.data.creator)
@ -570,6 +573,11 @@ useEffect(()=>{
.catch((err)=>{ .catch((err)=>{
console.log(err.message) console.log(err.message)
}) })
.finally(()=>{
setBuildLoad(true)
})
} else {
setBuildLoad(true)
} }
},[BUILDID,GetData,BACKENDURL,p]) },[BUILDID,GetData,BACKENDURL,p])
@ -625,11 +633,11 @@ function deepCopySkills(skillData) {
<div className="main"> <div className="main">
<div className="containerA"> <div className="containerA">
<div className="box basicInfoBox"> <div className="box basicInfoBox">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Basic Information</h1></div> <h1>Basic Information</h1></div>
<ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={12}>
<div className="basicInfo"> <div className="basicInfo">
<div style={{gridArea:"author"}}>Author</div> <div style={{gridArea:"author"}}>Author</div>
<div style={{gridArea:"build"}}>Build Name</div> <div style={{gridArea:"build"}}>Build Name</div>
@ -673,17 +681,21 @@ function deepCopySkills(skillData) {
</div><section className="saveControls"> </div><section className="saveControls">
<button onClick={()=>{SaveData()}}>Save Build</button> <button onClick={()=>{SaveData()}}>Save Build</button>
</section></div> </section>
</ReactPlaceholder>
</div>
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equip</h1></div> <h1>Equip</h1></div>
<div className="equipPalette"> <div className="equipPalette">
<div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className={"equipPaletteSlotWrapper"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><span>1</span><img alt="" className="r4" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></div></div> <div onClick={()=>{setWeaponSelectWindowOpen(true)}} className="equipPaletteSlot"><h3>Weapons</h3><div className={"equipPaletteSlotWrapper"+rarityCheck(selectedWeapon[WEAPON_WEAPON])}><ReactPlaceholder style={{width:52,height:48}} showLoadingAnimation ready={buildLoad} type="rect"><span>1</span><img alt="" className="r4" src={DisplayIcon(selectedWeapon[WEAPON_EXISTENCE_DATA]?.icon)} /></ReactPlaceholder></div></div>
<div onClick={()=>{setArmorSlotSelection(1);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor1)}><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src={DisplayIcon(selectedArmor1.icon)} /></div></div> <div onClick={()=>{setArmorSlotSelection(1);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor1)}><h3>Armor 1</h3><div className="equipPaletteSlotWrapper"><ReactPlaceholder style={{width:52,height:48}} showLoadingAnimation ready={buildLoad} type="rect"><img alt="" className="r3" src={DisplayIcon(selectedArmor1.icon)} /></ReactPlaceholder></div></div>
<div onClick={()=>{setArmorSlotSelection(2);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor2)}><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src={DisplayIcon(selectedArmor2.icon)} /></div></div> <div onClick={()=>{setArmorSlotSelection(2);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor2)}><h3>Armor 2</h3><div className="equipPaletteSlotWrapper"><ReactPlaceholder style={{width:52,height:48}} showLoadingAnimation ready={buildLoad} type="rect"><img alt="" className="r3" src={DisplayIcon(selectedArmor2.icon)} /></ReactPlaceholder></div></div>
<div onClick={()=>{setArmorSlotSelection(3);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor3)}><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><img alt="" className="r3" src={DisplayIcon(selectedArmor3.icon)} /></div></div> <div onClick={()=>{setArmorSlotSelection(3);setArmorSelectWindowOpen(true)}} className={"equipPaletteSlot"+rarityCheck(selectedArmor3)}><h3>Armor 3</h3><div className="equipPaletteSlotWrapper"><ReactPlaceholder style={{width:52,height:48}} showLoadingAnimation ready={buildLoad} type="rect"><img alt="" className="r3" src={DisplayIcon(selectedArmor3.icon)} /></ReactPlaceholder></div></div>
</div> </div>
</div> </div>
@ -695,7 +707,7 @@ function deepCopySkills(skillData) {
<div className="box equipWindow"> <div className="box equipWindow">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Equipped Weapon</h1></div> <h1>Equipped Weapon</h1></div>
<ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"} type="media" rows={12}> <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={12}>
<div className="equipNameWrapper"> <div className="equipNameWrapper">
<div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div> <div className="equipName"><h2 className="rifle">{GetSpecialWeaponName(selectedWeapon)}</h2></div>
<div className="equipEnhancement editOverlayWrapper"> <div className="equipEnhancement editOverlayWrapper">
@ -824,7 +836,7 @@ function deepCopySkills(skillData) {
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Current Effects</h1></div> <h1>Current Effects</h1></div>
<ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"} type="media" rows={7}> <ReactPlaceholder showLoadingAnimation ready={GetData(p)!=="no data"&&buildLoad} type="media" rows={7}>
<PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/> <PageControl pages={2} currentPage={effectPage} setCurrentPage={setEffectPage}/>
{effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li onClick={()=>{setPrevFoodPointData({...foodPointData});setFoodMenuWindowOpen(true)}}>Food Boost Effect {effectPage===1?<><h3>Effect Name</h3><ul className="infoBuffs"><li onClick={()=>{setPrevFoodPointData({...foodPointData});setFoodMenuWindowOpen(true)}}>Food Boost Effect
<ul> <ul>
@ -849,6 +861,7 @@ function deepCopySkills(skillData) {
<div className="box"> <div className="box">
<div className="boxTitleBar"> <div className="boxTitleBar">
<h1>Damage Stats</h1></div> <h1>Damage Stats</h1></div>
<ReactPlaceholder showLoadingAnimation ready={buildLoad} type="media" rows={6}>
<PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}/> <PageControl pages={3} currentPage={statPage} setCurrentPage={setStatPage}/>
<table> <table>
<tbody> <tbody>
@ -898,6 +911,7 @@ function deepCopySkills(skillData) {
} }
</tbody> </tbody>
</table> </table>
</ReactPlaceholder>
</div> </div>
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save