This Game of Thrones interactive map game is designed to provide information to the player in a fun way. The clickable locations reveal various information to the player and allow them to 'travel' to each location. An interesting aspect of this is each card will show the 'in-world' distance to any other location on the map. At the end of the game, once all the locations have been discovered, more information is available on each card that links to an external site.

• First time visitor goals:

  • To find an interesting, interactive map of the world of Game of Thrones containing accurate information and locations.

• Returning visitor goals:

  • To test and improve trivial knowledge of the world and locations.

• Frequent user goals:

  • To see the map be updated with more locations over time, perhaps separated into larger, main locations, and smaller, world-building locations.

• Site owner goals:

  • To provide a fun, interactive, informative map depicting the world of Game of Thrones, and continue to update the map with more locations and to make those updates easy to impliment.

• Color Scheme

  • Old, worn, rustic design in keeping with the age of the world.

• Typography

  • Hina Mincho used primarily as due to its old, worn, but still formal typeface.

• Imagery

  • The map used is of the fictional world of Westeros and Essos created by author George R. R. Martin and is the copywrite material of said author and HBO.

• Wireframes

  • General map with arrows to navigate and the location displayed in the bottom corner.

    • 

  • Information card above a location.

    • 

• Interactive elements.
• Responsive design for all screen sizes.
• Links to external sources for information.

• The page loads with a map of the world and a card explaining the site's intent.

  • 

• Clickable locations that reveal information cards with various facts about each location including the distance from said location to the previous location travelled to.

  • 

• End game card once all locations are found.

  • 

• Add more locations
• Remove dashes from inbetween location names
• Have locators permanently change color when a location is discovered

• HTML5
• CSS3
• JavaScript

• Google Fonts
• Git
• GitHub
• PicResize

• To add a new location all three files need to be updated.

  • HTML

    • < div id="location-name-locator" class="locator hover">Location Name< /div >
      < div id="location-name" class="location">< /div >

  • CSS

    • #location-name {
      top: (num)px;
      left: (num)px;
      }

    • #location-name-locator {
      top: (num)px;
      left: (num)px;
      }

    • The CSS top and left coordinates must be static (px). Relative units will alter location and distances as the screen size changes.

  • JavaScript

    • In the locations array, add an object containing:

      • {
        index: x,
        
        function: 'LocationName',
        *in camelCase assuming starting at the second word
        
        name: 'location-name',
        
        house or rulers: '',
        
        information: 'Lorem ipsum',
        
        currentlyLocated: false,
        
        discovered: false,
        },
        
        

    • In the open info functions section, add:
      
      

      • function openLocationNameInfo() {
        openInfo(x);
        }
        
        function closeLocationName() {
        closeInfo(x);
        }
        

    • In the Event Listener section, add:
      

      • document.getElementById('location-name-locator').addEventListener('click', openLocationNameInfo);

• The original project was constructed on a laptop with a screen size of 12.3 inches. The code was also put through validators and passed through without any issues.

  • W3C Markup Validator

  • W3C CSS Validator

  • Javascript Validator - JShint

  
  • Unused functions flagged in the validator are used but can only be accessed after firing other functions first. All unused functions are contained within the openInfo function.
  • The JavaScript code was passed with /* jshint esversion: 6 */ above it which removed warnings for setting variables with 'let'.

• The site was tested on Google Chrome using their developer tools and viewed on Firefox, Microsoft Edge, and Safari to ensure it worked across multiple platforms. During development, on changing the screen size and using the implimented Left and Right buttons the page reverted to the full size of the image, pushing the footer down and opening a large white space between the base of the image and the footer. However on actual use, this doesn't happen so I'm attributing this to the developer tools stuggling to scroll the window at an unexpected screen size. The site was also viewed on multiple devices of varying screen sizes and this continued to not be an issue in actual use.

• Google Chrome's DevTools Lighthouse:

  • Desktop
  • Mobile

• The site was deployed to GitHub pages. The steps to deploy are as follows:
  • In the GitHub repository, navigate to the Settings tab.
  • Open the pages tab on the left hand side of the page.
  • From the source section drop-down menu, select the Master Branch.
  • Once the master branch has been selected, the page will be automatically refreshed with a detailed ribbon display to indicate the successful deployment.

• You can view the live site here.

• Object.keys()

• Code

  • All code was written by the developer.

• Content

  • The world map was created by author George R. R. Martin and is the copywrite material of said author and HBO. The specific map used was sourced from A Wiki of Ice and Fire and all information was sourced from this Game of Thrones Wiki.

• Tutor support at Code Institute for all their support throughout.

• Friends and family for viewing the site and giving feedback.