play.component.ts 8.55 KB
Newer Older
liujiaxin's avatar
liujiaxin committed
1
import { Component, ChangeDetectorRef, ApplicationRef, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener, OnChanges } from '@angular/core';
limingzhe's avatar
limingzhe committed
2

liujiaxin's avatar
1  
liujiaxin committed
3
import * as _ from 'lodash';
limingzhe's avatar
limingzhe committed
4

liujiaxin's avatar
1  
liujiaxin committed
5
import { BaseResizeComponent } from './base-resize.component';
limingzhe's avatar
limingzhe committed
6 7 8



liujiangnan's avatar
liujiangnan committed
9 10 11 12

@Component({
  selector: 'app-play',
  templateUrl: './play.component.html',
liujiaxin's avatar
1  
liujiaxin committed
13
  styleUrls: ['./play.component.scss']
liujiangnan's avatar
liujiangnan committed
14
})
liujiaxin's avatar
1  
liujiaxin committed
15 16
export class PlayComponent extends BaseResizeComponent implements OnInit {
  saveKey = 'ww_matching_cards';
liujiaxin's avatar
liujiaxin committed
17 18
  @ViewChild('canvas', {static: true }) canvas: ElementRef;
  @ViewChild('wrap', {static: true }) wrap: ElementRef;
limingzhe's avatar
limingzhe committed
19

limingzhe's avatar
limingzhe committed
20 21
  // 数据
  data;
liujiaxin's avatar
1  
liujiaxin committed
22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37
  @ViewChild('itemContainer')
  itemContainer: ElementRef;
  cardsArray: Array<{
    pic_id: number,
    word: string
  }>;
  cols = 1;
  rows = 0;
  all = [];

  pairNode = [];

  ANIMATING = false;
  rightAudio = new Audio();
  wrongAudio = new Audio();

liujiaxin's avatar
liujiaxin committed
38
  constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
liujiaxin's avatar
1  
liujiaxin committed
39
    super();
liujiaxin's avatar
liujiaxin committed
40
    this.rightAudio.src = 'assets/right.mp3';
liujiaxin's avatar
1  
liujiaxin committed
41
    this.rightAudio.load();
liujiaxin's avatar
liujiaxin committed
42
    this.wrongAudio.src = 'assets/wrong.mp3';
liujiaxin's avatar
1  
liujiaxin committed
43
    this.wrongAudio.load();
limingzhe's avatar
limingzhe committed
44 45
  }

limingzhe's avatar
limingzhe committed
46
  ngOnInit() {
liujiaxin's avatar
liujiaxin committed
47 48 49 50 51 52 53 54 55 56 57
    this.data = {
      contentObj: {
        cards: [{
          pic_id: 'http://staging-teach.cdn.ireadabc.com/8257ac52af8d8201931d08aafe9de685.png',
          word: 'aaaaa'
        }, {
          pic_id: 'http://staging-teach.cdn.ireadabc.com/dae252625e5fc37e992c8e1d4c8f0ad6.png',
          word: 'bbbbbb'
        }]
      }
    };
limingzhe's avatar
limingzhe committed
58

limingzhe's avatar
limingzhe committed
59
    // 获取数据
liujiaxin's avatar
1  
liujiaxin committed
60
    const getData = ( window as any).courseware.getData;
limingzhe's avatar
limingzhe committed
61
    getData((data) => {
liujiaxin's avatar
liujiaxin committed
62
      console.log('getData', data);
liujiaxin's avatar
1  
liujiaxin committed
63
      if (data && typeof data === 'object') {
limingzhe's avatar
limingzhe committed
64 65
        this.data = data;
      }
liujiaxin's avatar
1  
liujiaxin committed
66
      this.dataChange();
liujiaxin's avatar
liujiaxin committed
67 68 69
      this.changeDetectorRef.markForCheck();
      this.changeDetectorRef.detectChanges();
      this.refresh();
liujiaxin's avatar
liujiaxin committed
70 71 72
      if (window['air']) {
        window['air'].hideAirClassLoading(this.saveKey, this.data);
      }
liujiaxin's avatar
1  
liujiaxin committed
73
    }, this.saveKey);
limingzhe's avatar
limingzhe committed
74
  }
liujiaxin's avatar
liujiaxin committed
75

