GitHub Classroom URL: https://classroom.github.com/a/6842nxMV

Objective

The objective of this series of assignments is to provide students with practice writing HTML and CSS.

This video provides an overview of the version of Qwixx you will be implementing. (The video demonstrates a Java version of the game for CIS 163. You'll be implementing a similar game in JavaScript.) This video walks through the official, multi-player rules for Qwixx.

Part 1: Qwixx Board

Implement the board for the "pencil game" Qwixx.

• Make your game look as much like the sample below as possible.
• Focus on designing your CSS to avoid duplication when possible.
• Make the width of each number box the same. (In other words, a box containing "2" should not be narrower than a box containing "12".)
• Limit your use of absolute and relative positioning. (You will need to use them in a couple places.)
• The starter code includes qwixx.html. The purpose of this starter file is so you don't have to type the HTML for each number box by hand. You may use this as a starting point if you like; or, you can create your own html file from scratch.
• Your design does not need to be responsive. Feel free to hard-code widths and heights for this assignment.
• Your design does, however, need to appear correctly at different screen widths and scale factors. That doesn't mean it has to look good on a mobile screen, but small adjustments to the scale and/or window size shouldn't mess up the image.

This assignment must be completed individually. You may not share code; but, you are encouraged to share high-level ideas with each other including:

• Which CSS properties you used
• Which selectors you used to avoid repetition

Hints:

• You can use Unicode character &#128274 for the lock.
• You can use Unicode character &#127922 for the small die.
• You can use Unicode character &#10007 for the small x over the die.
• Use position: relative to slide the x over the die.
• Use position: absolute to draw the back border around the 12 and lock columns.
• Using var and calc will make it easier to make adjustments. (Remember to put spaces around "+" and "-".)

Part 2: Qwixx using a template

Use an HTML templating system to generate the Quixx board.

• You may use any templating system you like (PHP, Razor (C#), ERB (Ruby), EJS (JavaScript), Jinja (Python), etc.). The sample code on git hub contains examples of several of these templating systems.
• Your template should dynamically generate a board based on two parameters: the maximum value in each row, and the number of rows. For example, the board below uses parameters of 21 and 6. (If you prefer, you may simply set two variables at the beginning of your code and change those values by hand to generate a differently configured board.)
  • In order for the template to automatically adjust to the desired number of rows and values, your template will have a nested loop.
  • The first n/2 rows should count up, the last n/2 rows should count down.
• In preparation for the next assignment, please add a unique id to each number box. The ids should look something like row3-col6
• You may use the template to generate CSS as well. (You may need to do this to get the widths and placement correct.)

Part 3: Implement the game

GitHub classroom link: https://classroom.github.com/a/iuLdpQXI.

Add JavaScript to your Qwixx board so that you can play the game. You can find the rules here: https://gamewright.com/pdfs/Rules/QwixxTM-RULES.pdf

Rules:

• You may work in teams of up to two.
• Your implementation must be client-side only. (Obviously, you will need a server to provide the page and JavaScript; but, once the page loads, you shouldn't talk to the server again.)
• Use plain JavaScript: Don't use React, Angular, Vue, etc.
• You may either (1) use a static HTML file with a fixed, standard-sized board, or (2) use your code from part 3 to load a dynamically-generated board.
• You will need to add dice to your Qwixx board: Two white dice, and one additional die for each color used.
• Your implementation must use Model-View-Controller design (i.e., separate Model, View, and Controller) classes. (If you have a different design in mind, feel free to ask.)
• All state should be stored in the mode
• Your view may not modify your model.
• You must provide unit tests for your Model and Controller classes.
• You may use as much or as little of the provided starter code as you like.

Ideas / Suggestions:

• Have the model recognize and track three phases: (1) Need to roll, (2) Need to use white dice (or pass), (3) Need to use colored die (or pass).
• Add a click handler to each number box. When a number box is clicked, check to see if that box is eligible to be crossed out (e.g., no boxes to the left have been crossed out, and number in the box corresponds to dice.)
• Writing many short, helper methods makes testing easier.

Setting up Jest

To run your Qwixx code directly in a browser, you will want to use the ES 6 module import syntax. This ES6 syntax is different from the CommonJS syntax used by Node, which causes problems when testing. To address the differing import syntax, we will use a package called Babel to transform the code into something that Node handles. To set up Jest using Babel:

1. Set up npm in your project: npm init -y
2. Install Jest: npm install --save-dev jest
3. Install Babel: npm install --save-dev babel-jest @babel/core @babel/preset-env
4. Configure Babel by creating a file named babel.config.js with the following content:

   module.exports = {
     presets: [
       [
         '@babel/preset-env',
         {
           targets: {
             node: 'current',
           },
         },
       ],
     ],
   };
   

5. Edit the "scripts"/"test" property to equal jest

You can now run your Jest tests from the command line with npm test.

Note: If you choose to use the starter code from GitHub classroom, these steps have already been completed. You need only run npm install.)

Submission

I will grade the parts of this assignment separately.

• When Part 1 is complete, commit to the master branch with a commit message that includes "[grade me 1]" (the square brackets are important).
• When Part 2 is complete, commit to the master branch with a commit message that includes "[grade me 2]" (the square brackets are important).
• When Part 3 is complete, commit to the master branch with a commit message that includes "[grade me 3]" (the square brackets are important).

Updated Wednesday, 19 October 2022, 7:31 PM