Added beginnings of Vue solution

README.md

@@ -118,3 +118,135 @@ export interface GameConfig {
 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.
+
+## Solving this with Vue
+
+A worked solution can be found on the `vue-solution` branch of this repository. To check out the code, you could run `git checkout vue-solution`. But let's talk you through it.
+
+### Getting Vue in there
+
+First, let's get Vue rendering something, even if just Hello World. 
+
+In index.html, create a div that Vue can render to. Let's put this above the svg for the game:
+
+```html
+<div id="app"></div>
+```
+
+And inside index.ts, let's import Vue and render something to that div
+
+```ts
+import Vue from "vue";
+```
+
+```ts
+let v = new Vue({
+    el: "#app",
+    template: `
+      <div>
+        Hello {{ name }}
+      </div>
+    `,
+    data: {
+        name: "Vue"
+    }
+})
+```
+
+Reload, and check we get "Hello Vue" appearing. If so, good -- Vue is working, can compile templates, and we can progress.
+
+### Defining a ConfigView
+
+Let's create a new TypeScript file `gameConfig.ts` to define a component in.
+
+First, let's bring our definition of a game config here:
+
+```ts
+interface GameConfig {
+    w:number 
+    h:number 
+    started:boolean 
+    created:boolean
+    period:number 
+}
+```
+
+Next, we'll import Vue and Component:
+
+```ts
+import Vue from "vue"
+import Component from 'vue-class-component'
+```
+
+And then let's start defining the component. This is going to take a GameConfig as a prop, and is going to alter its fields
+
+```ts
+@Component({
+    props: {
+        config: Object as () => GameConfig
+    },
+    template: `
+      <div>
+        This will render a game config
+      </div>
+    `
+})
+class ConfigView extends Vue {
+
+    config!: GameConfig
+
+    constructor() {
+        super()
+        console.log("a new config view was placed")
+    }
+
+}
+```
+
+I've included a constructor this time, so we can see in the console that we've tried to add the component.
+
+Now, we're going to need to export the definitions of `GameConfig` and `ConfigView`:
+
+```ts
+export { 
+    GameConfig as GameConfig,
+    ConfigView as ConfigView
+}
+```
+
+In `index.ts`, let's import our definitions:
+
+```ts
+import { ConfigView, GameConfig } from "./gameConfig"
+```
+
+Now we should be able to create a config (notice we're using TypeScript's structural typing here):
+
+```ts
+let config:GameConfig = {
+    w: 40,
+    h: 20,
+    started: false,
+    created: false,
+    period: 500
+}
+```
+
+And we should be able to alter our invocation of Vue to use our new component (don't forget to include it in the components section at the bottom):
+
+```ts
+let v = new Vue({
+    el: "#app",
+    template: `
+      <div>
+        <ConfigView :config="config"></ConfigView>
+      </div>
+    `,
+    data: {
+        config: config
+    },
+    components: {
+        ConfigView
+    }
+})
+```