dev2 – six degrees of separation v4

So more changes! That’s how development works. As I described on Tuesday I’ve restructured the model for building credit objects from the movie database data. There is now a Credit class that extends to Actor, Movie, or TV. Each extended class has it’s specific get_credits() method to fetch data from the movie database.

Credit, Actor, Tv, Movie

class Credit {
  constructor(id, name, img, detail) {
    this.id = id;
    this.name = name;
    this.img = img;
    this.detail = detail;
  }
}

class Actor extends Credit {
  async get_credits() { //fetch actor combined credits and create
                        //Movie or TV objects in an array
 }
}

class Tv extends Credit {
  async get_credits() { //fetch tv details
                        //then fetch actors for each tv season
                        //then create array of Actor objects
                        //then remove duplicate Actor objects
 }
}

class Movie extends Credit {
  async get_credits() { //fetch movie cast
                        //then create array of Actor objects
 }
}

Also, a Card class was created to build cards from the Credit object’s data. There are methods to build different card types – build_main(), build_header(), and build_empty(). As well there are a couple methods – set_image() and set_detail() – to deal with missing images and different detail data respectively.

class Card {
  constructor(credit_obj, card_type, id, img, main, detail) {
    this.credit_obj = credit_obj;
    this.card_type = card_type;
    this.id = id;
    this.img = img;
    this.main = main;
    this.detail = detail;
  }

  set_img() {
   //deals with no image data
   //and returns url from card img src attribute
  }

  set_detail() {
   //details with Actor vs Movie/TV credit detail differences
   //Actor is a character and Movie/TV has a date that needs
   //to be shortened
  }

  build_main() {
   //returns a card used in the main credits-cast div 
   //or for the main hints div
  }

  build_header(start_or_finish) {
    //takes 'start' or 'finish' as an argument
    //updates img and name of the selected card
  }

  build_empty() {
   //returns an empty card for layout purposes in the header and main divs
  }
}

Setting the cards to the DOM requires a number of functions to be able to – clear_cards(cardbox), set_main_cards(credit_arr, cardbox), set_header_card(credit_obj, start_or_finish), set_empty_cards(cardbox, count)

clear_cards(cardbox)

Passes the class of the card box to be cleared of all child elements. All child elements (div.cards) are removed.

set_main_cards(credit_arr, cardbox)

Takes an array of constructed Credit objects (Actor, Movie, TV) and using the Card constructor class builds and sets cards for each object to the cardbox class. Finally adds a click event listener to all the cards in the carbox. For now just console.log the ‘id’ of the card.

set_header_card(credit_obj, start_or_finish)

Takes a constructed Credit object (Actor, Movie, or TV) and using the Card constructor class and the build_header(start_or_finish) method, sets the values of either the ‘start’ or ‘finish’ card in the header.

set_empty_cards(cardbox, count)

Uses the Card class and the build_empty() method and creates as many empty cards in the count. Then sets each empty card to the selected class for a cardbox.

Leave a comment

Your email address will not be published. Required fields are marked *

css.php