# Tutorial 5

We're going to keep making the tutorials smaller, letting them
transition to being more like worked examples. Why? Because for
most students, it'll be more productive for you to work on your
projects.

The challenge for this tutorial is to build some controls, using
Vue or React, that will let you set up a Conway's Game of Life game.

## Clone the code

First, get the code and put it somewhere you can load it in your browser. 

To get the code, open a terminal, `cd` into the public directory of whichever webserver you are using, and:

```sh
git clone https://gitlab.une.edu.au/cosc360in2018/tutorial-conway-life-t5.git
```

This will clone this code using the git version control system. That will, amongst other things, let you switch between different branches (eg, the solution and the start of the exercise)

## Check it's working

Open `index.html` in the browser, and you should find yourself faced with Conway's Game of Life from Tutorial 4.

## Install loaders for Vue or React

The repository contains all the code from the previous tutorial, but not a copy of `node_modules` which would be too large. Let's make NPM go and get all the modules we've already declared in `packages.json`:

```sh
npm install
```

And before we go any further, let's put webpack into development mode. In `webpack.config.js`, at the top of `module.exports`, set:

```js
  mode: 'development',
```

If you're using Vue, install the modules for vue:

```sh
npm install --save-dev vue vue-class-component vue-property-decorator
```

You'll also need to alter `webpack.config.js` to load the version of Vue that includes the template compiler. Change the `resolve` block to:

```js
  resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  },
```

If you're using React, though, you'll need to install the modules for react:

```sh
npm install --save react react-dom @types/react @types/react-dom
```

and edit `tsconfig.json` to tell TypeScript to target React as the Virtual DOM for `.tsx` files

```json
    {
        "compilerOptions": {
            "outDir": "./built/",
            "sourceMap": true,
            "strict": true,
            "noImplicitReturns": true,
            "module": "es2015",
            "moduleResolution": "node",
            "target": "es5",
            "experimentalDecorators": true,
            "jsx": "react"
        },
        "include": [
            "./src/**/*"
        ]
    }
```

### Now the challenge

It might be useful to get ready for development by telling npm to watch our project for changes, and rebuild it automatically:

    ```sh
    npm run build -- --watch
    ```

The challenge:

Using *either* React or Vue, create a small block that will let us set up the Game of Life game. We're going to keep the game itself rendered through d3, showing how they exist on the page, but this should have:

* Fields for how many columns and rows you want
* A button that when clicked will create the game (and trigger d3 to rerender it)
* A field for how long (in ms) each tick should be -- default it to 500
* A button that will toggle whether the tick-timer is started or not. This button should only be enabled when the game has been created.

For this exercise, we're not going to put the d3-rendered game inside the element controlled by Vue or React -- we'll just have them co-exist in different elements on the same page.

### How to go about this

As is typical, I'd recommend you start just by working out the data structure for what you want to render. Looking at the requirements above, something like this seems appropriate:

```ts
export interface GameConfig {
    w:number
    h:number
    started:boolean
    created:boolean
    period:number
}
```

The next task I would suggest is just creating this object and rendering it to a little UI using your chosen framework. That'll let you fiddle around with the layout.

Then, wire up the functionality. Note that you'll probably need to change `life`. At the moment, it's a constant in that file. You will probably want it to be a variable that can be set by calling a function.