Tic-Tac-Toe/script.js at main · Awesome-Prince/Tic-Tac-Toe · GitHub

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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
let state = {
  grid: _.map(_.range(0, 9), index => {
    return { index, figure: -1 };
  }),
  myTurn: false };


const appState = _.cloneDeep(state);

const block = Vue.component('block', {
  name: 'block',

  template: '#block',

  props: {
    figure: {
      type: Number,
      default: -1 } },


  computed: {
    fig() {
      return this.figure === 0 ? 'O' : 'X';
    } },


  data() {
    return {
      selected: false };

  },

  methods: {
    enter(el, done) {
      TweenMax.from(el, 1, {
        autoAlpha: 0,
        scale: 0,
        ease: Elastic.easeOut.config(1.25, 0.5),
        onComplete: done });

    } } });


const win = Vue.component('win', {
  name: 'win',
  template: '#win',
  props: {
    clickHandler: {
      type: Function,
      default: null } } });


const app = new Vue({
  name: 'app',

  el: '#app',

  data() {
    return state;
  },

  components: {
    block },


  computed: {
    winner() {
      const wins = ['012', '036', '345', '147', '258', '678', '048', '246'];
      const grid = this.grid;
      const player = this.myTurn ? 0 : 1;
      const moves = _.reduce(this.grid, (result, value, index) => {
        if (value.figure === player) {
          result.push(index);
        }

        return result;
      }, []);

      return !!_.find(wins, win => {
        const combination = _.map(win.split(''), n => parseInt(n));
        console.log('combination', combination, moves);

        return _.difference(combination, moves).length === 0;
      });
    } },


  methods: {
    select(index) {
      const { figure } = this.grid[index];

      if (figure > -1) {
        return;
      }

      this.grid[index].figure = this.myTurn ? 1 : 0;
      this.myTurn = !this.myTurn;
    },

    restart() {
      this.grid = appState.grid;
      this.myTurn = appState.myTurn;
    },

    enter(el, done) {
      TweenMax.from(el, 1, {
        autoAlpha: 0,
        scale: 0,
        ease: Elastic.easeOut.config(1.25, 0.5) });

    },

    enterWin(el) {
      TweenMax.from(el, 1, {
        autoAlpha: 0,
        scale: 0,
        ease: Elastic.easeOut.config(1.25, 0.5) });

    } } });