[SOLVED] Scheme game html COMP 2406 A/B Fall 2019 Tutorials #7

COMP 2406 A/B Fall 2019 Tutorials #7
Objectives
Add a template engine to an existing Express codebase
Create templates capable of accepting data and producing corresponding HTML
Expectations
To receive full grades for this tutorial, you must complete problems 1-2 and
demonstrate them to a TA before the deadline. If you do not have time to complete the required problems, you should attempt them afterward for your own benefit. Remember to use the available resources (w3schools, Node.js/Express documentation, lecture notes/recordings/code, etc.) if you are struggling to complete the problems.
Grading Scheme
Tutorials account for 10% of your course grade. Each tutorial will be graded out of 3. You will receive 1/3 if you do not make enough progress on the problems or cannot explain your solution(s) to the TA. You will receive 2/3 for completing almost all the required problems and can explain your solution(s) to a TA. You will receive 3/3 if you complete all the required problems and can explain your solution(s) to the TA.
If you do not complete all the tutorial work by the end of the tutorial, you may demonstrate your work within the first 30 minutes at the following weeks tutorial. For example, you can demonstrate tutorial #1 at tutorial #2, tutorial #2 at tutorial #3, etc. There will be no penalty for work demonstrated at the following tutorial. However, this will be your last chance to get marks for the tutorial work: you cannot demonstrate tutorial #1 in the session for tutorial #3, and so on.
1

Problem Background
Download the server.js and cards.json files from the course cuLearn page. The server.js file implements an Express RESTful server, which stores and serves information about cards from the game Hearthstone. The card dataset used by the server is loaded from the cards.json file. Each card object in the dataset includes the following properties:
id: a string that uniquely identifies the card
cardClass: a string indicating the player class that can use the card
set: a string indicating the collectible set the card is from
type: a string indicating the type of the card
artist: a string with the name(s) of the artist(s) who created the art for the card
text: a string representing the text shown on the cards face
In addition to these properties, some cards may also have:
rarity: a string representing how rare the card is
mechanics: an array of strings indicating special rules for the card
The server defines route handlers for GET requests to /cards and /cards/:cardID, where :cardID is a parameter representing a unique card ID. Currently, the server responds to these requests with raw JSON data. When /cards is requested, the server will respond with a JSON string representation of an array with all cards that match the query parameters. When /card/:cardID is requested, the server will either respond with the JSON string representation of the card with the specified card ID, or a 404 error, indicating a card with that ID could not be found.
The /cards route supports several query parameters, including type, set, class, and artist. The valid values for type, set, and class parameters are listed at the end of this document. Valid values for the artist parameter are not listed here because there are so many of them, but you can find them in the resulting JSON data after making a request to http://localhost:3000/cards.
Review the server code before beginning. Run the server and make several requests to http://localhost:3000/cards using various query parameters and http://localhost:3000/cards/:cardID using various card IDs. You can grab some IDs from the resulting JSON string when you make requests to /cards. Ensure that the server is working correctly before moving on.
Problem 1 (Adding a Template for /cards)
Add a template engine to the Express app. Pug is a good choice but you are free to use any Express-compatible template engine. Create an HTML template which takes in an array of card objects, and use the data contained within to generate a page to display
2

the search results for /cards. The search results page should have the title Card Search Results and should have a single link for each card object in the array. Each of these links should point to the URL for that specific card (e.g., http://localhost:3000/cards/that_cards_id) and the link text should indicate the cards name and unique ID. Here is an example of what the page may look like:
Remember, you have to use a templating engine to generate this page.
Once you have created the template file, modify the sendCardList function so that it will serve either JSON or HTML, depending on the request headers specified by the client (hint: look at the res.format method in the Express documentation). You should use your template to generate the HTML for the search results if the client has requested HTML content. If the client has requests JSON data, you can use the code that is already included in the function to respond. Note that res.cards represents the array containing all of the matching card objects.
Problem 2 (Adding a Template for /cards/:cardID)
Now add a template for the single card route. The HTML this template creates should have a title indicating the cards name and unique ID. The pages content should include, at minimum, the cards name, ID, class, set, type, artist, and text attributes. Additionally, the text for the class/set/type/artist values should link to URLs that will generate a list of search results containing cards with the same class/set/type/artist. For example, if the class of the current card is mage, then the link could be http://localhost:3000/cards?class=mage. If the user clicks the link, they will then see all cards with the same class value.
3

Implement a way to visualize the cards rarity, if it has a rarity property. This could involve displaying a number of * characters to signify the rarity (e.g., 1 star for free, 2 for common, 3 for rare, 4 for epic, 5 for legendary) or modifying the color of the card name on the page. A list of the possible rarity values is included at the end of this document. If the card has a mechanics array property, your template should include a Mechanics: heading and list each of the mechanics strings contained in the array.
Modify the sendSingleCard function to send either JSON or HTML data, depending on the request header values, just as you did in the previous problem.
Valid class values, with their frequency in brackets:
MAGE (61), HUNTER (63), PRIEST (59), NEUTRAL (713), WARLOCK (70), ROGUE (66), DRUID (70), SHAMAN (60), WARRIOR (60), PALADIN (56)
Valid type values, with their frequency in brackets:
MINION (1277), WEAPON (1)
Valid set values, with their frequency in brackets:
TGT (96), BOOMSDAY (102), BRM (23), GANGS (101), CORE (50), EXPERT1 (150), HOF (9), NAXX (25), GILNEAS (140), GVG (92), ICECROWN (94), KARA (52), LOE (36), LOOTAPALOOZA (102), OG (100), UNGORO (106)
Rarity values, from most common to most rare, with their frequency in brackets
FREE (50), COMMON (432), RARE (309), EPIC (169), LEGENDARY (218) Additionally, 100 cards have no defined rarity value
4