Skip to content
Snippets Groups Projects
Commit 71a41bdf authored by Will Billingsley's avatar Will Billingsley
Browse files

Merge branch 'master' into vue-solution

parents 6d518463 2bd13ef8
No related branches found
No related tags found
No related merge requests found
......@@ -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
}
})
```
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment