assign 3

honestly this is one of the better written specs, but you may beg to differ

ok how do i install node?

oh yeah, you may not even have node js installed, so lemme give you some instructions

linux/macos

nvm is a pretty darn tool thing that allows you to install node without any fuss
just follow the instructions here and you should have it installed

after that, run this command here: ```bash nvm install node ``` and you should have a cool fresh version of node on your computer!

windows

god windows sucks for development
but regardless, you can just download it here and then run it like any other windows installer

literally just follow a tutorial

what the title said.
build the tic tac toe app as described in this link

the awful thing about this assignment is that you have to keep a log of everything you do in a file named `tic-tac-toe.txt`, like what you wrote, what happened, etc.

to give you an idea of what this file might look like, here's the start of mine that got full credit:

ks notes

INITIAL SETUP

used create-react-app to initialize the directory and install react

following the directions, created `index.js`, `App.js`, and `styles.css` with the template source code initially given

the initial code just rendered a single X, so i duplicated it a lot of times to render an actual tic-tac-toe board

i then did some refactoring by renaming the current component to `Board` and moving the `button`s back to their own component with a prop for their value ```jsx function Square({ value }) { return <button className="square">{value}</button>; } ```

you don't have to write it exactly as i did, or even do what i did in those notes!
the excerpt is just to give you a bit of an idea for what it might look like

ok this one actually takes work

now eggert asks you to make some stupid alternate version of tic tac toe called "chorus lapilli"
it's like that game, except for these two things:

after your first 3 moves, instead of adding further pieces you have to instead move one of your existing pieces to an adjacent empty square
the move can be up, down, left, right, or diagonal
if it's your turn AND you have three pieces on the board AND one of your pieces is in the center square, your move must either win or vacate the center square

if you want an example of an app that got full credit, i actually managed to deploy my work for this assignment to this silly little url

the time travel feature is optional, but i found implementing it to be a pretty fun exercise

unfortunately, you do have to do that stupid lab notebook thing in `chorus-lapilli.txt`
but you don't have to restart from scratch! i believe you can just say something like "starting off from that tic tac toe project i built..." and that'll work

another thing is, at least for my quarter the notes were worth like 10% of this assignment's grade
so don't stress if you can't write them in time haha

some guidelines the TAs gave

`npm start` should start your app (yeah obviously)
the game should prevent invalid moves
some text should be shown on the screen when a winning move is made
no popups, `alert`, new tabs, etc.

unit tests which they retconned for winter i'm still mad

take a gander at this testing script
it does need selenium, which you can install with this command here: ```bash pip install selenium # wow, that was easy ```

but uh yeah, add 3 new tests to the section labelled "ADD YOUR TESTS HERE"

be sure to prefix all your tests with `test_`! for example, one of my testing functions goes something like this ```py def test_redundant_click(self): """Check that clicking a tile twice doesn't change its value.""" pass # testing code goes down here ```

since the seasnet servers don't have browsers, this is one of those rare things that you can't do on seasnet

instead, put the file they gave in the root of your `chorus_lapilli` project or whatever you called it and execute it (`python3` or `./`, either is fine) to test your project!

what to turn in

alright so first you have to make sure all the files in the project are present
i did a `tree` command at the root of my project and got this stuff (excluding `.node_modules`): ``` . ├── chorus-lapilli.txt ├── package.json ├── package-lock.json ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt ├── src │ ├── App.js │ ├── index.js │ └── styles.css ├── test_chorus_lapilli.py └── tic-tac-toe.txt ```

please don't worry if your file structure doesn't match this exactly! just make sure of the following:

that `npm start` can start your project successfully (check on the seasnet servers!)
you have these files named exactly at the root of the project:
- `tic-tac-toe.txt`
- `chorus-lapilli.txt`
- `test_chorus_lapilli.py`- why this one uses underscores, i have no idea

then, run this command in the project directory ```bash npm pack ``` it should generate a neatly packaged `.tgz` file- just rename that lil thing `chorus-lapilli.tgz` and you're gtg!