liujiaxin's avatar
liujiaxin committed
76 77 78 79 80
  refresh() {
    setTimeout(() => {
      this.appRef.tick();
    }, 1);
  }
liujiaxin's avatar
1  
liujiaxin committed
81 82
  dataChange() {
    this.cardsArray = _.get(this.data, 'contentObj.cards', []);
limingzhe's avatar
limingzhe committed
83

liujiaxin's avatar
1  
liujiaxin committed
84 85 86 87
    const tmp = [];
    this.cardsArray.map( item => {
      tmp.push({type: 'word', word: item.word});
      tmp.push({type: 'pic', word: item.word, pic_id: item.pic_id});
limingzhe's avatar
limingzhe committed
88
    });
liujiaxin's avatar
1  
liujiaxin committed
89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107
    this.all = this.shuffle(tmp);
    if (this.all.length <= 2) {
      this.cols = 2;
      this.rows = 1;
    } else if (this.all.length > 2 && this.all.length <= 4) {
      this.cols = 2;
      this.rows = 2;
    } else if (this.all.length > 4 && this.all.length <= 6) {
      this.cols = 3;
      this.rows = 2;
    } else if (this.all.length > 6 && this.all.length <= 8) {
      this.cols = 3;
      this.rows = 3;
    } else if (this.all.length > 8 && this.all.length <= 12) {
      this.cols = 4;
      this.rows = 3;
    } else if (this.all.length > 12 && this.all.length <= 16) {
      this.cols = 4;
      this.rows = 4;
limingzhe's avatar
limingzhe committed
108 109 110
    }
  }

liujiaxin's avatar
1  
liujiaxin committed
111 112 113 114 115
  shuffle(array) {
    array = array.concat();
    let i = 0
      , j = 0
      , temp = null;
limingzhe's avatar
limingzhe committed
116

liujiaxin's avatar
1  
liujiaxin committed
117 118 119 120 121
    for (i = array.length - 1; i > 0; i -= 1) {
      j = Math.floor(Math.random() * (i + 1));
      temp = array[i];
      array[i] = array[j];
      array[j] = temp;
limingzhe's avatar
limingzhe committed
122
    }
liujiaxin's avatar
1  
liujiaxin committed
123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217
    return array;
  }
  toggleCardOpenClose(item) {
    if (!item.opened && item.classList.contains('flip-out')) {
      // console.log('open card', item)
      item.querySelector('.back').style.visibility = 'hidden';
      item.querySelector('.k-full-fill').style.display = 'flex';
      item.querySelector('.k-full-fill').style.visibility = 'visible';
      item.classList.remove('flip-out');
      item.classList.add('flip-in');
      item.opened = 1;
    } else if (item.opened === 1 && item.classList.contains('flip-out')) {
      // console.log('close card', item)
      item.querySelector('.back').style.visibility = 'visible';
      item.querySelector('.k-full-fill').style.display = 'none';
      this.removeNodeFromPair(item);
      item.classList.remove('flip-out');
      item.classList.add('flip-in');
      item.opened = 0;
    } else if (item.classList.contains('flip-in')) {
      // console.log('fliping end', item)
      item.fliping = false;
      // console.log(' ````````````````````', this.pairNode.length);
      if (this.pairNode.length === 2) {
        // console.log('current open two card', item)
        if (this.pairNode[0].word === this.pairNode[1].word &&
          this.pairNode[0].type !== this.pairNode[1].type) {
          const a = this.pairNode[0];
          const b = this.pairNode[1];
          // console.log('card match right', [a, b])
          if (a && b) {
            this.rightAudio.pause();
            this.rightAudio.currentTime = 0;
            setTimeout(() => {
              this.rightAudio.play();
            });
          }

          // console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~', this.pairNode.length)
          setTimeout(() => {
            // try {

            // console.log(123123, [a, b], this.ANIMATING)
            if (a) {
              // console.log('hide a', a);
              // a.style.visibility = 'hidden';
              this.removeNodeFromPair(a , true);
            }
            if (b) {
              // console.log('hide b', b);
              // b.style.visibility = 'hidden';
              this.removeNodeFromPair(b , true);
            }


            // } catch (e) {
            //   debugger
            // }
            // item.style.visibility = 'hidden';
            // console.log('hide', item);
            // this.pairNode = [];
            // item.action = 'close'
            // this.removeNodeFromPair(item, true);
          }, 500);
        } else {
          // console.log('two cards not match', item)

          // console.log(1111, this.pairNode[0].opened, this.pairNode[1].opened )
          if (this.pairNode.length &&  this.pairNode[0].opened && this.pairNode[1].opened) {
            this.wrongAudio.pause();
            this.wrongAudio.currentTime = 0;
            setTimeout(() => {
              this.wrongAudio.play();
            });
            // console.log('close not match cards', item)
            const a = this.pairNode[0];
            const b = this.pairNode[1];
            setTimeout(() => {

              // console.log('wrong close card', a.opened, b.opened, this.pairNode.length);

              if (a.opened) {
                this.doFlipCard(a, 'close');
              }
              if (b.opened) {
                this.doFlipCard(b, 'close');
              }
            }, 500);
          }
          // this.pairNode = [];
          this.removeNodeFromPair(item);
        }
      } else {
        // console.log('card opened not pair', this.ANIMATING, item)
        this.removeNodeFromPair(item);
limingzhe's avatar
limingzhe committed
218 219 220
      }
    }
  }
