[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 week¡¯s 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 card¡¯s 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_card¡¯s_id) and the link text should indicate the card¡¯s 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 card¡¯s name and unique ID. The page¡¯s content should include, at minimum, the card¡¯s 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 card¡¯s 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