From 8e7823136ed19e91969f6f3185305d60da5be5b1 Mon Sep 17 00:00:00 2001 From: Alyssa Date: Thu, 9 Aug 2018 00:05:52 -0400 Subject: [PATCH] Added Factions, refactored to use it. Readbility styling Working on #12 --- package.json | 3 +- src/components/Expac.js | 8 +- src/components/Faction.js | 52 ++++++ src/components/rewards.js | 42 +++-- src/index.css | 66 ++++++- src/rewardsobj.js | 354 ++++++++++++++++++++++++++++++++++++++ 6 files changed, 506 insertions(+), 19 deletions(-) create mode 100644 src/components/Faction.js diff --git a/package.json b/package.json index 37142ee..b8c1c40 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,8 @@ "react": "^16.4.1", "react-dom": "^16.4.1", "react-scripts": "1.1.4", - "react-select": "^2.0.0" + "react-select": "^2.0.0", + "react-tabs": "^2.2.2" }, "scripts": { "start": "react-scripts start", diff --git a/src/components/Expac.js b/src/components/Expac.js index 7bb20f6..dbb8429 100644 --- a/src/components/Expac.js +++ b/src/components/Expac.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; //import rewardsCont from '../rewardsobj'; -import Rewards from './rewards'; +import Faction from './Faction'; const bestFriends = [1273, 1275, 1276, 1277, 1278, 1279, 1280, 1281, 1282, 1283, 1975, 1358]; //IDs for NPCs that have "Friend" levels rather than reputations const friendLevels = ["Stranger","Acquantaince", "Buddy", "Friend", "Good Friend", "Best Friend"]; const repTitles = ["Hated", "Hostile", "Unfriendly", "Neutral", "Friendly", "Honored", "Revered", "Exalted"]; // Reputation levels @@ -46,11 +46,7 @@ class Expac extends Component {
{reps.map((rep) => ( -
-

{rep.name}

-

{this.repLevel(rep)}

- -
+ ))}
diff --git a/src/components/Faction.js b/src/components/Faction.js new file mode 100644 index 0000000..e30f95e --- /dev/null +++ b/src/components/Faction.js @@ -0,0 +1,52 @@ +import React, { Component } from 'react'; +//import rewardsCont from '../rewardsobj'; +import Rewards from './Rewards'; +const bestFriends = [1273, 1275, 1276, 1277, 1278, 1279, 1280, 1281, 1282, 1283, 1975, 1358]; //IDs for NPCs that have "Friend" levels rather than reputations +const friendLevels = ["Stranger","Acquantaince", "Buddy", "Friend", "Good Friend", "Best Friend"]; +const repTitles = ["Hated", "Hostile", "Unfriendly", "Neutral", "Friendly", "Honored", "Revered", "Exalted"]; // Reputation levels +//Rep 1204 should be in cata not mists + + +class Faction extends Component { + constructor(props) { + super(props); + this.state = { + isHidden: true + } + this.repLevel = this.repLevel.bind(this); + this.showHidden = this.showHidden.bind(this); + } + + repLevel(rep) { + if(bestFriends.includes(rep.id)) { + return friendLevels[rep.standing]; + } else { + return repTitles[rep.standing]; + } + } + + showHidden(e) { + this.setState((prevState => ({ + isHidden: !prevState.isHidden + }))) + } + + render() { + let rep = this.props.rep; + let isHidden = this.state.isHidden; + return ( +
+
+

{rep.name}

+

{this.repLevel(rep)}

