# ![]() Project #1: The Game

## Overview of `connect four`

![](http://uncannyflats.com/wp-content/uploads/2013/12/connect-4.jpg)

### The game

[Connect Four](https://en.wikipedia.org/wiki/Connect_Four) is a two-player adventure of mystery, mayhem, and intrigue.  It's probably a thing in your universe, but feel free to read up on it if you have to.

## Project Details

### Necessary features

A basic implementation of this project must include:

1. An interactive board which renders on page load
2. A way for players to set their name
3. A way for players to mark an empty space on their turn
4. The game should end when there is a winner, or if the game is a tie
5. The game should report the end state

Additionally you should use CSS to ensure a reasonable amount of styling to keep your project presentable.

###  Advanced features

Going above and beyond the basic implementation is desirable, should you have the time.  Feel free to enhance your project with any of the following features:

1. A button on `game over` to reset the game back to initial state
2. A way to keep track of Player 1 vs. Player 2 wins
- An option to play vs. a computer with AI
  - Level 1: Random empty space is good enough
  - Level 2: Computer chooses a space which immediately blocks a player win
3. Add in the ability to store a game to play later.  This might use Firebase or local storage to do so.
4. Add in the ability to play live with somebody remotely.  This will definitely need to use [Firebase](https://www.firebase.com/).

## Implementation

### Technologies

You will be expected to use the following technologies to implement this project:

- **HTML**  
  Your HTML should be semantic.

- **CSS**  
  Your game should be stylish.

- **JavaScript & jQuery**  
  Your game should be playable *and* responsive.


### Timeframe

The timeframe for this project is approximately 2 continuous days of class time and two weekend days.

## Expectations

### You

As a student you should be doing the following things:

- **Planning **
  Plan out your project before you begin. What data structures will you need (objects, arrays)? What layout will your project have on the page (you could make a wireframe)? How will you organize your code? Pseudo-code out any thorny issues you might already anticipate.

- **Version Control**  
  Use **git** and **github** for version control, and make frequent incremental commits to prevent large scale implosions. Make a fresh repo outside the wdi-lettuce repo for your project so that
  it will be public.

- **Hosting**  
  Host your application on **githubpages**, or something similar so the class and instructors can use it.  

### Us

Since your instructors will be assessing your work, they will look for the following things:

- **Project Workflow**  
Did you you plan your project before you started? Did you use source control as expected for the phase of the program you’re in (detailed above)?

- **Technical Requirements**  
Did you deliver a project that met all the technical requirements? Given what the class has covered so far, did you build something that was reasonably complex?

- **Creativity**  
Did you add a personal spin or creative element into your project submission? Did you deliver something of value to the end user?

- **Code Quality**  
Did you follow code style guidance and best practices covered in class, such as spacing, modularity, and semantic naming? Did you comment your code as your instructors have in class?

- **Problem Solving**  
Are you able to defend why you implemented your solution in a certain way? Can you demonstrate that you thought through alternative implementations? (Note that this part of your feedback evaluation will take place during your one-on-one code review with your instructors, after you've completed the project.)

## Deliverables

By the time the project is over, we will expect the following from you:

* A **working game, built by you**, hosted somewhere on the internet
* A **link to your hosted working app** in the URL section of your Github repo
* A **git repository hosted on Github**, with a link to your hosted project,  and frequent commits dating back to the very beginning of the project
* **A ``readme.md`` file** with explanations of the technologies used, the approach taken, installation instructions, unsolved problems, etc.

Most importantly a **technical demonstration** of your app which:

* Is 5 minutes in length
* Shows off all features of the app
* Explains the technical details
* Explains the technical challenges
* Explains which improvements you might make