liujiaxin's avatar
1  
liujiaxin committed
221 222 223 224 225 226 227 228 229 230 231
  removeNodeFromPair(item , force = false   /*item, force?: bool*/) {
    // console.log(item, item.action)
    if (force || item.action === 'close') {
      const idx = this.pairNode.indexOf(item);
      if (idx > -1) {
        this.pairNode.splice(idx, 1);
      }
      if (this.pairNode.length === 0) {
        // console.log('set animating to false')
        this.ANIMATING = false;
      }
limingzhe's avatar
limingzhe committed
232 233
    }
  }
liujiaxin's avatar
1  
liujiaxin committed
234 235 236 237 238 239 240
  doFlipCard(item, act) {
    item.classList.remove('flip-in', 'flip-out');
    if (!item.hasListener) {
      item.addEventListener('animationend', () => {
        this.toggleCardOpenClose(item);
      }, false);
      item.hasListener = true;
limingzhe's avatar
limingzhe committed
241
    }
liujiaxin's avatar
1  
liujiaxin committed
242 243 244 245 246 247 248 249 250 251
    item.action = act;
    // console.log(act, item.opened, item.classList);
    if (act === 'open' && !item.opened) {
      // item.opened = 1;
      // console.log(item, item.opened);
      item.classList.add('flip-out');
    } else if (act === 'close' && item.opened) {
      // item.opened = 0;

      item.classList.add('flip-out');
limingzhe's avatar
limingzhe committed
252 253 254 255
    }

  }

liujiaxin's avatar
1  
liujiaxin committed
256 257 258 259 260
  flipCard(evt, type, word) {
    // if (this.MODE !== 'IDLE' && this.MODE !== 'ONE') {
    //   return;
    // }
    if (this.ANIMATING) {
limingzhe's avatar
limingzhe committed
261 262
      return;
    }
liujiaxin's avatar
1  
liujiaxin committed
263 264 265 266 267
    this.rightAudio.pause();
    this.rightAudio.currentTime = 0;
    // this.rightAudio.play();
    setTimeout(() => {
      this.rightAudio.play();
limingzhe's avatar
limingzhe committed
268
    });
liujiaxin's avatar
1  
liujiaxin committed
269 270
    const item = evt.currentTarget;
    if (item.fliping) {
limingzhe's avatar
limingzhe committed
271 272
      return;
    }
liujiaxin's avatar
1  
liujiaxin committed
273
    if (this.pairNode.length === 2) {
limingzhe's avatar
limingzhe committed
274 275
      return;
    }
liujiaxin's avatar
1  
liujiaxin committed
276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292
    item.fliping = true;
    item.type = type;
    item.word = word;
    if (this.pairNode.length === 0) {
      this.pairNode[0] = item;
      // do open card
      this.doFlipCard(item, 'open');
    } else if (this.pairNode.length === 1) {
      if (this.pairNode[0] === item) {
        // close selected card
        this.doFlipCard(item, 'close');
      } else {
        this.pairNode[1] = item;
        // open another card
        this.doFlipCard(item, 'open');
        // this.ANIMATING = true;
      }
limingzhe's avatar
limingzhe committed
293
    }
limingzhe's avatar
limingzhe committed
294 295
  }

limingzhe's avatar
limingzhe committed
296 297


liujiangnan's avatar
liujiangnan committed
298
}