+ +
+
+ +
+
+ ) + } +} + +export default Faction; diff --git a/src/components/rewards.js b/src/components/rewards.js index b4735ca..e88da6b 100644 --- a/src/components/rewards.js +++ b/src/components/rewards.js @@ -1,4 +1,5 @@ import React, { Component } from 'react'; +import { Tab, Tabs, TabList, TabPanel } from 'react-tabs'; import rewardsCont from '../rewardsobj'; class Rewards extends Component { @@ -10,33 +11,52 @@ class Rewards extends Component { render() { const rep = this.props.rep; - let rewardsCompleted = []; + let tabTitles = []; + let tabPanelComplete = []; if(rewardsCont[rep]) { let levels = Object.keys(rewardsCont[rep]); //Number of Rep levels that have rewards in them let items; // Number of items in a level - //console.log("First level: ",rewardsCont[rep][levels[0]]); - //console.log("Number of item: ",Object.keys(rewardsCont[rep][levels[0]])); for(var i = 0; i{levels[i]}); - //console.log(levels[i]); + let rewardsCompleted = []; + tabTitles.push({levels[i]}); items = Object.keys(rewardsCont[rep][levels[i]]); - //console.log(items); for(var j = 0;j{name}," "); + rewardsCompleted.push({name}); } else { let nameKey = name.replace(/ +/g, ""); rewardsCompleted.push(

{name}

) } + rewardsCompleted.push(
); } - //console.log(rewardsCompleted) + tabPanelComplete.push({rewardsCompleted}); } - return (

Rewards

{rewardsCompleted}
); + return ( + + + Rewards + + + + + {tabTitles} + + {tabPanelComplete} + + + + ); } else { return ( - null + + + Rewards + + +

No Rewards Exist! If this is an error, let me know!

+ + ) } } diff --git a/src/index.css b/src/index.css index 335e92d..ee9e8bc 100644 --- a/src/index.css +++ b/src/index.css @@ -88,8 +88,11 @@ input[type=checkbox] { border-radius: 5px; } -.expac i { +.fas { color: #474747; +} + +.expac>i { margin-left: 10px; } @@ -149,17 +152,78 @@ progress[value]::-webkit-progress-value { justify-content: space-around; width: 80%; margin: auto; + margin-top: -1px; + padding: 0 5px; flex-wrap: wrap; + border: 1px solid #aaa; + border-radius: 5px; + } .rep>.rewards { width: 100%; + /* border-right: 1px solid grey; + border-left: 1px solid grey; */ + border-radius: 5px; +} + +.react-tabs { + border-radius: 5px 5px 0 0; +} + +.react-tabs .react-tabs { + border: 0; +} + +.react-tabs__tab-list { + border-bottom: 1px solid #aaa; + border-radius: 5px 5px 0 0; + margin: 0; + padding-top: 10px; +} + +.react-tabs .react-tabs .react-tabs__tab-list { + border-radius: 0; +} + +.react-tabs__tab { + display: inline-block; + border: 1px solid grey; + border-radius: 5px 5px 0 0; + border-bottom: none; + bottom: -1px; + position: relative; + list-style: none; + padding: 6px 12px; + cursor: pointer; + -webkit-tap-highlight-color: transparent; +} + +.react-tabs__tab-panel--selected .react-tabs__tab-panel--selected { + padding: 10px 0; + min-height: 40px; } .rep>* { width: 28%; } +.repName { + width: 100%; + display: flex; + justify-content: space-between; +} + +.repName>p { + margin-left: auto; + margin-right: 10px; + margin-top: 1.4em; +} + +.repName>i { + margin-top: 1.4em; +} + .hidden { display: none; } diff --git a/src/rewardsobj.js b/src/rewardsobj.js index 53ac189..076d1aa 100644 --- a/src/rewardsobj.js +++ b/src/rewardsobj.js @@ -181,6 +181,360 @@ const rewards = { } ] }, + "69": { //Darnassus + "Friendly":[ + { + name:"Darnassus Tabard", + id:"45579" + } + ], + "Revered":[ + { + name:"Darnassus Satchel", + id:"67526" + } + ], + "Exalted":[ + { + name:"Shroud of Darnassus", + id:"64886" + }, + { + name:"Cape of Darnassus", + id:"64887" + }, + { + name:"Mantle of Darnassus", + id:"64888" + } + ] + }, + "72": { //Stormwind + "Friendly":[ + { + name:"Stormwind Tabard", + id:"45574" + } + ], + "Revered":[ + { + name:"Stormwind Satchel", + id:"67531" + } + ], + "Exalted":[ + { + name:"Shroud of Stormwind", + id:"64903" + }, + { + name:"Cape of Stormwind", + id:"64902" + }, + { + name:"Mantle of Stormwind", + id:"64901" + } + ] + }, + "87": { //Bloodsail Buccaneers + "Friendly":[ + { + name:"Bloodsail Admiral's Hat", + id:"12185" + }, + { + name:"Bloodsail Shirt", + id:"22742" + }, + { + name:"Bloodsail Sash", + id:"22743" + }, + { + name:"Bloodsail Pants", + id:"22745" + } + ], + }, + "509": { //The League of Arathor + "Exalted":[ + { + name:"Arathor Battle Tabard", + id:"20132" + } + ], + }, + "529": { //Argent Dawn + "Friendly":[ + { + name:"Enriched Manna Biscuit", + id:"13724" + } + ], + "Honored":[ + { + name:"Formula: Powerful Anti-Venom", + id:"19442" + }, + { + name:"Plans: Girdle of the Dawn", + id:"19203" + }, + { + name:"Pattern: Argent Boots", + id:"19216" + }, + { + name:"Formula: Enchant Bracer - Argent Versatility", + id:"19446" + }, + { + name:"Pattern: Dawn Treaders", + id:"19328" + }, + { + name:"Blessed Sunfruit Juice", + id:"13813" + }, + { + name:"Recipe: Transmute Air to Fire", + id:"13482" + }, + ], + "Revered":[ + { + name:"Formula: Enchant Bracer - Healing Power", + id:"19447" + }, + { + name:"Pattern: Golden Mantle of the Dawn", + id:"19329" + }, + { + name:"Plans: Gloves of the Dawn", + id:"19205" + }, + { + name:"Pattern: Argent Shoulders", + id:"19217" + }, + { + name:"Blessed Sunfruit", + id:"13810" + }, + ], + }, + "579": { //Timbermaw Hold + "Friendly":[ + { + name:"Formula: Enchant 2H Weapon - Agility", + id:"22392" + }, + { + name:"Pattern: Warbear Woolies", + id:"20254" + }, + { + name:"Pattern: Warbear Harness", + id:"20253" + }, + { + name:"Recipe: Transmute Earth to Water", + id:"13484" + }, + ], + "Honored":[ + { + name:"Formula: Enchant Weapon - Agility", + id:"19445" + }, + { + name:"Pattern: Might of the Timbermaw", + id:"19326" + }, + { + name:"Pattern: Wisdom of the Timbermaw", + id:"19215" + }, + { + name:"Plans: Heavy Timbermaw Belt", + id:"19202" + } + ], + "Revered":[ + { + name:"Pattern: Timbermaw Brawlers", + id:"19327" + }, + { + name:"Pattern: Mantle of the Timbermaw", + id:"19218" + }, + { + name:"Plans: Heavy Timbermaw Boots", + id:"19204" + } + ], + }, + "609": { //Exodar + "Friendly":[ + { + name:"Pattern: Bramblewood Belt", + id:"22769" + }, + { + name:"Pattern: Cenarion Herb Bag", + id:"22310" + }, + { + name:"Pattern: Sandstalker Bracers", + id:"20509" + }, + { + name:"Pattern: Spitfire Bracers", + id:"20506" + }, + { + name:"Pattern: Sylvan Shoulders", + id:"22772" + }, + { + name:"Plans: Heavy Obsidian Belt", + id:"22209" + }, + { + name:"Plans: Ironvine Belt", + id:"22768" + } + ], + "Honored":[ + { + name:"Pattern: Bramblewood Boots", + id:"22770" + }, + { + name:"Pattern: Sandstalker Gauntlets", + id:"20510" + }, + { + name:"Pattern: Spitfire Gauntlets", + id:"20507" + }, + { + name:"Pattern: Sylvan Crown", + id:"22773" + }, + { + name:"Plans: Ironvine Gloves", + id:"22767" + }, + { + name:"Plans: Light Obsidian Belt", + id:"22214" + } + ], + "Revered":[ + { + name:"Pattern: Bramblewood Helm", + id:"22771" + }, + { + name:"Pattern: Gaea's Embrace", + id:"22683" + }, + { + name:"Pattern: Sandstalker Breastplate", + id:"20511" + }, + { + name:"Pattern: Satchel of Cenarius", + id:"22312" + }, + { + name:"Pattern: Spitfire Breastplate", + id:"20508" + }, + { + name:"Pattern: Sylvan Vest", + id:"22774" + }, + { + name:"Plans: Ironvine Breastplate", + id:"22766" + }, + { + name:"Plans: Jagged Obsidian Shield", + id:"22219" + } + ], + "Exalted":[ + { + name:"Pattern: Dreamscale Breastplate", + id:"20382" + }, + { + name:"Plans: Obsidian Mail Tunic", + id:"22221" + } + ] + }, + "930": { //Exodar + "Friendly":[ + { + name:"Exodar Tabard", + id:"45580" + } + ], + "Revered":[ + { + name:"Exodar Satchel", + id:"67527" + } + ], + "Exalted":[ + { + name:"Shroud of Exodar", + id:"64891" + }, + { + name:"Cape of Exodar", + id:"64890" + }, + { + name:"Mantle of Exodar", + id:"64889" + } + ] + }, + "1134": { //Gilneas + "Friendly":[ + { + name:"Gilneas Tabard", + id:"64882" + } + ], + "Revered":[ + { + name:"Gilnean Satchel", + id:"67532" + } + ], + "Exalted":[ + { + name:"Shroud of Gilneas", + id:"64894" + }, + { + name:"Cape of Gilneas", + id:"64893" + }, + { + name:"Mantle of Gilneas", + id:"64892" + } + ] + }, "1859": { //Nightfallen "Friendly":[ {