Basic build list display implemented.

src/Builds.js

@@ -1,22 +1,70 @@
 import { useEffect,useState } from 'react'
+import Class from './components/Class';
+import ReactPlaceholder from 'react-placeholder';
+import "react-placeholder/lib/reactPlaceholder.css";
+import {HandThumbsUp} from 'react-bootstrap-icons'
+import { DisplayIcon } from './DEFAULTS';
 const axios = require('axios');
 
+function Build(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>
+        <br/>
+      <br/>
+    <hr/>
+  </div>
+}
+
 function Builds(p) {
 
     const {GetData,BACKENDURL} = 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)
+
 
     useEffect(()=>{
-        axios.get(BACKENDURL+"/builds")
-    },[BACKENDURL])
+        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)
+        })
+    },[BACKENDURL,sort,filter_type,filter,page])
 
     return <>
     <div className="box skillTreeBox">
           <div className="boxTitleBar">
             <h1>Builds List</h1>
-            {}
-            <div></div>
           </div>
+          {builds.map((build)=><Build GetData={GetData} build={build}/>)}
     </div></>
 }
 

src/TestPanel.js

@@ -8,6 +8,7 @@ import axios from 'axios';
 import Helmet from 'react-helmet'
 import ReactPlaceholder from 'react-placeholder';
 import "react-placeholder/lib/reactPlaceholder.css";
+import Class from './components/Class';
 
 import { useLocation,useHistory,useParams,matchPath } from 'react-router'
 
@@ -67,12 +68,6 @@ function PageControl(p) {
 		</ul>
 }
 
-function Class(p) {
-  const CLASSES = p.GetData("class")
-	const class_obj = CLASSES[p.name]
-	return <ReactPlaceholder style={{height:8}} showLoadingAnimation ready={CLASSES!=="no data"} type="textRow" rows={1}>{class_obj?<><img alt="" src={process.env.PUBLIC_URL+class_obj.icon}/>{class_obj.name}</>:<></>}</ReactPlaceholder>
-}
-
 function EditableClass(p){
 	return <><div className="editClass" onClick={()=>{p.setClassNameSetter(p.editClass);p.setClassSelectWindowOpen(true)}}><Class GetData={p.GetData} name={p.name}/>
 	</div>
@@ -478,6 +473,7 @@ function SaveData() {
     secondaryLevel:secondaryLevel,
     weaponBaseName:selectedWeapon[WEAPON_WEAPON]?.name,
     weaponType:selectedWeapon[WEAPON_WEAPONTYPE]?.name,
+    weaponExistenceID:selectedWeapon[WEAPON_EXISTENCE_DATA]?.id,
     armor1Name:selectedArmor1?.name,
     armor2Name:selectedArmor2?.name,
     armor3Name:selectedArmor3?.name,

src/components/Class.js

@@ -0,0 +1,11 @@
+
+import ReactPlaceholder from 'react-placeholder';
+import "react-placeholder/lib/reactPlaceholder.css";
+
+function Class(p) {
+    const CLASSES = p.GetData("class",undefined,undefined,p.useIDs??false)
+      const class_obj = CLASSES[p.name]
+      return <ReactPlaceholder style={{height:8}} showLoadingAnimation ready={CLASSES!=="no data"} type="textRow" rows={1}>{class_obj?<><img alt="" src={process.env.PUBLIC_URL+class_obj.icon}/>{!p.hideName&&class_obj.name}</>:<></>}</ReactPlaceholder>
+  }
+
+export default Class;

src/style.css

@@ -1796,3 +1796,38 @@ dd:before {
 	color:rgba(200,50,50,1);
 	border: 2px solid red;
 }
+.build{
+	background-color:rgba(0,0,0,0.5);
+}
+.build:hover{
+	color:rgba(215,215,255,1);
+	background-color:rgba(0.5,0.5,0.5,0.5);
+	cursor:pointer;
+}
+.buildID{
+	float:left;
+}
+.buildTitle{
+	display:inline;
+}
+.buildAuthor{
+	display:inline;
+}
+.buildClass{
+	display:inline;
+}
+.buildAvatar{
+
+}
+.buildData{
+	float:right;
+}
+.buildLikes{
+	float:right;
+}
+.buildImage{
+}
+.buildPalette{
+	width:360px;
+	margin:auto;
+}