# CS2 JavaScript Project 2024 🎰

[<<< Back to main site](https://cs.brown.edu/courses/csci0020/)
<img src="https://hackmd.io/_uploads/H1NagEAT3.png" width=200>

> **Due Date: 11/09/2023**

> **Need help?** Remember to check out Edstem and our Website for TA help assistance.

## Background 🎰

> Be sure to read all background notes, as they are vital to do the assignment.

### Assignment Goals

- Showcase understanding of functions, variables, and callbacks
- Add JavaScript event handlers
- Debug using `console.log`

### Resources

- **CS2 Javascript Lab**: functions, variables, and callbacks, DOM, simple JavaScript events
- [Official Javascript Documentation](https://devdocs.io/javascript/)
- [Javascript Documentation at W3Schools](https://www.w3schools.com/js/js_functions.asp)
- TA hours and EdStem!

:::warning
**Reminder**: This project must be completed by yourself, without the help of any other students or resources not mentioned in the resource section.
:::

## Project Description 🎰
Oh no! Don's Casino is packed with customers and the TAs are overwhelmed. We need your help to deliver the poker chips to the playing tables. Your task is to use what you've learned in the Javascript lab to navigate around the maze-like casino pit.

- There are instructions in the stencil file provided. Please read them carefully. We have created some functions for you to fill in, while others you must write on your own.
- ==Your project will be graded in Chrome.==
- This project requires you to use function calls that are specific to this assignment. Before starting, read the section titled “Documentation” within "Tasks 🎰".

## Tasks 🎰

### Setup

:::info
**Task 0:** Double click your "CS2" folder on your desktop, and create (or enter) your folder for "JavaScript". Then, create a new folder inside called "JavaScript Project". All your files for the project should live in this folder.
:::

:::info
**Task 1**: Begin by downloading the stencil [`here`](https://drive.google.com/drive/folders/18UeVgn2OC_4qbz_qiI0WaUCdp6CXJEVX?usp=drive_link).

**This project consists of four files:**
1. `index.html`
2. `donsCasino.js`
3. `donsCasino.css`
4. `stencil.js`

**Put all downloaded files into your JavaScript folder**. This is the folder you will zip at the end of the assignment to turn in on canvas.

To view what the casino looks like, simply open your `index.html` file in Chrome.
:::

:::warning
**IMPORTANT NOTE**: The required tasks do NOT require you to alter any files other than the ```stencil.js``` file. The only code you write should be in `stencil.js`.
:::

### Documentation

We have provided some code for you to use in the project. This code is located in `donsCasino.js`. **It's okay if you don't completely understand what is happening in the functions in this file!!** We have provided general descriptions of these functions below. You can call these functions on the variables to make them do things in `stencil.js`.

#### Poker Chip Functions 🎰
- `drawChip(x,y)` - draws the poker chip on-screen at location column x and row y.
- `changeColor(color)` - changes the color of the poker chip to whatever the value of color is.
- `moveLeft()` - makes the poker chip move one unit left
- `moveRight()` - makes the poker chip move one unit right
- `moveDown()` - makes the poker chip move one unit down
- `moveUp()` - makes the poker chip move one unit up
> These all must be called on the pokerChip object.

#### Casino Functions 🎰
- `changeCasinoBackground(color)` - this function changes the color of the casino to whatever the value of `color` is
> This must be called on the casino object.

#### General Functions 🎰
- `getRandomColor()` - this function returns a random color

### How To Call Functions

There are two ways these functions can be called
1. ==Functions for specific objects (eg. poker chip or casino) are called as follows:==

object.function(param);

**Example**: To make the poker chip move left we would call its ```moveleft``` function using this syntax:

chip.moveleft();

And to call the casino’s ```changeCasinoBackground(color)``` we would use the syntax:

casino.changeCasinoBackground("red");

2. ==General functions are called normally==:

function(param);

**Example**: To get a random color, we would use the syntax:

getRandomColor();

:::warning
You will be writing code in `stencil.js`. **You do NOT need to modify anything in `donsCreamery.js`.** These functions are meant to be called within stencil.js.
:::

### Making Poker Chips
To complete an order successfully, you first need to prepare the poker chips.

:::info
**Task 2: Drawing the Poker Chip**
Open `stencil.js`. Begin by drawing red poker chips at location `x=1`, `y=1`. “Drawing” the poker chips is equivalent to placing a red square on the maze. Once you have completed this task, you should see a red square in the top left corner of the parlor maze.
:::

Uh oh! Sometimes you mess up the order or the customer changes their mind about what value chip they want. When that happens you need to start all over again!

:::info
**Task 3: Restarting an Order**
Fill in the `restart()` function in `stencil.js`. To add the restart button functionality, you will need to write code in the function that **reloads** the whole page when the maze is restarted.

Remember to add an event listener for the restart button! This should be done at the bottom of the stencil file in the event handlers section. Think back to the **Document Object Model** that we learned in lab. What is the ID for the restart button in the HTML file?

:::spoiler **Hint**
You should look into [reload](https://www.w3schools.com/jsref/met_loc_reload.asp) for more information on how to do this.
:::

### Navigating the Maze
Your poker chip must get from one end of the parlor to the other in order to successfully deliver it to the customer.
:::info
**Task 4: Delivering Poker Chips to a Customer**
Add the ability to control the poker chips with the arrow keys by filling in the ```keyDown``` function and adding an event listener. This has two main components:
1. The chips should be able to move with the 4 arrow keys in their respective directions. This will consist of 4 conditionals, 1 for each key event. You can use this [`website`](https://keycode.info) to find out which key maps to which keyCode value. To check a keycode value (in an if statement, for example), you’d write something like this:

if (keyCode === 38) {
    chip.moveUp();
}

2. You will also have to add an event listener to the [`window`](https://www.w3schools.com/js/js_window.asp) corresponding to the function you just wrote. See [`this link`](https://www.geeksforgeeks.org/javascript-detecting-the-pressed-arrow-key/) for examples of how to use the `keydown` listener in JavaScript.

Here’s an example of adding a listener to the window that listens to the function ```doSomething``` when keys are pressed:

window.addEventListener('keydown', doSomething);

:::

### Buttons

:::info
**Task 5a: Changing the Parlor Background**
When the "New Parlor" button is clicked, the parlor background should be changed to a random color.

Recall that we have provided both a `changeCasinoBackground()` and a `generateRandomColor()` function.

:::spoiler **Hint**
Remember to add an event listener for the button, as you did above with the restart button!
:::

:::warning
Do not create your own random color function; use our existing random color function (see Documentation)
:::

:::info
**Task 5b: Changing the Poker Chip values:**
When the "New Poker Chip" button is clicked, the chips should be changed to a random color. This should look very similar to the function in Task 5a!
:::

### Debugging Advice
- Make sure to read through the Documentation section and instructions carefully
- Feel free to add a ```console.log(“whatever message you want”);``` lines in your functions to help you debug. Right-click on the page, hit Inspect, and go to Console to see the logs. Error messages will be printed if there are errors. If you want help debugging, this is definitely an important tool and we are happy to help you with this in hours!

### Completing the Order
Once your poker chip has reached the customer, you should make sure they are happy with the order.
:::info
**Task 6: Delivering Your Order**
Try solving your maze! Once your poker chip square reaches the end of the maze, a popup should appear that reads “Congrats! You succesfully delivered the chips!” **This is already implemented for you.**
:::

## Extra Credit 🎰
:::info
**3 points**: Add an extra button with JavaScript functionality of your choice.

This would require you to change the ```index.html``` file to add a button and id. Your chosen functionality must be sufficiently different from the project requirements (e.g. a button to make the background blue wouldn't count), and it MUST use some sort of Javascript. It cannot just link to a website (this can be done in HTML). Some ideas are:
- Add an image and make it appear/disappear
- Add a media file, like audio and video, and control it with a button
- Add text and make it appear/disappear
:::

:::info
**2 Points**: Add a score tracker. This would require you to add an element to the ```index.html``` file that displays the number of steps your chip has taken in the format “Score: x” where x is the number of key strokes made to solve the maze. You would need a score counter variable in your Javascript file that increments every time you move your ice cream.
:::

:::info
**2 Points**: Fill out our [feedback form](https://docs.google.com/forms/d/e/1FAIpQLScdLX2aY7uG_PH8Ei39NKdk81op22e6Qy06fU-PIWWMSmONEA/viewform?usp=sf_link).
:::

## Hand-In 🎰

:::success
**To Hand-In Project 4**:

For this assignment, your submission should include the JavaScript file `stencil.js` with the completed functions. Be sure to also include the original HTML file and the original CSS and JS files **with no changes** (unless you made edits for extra credit).

**Your files should look like this at submission:**

    JavaScript Project
    ├── donsCasino.css
    ├── donsCasino.js
    ├── index.html
    ├── stencil.js

1. Make sure your source files **do not contain your name**. This is especially important in order to maintain the course’s anonymous grading policy that ensures your assignments are graded fairly. We will deduct points if your files contain identification data.
2. Make sure you have the **correct, most up-to-date files** before zipping. We’ve had students in the past send in older versions that didn’t contain all their finished work! You will receive a 10% deduction if TAs must regrade your work due to incorrect files.
3. Create a .zip file from your `JavaScript Project` folder.
:::spoiler Windows:
In Windows Explorer, go to the folder containing the files you want to zip. Select the files, then right-click on any of the selected files and select Send To… -> Compressed (zipped) Folder.
:::

:::spoiler Mac:
In Mac Finder, go to the folder containing the files you want to zip. (This would be your “JavaScript Project” folder) Select the files, then right-click on any of the selected files and select Compress Items.
:::

4. Right click on the newly created zip file to rename it. The name of your file should be `BannerID_JavaScriptProject.zip` (replace "BannerID" with your own banner id, starting with `B0...`)
5. Submit on Canvas under the JavaScript Project assignment!

Congrats! You just finished the Javascript Project! :slot_machine:
:::

:::warning
If you have any issues with completing this assignment, please reach out the course HTAs: [e-mail]

If you need to request an extension, contact Professor Stanford directly: [e-mail]

:::