const EventBus = new Vue(); const avengers = [ { id: 'iron_man', name: 'Iron Man', realName: 'Anthony Edward Stark', aliases: 'Tony Stark, Boss, The Golden Goose', species: 'Human', citizenship: 'American', affiliation: ['MIT', 'Stark Industries', 'S.H.I.E.L.D', 'Damage Control'], quote: '"My armor was never a distraction or a hobby. It was a cocoon."', color: 'red', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/iron_man_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/iron_man_icon.png', hidden: false, selected: false, }, { id: 'captain_america', name: 'Capt. America', realName: 'Steven Grant Rogers', aliases: 'Captain, The First Avenger', species: 'Human', citizenship: 'American', affiliation: ['United States Army', 'United Service Organizations', ' United States Department of the Treasury', 'SSR', 'Howling Commandos', 'S.H.I.E.L.D.'], quote: '"This job... we try to save as many people as we can."', color: 'cyan', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/captain_america_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/captain_america_icon.png', hidden: false, selected: false, }, { id: 'thor', name: 'Thor', realName: 'Thor Odinson', aliases: 'The Mighty Thor, God of Thunder', species: 'Asgardian', citizenship: 'Asgardian', affiliation: ['Asgardian Royal Family'], quote: `"I choose to run towards my problems, and not away from them, because that's what heroes do."`, color: 'lightgrey', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/thor_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/thor_icon.png', hidden: false, selected: false, }, { id: 'spider_man', name: 'Spider-Man', realName: 'Peter Benjamin Parker', aliases: 'Friendly Neighborhood Spider-Man', species: 'Human', citizenship: 'American', affiliation: ['Midtown School of Science and Technology'], quote: `"I'd rather just stay on the ground for a little while. Friendly neighborhood Spider-Man. Somebody's got to look out for the little guy, right?"`, color: 'crimson', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/spider_man_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/spider_man_icon.png', hidden: false, selected: false, }, { id: 'war_machine', name: 'War Machine', realName: "James Rupert Rhodes", aliases: "Rhodey, Iron Patriot", species: 'Human', citizenship: 'American', affiliation: ['MIT', ' United States Air Force'], quote: `"138 combat missions. That's how many I've flown. Every one of them could've been my last, but I flew 'em. "`, color: 'darkgray', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/war_mach_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/war_mach_icon.png', hidden: false, selected: false, }, { id: 'black_widow', name: 'Black Widow', realName: 'Natalia Alianovna', aliases: 'Natasha Romanoff, Natalie Rushman', species: 'Human', citizenship: 'Russian, American', affiliation: ['KGB Emblem 2 KGB', 'Red Room', 'S.H.I.E.L.D.', 'STRIKE Team: Delta'], quote: `"I am a spy. Not some rooftop-jumping archer, shield-wielding super-soldier, or shiny-metal philanthrobot. I need to make that clear on my business card."`, color: 'cadetblue', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/bwid_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/black_w_icon_48.png', hidden: false, selected: false, }, { id: 'black_panther', name: 'Black Panther', realName: "T'Challa", aliases: "His Highness, Son of T'Chaka", species: 'Human', citizenship: 'Wakandan', affiliation: ['Golden Tribe', 'Tribal Council'], quote: `"Wakanda will no longer watch from the shadows. We cannot. We must not. We will work to be an example of how we, as brothers and sisters on this earth, should treat each other."`, color: 'darkorchid', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/black_panth.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/b_panth_icon.png', hidden: false, selected: false, }, { id: 'hulk', name: 'Hulk', realName: "Robert Bruce Banner", aliases: "The Incredible Hulk", species: 'Human', citizenship: 'American', affiliation: ['Culver University'], quote: `"I just get so angry all the time! Hulk always… always angry."`, color: 'chartreuse', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/hulk_inc_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/hulk_inc_icon.png', hidden: false, selected: false, }, { id: 'doctor_strange', name: 'Dr. Strange', realName: "Stephen Vincent Strange", aliases: "Master Strange, The Wizard", species: 'Human', citizenship: 'American', affiliation: ['Metro-General Hospital', 'Masters of the Mystic Arts'], quote: `"I can and I will."`, color: 'salmon', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/doctor_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/doctor_str_icon.png', hidden: false, selected: false, }, { id: 'hawk', name: 'Hawkeye', realName: 'Clinton Francis Barton', aliases: 'The Hawk, Arrow Guy', species: 'Human', citizenship: 'American', affiliation: ['S.H.I.E.L.D.', 'STRIKE Team: Delta'], quote: `"The city is flying, we’re fighting an army of robots and I have a bow and arrow. None of this makes sense."`, color: 'darkcyan', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/i_hawk_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/hawk_icon.png', hidden: false, selected: false, }, { id: 'falcon', name: 'Falcon', realName: 'Samuel Thomas Wilson', aliases: 'Sam Wilson', species: 'Human', citizenship: 'American', affiliation: ['United States Air Force', 'Air National Guard'], quote: `"I just wanna make sure we consider all our options. People who shoot at you usually wind up shooting at me."`, color: 'cadetblue', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/falcon_av_banner.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/falcon_icon.png', hidden: false, selected: false, }, { id: 'gotg_2', name: 'Rocket Raccoon, Gamora, Groot', realName: '', aliases: '', species: 'Halfworlder, Zehoberei, Flora colossus', citizenship: '?', affiliation: ['Guardians of the Galaxy'], quote: `"We're family. We leave no one behind."`, color: 'yellow', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/gotg_banner__2.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/gotg_ic.png', hidden: false, selected: false, }, { id: 'gotg_1', name: 'Star-Lord, Drax the Destroyer', realName: '', aliases: '', species: 'Human/Celestial Hybrid', citizenship: 'American, ?', affiliation: ['Guardians of the Galaxy'], quote: `"We're family. We leave no one behind."`, color: 'yellow', image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/gotg_banner__1.png', iconImage: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1211695/gotg_ic.png', hidden: false, selected: false, }, ] Vue.component('avenger-banner', { template: ` <div class="avenger"> <div class="avenger-banner" :class="{ 'hidden': avenger.hidden }" :style="{ backgroundImage: 'url(' + avenger.image + ')' }" @click="reset" @dblclick="displayAvenger(avenger.id)"> </div> <div class="avenger-details" :class="{ 'avenger-details__right': avengers.indexOf(avenger) < 7, 'avenger-details__left': avengers.indexOf(avenger) >= 7, 'avenger-details__left_extra': avenger.id === 'gotg_1' || avenger.id === 'gotg_2' || avenger.id === 'doctor_strange', }" v-show="avenger.selected"> <h2 class="title" :class="{'title__small': avenger.id === 'gotg_1' || avenger.id === 'gotg_2'}" :style="titleStyle">{{avenger.name}} <img :src="avenger.iconImage"> </h2> <p v-if="avenger.realName"><span :style="{color: avenger.color}">Real Name: </span>{{avenger.realName}}</p> <p v-if="avenger.aliases"><span :style="{color: avenger.color}">Aliases: </span>{{avenger.aliases}}</p> <p><span :style="{color: avenger.color}">Species: </span>{{avenger.species}}</p> <p><span :style="{color: avenger.color}">Citizenship: </span>{{avenger.citizenship}}</p> <p><span :style="{color: avenger.color}">Affiliation:</span></p> <ul> <li v-for="affiliation in avenger.affiliation">{{affiliation}}</li> </ul> <p class="quote" :style="{color: avenger.color}">{{avenger.quote}}</p> </div> </div> `, data() { return { titleStyle: { smallText: 1.5 + 'em', textShadow: `0 0 10px ${this.avenger.color}` } } }, props: ['avenger', 'avengers'], methods: { reset() { this.avengers.map((avenger) => { avenger.hidden = false; avenger.selected = false; }); EventBus.$emit('avenger-selected', {avengerSelected: false}); }, displayAvenger(id) { this.avengers.map((avenger) => { if (avenger.id !== id) { avenger.hidden = true; } else { avenger.hidden = false; avenger.selected = true; EventBus.$emit('avenger-selected', {avengerSelected: true}); } }); } }, }); new Vue({ el: "#app", data: { avengers, avengerSelected: false }, created() { EventBus.$on('avenger-selected', (evt) => { this.avengerSelected = evt.avengerSelected; }); } });

!