Gang member accordion done

This commit is contained in:
Olivier Gagnon 2021-06-14 19:37:31 -04:00
parent 26401fbb93
commit 9c24f1325f
4 changed files with 51 additions and 60 deletions

@ -52,6 +52,8 @@ import { GangMemberTask } from "./Gang/GangMemberTask";
import { Panel1 } from "./Gang/ui/Panel1";
import { Panel2 } from "./Gang/ui/Panel2";
import { Panel3 } from "./Gang/ui/Panel3";
import { GangMemberAccordionContent } from "./Gang/ui/GangMemberAccordionContent";
import { GangMemberAccordion } from "./Gang/ui/GangMemberAccordion";
import React from "react";
import ReactDOM from "react-dom";
@ -1134,16 +1136,8 @@ const UIElems = {
export function unmount() {
for(const name of Object.keys(UIElems.gangMemberPanels)) {
if(!UIElems.gangMemberPanels[name]) continue
if(UIElems.gangMemberPanels[name]["statsDiv"]) {
ReactDOM.unmountComponentAtNode(UIElems.gangMemberPanels[name]["statsDiv"]);
}
if(UIElems.gangMemberPanels[name]["taskDiv"]) {
ReactDOM.unmountComponentAtNode(UIElems.gangMemberPanels[name]["taskDiv"]);
}
if(UIElems.gangMemberPanels[name]["taskDescDiv"]) {
ReactDOM.unmountComponentAtNode(UIElems.gangMemberPanels[name]["taskDescDiv"]);
}
if(!UIElems.gangMemberPanels[name]) continue;
ReactDOM.unmountComponentAtNode(UIElems.gangMemberPanels[name]);
}
}
@ -1631,58 +1625,14 @@ Gang.prototype.createGangMemberDisplayElement = function(memberObj) {
// TODO(hydroflame): you're working on this.
if (!UIElems.gangContentCreated) { return; }
const name = memberObj.name;
const id = `${name}-gang-member-accordion`;
if(document.getElementById(id)) return;
// Clear/Update the UIElems map to keep track of this gang member's panel
UIElems.gangMemberPanels[name] = {};
// Create the accordion
var accordion = createAccordionElement({
id: name + "gang-member",
hdrText: name,
});
const li = accordion[0];
const gangMemberDiv = accordion[2];
UIElems.gangMemberPanels[name]["panel"] = gangMemberDiv;
// Gang member content divided into 3 panels:
// Panel 1 - Shows member's stats & Ascension stuff
let statsDiv = document.getElementById(name + "-gang-member-stats");
if(!statsDiv) {
statsDiv = createElement("div", {
class: "gang-member-info-div tooltip",
id: name + "-gang-member-stats",
});
UIElems.gangMemberPanels[name]["statsDiv"] = statsDiv;
ReactDOM.render(<Panel1 gang={this} member={memberObj} />, statsDiv);
}
// Panel 2 - Task Selection & Info
let taskDiv = document.getElementById(name + "-gang-member-task");
if(!taskDiv) {
taskDiv = createElement("div", {
class:"gang-member-info-div",
id: name + "-gang-member-task",
});
UIElems.gangMemberPanels[name]["taskDiv"] = taskDiv;
ReactDOM.render(<Panel2 gang={this} member={memberObj} />, taskDiv);
}
// Panel 3 - for Description of task
let taskDescDiv = document.getElementById(name + "-gang-member-task-description");
if(!taskDescDiv) {
taskDescDiv = createElement("div", {
class:"gang-member-info-div",
id: name + "gang-member-task-desc",
});
UIElems.gangMemberPanels[name]["taskDescDiv"] = taskDescDiv;
ReactDOM.render(<Panel3 member={memberObj} />, taskDescDiv);
}
gangMemberDiv.appendChild(statsDiv);
gangMemberDiv.appendChild(taskDiv);
gangMemberDiv.appendChild(taskDescDiv);
const li = createElement("li", {id: id});
ReactDOM.render(<GangMemberAccordion gang={this} member={memberObj} />, li);
UIElems.gangMemberPanels[name] = li;
UIElems.gangMemberList.appendChild(li);
}

@ -0,0 +1,15 @@
import * as React from "react";
import { GangMemberAccordionContent } from "./GangMemberAccordionContent"
import { Accordion } from "../../ui/React/Accordion";
interface IProps {
gang: any;
member: any;
}
export function GangMemberAccordion(props: IProps): React.ReactElement {
return (<Accordion
headerContent={<>{props.member.name}</>}
panelContent={<GangMemberAccordionContent gang={props.gang} member={props.member} />}
/>);
}

@ -0,0 +1,23 @@
import * as React from "react";
import { Panel1 } from "./Panel1";
import { Panel2 } from "./Panel2";
import { Panel3 } from "./Panel3";
interface IProps {
gang: any;
member: any;
}
export function GangMemberAccordionContent(props: IProps): React.ReactElement {
return (<>
<div className={"gang-member-info-div tooltip"}>
<Panel1 gang={props.gang} member={props.member} />
</div>
<div className={"gang-member-info-div"}>
<Panel2 gang={props.gang} member={props.member} />
</div>
<div className={"gang-member-info-div"}>
<Panel3 member={props.member} />
</div>
</>);
}

@ -9,7 +9,10 @@ export function Panel3(props: IProps): React.ReactElement {
const [rerender, setRerender] = useState(false);
useEffect(() => {
const id = setInterval(() => setRerender(old => !old), 1000);
const id = setInterval(() => {
setRerender(old => !old);
console.log('render');
}, 1000);
return () => clearInterval(id);
}, []);