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. 60
      src/Builds.js
  3. 32
      src/TestPanel.js

3
src/App.js
Unescape View File

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

60
src/Builds.js
Unescape View File

@ -4,38 +4,42 @@ import ReactPlaceholder from 'react-placeholder';
import "react-placeholder/lib/reactPlaceholder.css";
import {HandThumbsUp} from 'react-bootstrap-icons'
import { DisplayIcon } from './DEFAULTS';
import { HashLink as Link } from 'react-router-hash-link';
const axios = require('axios');
function Build(p) {
const {PANELPATHWBUILD} = p
const {build} = p
const {GetData} = p
const buildData = build.data?build.data[0]==='{'?JSON.parse(build.data):{}:{}
return <div>
<br/>
<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="buildLikes"><HandThumbsUp/>{build.likes}</div>
<br/>
<div className="buildClass"><Class GetData={GetData} name={build.class1} useIDs hideName/><sub>{buildData?.level}</sub></div>
<div className="buildClass"><Class GetData={GetData} name={build.class2} useIDs hideName/><sub>{buildData?.secondaryLevel}</sub></div>
<div className="buildData">{build.created_on}</div>
<br/>
<div className="equipPalette buildPalette">
<div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("weapon",buildData.weaponBaseName,"rarity")}>
<img className="buildImage" src={DisplayIcon(GetData("weapon_existence_data",buildData.weaponExistenceID,"icon",true))}/>
</div></div>
<div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor1Name,"rarity")}>
<img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor1Name,"icon"))}/>
</div></div>
<div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor2Name,"rarity")}>
<img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor2Name,"icon"))}/>
</div></div>
<div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor3Name,"rarity")}>
<img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor3Name,"icon"))}/>
</div></div>
</div>
{/*JSON.stringify(build)*/}
</div>
<Link to={PANELPATHWBUILD?.replace(":BUILDID",build.id)}>
<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="buildLikes"><HandThumbsUp/>{build.likes}</div>
<br/>
<div className="buildClass"><Class GetData={GetData} name={build.class1} useIDs hideName/><sub>{buildData?.level}</sub></div>
<div className="buildClass"><Class GetData={GetData} name={build.class2} useIDs hideName/><sub>{buildData?.secondaryLevel}</sub></div>
<div className="buildData">{build.created_on}</div>
<br/>
<div className="equipPalette buildPalette">
<div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("weapon",buildData.weaponBaseName,"rarity")}>
<img className="buildImage" src={DisplayIcon(GetData("weapon_existence_data",buildData.weaponExistenceID,"icon",true))}/>
</div></div>
<div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor1Name,"rarity")}>
<img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor1Name,"icon"))}/>
</div></div>
<div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor2Name,"rarity")}>
<img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor2Name,"icon"))}/>
</div></div>
<div className="equipPaletteSlot"><div className={"equipPaletteSlotWrapper r"+GetData("armor",buildData.armor3Name,"rarity")}>
<img className="buildImage" src={DisplayIcon(GetData("armor",buildData.armor3Name,"icon"))}/>
</div></div>
</div>
{/*JSON.stringify(build)*/}
</div>
</Link>
<br/>
<br/>
<hr/>
@ -44,18 +48,20 @@ function Build(p) {
function Builds(p) {
const {GetData,BACKENDURL} = p
const {GetData,BACKENDURL,PANELPATHWBUILD} = p
const [builds,setBuilds] = useState([])
const [sort,setSort] = useState("date_updated")
const [filter,setFilter] = useState("")
const [filter_type,setFilterType] = useState("")
const [page,setPage] = useState(0)
const [finished,setFinished] = useState(false)
useEffect(()=>{
axios.get(`${BACKENDURL}/getBuilds?sort_type=${sort}${filter_type!==""?`&filter_type=${filter_type}`:""}${filter_type!==""?`&filter=${encodeURI(filter)}`:""}${page!==0?`&offset=${page}`:""}`)
.then((data)=>{
setBuilds(data.data)
setFinished(true)
})
},[BACKENDURL,sort,filter_type,filter,page])
@ -64,7 +70,9 @@ function Builds(p) {
<div className="boxTitleBar">
<h1>Builds List</h1>
</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></>
}

32
src/TestPanel.js
Unescape View File

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

Write Preview
Loading…
Cancel
Save