diff --git a/src/components/PlayerlistFaction.js b/src/components/PlayerlistFaction.js index 13638fd1c87be3aec4fb966eb35d3b49aac3a596..1d12d6a87e9f3006a940966fce94a71f9701917e 100644 --- a/src/components/PlayerlistFaction.js +++ b/src/components/PlayerlistFaction.js @@ -1,4 +1,5 @@ import React from "react"; +import PlayerlistPlayerCard from "./PlayerlistPlayerCard"; export default class PlayerlistFaction extends React.Component { state = { @@ -26,9 +27,11 @@ export default class PlayerlistFaction extends React.Component { let members = this.state.factionMembers.map(member => { return ( - <div key={member.gamepersonId}> - {member.person.name} : {member.role} - </div> + <PlayerlistPlayerCard + key={member.gamepersonId} + player={member} + role={this.props.role} + /> ); }); diff --git a/src/components/PlayerlistPlayerCard.js b/src/components/PlayerlistPlayerCard.js new file mode 100644 index 0000000000000000000000000000000000000000..c29944ee063e3f7e0f9b2074fd11c8bb94f8ded1 --- /dev/null +++ b/src/components/PlayerlistPlayerCard.js @@ -0,0 +1,35 @@ +import React, { Fragment } from "react"; + +export default class PlayerlistPlayerCard extends React.Component { + state = { + edit: false + }; + + render() { + console.log(this.props.player); + return ( + <div> + {this.props.player.person.name} :{" "} + {this.state.edit && ( + <select> + <option value="soldier">Soldier</option> + <option value="factionleader">Faction Leader</option> + <option value="admin">Admin</option> + </select> + )} + {!this.state.edit && this.props.player.role} + {this.props.role === "admin" && !this.state.edit && ( + <button onClick={() => this.setState({ edit: !this.state.edit })}> + Edit + </button> + )} + {this.state.edit && ( + <Fragment> + <button>Save</button> + <button>Cancel</button> + </Fragment> + )} + </div> + ); + } +} diff --git a/src/components/PlayerlistView.js b/src/components/PlayerlistView.js index 3c98fdd6c7ee129fd3fad03167d42640a8e49b84..e6014ad5aafb548118a350e6286c80ef930e5c9f 100644 --- a/src/components/PlayerlistView.js +++ b/src/components/PlayerlistView.js @@ -46,7 +46,13 @@ export default class PlayerlistView extends React.Component { } let factionlistItems = this.state.factions.map(faction => { - return <PlayerlistFaction faction={faction} />; + return ( + <PlayerlistFaction + key={faction.factionId} + faction={faction} + role={this.props.role} + /> + ); }); return <div className="fade-main">{factionlistItems}</div>;