Skip to content

Instantly share code, notes, and snippets.

@ryanlabouve

ryanlabouve/Ember-Challenges.md

Last active December 14, 2016 19:51
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ryanlabouve/e0dcbdee8973880f7b7538cf0f3723d8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ryanlabouve/e0dcbdee8973880f7b7538cf0f3723d8 to your computer and use it in GitHub Desktop.
Download ZIP
Ember Challenges
Raw
Ember-Challenges.md

Howdy!

We are going to work through some component challenges today with Ember.

This is intended to be fun! I'm not wanting to judge your progress each step of the way or see how far you get... just want to have fun building a component with you and see your process/workflow!

  • Option 1: Ember-Powerful-Selector

Build a minimal ripoff of ember power select!

  • Option 2: Ember-Talent-Tree

Build a talent tree calculator that will allow us to spec out our video game character!

Option 1: Ember-Powerful-Selector

We are building a minimal ripoff of ember power select (https://github.com/cibernox/ember-power-select)!

This challenge has three different parts. Please complete one part at a time before moving on to the next part.

Part One

We need to be able to choose from a list of WOW classes (sorry, they had the coolest icons I could grab :-D ).

We need to set the selected attribute on a Player somehow. Not picky about that part as long as we can display something.

  • The UI should be collapsed by default
  • The User should be able to click a trigger to see the options. This UI does not need to float below to simulate a select box! Rendering inline is fine.
  • The User should be able to select an option
  • After selecting an option another part of the UI should update with the selection
// Sample data. Feel free to tweak format however you would like!
[
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_death-knight.jpg",
    "title": "death-knight"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_demon-hunter.jpg",
    "title": "demon-hunter"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_druid.jpg",
    "title": "druid"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_hunter.jpg",
    "title": "hunter"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_mage.jpg",
    "title": "mage"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_monk.jpg",
    "title": "monk"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_paladin.jpg",
    "title": "paladin"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_priest.jpg",
    "title": "priest"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_rogue.jpg",
    "title": "rogue"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_shaman.jpg",
    "title": "shaman"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_warlock.jpg",
    "title": "warlock"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/56/class_warrior.jpg",
    "title": "warrior"
  }
]

Part Two

After selected a main class the user should be able to select a sub class in a different dropdown

  • We should re-use the original component we made for this
  • If the user has not selected a main class, this other dropdown should be hidden or disabled
  • After the user selects a main class, the second dropdown should be populated with the subclasses that relate to the selected main class
  • The overall UI should be able to display the class / subclass selected by a user

** This is all sample data. Feel free to relate it however you want!. Simply manipulating and filtering the array is totally fine. Doing something more complicated is fine too **

// Hunter Subclasses
[
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_hunter_bestialdiscipline.jpg",
    "title": "hunter_bestialdiscipline"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_hunter_focusedaim.jpg",
    "title": "hunter_focusedaim"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_hunter_camouflage.jpg",
    "title": "hunter_camouflage"
  }
]

// Mage Subclasses
[
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_holy_magicalsentry.jpg",
    "title": "holy_magicalsentry"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_fire_firebolt02.jpg",
    "title": "fire_firebolt02"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_frost_frostbolt02.jpg",
    "title": "frost_frostbolt02"
  }
]

// Rouge Subclasses
[
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_rogue_deadlybrew.jpg",
    "title": "deadlybrew"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/inv_sword_30.jpg",
    "title": "/inv_sword_30"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_stealth.jpg",
    "title": "/ability_stealth"
  }
]

Part Three

Instead of having two different sections for this, it would be nice if a single component could handle the whole process.

So instead of a different list, we'll nest the subclass options on one component

  • The user should be able to select a mainclass from the dropdown.
  • The user, after selected a main class, should be able to select a subclass (if availible)
  • The UI should display the users choice

Option 2: Ember Talent Tree

We are building a talent tree calculator that will allow us to spec out our video game character! Something like http://www.wowclassic.altervista.org/wp-content/uploads/talent-calc.jpg.

Please note, I do not play WOW, the the format of this tree will not match... they just had the handiest icons for me to grab. :-D

This challenge has three different parts. Please complete one part at a time before moving on to the next part.

Part One

We have a single line of talents. We should be able to select one at a time, but they must be selected in order!

  • As a user, I can choose the first talent
  • As a user, given n talents (in order). If I selecte Talent N + 1 I must first select Talent N

** This is all sample data. Feel free to relate it however you want!. Simply manipulating and filtering the array is totally fine. Doing something more complicated is fine too **

// Sample data Tree 1
[
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_holy_blessingofprotection.jpg",
    "title": "/spell_holy_blessingofprotection"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/paladin_retribution.jpg",
    "title": "/paladin_retribution"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_paladin_swiftretribution.jpg",
    "title": "/ability_paladin_swiftretribution"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_holy_innerfire.jpg",
    "title": "/spell_holy_innerfire"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/inv_hammer_01.jpg",
    "title": "/inv_hammer_01"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_skyreach_shielded.jpg",
    "title": "/ability_skyreach_shielded"
  }
]

Part Two

Unfortunately, we do not have unlimited talent points :(

So in this part of the challenge, we are expanding into 3 different categories of talents and limiting the total number of applied points.

  • As a user, I am constrained by 30 total talent points
  • As a user, I can put my talent pointn in one of three categories
Tree 2
[
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_paladin_sanctifiedwrath.jpg",
    "title": "/ability_paladin_sanctifiedwrath"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_paladin_clarityofpurpose.jpg",
    "title": "/spell_paladin_clarityofpurpose"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_paladin_seraphim.jpg",
    "title": "/ability_paladin_seraphim"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_paladin_beaconofinsight.jpg",
    "title": "/ability_paladin_beaconofinsight"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_holy_divinepurpose.jpg",
    "title": "/spell_holy_divinepurpose"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_holy_vindication.jpg",
    "title": "/spell_holy_vindication"
  }
]

Tree 3
[
  {
    "url": "http://media.blizzard.com/wow/icons/36/paladin_protection.jpg",
    "title": "/paladin_protection"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_holy_righteousfury.jpg",
    "title": "/spell_holy_righteousfury"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_paladin_enlightenedjudgements.jpg",
    "title": "/ability_paladin_enlightenedjudgements"
  }
]

Part Two b

Each talent can now have 0-3 talent points!

  • As a user, in order for a talent to be considered obtained I must have 3 points on it
  • As a user, I can obtain the first talent
  • As a user, given n talents (in order). If I selecte Talent N + 1 I must first obtain Talent N

Part Three

Each talent can now have it's own branch, oh my!

Specifically, there will be 3 talents that you must obtain before moving on to the more specialized branches.

// Three initial skills
[
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_holy_holybolt.jpg",
    "title": "/spell_holy_holybolt"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/ability_paladin_shieldofthetemplar.jpg",
    "title": "/ability_paladin_shieldofthetemplar"
  },
  {
    "url": "http://media.blizzard.com/wow/icons/36/spell_holy_auraoflight.jpg",
    "title": "/spell_holy_auraoflight"
  }
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment