-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
85 lines (77 loc) · 2.5 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<html>
<head>
<title>
Bartero's first idea app - tic tac toe!
</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="TypographyCheatsheet">
<a href="https://www.supremo.tv/typeterms" target="_blank"><img src="https://www.supremo.tv/typeterms/press-kit/screenshots2.jpg" border="0" width="534" height="280" /></a><br /><span style="font-size: 12px;">Type Terms is the perfect tool for designers to learn the basics of typographic terminology. If you are new to typography or here to refresh your memory, then Type Terms is perfect for you. (via <a href="https://www.supremo.tv">Supremo.tv</a>).</span>
</div>
<div id="app">
<tic-tac-toe-board v-bind:board="board">
</tic-tac-toe-board>
</div>
<script>
Vue.component('tic-tac-toe-tile', {
props: ['tile'],
template: `
<div class="tile" v-on:click="toggle">
{{tile.value}}
</div>
`,
methods: {
toggle: function () {
const VALUES = ['', 'X', 'O'];
function nextValue(array, currentValue) {
let index = array.indexOf(currentValue);
if (index === -1) {
return undefined;
}
index++;
if(index === array.length) {
index = 0;
}
return array[index];
}
this.tile.value = nextValue(VALUES, this.tile.value);
console.log('this', this);
// console.log('currentPlayer', currentPlayer);
}
}
});
Vue.component('tic-tac-toe-board', {
props: ['board'],
template: `
<div class="board">
<tic-tac-toe-tile
v-for="tile in board.tiles"
v-bind:tile="tile"
>
</tic-tac-toe-tile>
</div>`
});
let app = new Vue({
el: "#app",
data: {
board: {
tiles: [
{value: 'X'}, {value: ''}, {value: 'O'},
{value: 'X'}, {value: 'O'}, {value: ''},
{value: 'X'}, {value: ''}, {value: ''}
]
},
currentPlayer: 'O'
},
methods: {
dosth: function() {
console.log('do something!');
return 'this is something!';
}
}
});
</script>
</body>
</html>