diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index b37f2f2045e2ed80f8b94bc5d4af67ce06a9da1f..bef2a73dd8992c974ce157d1b68d3293efe1f8b1 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -1,14 +1,245 @@
-<div class="courseware-container d-flex">
 
-  <div class="gutter" style="width: 100%;">
-    <app-lesson-title-config
-      (titleUpdated)="updateTitleObjSuccess($event)"
-      [withIcon]="false"
-      [titleObj]="titleObj">
-    </app-lesson-title-config> 
- 
+<div class="model-content">
+
+
+
+
+  <div *ngFor="let it of picArr; let i = index"
+  nz-col nzSpan="8" >
+
+
+
+    <div class="item-box">
+
+
+      <app-upload-image-with-preview
+        style="width: 100%"
+        [picUrl]="it.pic_url"
+        (imageUploaded)="onImageUploadSuccessByItem($event, it)"
+      ></app-upload-image-with-preview>
+
+
+
+      <div style="display: flex; justify-items: center; padding-top: 10px">
+        <app-audio-recorder
+          [audioUrl]="it.audio_url"
+          (audioUploaded)="onAudioUploadSuccessByItem($event, it)">
+        </app-audio-recorder>
+
+        <button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">
+          <i nz-icon type="close"></i>
+        </button>
+      </div>
+
+    </div>
+
+    <!--<h5> id-{{i+1}} </h5>-->
+
+    <!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
+    <!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
+    <!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
+    <!--<i nz-icon type="close"></i>-->
+    <!--</button>-->
+    <!--</div>-->
+
+
+    <!--<app-upload-image-with-preview-->
+    <!--style="width: 100%"-->
+    <!--[picUrl]="it.pic_url"-->
+    <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
+    <!--&gt;</app-upload-image-with-preview>-->
+
+
+    <!--<div style="display: flex; align-items: center; justify-content: center">-->
+
+    <!--<span style="width: 80px;">-->
+    <!--question:-->
+    <!--</span>-->
+    <!--<app-audio-recorder-->
+    <!--[audioUrl]="it['q_audio_url']"-->
+    <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
+    <!--</app-audio-recorder>-->
+
+    <!--</div>-->
+
+    <!--<div style="display: flex; align-items: center; justify-content: center">-->
+
+    <!--<span style="width: 80px;">-->
+    <!--answer:-->
+    <!--</span>-->
+    <!--<app-audio-recorder-->
+    <!--[audioUrl]="it['a_audio_url']"-->
+    <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
+    <!--</app-audio-recorder>-->
+
+    <!--</div>-->
+
+
+
+    <!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
+    <!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
+    <!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
+    <!--</nz-radio-group>-->
+
 
-    <nz-divider></nz-divider>
   </div>
 
+
+
+  <div nz-col nzSpan="8" class="add-btn-box" >
+
+    <!--<div style="width: 100%; height: 100%;">-->
+    <button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"
+            (click)="addPic()">
+      <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
+      Add
+    </button>
+    <!--</div>-->
+
+
+
+  </div>
+
+
+
+
+
+
+
+
+
+
+  <!--<div style="padding-bottom: 30px;">-->
+
+    <!--<h5> title-sound: </h5>-->
+    <!--<app-audio-recorder-->
+      <!--[audioUrl]="item.contentObj.title_audio_url"-->
+      <!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">-->
+    <!--</app-audio-recorder>-->
+
+  <!--</div>-->
+
+
+  <!--<div style="padding-bottom: 30px;">-->
+
+    <!--<h5> bg-sound: </h5>-->
+    <!--<app-audio-recorder-->
+      <!--[audioUrl]="item.contentObj.bg_audio_url"-->
+      <!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">-->
+    <!--</app-audio-recorder>-->
+
+  <!--</div>-->
+
+  <!--<span style="margin-bottom: 20px"> 10 : 23 </span>-->
+
+  <!--<div *ngFor="let it of picArr; let i = index">-->
+
+
+    <!--<span> pic-{{i + 1}}: </span>-->
+    <!--<div style="display: flex; align-items: center; padding-bottom: 20px">-->
+
+      <!--<div style="width: 40%; padding-right: 20px">-->
+        <!--<app-upload-image-with-preview-->
+          <!--[picUrl]="it.pic_url"-->
+          <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
+        <!--&gt;</app-upload-image-with-preview>-->
+      <!--</div>-->
+
+      <!--<div  class="pic-sound-box">-->
+
+        <!--<div nz-row style="width: 50%; padding-bottom: 20px;">-->
+
+          <!--<div *ngFor="let it2 of it.soundArr; let i2 = index"  nz-col nzSpan="8">-->
+            <!--<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>-->
+          <!--</div>-->
+
+        <!--</div>-->
+
+        <!--<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">-->
+          <!--<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>-->
+          <!--<app-audio-recorder-->
+            <!--[audioUrl]="it2.audio_url"-->
+            <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">-->
+          <!--</app-audio-recorder>-->
+        <!--</div>-->
+
+      <!--</div>-->
+
+
+    <!--</div>-->
+
+  <!--</div>-->
+
+
+
+  <!--<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">-->
+
+
+    <!--<div *ngFor="let it of picArr; let i = index"-->
+         <!--nz-col nzSpan="8" >-->
+
+      <!--<div class="item-box">-->
+
+
+        <!--<h5> id-{{i+1}} </h5>-->
+
+        <!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
+          <!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
+          <!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
+            <!--<i nz-icon type="close"></i>-->
+          <!--</button>-->
+        <!--</div>-->
+
+
+        <!--<app-upload-image-with-preview-->
+          <!--style="width: 100%"-->
+          <!--[picUrl]="it.pic_url"-->
+          <!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
+        <!--&gt;</app-upload-image-with-preview>-->
+
+
+        <!--<div style="display: flex; align-items: center; justify-content: center">-->
+
+          <!--<span style="width: 80px;">-->
+            <!--question:-->
+          <!--</span>-->
+          <!--<app-audio-recorder-->
+            <!--[audioUrl]="it['q_audio_url']"-->
+            <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
+          <!--</app-audio-recorder>-->
+
+        <!--</div>-->
+
+        <!--<div style="display: flex; align-items: center; justify-content: center">-->
+
+          <!--<span style="width: 80px;">-->
+            <!--answer:-->
+          <!--</span>-->
+          <!--<app-audio-recorder-->
+            <!--[audioUrl]="it['a_audio_url']"-->
+            <!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
+          <!--</app-audio-recorder>-->
+
+        <!--</div>-->
+
+
+
+        <!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
+          <!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
+          <!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
+        <!--</nz-radio-group>-->
+
+
+      <!--</div>-->
+
+
+
+
+  <!--</div>-->
+
+
+
+
+
+
 </div>
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index cc662741d1bbb3e2be7dac4454b122678e529481..fe8f5f4ec40ed32051afb9c811f77fb0b780ba11 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -1,20 +1,54 @@
 @import '../style/common_mixin';
 
-.tw{
-  display: flex;
-  .t{
-    flex: 1 1 auto;
-    margin-right: 2rem;
+
+.model-content {
+  width: 100%;
+  height: 100%;
+
+
+
+
+
+
+  .item-box{
+
+    width: 100%;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    flex-direction: column;
+
+    padding: 10px;
+    padding-bottom: 5vw;
+    padding-top: 5vw;
   }
-  .a{
+
+
+  .pic-sound-box {
+    width: 50%;
+    display: flex;
+    //align-items: center;
+    flex-direction: column
+  }
+
+
+  .add-btn-box {
+
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    //width: 180px;
+    height: 20vw;
+    //background: #FFDC00;
+
+    padding: 10px;
+    padding-top: 5vw;
+
 
   }
 
-}
 
-.aud-w{
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  margin-top: 1.5rem;
 }
diff --git a/src/app/form/form.component.ts b/src/app/form/form.component.ts
index 5a0d1f1c2436f83698f4c312442ec789182fdfbd..166f73602f7076d0d7ff5bcea8564c99175242e8 100644
--- a/src/app/form/form.component.ts
+++ b/src/app/form/form.component.ts
@@ -1,5 +1,6 @@
 import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef} from '@angular/core';
-import * as _ from 'lodash'; 
+
+
 
 @Component({
   selector: 'app-form',
@@ -8,58 +9,201 @@ import * as _ from 'lodash';
 })
 export class FormComponent implements OnInit, OnChanges, OnDestroy {
 
-  // titleObj = {
-  //   audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3',
-  //   content: 'what is this?&nbsp;',
-  //   icons: [],
-  //   type: 'a'
-  // }; 
+  picArr = [];
+
+  _item: any;
+
+
+  KEY = 'hw_000';
 
-  titleObj = {
-    audio_url: '',
-    content: '',
-    icons: [],
-    type: ''
-  };
 
-  teststr = "";
 
-  constructor(private appRef: ApplicationRef) {  
 
+
+  // @Input()
+  set item(item) {
+    this._item = item;
+    // this.init();
+
+  }
+  get item() {
+    return this._item;
   }
 
+  @Output()
+  update = new EventEmitter();
+
+
+
+  constructor(private appRef: ApplicationRef) {
+
+  }
+
+
   ngOnInit() {
-    let _this = this; 
-    (<any>window).courseware.getData(function(data){ 
-      if(data){
-        _this.titleObj = data;
-        setTimeout(() => {
-          _this.appRef.tick();
-        }, 1); 
-      } 
-    });
-    
-  } 
 
+    this.item = {};
+    this.item.contentObj = {};
+
+    const getData = (<any> window).courseware.getData;
+    getData((data) => {
+
+      if (data) {
+        this.item = data;
+      } else {
+        this.item = {};
+      }
+
+      if ( !this.item.contentObj ) {
+        this.item.contentObj = {};
+      }
+
+      console.log('~data:', data);
+      this.init();
+      this.refresh();
+
+    }, this.KEY);
+
+    // this.initData();
+  }
   ngOnChanges() {
+
   }
 
   ngOnDestroy() {
+  }
+
+
+  init() {
+
+    if (this.item.contentObj.picArr) {
+      this.picArr = this.item.contentObj.picArr;
+    } else {
+      this.picArr = this.getDefaultPicArr();
+      this.item.contentObj.picArr = this.picArr;
+    }
+
+    console.log('item:' , this.item);
+    // this.picArr = this.getDefaultPicArr();
+    // this.item.contentObj.picArr = this.picArr;
+    // console.log('this.item:;', this.picArr);
+
+  }
+
+  getDefaultPicArr() {
+    const arr = [];
+    // for (let i = 0; i < 4; i ++) {
+    //   const data = {};
+    //   data['pic_url'] = '';
+    //
+    //   const soundArr = [];
+    //   for (let i = 0; i < 3; i++) {
+    //     const tmpData = {};
+    //     tmpData['answer'] = false;
+    //     tmpData['audio_url'] = '';
+    //     soundArr.push(tmpData);
+    //   }
+    //   data['soundArr'] = soundArr;
+    //
+    //   arr.push(data);
+    // }
+
+    return arr;
+  }
+
+
+
+  initData() {
+
 
   }
 
-  updateTitleObjSuccess(titleObj) {
-    this.titleObj = titleObj;
+
+  deleteItem(data) {
+    const index = this.picArr.indexOf(data);
+    if (index !== -1) {
+      this.picArr.splice(index, 1);
+    }
+
+    // this.update.emit(this.item);
     this.save();
   }
 
-  onTitleAudioUploadSuccess(res) {
-    this.titleObj.audio_url = res.url;
+
+
+
+
+
+
+  onImageUploadSuccessByItem(e, item, id = null) {
+
+    if (id != null) {
+      item[id + '_pic_url'] = e.url;
+    } else {
+      item.pic_url = e.url;
+    }
+
     this.save();
+    // this.update.emit(this.item);
+
+    // console.log('this.item: ', this.item);
   }
 
-  save() { 
-    (<any>window).courseware.setData(this.titleObj);
+
+
+
+  onAudioUploadSuccessByItem(e, item, id = null) {
+
+    if (id != null) {
+      item[id + '_audio_url'] = e.url;
+    } else {
+      item.audio_url = e.url;
+    }
+    // this.update.emit(this.item);
+    this.save();
+  }
+
+
+
+  addPic() {
+    this.picArr.push({
+      pic_url: '',
+      audio_url: '',
+      // text: '',
+      // radioValue: 'A'
+    });
+
+    this.saveItem();
+  }
+
+  radioClick(it, radioValue) {
+    it.radioValue = radioValue;
+
+    this.saveItem();
+  }
+
+  clickCheckBox() {
+    console.log(' in clickCheckBox');
+    this.saveItem();
+  }
+
+
+  saveItem() {
+    // this.update.emit(this.item);
+    this.save();
+  }
+
+
+  save() {
+    (<any> window).courseware.setData(this.item, null, this.KEY);
+    this.refresh();
+  }
+
+  refresh() {
+    setTimeout(() => {
+      this.appRef.tick();
+    }, 1);
   }
 
 }
+
diff --git a/src/app/play/Unit.ts b/src/app/play/Unit.ts
new file mode 100644
index 0000000000000000000000000000000000000000..6553101eb784c9a45ad195e67ac9ebdf91ef5d82
--- /dev/null
+++ b/src/app/play/Unit.ts
@@ -0,0 +1,1545 @@
+
+import TWEEN from '@tweenjs/tween.js';
+
+
+
+class Sprite {
+  x = 0;
+  y = 0;
+  color = '';
+  radius = 0;
+  alive = false;
+  margin = 0;
+  angle = 0;
+  ctx;
+
+  constructor(ctx = null) {
+    if (!ctx) {
+      this.ctx = window['curCtx'];
+    } else {
+      this.ctx = ctx;
+    }
+  }
+  update($event) {
+    this.draw();
+  }
+  draw() {
+
+  }
+
+}
+
+
+
+
+
+export class MySprite extends Sprite {
+
+  _width = 0;
+  _height = 0;
+  _anchorX = 0;
+  _anchorY = 0;
+  _offX = 0;
+  _offY = 0;
+  scaleX = 1;
+  scaleY = 1;
+  _alpha = 1;
+  rotation = 0;
+  visible = true;
+  skewX = 0;
+  skewY = 0;
+
+  _shadowFlag = false;
+  _shadowColor;
+  _shadowOffsetX = 0;
+  _shadowOffsetY = 0;
+  _shadowBlur = 5;
+
+  _radius = 0;
+
+  children = [this];
+
+  childDepandVisible = true;
+  childDepandAlpha = false;
+
+  img;
+  _z = 0;
+
+
+  init(imgObj = null, anchorX:number = 0.5, anchorY:number = 0.5) {
+
+    if (imgObj) {
+
+      this.img = imgObj;
+
+      this.width = this.img.width;
+      this.height = this.img.height;
+
+
+    }
+
+    this.anchorX = anchorX;
+    this.anchorY = anchorY;
+  }
+
+
+  setShadow(offX, offY, blur, color = 'rgba(0, 0, 0, 0.3)') {
+
+
+    this._shadowFlag = true;
+    this._shadowColor = color;
+    this._shadowOffsetX = offX;
+    this._shadowOffsetY = offY;
+    this._shadowBlur = blur;
+
+  }
+
+  setRadius(r) {
+    this._radius = r;
+  }
+
+
+  update($event = null) {
+    if (!this.visible && this.childDepandVisible) {
+      return;
+    }
+
+    this.draw();
+
+  }
+  draw() {
+
+    this.ctx.save();
+
+    this.drawInit();
+
+    this.updateChildren();
+
+    this.ctx.restore();
+
+
+  }
+
+  drawInit() {
+
+    this.ctx.translate(this.x, this.y);
+
+    this.ctx.rotate(this.rotation * Math.PI / 180);
+
+    this.ctx.scale(this.scaleX, this.scaleY);
+
+    this.ctx.globalAlpha = this.alpha;
+
+    this.ctx.transform(1, this.skewX, this.skewY, 1, 0, 0);
+
+
+
+
+
+    if (this._radius) {
+
+      const r = this._radius;
+      const w = this.width;
+      const h = this.height;
+
+      this.ctx.lineTo(-w / 2, h / 2);          // 创建水平线
+      this.ctx.arcTo(-w / 2, -h / 2, -w / 2 + r, -h / 2, r);
+      this.ctx.arcTo(w / 2, -h / 2, w / 2, -h / 2 + r, r);
+      this.ctx.arcTo(w / 2, h / 2, w / 2 - r, h / 2, r);
+      this.ctx.arcTo(-w / 2, h / 2, -w / 2, h / 2 - r, r);
+
+      this.ctx.clip();
+    }
+
+  }
+
+  drawSelf() {
+
+
+
+    if (this._shadowFlag) {
+      this.ctx.shadowOffsetX = this._shadowOffsetX;
+      this.ctx.shadowOffsetY = this._shadowOffsetY;
+      this.ctx.shadowBlur = this._shadowBlur;
+      this.ctx.shadowColor = this._shadowColor;
+    } else {
+      this.ctx.shadowOffsetX = 0;
+      this.ctx.shadowOffsetY = 0;
+      this.ctx.shadowBlur = null;
+      this.ctx.shadowColor = null;
+    }
+
+
+    if (this.img) {
+      this.ctx.drawImage(this.img, this._offX, this._offY);
+    }
+
+
+  }
+
+  updateChildren() {
+
+    if (this.children.length <= 0) { return; }
+
+    for (let i = 0; i < this.children.length; i++) {
+
+      if (this.children[i] === this) {
+
+        if (this.visible) {
+          this.drawSelf();
+        }
+      } else {
+
+        this.children[i].update();
+      }
+    }
+  }
+
+
+  load(url, anchorX = 0.5, anchorY = 0.5) {
+
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.onload = () => resolve(img);
+      img.onerror = reject;
+      img.src = url;
+    }).then(img => {
+
+      this.init(img, anchorX, anchorY);
+      return img;
+    });
+  }
+
+  addChild(child, z = 1) {
+    if (this.children.indexOf(child) === -1) {
+      this.children.push(child);
+      child._z = z;
+      child.parent = this;
+    }
+
+    this.children.sort((a, b) => {
+      return a._z - b._z;
+    });
+
+
+    if (this.childDepandAlpha) {
+      child.alpha = this.alpha;
+    }
+
+  }
+  removeChild(child) {
+    const index = this.children.indexOf(child);
+    if (index !== -1) {
+      this.children.splice(index, 1);
+    }
+  }
+
+  removeChildren() {
+    for (let i = 0; i < this.children.length; i++) {
+      if (this.children[i]) {
+        if (this.children[i] != this) {
+          this.children.splice(i, 1);
+          i --;
+        }
+      }
+    }
+  }
+
+  _changeChildAlpha(alpha) {
+    for (let i = 0; i < this.children.length; i++) {
+      if (this.children[i] != this) {
+        this.children[i].alpha = alpha;
+      }
+    }
+  }
+
+  set alpha(v) {
+    this._alpha = v;
+    if (this.childDepandAlpha) {
+      this._changeChildAlpha(v);
+    }
+  }
+  get alpha() {
+    return this._alpha;
+  }
+  set width(v) {
+    this._width = v;
+    this.refreshAnchorOff();
+  }
+  get width() {
+    return this._width;
+  }
+  set height(v) {
+    this._height = v;
+    this.refreshAnchorOff();
+  }
+  get height() {
+    return this._height;
+  }
+  set anchorX(value) {
+    this._anchorX = value;
+    this.refreshAnchorOff();
+  }
+  get anchorX() {
+    return this._anchorX;
+  }
+  set anchorY(value) {
+    this._anchorY = value;
+    this.refreshAnchorOff();
+  }
+  get anchorY() {
+    return this._anchorY;
+  }
+  refreshAnchorOff() {
+    this._offX = -this._width * this.anchorX;
+    this._offY = -this._height * this.anchorY;
+  }
+
+  setScaleXY(value) {
+    this.scaleX = this.scaleY = value;
+  }
+
+  getBoundingBox() {
+
+
+    const getParentData = (item) => {
+
+      let px = item.x;
+      let py = item.y;
+
+      let sx = item.scaleX;
+      let sy = item.scaleY;
+      const parent = item.parent;
+      if (parent) {
+
+        const obj = getParentData(parent);
+
+        const _x = obj.px;
+        const _y = obj.py;
+        const _sx = obj.sx;
+        const _sy = obj.sy;
+
+        px = _x + item.x * _sx;
+        py = _y + item.y * _sy;
+
+        sx *= _sx;
+        sy *= _sy;
+
+      }
+
+      return {px, py, sx, sy};
+    };
+
+
+    const data = getParentData(this);
+
+
+    const x = data.px + this._offX * Math.abs(data.sx);
+    const y = data.py + this._offY * Math.abs(data.sy);
+    const width = this.width * Math.abs(data.sx);
+    const height = this.height * Math.abs(data.sy);
+
+    // const x = this.x + this._offX * Math.abs(this.scaleX);
+    // const y = this.y + this._offY * Math.abs(this.scaleY);
+    // const width = this.width * Math.abs(this.scaleX);
+    // const height = this.height * Math.abs(this.scaleY);
+
+    return {x, y, width, height};
+  }
+
+}
+
+
+
+
+
+export class ColorSpr extends MySprite {
+
+  r = 0;
+  g = 0;
+  b = 0;
+
+  createGSCanvas(){
+
+    if (!this.img) {
+      return;
+    }
+
+
+
+    const rect = this.getBoundingBox();
+    if (rect.width <= 1 || rect.height <= 1) {
+      return;
+    }
+
+
+    const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
+    for( let i = 0; i < c.height; i++){
+      for( let j = 0; j < c.width; j++){
+
+        const x = (i * 4) * c.width + ( j * 4 );
+        const r = c.data[x];
+        const g = c.data[x + 1];
+        const b = c.data[x + 2];
+
+        c.data[x] = this.r;
+        c.data[x + 1] = this.g;
+        c.data[x + 2] = this.b;
+
+
+
+        // c.data[x] = c.data[x + 1] = c.data[x + 2] = (r + g + b) / 3 ;
+        // // c.data[x + 3] = 255;
+      }
+    }
+
+    this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
+  }
+
+
+  drawSelf() {
+    super.drawSelf();
+    this.createGSCanvas();
+  }
+
+}
+
+
+export class GrayscaleSpr extends MySprite {
+
+  grayScale = 120;
+
+  createGSCanvas(){
+
+    if (!this.img) {
+      return;
+    }
+
+
+
+    const rect = this.getBoundingBox();
+
+    const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
+    for( let i = 0; i < c.height; i++){
+      for( let j = 0; j < c.width; j++){
+
+        const x = (i * 4) * c.width + ( j * 4 );
+        const r = c.data[x];
+        const g = c.data[x + 1];
+        const b = c.data[x + 2];
+        // const a = c.data[x + 3];
+
+        c.data[x] = c.data[x + 1] = c.data[x + 2] = this.grayScale; // (r + g + b) / 3;
+        // c.data[x + 3] = 255;
+      }
+    }
+
+    this.ctx.putImageData(c, rect.x, rect.y, 0, 0, rect.width, rect.height);
+  }
+
+
+  drawSelf() {
+    super.drawSelf();
+    this.createGSCanvas();
+  }
+
+}
+
+
+
+
+
+
+export class BitMapLabel extends MySprite {
+
+
+  labelArr;
+  baseUrl;
+
+  setText(data, text) {
+
+    this.labelArr = [];
+
+    const labelArr = [];
+    const tmpArr = text.split('');
+    let totalW = 0;
+    let h = 0;
+    for (let i = 0; i < tmpArr.length; i++) {
+
+      const label = new MySprite(this.ctx);
+      label.init(data[tmpArr[i]], 0);
+      this.addChild(label);
+      labelArr.push(label);
+
+      totalW += label.width;
+      h = label.height;
+    }
+
+
+    this.width = totalW;
+    this.height = h;
+
+    let offX = -totalW / 2;
+    for (let i = 0; i < labelArr.length; i++) {
+      labelArr[i].x = offX;
+      offX += labelArr[i].width;
+    }
+
+    this.labelArr = labelArr;
+  }
+
+}
+
+
+
+
+export class Label extends MySprite {
+
+  text: String;
+  // fontSize:String = '40px';
+  fontName: String = 'Verdana';
+  textAlign: String = 'left';
+  fontSize = 40;
+  fontColor = '#000000';
+  fontWeight = 900;
+  maxWidth;
+  outline = 0;
+  outlineColor = '#ffffff';
+
+  _shadowFlag = false;
+  _shadowColor;
+  _shadowOffsetX;
+  _shadowOffsetY;
+  _shadowBlur;
+
+  _outlineFlag = false;
+  _outLineWidth;
+  _outLineColor;
+
+
+  constructor(ctx = null) {
+    super(ctx);
+    this.init();
+  }
+
+  refreshSize() {
+
+    this.ctx.save();
+
+    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
+    this.ctx.textAlign = this.textAlign;
+    this.ctx.textBaseline = 'middle';
+    this.ctx.fontWeight = this.fontWeight;
+
+    this._width = this.ctx.measureText(this.text).width;
+    this._height = this.fontSize;
+    this.refreshAnchorOff();
+
+    this.ctx.restore();
+
+  }
+
+  setMaxSize(w) {
+
+    this.maxWidth = w;
+    this.refreshSize();
+    if (this.width >= w) {
+      this.scaleX *= w / this.width;
+      this.scaleY *= w / this.width;
+    }
+  }
+
+  show(callBack = null) {
+
+    this.visible = true;
+
+    if (this.alpha >= 1) {
+      return;
+    }
+
+    const tween = new TWEEN.Tween(this)
+      .to({ alpha: 1 }, 800)
+      // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
+      .onComplete(function() {
+        if (callBack) {
+          callBack();
+        }
+      })
+      .start(); // Start the tween immediately.
+  }
+
+  setShadow(offX = 2, offY = 2, blur = 2, color = 'rgba(0, 0, 0, 0.2)') {
+
+    this._shadowFlag = true;
+    this._shadowColor = color;
+    // 将阴影向右移动15px,向上移动10px
+    this._shadowOffsetX = 5;
+    this._shadowOffsetY = 5;
+    // 轻微模糊阴影
+    this._shadowBlur = 5;
+  }
+
+  setOutline(width = 5, color = '#ffffff') {
+
+    this._outlineFlag = true;
+    this._outLineWidth = width;
+    this._outLineColor = color;
+
+  }
+
+  drawText() {
+
+    // console.log('in drawText', this.text);
+
+    if (!this.text) { return; }
+
+
+    // if (this._shadowFlag) {
+    //
+    //   this.ctx.shadowColor = this._shadowColor;
+    //   // 将阴影向右移动15px,向上移动10px
+    //   this.ctx.shadowOffsetX = this._shadowOffsetX;
+    //   this.ctx.shadowOffsetY = this._shadowOffsetY;
+    //   // 轻微模糊阴影
+    //   this.ctx.shadowBlur = this._shadowBlur;
+    // }
+
+
+
+    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
+    this.ctx.textAlign = this.textAlign;
+    this.ctx.textBaseline = 'middle';
+    this.ctx.fontWeight = this.fontWeight;
+
+    if (this._outlineFlag) {
+      this.ctx.lineWidth = this._outLineWidth;
+      this.ctx.strokeStyle = this._outLineColor;
+      this.ctx.strokeText(this.text, 0, 0);
+    }
+
+    this.ctx.fillStyle = this.fontColor;
+
+
+
+    if (this.outline > 0) {
+      this.ctx.lineWidth = this.outline;
+      this.ctx.strokeStyle = this.outlineColor;
+      this.ctx.strokeText(this.text, 0, 0);
+
+    }
+
+    this.ctx.fillText(this.text, 0, 0);
+
+
+  }
+
+
+  drawSelf() {
+    super.drawSelf();
+    this.drawText();
+  }
+
+}
+
+export class RichTextOld extends Label {
+
+  textArr = [];
+  fontSize = 40;
+
+  setText(text:string, words) {
+
+    let newText = text;
+    for (let i = 0; i < words.length; i++) {
+      const word = words[i];
+
+      const re = new RegExp(word, 'g');
+      newText = newText.replace( re, `#${word}#`);
+      // newText = newText.replace(word, `#${word}#`);
+    }
+
+    this.textArr = newText.split('#');
+    this.text = newText;
+
+    // this.setSize();
+  }
+
+  refreshSize() {
+
+    this.ctx.save();
+
+    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
+    this.ctx.textAlign = this.textAlign;
+    this.ctx.textBaseline = 'middle';
+    this.ctx.fontWeight = this.fontWeight;
+
+    let curX = 0;
+    for (let i = 0; i < this.textArr.length; i++) {
+      const w = this.ctx.measureText(this.textArr[i]).width;
+      curX += w;
+    }
+
+    this.width = curX;
+    this.height = this.fontSize;
+    this.refreshAnchorOff();
+
+    this.ctx.restore();
+
+  }
+
+
+  show(callBack = null) {
+
+    // console.log(' in show ');
+    this.visible = true;
+    // this.alpha = 0;
+
+    const tween = new TWEEN.Tween(this)
+      .to({ alpha: 1 }, 800)
+      // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
+      .onComplete(function() {
+        if (callBack) {
+          callBack();
+        }
+      })
+      .start(); // Start the tween immediately.
+
+  }
+
+
+
+  drawText() {
+
+    // console.log('in drawText', this.text);
+
+    if (!this.text) { return; }
+
+
+    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
+    this.ctx.textAlign = this.textAlign;
+    this.ctx.textBaseline = 'middle';
+    this.ctx.fontWeight = 900;
+
+    this.ctx.lineWidth = 5;
+    this.ctx.strokeStyle = '#ffffff';
+    // this.ctx.strokeText(this.text, 0, 0);
+
+    this.ctx.fillStyle = '#000000';
+    // this.ctx.fillText(this.text, 0, 0);
+
+
+    let curX = 0;
+    for (let i = 0; i < this.textArr.length; i++) {
+
+      const w = this.ctx.measureText(this.textArr[i]).width;
+
+      if ((i + 1) % 2 == 0) {
+        this.ctx.fillStyle = '#c8171e';
+      } else {
+        this.ctx.fillStyle = '#000000';
+      }
+
+      this.ctx.fillText(this.textArr[i], curX, 0);
+      curX += w;
+
+    }
+
+
+  }
+
+}
+
+
+
+
+
+export class RichText extends Label {
+
+
+  disH =  30;
+
+  constructor(ctx) {
+    super(ctx);
+
+    // this.dataArr = dataArr;
+  }
+
+
+
+  drawText() {
+
+    if (!this.text) {
+      return;
+    }
+
+
+    this.ctx.font = `${this.fontSize}px ${this.fontName}`;
+    this.ctx.textAlign = this.textAlign;
+    this.ctx.textBaseline = 'middle';
+    this.ctx.fontWeight = this.fontWeight;
+    this.ctx.fillStyle = this.fontColor;
+
+
+    const selfW = this.width * this.scaleX;
+
+
+    const chr = this.text.split(' ');
+    let temp = '';
+    const row = [];
+    const w = selfW - 80;
+    const disH = (this.fontSize + this.disH) * this.scaleY;
+
+
+
+
+    for (let a = 0; a < chr.length; a++) {
+      if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (chr[a])).width <= w) {
+        temp += ' ' + chr[a];
+      } else {
+        row.push(temp);
+        temp = ' ' + chr[a];
+      }
+    }
+    row.push(temp);
+
+    const x = 0;
+    const y = -row.length * disH / 2;
+    // for (let b = 0 ; b < row.length; b++) {
+    //   this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
+    // }
+
+
+    if (this._outlineFlag) {
+      this.ctx.lineWidth = this._outLineWidth;
+      this.ctx.strokeStyle = this._outLineColor;
+      for (let b = 0 ; b < row.length; b++) {
+        this.ctx.strokeText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
+      }
+      // this.ctx.strokeText(this.text, 0, 0);
+    }
+
+
+    // this.ctx.fillStyle = '#ff7600';
+    for (let b = 0 ; b < row.length; b++) {
+      this.ctx.fillText(row[b], x, y + ( b + 1 ) * disH ); // 每行字体y坐标间隔20
+    }
+
+  }
+
+
+  drawSelf() {
+    super.drawSelf();
+    this.drawText();
+  }
+
+}
+
+
+
+
+
+
+export class ShapeRect extends MySprite {
+
+  fillColor = '#FF0000';
+
+  setSize(w, h) {
+    this.width = w;
+    this.height = h;
+
+    // console.log('w:', w);
+    // console.log('h:', h);
+  }
+
+  drawShape() {
+
+    this.ctx.fillStyle = this.fillColor;
+    this.ctx.fillRect(this._offX, this._offY, this.width, this.height);
+
+  }
+
+
+  drawSelf() {
+    super.drawSelf();
+    this.drawShape();
+  }
+}
+
+
+
+export class ShapeCircle extends MySprite {
+
+  fillColor = '#FF0000';
+  radius = 0;
+
+
+  setRadius(r) {
+    this.anchorX = this.anchorY = 0.5;
+
+    this.radius = r;
+    this.width = r * 2;
+    this.height = r * 2;
+  }
+
+  drawShape() {
+
+    this.ctx.beginPath();
+    this.ctx.fillStyle = this.fillColor;
+    this.ctx.arc(0, 0, this.radius, 0, angleToRadian(360));
+    this.ctx.fill();
+  }
+
+  drawSelf() {
+    super.drawSelf();
+    this.drawShape();
+  }
+}
+
+
+export class MyAnimation extends MySprite {
+
+
+  frameArr = [];
+  frameIndex = 0;
+  playFlag = false;
+  lastDateTime;
+  curDelay = 0;
+
+
+  loop = false;
+  playEndFunc;
+  delayPerUnit = 1;
+
+  restartFlag = false;
+  reverseFlag = false;
+
+  addFrameByImg(img) {
+
+    const spr = new MySprite(this.ctx);
+    spr.init(img);
+    this._refreshSize(img);
+
+    spr.visible = false;
+
+    this.addChild(spr);
+    this.frameArr.push(spr);
+
+    this.frameArr[this.frameIndex].visible = true;
+  }
+
+  addFrameByUrl(url) {
+
+    const spr = new MySprite(this.ctx);
+    spr.load(url).then(img => {
+
+      this._refreshSize(img);
+    });
+    spr.visible = false;
+
+    this.addChild(spr);
+    this.frameArr.push(spr);
+
+    this.frameArr[this.frameIndex].visible = true;
+  }
+
+  _refreshSize(img) {
+
+    if (this.width < img['width']) {
+      this.width = img['width'];
+    }
+    if (this.height < img['height']) {
+      this.height = img['height'];
+    }
+  }
+
+
+
+  play() {
+    this.playFlag = true;
+    this.lastDateTime = new Date().getTime();
+  }
+
+  stop() {
+    this.playFlag = false;
+  }
+
+
+  replay() {
+    this.restartFlag = true;
+    this.play();
+  }
+
+
+  reverse() {
+    this.reverseFlag = !this.reverseFlag;
+    this.frameArr.reverse();
+    this.frameIndex = 0;
+  }
+
+  showAllFrame() {
+    for (let i = 0; i < this.frameArr.length; i++) {
+      this.frameArr[i].alpha = 1;
+    }
+  }
+
+  hideAllFrame() {
+    for (let i = 0; i < this.frameArr.length; i++) {
+      this.frameArr[i].alpha = 0;
+    }
+  }
+
+
+  playEnd() {
+
+    this.playFlag = false;
+    this.curDelay = 0;
+
+    this.frameArr[this.frameIndex].visible = true;
+
+    if (this.playEndFunc) {
+      this.playEndFunc();
+      this.playEndFunc = null;
+    }
+  }
+
+  updateFrame() {
+    if (this.frameArr[this.frameIndex]) {
+      this.frameArr[this.frameIndex].visible = false;
+    }
+
+    this.frameIndex ++;
+    if (this.frameIndex >= this.frameArr.length) {
+      if (this.loop) {
+        this.frameIndex = 0;
+      } else if (this.restartFlag) {
+        this.restartFlag = false;
+        this.frameIndex = 0;
+      } else {
+        this.frameIndex -- ;
+        this.playEnd();
+        return;
+      }
+    }
+
+    this.frameArr[this.frameIndex].visible = true;
+
+  }
+
+
+
+
+  _updateDelay(delay) {
+
+    this.curDelay += delay;
+    if (this.curDelay < this.delayPerUnit) {
+      return;
+    }
+    this.curDelay -= this.delayPerUnit;
+    this.updateFrame();
+  }
+
+  _updateLastDate() {
+    if (!this.playFlag) { return; }
+
+    let delay = 0;
+    if (this.lastDateTime) {
+      delay = (new Date().getTime() - this.lastDateTime) / 1000;
+    }
+    this.lastDateTime = new Date().getTime();
+    this._updateDelay(delay);
+  }
+
+  update($event: any = null) {
+    super.update($event);
+    this._updateLastDate();
+  }
+
+
+}
+
+
+
+
+// --------===========  util func  =============-------------
+
+
+export function tweenChange(item, obj, time = 0.8, callBack = null, easing = null, update = null) {
+
+  const tween = new TWEEN.Tween(item).to(obj, time * 1000);
+
+  if (callBack) {
+    tween.onComplete(() => {
+      callBack();
+    });
+  }
+  if (easing) {
+    tween.easing(easing);
+  }
+  if (update) {
+    tween.onUpdate( (a, b) => {
+        update(a, b);
+    });
+  }
+
+  tween.start();
+  return tween;
+}
+
+
+
+
+export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = null) {
+
+  const tween = new TWEEN.Tween(item).to({ rotation }, time * 1000);
+
+  if (callBack) {
+    tween.onComplete(() => {
+      callBack();
+    });
+  }
+  if (easing) {
+    tween.easing(easing);
+  }
+
+  tween.start();
+}
+
+
+
+export function scaleItem(item, scale, time = 0.8, callBack = null, easing = null) {
+
+  const tween = new TWEEN.Tween(item).to({ scaleX: scale, scaleY: scale}, time * 1000);
+
+  if (callBack) {
+    tween.onComplete(() => {
+      callBack();
+    });
+  }
+  if (easing) {
+    tween.easing(easing);
+  }
+
+  tween.start();
+  return tween;
+}
+
+
+export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
+
+  const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000);
+
+  if (callBack) {
+    tween.onComplete(() => {
+        callBack();
+    });
+  }
+  if (easing) {
+    tween.easing(easing);
+  }
+
+  tween.start();
+
+  return tween;
+}
+
+
+
+
+
+
+
+export function endShow(item, s = 1) {
+
+  item.scaleX = item.scaleY = 0;
+  item.alpha = 0;
+
+  const tween = new TWEEN.Tween(item)
+    .to({ alpha: 1, scaleX: s, scaleY: s }, 800)
+    .easing(TWEEN.Easing.Elastic.Out) // Use an easing function to make the animation smooth.
+    .onComplete(function() {
+
+    })
+    .start();
+}
+
+export function hideItem(item, time = 0.8, callBack = null, easing = null) {
+
+  if (item.alpha == 0) {
+    return;
+  }
+
+  const tween = new TWEEN.Tween(item)
+    .to({alpha: 0}, time * 1000)
+    // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
+    .onComplete(function () {
+      if (callBack) {
+        callBack();
+      }
+    });
+
+  if (easing) {
+    tween.easing(easing);
+  }
+
+  tween.start();
+}
+
+
+export function showItem(item, time = 0.8, callBack = null, easing = null) {
+
+  if (item.alpha == 1) {
+    if (callBack) {
+      callBack();
+    }
+    return;
+  }
+
+  item.visible = true;
+  const tween = new TWEEN.Tween(item)
+    .to({alpha: 1}, time * 1000)
+    // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
+    .onComplete(function () {
+      if (callBack) {
+        callBack();
+      }
+    });
+
+  if (easing) {
+    tween.easing(easing);
+  }
+
+  tween.start();
+}
+
+
+export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = null) {
+
+
+  const tween = new TWEEN.Tween(item)
+    .to({alpha: alpha}, time * 1000)
+    // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
+    .onComplete(function () {
+      if (callBack) {
+        callBack();
+      }
+    });
+
+  if (easing) {
+    tween.easing(easing);
+  }
+
+  tween.start();
+}
+
+
+export function showStar(item, time = 0.8, callBack = null, easing = null) {
+
+
+  const tween = new TWEEN.Tween(item)
+    .to({alpha: 1, scale: 1}, time * 1000)
+    // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
+    .onComplete(function () {
+      if (callBack) {
+        callBack();
+      }
+    });
+
+  if (easing) {
+    tween.easing(easing);
+  }
+
+  tween.start();
+}
+
+
+export function randomSortByArr(arr) {
+  const newArr = [];
+  const tmpArr = arr.concat();
+  while (tmpArr.length > 0) {
+    const randomIndex = Math.floor( tmpArr.length * Math.random() );
+    newArr.push(tmpArr[randomIndex]);
+    tmpArr.splice(randomIndex, 1);
+  }
+  return newArr;
+}
+
+
+export function radianToAngle(radian) {
+  return radian * 180 / Math.PI;
+  // 角度 = 弧度 * 180 / Math.PI;
+}
+
+export function angleToRadian(angle) {
+  return angle * Math.PI / 180;
+  // 弧度= 角度 * Math.PI / 180;
+}
+
+export function getPosByAngle(angle, len) {
+
+  const radian = angle * Math.PI / 180;
+  const x = Math.sin(radian) * len;
+  const y = Math.cos(radian) * len;
+
+  return {x, y};
+
+}
+
+export function getAngleByPos(px, py, mx, my) {
+
+  const x = Math.abs(px - mx);
+  const y = Math.abs(py - my);
+
+  const z = Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
+  const cos = y / z;
+  const radina = Math.acos(cos); // 用反三角函数求弧度
+  let angle = Math.floor(180 / (Math.PI / radina) * 100) / 100; // 将弧度转换成角度
+
+  if(mx > px && my > py) {// 鼠标在第四象限
+    angle = 180 - angle;
+  }
+  if(mx === px && my > py) {// 鼠标在y轴负方向上
+    angle = 180;
+  }
+  if(mx > px && my === py) {// 鼠标在x轴正方向上
+    angle = 90;
+  }
+  if(mx < px && my > py) {// 鼠标在第三象限
+    angle = 180 + angle;
+  }
+  if(mx < px && my === py) {// 鼠标在x轴负方向
+    angle = 270;
+  }
+  if(mx < px && my < py) {// 鼠标在第二象限
+    angle = 360 - angle;
+  }
+
+  // console.log('angle: ', angle);
+  return angle;
+
+}
+
+
+export function removeItemFromArr(arr, item) {
+  const index = arr.indexOf(item);
+  if (index != -1) {
+    arr.splice(index, 1);
+  }
+}
+
+
+
+
+
+
+export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = 1, callBack = null, easing = null){
+
+  const r = getPosDistance(item.x, item.y, x0, y0);
+  let a = getAngleByPos(item.x, item.y, x0, y0);
+  a += 90;
+  const obj = {r, a};
+
+  item._circleAngle = a;
+  const targetA = a + addR;
+
+  const tween = new TWEEN.Tween(item).to({_circleAngle: targetA}, time * 1000);
+
+  if (callBack) {
+    tween.onComplete(() => {
+      callBack();
+    });
+  }
+  if (easing) {
+    tween.easing(easing);
+  }
+
+  tween.onUpdate( (item, progress) => {
+
+    // console.log(item._circleAngle);
+    const r = obj.r;
+    const a = item._circleAngle;
+
+    const x = x0 + r * xPer * Math.cos(a * Math.PI / 180);
+    const y = y0 + r * yPer * Math.sin(a * Math.PI / 180);
+
+    item.x = x;
+    item.y = y;
+
+    // obj.a ++;
+  });
+
+  tween.start();
+}
+
+
+export function getPosDistance(sx, sy, ex, ey) {
+
+  const _x = ex - sx;
+  const _y = ey - sy;
+  const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
+  return len;
+}
+
+export function delayCall(callback, second) {
+  const tween = new TWEEN.Tween(this)
+    .delay(second * 1000)
+    .onComplete(() => {
+      if (callback) {
+        callback();
+      }
+    })
+    .start();
+}
+
+
+export function formatTime(fmt, date) {
+
+  // "yyyy-MM-dd HH:mm:ss";
+
+  const o = {
+    "M+": date.getMonth() + 1, // 月份
+    "d+": date.getDate(), // æ—¥
+    "h+": date.getHours(), // 小时
+    "m+": date.getMinutes(), // 分
+    "s+": date.getSeconds(), // ç§’
+    "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
+    "S": date.getMilliseconds() // 毫秒
+  };
+  if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
+  for (var k in o)
+    if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1)
+      ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+  return fmt;
+}
+
+export function getMinScale(item, maxLen) {
+  const sx = maxLen / item.width;
+  const sy = maxLen / item.height;
+  const minS = Math.min(sx, sy);
+  return minS;
+}
+
+
+
+export function jelly(item, time = 0.7) {
+
+
+  if (item.jellyTween) {
+    TWEEN.remove(item.jellyTween);
+  }
+
+  const t = time / 9;
+  const baseSX = item.scaleX;
+  const baseSY = item.scaleY;
+  let index = 0;
+
+  const run = () => {
+    if (index >= arr.length) {
+      item.jellyTween = null;
+      return;
+    }
+    const data = arr[index];
+    const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => {
+      index ++;
+      run();
+    }, TWEEN.Easing.Sinusoidal.InOut);
+    item.jellyTween = t;
+  };
+
+  const arr = [
+    [baseSX * 1.1, baseSY * 0.9, t],
+    [baseSX * 0.98, baseSY * 1.02, t * 2],
+    [baseSX * 1.02, baseSY * 0.98, t * 2],
+    [baseSX * 0.99, baseSY * 1.01, t * 2],
+    [baseSX * 1.0, baseSY * 1.0, t * 2],
+  ];
+
+
+  run();
+}
+
+
+
+export function showPopParticle(img, pos, parent) {
+
+  const num = 20;
+  for (let i = 0; i < num; i ++) {
+
+    const particle = new MySprite();
+    particle.init(img);
+    particle.x = pos.x;
+    particle.y = pos.y;
+    parent.addChild(particle);
+
+    const randomR = 360 * Math.random();
+    particle.rotation = randomR;
+
+    const randomS = 0.5 + Math.random() * 0.5;
+    particle.setScaleXY(randomS);
+
+    const randomX = Math.random() * 20 - 10;
+    particle.x += randomX;
+
+    const randomY = Math.random() * 20 - 10;
+    particle.y += randomY;
+
+    const randomL = 40 + Math.random() * 40;
+    const randomA = 360 * Math.random();
+    const randomT = getPosByAngle(randomA, randomL);
+    moveItem(particle, particle.x + randomT.x, particle.y + randomT.y, 0.4, () => {
+
+    }, TWEEN.Easing.Exponential.Out);
+
+    scaleItem(particle, 0, 0.6, () => {
+
+    });
+  }
+}
+
+
+
+export function shake(item, time = 0.5, callback = null, rate = 1) {
+
+  if (item.shakeTween) {
+    return;
+  }
+
+  item.shakeTween = true;
+  const offX = 15 * item.scaleX * rate;
+  const offY = 15 * item.scaleX * rate;
+  const baseX = item.x;
+  const baseY = item.y;
+  const easing = TWEEN.Easing.Sinusoidal.InOut;
+
+
+  const move4 = () => {
+    moveItem(item, baseX, baseY, time / 4, () => {
+      item.shakeTween = false;
+      if (callback) {
+        callback();
+      }
+    }, easing);
+  };
+
+  const move3 = () => {
+    moveItem(item, baseX + offX / 4, baseY + offY / 4, time / 4, () => {
+      move4();
+    }, easing);
+  };
+
+  const move2 = () => {
+    moveItem(item, baseX - offX / 4 * 3, baseY - offY / 4 * 3, time / 4, () => {
+      move3();
+    }, easing);
+  };
+
+  const move1 = () => {
+    moveItem(item, baseX + offX, baseY + offY, time / 8, () => {
+      move2();
+    }, easing);
+  };
+
+  move1();
+
+}
+
+// --------------- custom class --------------------
+
diff --git a/src/app/play/play.component.html b/src/app/play/play.component.html
index 4704b1af3b9ab831489b760805e2fc98b5efd708..960fb495a359c3c7803c4370d8c7d8457517d70e 100644
--- a/src/app/play/play.component.html
+++ b/src/app/play/play.component.html
@@ -1,50 +1,3 @@
-
-
-<div class="player-preview-content" [ngStyle]="{'background-color': this.data.contentObj?.titleObj?.type === 'a' ? '#fce5e9' : '#d8eefb'}">
-  <app-player-content-wrapper>
-    <div  [innerHTML]="data.contentObj.titleObj.content" style="
-    position: absolute;z-index:99;
-    display: inline-block;
-    left: 55px;
-    top: 20px;
-    cursor: pointer" (click)="playTitleAudio()"></div>
-    <div class="content" style = 'position: relative;width: 100%;height: 100%;display: flex;
-    justify-content: center;
-    align-items: flex-end;'>
-      <div class="letter-box"> 
-        <div class="letters" >
-          <div class="letter" *ngFor="let a of letters; let i = index"
-          [ngStyle]="{top:  row(i) +'%', left: (10 + (i % 13) * 6.05) +'%'}"> 
-            <div class="l-box" (click)="clickItem($event, a)">
-              <img  [src]="'assets/all-letters/letter-imgs/'+a +'.png'" alt="">
-              <div style="display: none">
-                <audio [src]="'assets/all-letters/letter-audios/'+fromCharCode(a)+'.mp3'" preload="auto">  </audio>
-              </div>
-            </div>
-
-          </div>
-        </div>
-      </div>
-
-      <div class="show-item-content"
-           *ngIf="showDetailFlag"
-           (click)="clickBg()">
-
-        <div style="width: 50%; height: 80%; margin-top: 2rem">
-          <img [src]="curItemUrl" style="height: 100%; width: auto;"
-               (click)="clickBigItem($event)">
-        </div>
-
-
-      </div>
-
-    </div>
-  </app-player-content-wrapper>
+<div class="game-container" #wrap>
+  <canvas id="canvas" #canvas></canvas>
 </div>
-
- 
-<div style="display: none">
-  <audio *ngIf="data.contentObj?.titleObj?.audio_url" #audioElement
-         [src]="data.contentObj?.titleObj?.audio_url" preload="auto">  </audio>
-</div>
-
diff --git a/src/app/play/play.component.scss b/src/app/play/play.component.scss
index 766e91f9d89cec5bdd7e04125abe4e4134a29743..98bc27615cd8dac681e1e1aa12f8ce5d4a03b824 100644
--- a/src/app/play/play.component.scss
+++ b/src/app/play/play.component.scss
@@ -1,116 +1,29 @@
-@import '../style/common_mixin';
-
-
-.player-preview-content {
+.game-container {
   width: 100%;
   height: 100%;
-  background-color: white;
-  .lesson-header{
-    width: 100%;
-    position: absolute;
-    top: 0;
-    img{
-      width: 100%;
-      height: auto;
-    }
-    .title{
-      font-family: 'BerlinSansFBDemi-Bold';
-      color: #f5d11f;
-      font-size: 4vw;
-      font-weight: 900;
-      width: 15%;
-      height: 70%;
-      position: absolute;
-      overflow: hidden;
-      top: 50%;
-      left: 50%;
-      transform: translateX(-50%) translateY(-50%);
-      line-height: 4vw;
-    }
-  }
-  .left-box{text-align: right;padding-right: 1rem}
-  .right-box{text-align: left;padding-left: 1rem}
-  .left-box, .right-box{
-    height: 100%;
-    position: relative;
-    .a, .b{
-      width: 30%;
-      height: 100%;
-      display: inline-block;
-      position: relative;
-      margin: 0 .5rem
-    }
-    .a{
-      width: 40%;
-    }
-  }
-  .letter-box {
-    //height: 100%;
-    position: relative;
-    display: inline-block;
-    width: 100%;
-    height: 100%;
-    //margin-top: 5%;
-    //margin-left: 8%;
-    //margin-right: 8%;
-    img{
-      max-width: 100%;
-      max-height: 100%;
-      //position: absolute;
-      //left: 0;
-      height: 100%;
-    }
-    .letters{
-      position: absolute;
-      width: 100%;
-      height: 100%;
-      top: 0;
-      left: 0;
-
-      .letter{
-        position: absolute;
-        font-weight: 600;
-        //width: calc(100% / 13);
-        text-align: center;
-        --cw: calc(100% / 13);
-        width: var(--cw);
-        line-height: calc( var(--cw) * 13);
-        font-family: LiQiangXingShu;
-        padding: 0 1rem;
-        height: 20%;
-        font-size: 7vmin;
-      }
-    }
-
-  }
-  .l-box{
-    cursor: pointer;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column-reverse;
-    font-weight: 900;
-    img{
-      max-width: 100%;
-      max-height: 100%;
-      width: 100%;
-      height: auto;
-    }
-  }
+  //background-image: url("/assets/listen-read-circle/bg.jpg");
+  background: #ffffff;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
 
+#canvas {
 
-  .show-item-content {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    //background-color:rgba(255,255,255,1);
+}
 
-    display: flex;
-    align-items: center;
-    justify-content:center;
-  }
 
 
+@font-face
+{
+  font-family: 'BRLNSDB';
+  src: url("../../assets/font/BRLNSDB.TTF") ;
 }
 
 
+//
+//
+//@font-face
+//{
+//  font-family: 'RoundedBold';
+//  src: url("../../assets/font/ArialRoundedBold.otf") ;
+//}
diff --git a/src/app/play/play.component.ts b/src/app/play/play.component.ts
index 882a870ed42b9edc6742eaaa1d7c6b96f23cd1f4..f58012dc74e3ea152fd016f16d26ea04effef54e 100644
--- a/src/app/play/play.component.ts
+++ b/src/app/play/play.component.ts
@@ -1,163 +1,1143 @@
- import {
-  Component,
-  Input,
-  OnDestroy,
-  OnChanges,
-  OnInit,
-  AfterViewInit, ElementRef, ViewChild,
-  ApplicationRef
-} from '@angular/core'; 
+import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
+
+import {
+  MySprite,
+  Label,
+  moveItem,
+  rotateItem,
+  removeItemFromArr,
+  ShapeRect,
+
+} from './Unit';
+import {res, resAudio} from './resources';
+
+import {Subject} from 'rxjs';
+import {debounceTime} from 'rxjs/operators';
 
 import * as _ from 'lodash';
+import TWEEN from '@tweenjs/tween.js';
+
+
+
 
 @Component({
   selector: 'app-play',
   templateUrl: './play.component.html',
   styleUrls: ['./play.component.scss']
 })
-export class PlayComponent implements OnInit, OnDestroy, OnChanges, AfterViewInit {
-
-  @ViewChild('audioElement')
-  audioElement: ElementRef;
-
-  data = {
-    contentObj:{titleObj:{
-      audio_url: 'http://iplayabc-courseware.oss-cn-beijing.aliyuncs.com/dev/imman/audios/d108d5d06105fda0526059a3e372f926.mp3',
-      content: 'what is this?&nbsp;',
-      icons: [],
-      type: 'a'
-    }}
-  }; 
-
-  letters = [];
-  lettersAscii = {};
-  titleAudio = null;
-  showDetailFlag = false;
-  curItemUrl = '';
-  curEvt;
-
-  constructor(private appRef: ApplicationRef) {
-
-  }
-  range(start, end) {
-    return (new Array(end - start + 1)).fill(undefined).map((_, i) => i + start);
-  }
-  ngOnInit() {  
-
-    let _this = this;
-    (<any>window).courseware.getData(function(data){ 
-      if(data){
-        _this.data.contentObj.titleObj.content = data.content;
-        setTimeout(() => {
-          _this.appRef.tick();
-        }, 1);  
+export class PlayComponent implements OnInit, OnDestroy {
+  // 数据
+  _data;
+
+  @Input()
+  set data(data) {
+    this._data = data;
+  }
+  get data() {
+    return this._data;
+  }
+
+  @Input()
+  sid;
+
+  @ViewChild('canvas') canvas: ElementRef;
+  @ViewChild('wrap') wrap: ElementRef;
+  canvasWidth = 1280;
+  canvasHeight = 720;
+
+  canvasBaseW = 1280;
+  canvasBaseH = 720;
+
+  ctx;
+  fps = 0;
+  frametime = 0;  // 上一帧动画的时间,   两帧时间差
+
+
+  mx;
+  my; // 点击坐标
+
+
+
+  // 资源
+  rawImages = new Map(res);
+  rawAudios = new Map(resAudio);
+
+  images = new Map();
+
+  animationId: any;
+  winResizeEventStream = new Subject();
+
+
+  audioObj = {};
+  renderArr;
+  mapScale = 1;
+
+  canvasLeft;
+  canvasTop;
+
+
+  canTouch = true;
+
+
+  KEY = 'hw_000';
+
+  // -----
+  picArr;
+
+  pageLabel;
+  leftBtn;
+  rightBtn;
+  bgLayer;
+  curPageIndex;
+
+
+
+  hotZoneArr;
+
+  picIndex = 0;
+
+
+  bgArr;
+  endPageArr;
+  gameEndFlag;
+  showPetalFlag;
+  bg;
+
+
+
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    this.winResizeEventStream.next();
+
+  }
+
+
+  ngOnInit() {
+
+
+    const getData = (<any> window).courseware.getData;
+    getData((data) => {
+
+      if (data && typeof data == 'object') {
+        this.data = data;
+      } else {
+        this.data = {};
       }
-    });
-    
-    // const letters = _.shuffle( [...this.range(97, 122), ...this.range(65, 90)]);
-    [...this.range(97, 122), ...this.range(65, 90)].forEach(c => {
-      this.lettersAscii[c] = String.fromCharCode(c);
-    });
-    this.letters = _.shuffle(Object.keys(this.lettersAscii));
+
+      console.log('data:' , data);
+      if (!this.data.contentObj) {
+        this.data.contentObj = {};
+      }
+
+      this.initDefaultData();
+
+
+
+      this.initAudio();
+      this.initImg();
+      this.initListener();
+
+    }, this.KEY);
+
+
+    //
+    // // this.initAudio();
+    // this.initImg();
+    // this.initListener();
+  }
+
+
+
+
+
+  initDefaultData() {
+
+
+    let picArr = this.data.contentObj.picArr;
+    // console.log('picArr: ', picArr);
+    if (!picArr || picArr.length == 0) {
+
+
+      const picArr = [];
+      for (let i = 0; i < 2; i++) {
+        picArr.push({
+          'pic_url': 'assets/play/default/pic.jpg',
+          'audio_url': 'assets/play/default/audio.mp3'
+        });
+      }
+
+      this.data.contentObj.picArr = picArr;
+
+    }
+
 
   }
 
   ngOnDestroy() {
+    window['curCtx'] = null;
+    window.cancelAnimationFrame(this.animationId);
+    this.gameEndFlag = true;
+  }
+
+  initData() {
+
+    this.canvasWidth = this.wrap.nativeElement.clientWidth;
+    this.canvasHeight = this.wrap.nativeElement.clientHeight;
+
+    this.canvas.nativeElement.width = this.wrap.nativeElement.clientWidth;
+    this.canvas.nativeElement.height = this.wrap.nativeElement.clientHeight;
+
+
+    const sx = this.canvasWidth / this.canvasBaseW;
+    const sy = this.canvasHeight / this.canvasBaseH;
+    const s = Math.min(sx, sy);
+    this.mapScale = s;
+
+    // this.mapScale = this.canvasWidth / this.canvasBaseW;
+    // this.mapScale = this.canvasHeight / this.canvasBaseH;
+    this.renderArr = [];
+
+    console.log(' in initData', this.data);
+
+
+
+
+
+
+    this.canTouch = true;
+
+    this.curPageIndex = 0;
+
+    // this.downFlag = false;
+
+    this.endPageArr = [];
+
+    // this.clockUpdateFlag = false;
+
+    if (!this.data.contentObj.picArr) {
+      this.data.contentObj.picArr = [];
+    }
+    this.picArr = this.data.contentObj.picArr;
+
+    this.picIndex = 0;
+
+
+
+  }
+
+
+
+
+
+  initAudio() {
+
+    const contentObj = this.data.contentObj;
+    if (!contentObj) { return; }
+
+
+
+    // const addAudio = (key) => {
+    //   const audioUrl = contentObj[key];
+    //   if (audioUrl) {
+    //     const audio = new Audio();
+    //     audio.src = audioUrl;
+    //     audio.load();
+    //     this.audioObj[key] = audio;
+    //   }
+    // }
+    //
+    // for (let i = 0; i < 4; i ++) {
+    //   const key = i + '_audio_url';
+    //   addAudio(key);
+    // }
+    //
+    // addAudio('audio_url');
+    //
+
+
+    const addUrlToAudioObj = (audioUrl) => {
+
+      if (audioUrl) {
+
+        // console.log('audioUrl:', audioUrl);
+        const audio = new Audio();
+        audio.src = audioUrl;
+        audio.load();
+        this.audioObj[audioUrl] = audio;
+      }
+    };
+
+
+    let arr = contentObj.picArr;
+
+    if (arr) {
+      // console.log('arr: ', arr);
+      for (let i = 0; i < arr.length; i++) {
+        addUrlToAudioObj(arr[i].audio_url);
+      }
+    }
+
+
+
+
+
+
+
+    const audioObj = this.audioObj;
+    const addOneAudio = (key, url, vlomue = 1, loop = false, callback = null) => {
+
+      const audio = new Audio();
+      audio.src = url;
+      audio.load();
+      audio.loop = loop;
+      audio.volume = vlomue;
+
+      audioObj[key] = audio;
+
+      if (callback) {
+        audio.onended = () => {
+          callback();
+        };
+      }
+    };
+
+
+    addOneAudio('click', this.rawAudios.get('click'), 0.3);
+    // addOneAudio('angry', this.rawAudios.get('angry'), 1);
+    // addOneAudio('cow_start', this.rawAudios.get('cow_start'), 1);
+    // addOneAudio('eat', this.rawAudios.get('eat'), 1);
+    // addOneAudio('grass', this.rawAudios.get('grass'), 1);
+    // addOneAudio('happy', this.rawAudios.get('happy'), 1);
+    // addOneAudio('right', this.rawAudios.get('right'), 1);
+    // addOneAudio('wrong', this.rawAudios.get('wrong'), 1);
+
+
+
+    //
+    // const titleUrl = this.data.contentObj.title_audio_url;
+    // if (titleUrl) {
+    //
+    //   this.titleAudio.src = titleUrl;
+    //   this.titleAudio.load();
+    // }
+
+
+
+    // this.bgAudio.src = 'assets/bat-mail/music/bg.mp3';
+    // this.bgAudio.load();
+    // this.bgAudio.loop = true;
+    // this.bgAudio.volume = 0.5;
+    //
+    // this.wrongAudio.src = 'assets/common/music/wrong.mp3';
+    // this.wrongAudio.load();
+    //
+    // this.rightAudio.src = 'assets/common/music/right.mp3';
+    // this.rightAudio.load();
+    //
+    // this.successAudio.src = 'assets/magic-hat/music/finish.mp3';
+    // this.successAudio.load();
+    //
+    // this.successAudio.onended = () => {
+    //   // this.showSuccessAudio();
+    // };
+
 
   }
 
-  ngOnChanges(data) {
+  initImg() {
+
+    const contentObj = this.data.contentObj;
+    if (contentObj) {
+
+
+      const addPicUrl = (url) => {
+        if (url) {
+            this.rawImages.set(url, url);
+          }
+      };
+
+
+      let arr = this.data.contentObj.picArr;
+      if (arr) {
+
+        for (let i = 0; i < arr.length; i++) {
+          addPicUrl( arr[i].pic_url);
+        }
+      }
+
+
+    }
+
+
+    // this.initFontImg();
+
+
+
+    // 预加载资源
+
+    this.loadResources().then(() => {
+      // this.setfontData();
+      this.init();
+      this.update();
+    });
 
   }
 
-  ngAfterViewInit() {
+  initFontImg() {
+
+
+
+    // const fontbaseUrlW = 'assets/mechanical/letter/';
+    // const fontDataW = {};
+    //
+    // let num = 97;
+    // for (let i = 0; i < 26; i++) {
+    //
+    //   const key = String.fromCharCode(num + i);  // 'a'
+    //   const url = fontbaseUrlW + key + '.png';
+    //
+    //   this.rawImages.set(url, url);
+    //   fontDataW[key] = url;
+    // }
+    //
+    //
+    // this.fontDataW = fontDataW;
+  }
 
+  setfontData() {
 
+    // for (let key in this.fontDataW) {
+    //   this.fontDataW[key] = this.images.get(this.fontDataW[key]);
+    // }
   }
 
 
-  clickItem(e, a) {
 
-    this.curEvt = e;
-    this.curItemUrl = 'assets/all-letters/letter-detail/' + a + '.png';
-    this.showDetailFlag = true;
+
+
+
+
+
+  init() {
+
+    this.initData();
+    this.initCtx();
+
+    this.initView();
+
+
+
+
   }
 
-  clickBg() {
+  initCtx() {
+
+    this.ctx = this.canvas.nativeElement.getContext('2d');
+    this.canvas.nativeElement.width = this.canvasWidth;
+    this.canvas.nativeElement.height = this.canvasHeight;
+
+    window['curCtx'] = this.ctx;
+
 
-    this.showDetailFlag = false;
   }
 
-  clickBigItem(e) {
 
-    e.cancelBubble = true;
-    this.playLetterAudio(this.curEvt);
+  initView() {
+
+    this.initBg();
+    this.initPic();
+    this.initBottomRight();
+
+
+    this.refreshPageLabel();
+
+
   }
 
+  initBottomRight() {
+
+    const px = this.canvasWidth - 100 * this.mapScale;
+    const py = this.canvasHeight - 50 * this.mapScale;
+    const offX = 40 * this.mapScale;
+
+
 
+    const leftBtn = new MySprite();
+    leftBtn.init(this.images.get('btn_left'));
+    leftBtn.setScaleXY(this.mapScale);
+    leftBtn.x = px - offX;
+    leftBtn.y = py;
 
-  caseFolder(c) {
-    let folder = 'upper';
-    if (c.toLowerCase() === c) {
-      folder = 'lower';
+    const rightBtn = new MySprite();
+    rightBtn.init(this.images.get('btn_right'));
+    rightBtn.setScaleXY(this.mapScale);
+    rightBtn.x = px + offX;
+    rightBtn.y = py;
+
+    this.renderArr.push(leftBtn);
+    this.renderArr.push(rightBtn);
+
+    const textBg = new MySprite();
+    textBg.init(this.images.get('text_bg'));
+    textBg.setScaleXY(this.mapScale);
+    textBg.x = px;
+    textBg.y = py - 65 * this.mapScale;
+    this.renderArr.push(textBg);
+
+
+
+
+    const label = new Label();
+    label.text = '0 / 0';
+    label.fontName = 'BRLNSDB';
+    label.fontSize = 24;
+    label.fontColor = '#ffffff';
+    label.textAlign = 'center';
+    label.setMaxSize( textBg.width * textBg.scaleX * 0.9 );
+    textBg.addChild(label);
+
+
+    this.leftBtn = leftBtn;
+    this.rightBtn = rightBtn;
+    this.pageLabel = label;
+
+    if (this.picArr.length <= 1) {
+      this.leftBtn.visible = false;
+      this.rightBtn.visible = false;
+      textBg.visible = false;
     }
-    return `${folder}/${c}.png`;
   }
-  row(i) {
-    const r = Math.floor(i / 13);
-    let y = (r * 20);
-    switch (r) {
-      case 0:
-      case 1:
-        y += 13;
-        break;
-      case 2:
-      case 3:
-        y += 15;
-        break;
+
+
+  refreshPageLabel() {
+
+    const label = this.pageLabel;
+    label.text = (this.curPageIndex + 1) + ' / ' + this.picArr.length;
+
+    this.showAudio();
+  }
+
+  showAudio() {
+    const data = this.picArr[this.curPageIndex];
+    const audio = this.audioObj[data.audio_url];
+    if (audio) {
+      audio.play();
     }
-    return y ;
   }
-  lower(c) {
-    return c.toLowerCase();
+
+
+
+
+  initPic() {
+
+
+
+    for (let i = 0; i < this.picArr.length; i++) {
+
+      const data = this.picArr[i];
+
+      const pic = new MySprite();
+      pic.init(this.images.get(data.pic_url));
+      // pic.x = this.canvasWidth / 2;
+      // pic.y = this.canvasHeight / 2;
+
+      const maxW = this.canvasWidth * 0.9;
+      const maxH = this.canvasHeight * 0.9;
+      const sx = maxW / pic.width;
+      const sy = maxH / pic.height;
+      const s = Math.min(sx, sy);
+      pic.setScaleXY(s);
+      // pic.setRadius(50 * this.mapScale);
+
+
+      const picBg = new ShapeRect();
+      picBg.setSize(pic.width * pic.scaleX, pic.height * pic.scaleY);
+      picBg.x = this.canvasWidth / 2 + this.canvasWidth * i;
+      picBg.y = this.canvasHeight / 2;
+      picBg.init();
+      picBg.fillColor = '#ffffff';
+      // picBg.setRadius(50 * this.mapScale);
+      picBg.setShadow(0, 10, 20, 'rgba(0,0,0,0.3)');
+      // picBg.alpha = 0;
+      // this.renderArr.push(picBg);
+      // this.renderArr.push(picShadow);
+
+      picBg.addChild(pic);
+
+      this.bgLayer.addChild(picBg);
+    }
+
+
+
+
+
+
   }
-  fromCharCode(c) {
-    return String.fromCharCode(c).toLowerCase();
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  initBg() {
+
+    this.bgArr = [];
+
+    const bg = new MySprite();
+    bg.init(this.images.get('bg'));
+    bg.x = this.canvasWidth / 2;
+    bg.y = this.canvasHeight / 2;
+    const sx = this.canvasWidth / bg.width;
+    const sy = this.canvasHeight / bg.height;
+    const s = Math.max(sx, sy);
+    bg.setScaleXY(s);
+    this.renderArr.push(bg);
+
+
+    this.bgLayer = new MySprite();
+    this.renderArr.push(this.bgLayer);
+
   }
-  allLetters() {
 
+
+
+
+
+
+
+
+  mapDown(event) {
+
+
+    if (!this.canTouch) {
+      return;
+    }
+
+
+    if (this.checkClickTarget(this.leftBtn)) {
+      this.lastPageClick();
+      return;
+    }
+
+    if (this.checkClickTarget(this.rightBtn)) {
+      this.nextPageClick();
+      return;
+    }
+
+
+  }
+
+
+
+
+
+  mapMove(event) {
+
+  }
+
+
+  mapUp(event) {
+
+
+  }
+
+
+
+  nextPageClick() {
+    console.log(' in leftBtnClick');
+
+    if (this.curPageIndex >= this.picArr.length - 1) {
+      return;
+    }
+
+    this.curPageIndex ++;
+
+    this.changePageByIndex();
   }
-  playTitleAudio() {
-    this.titleAudio = this.audioElement ? this.audioElement.nativeElement : null;
-    if (!this.titleAudio) {
+
+  lastPageClick() {
+
+    console.log(' in rightBtnClick');
+
+
+    if (this.curPageIndex <= 0) {
       return;
     }
-    this.titleAudio.pause();
-    this.titleAudio.currentTime = 0;
-    this.titleAudio.play();
-  }
-  playLetterAudio(evt) {
-    const audios = document.querySelectorAll('audio');
-    for (let i = 0; i < audios.length; i++) {
-      audios[i].pause();
-      audios[i].currentTime = 0;
-    }
-    const a = evt.target.parentNode.querySelector('audio');
-    // a.play();
-    const playPromise = a.play();
-
-    if (playPromise !== undefined) {
-      playPromise.then(_ => {
-        // Automatic playback started!
-        // Show playing UI.
-        console.log(1, _)
-      })
-        .catch(error => {
-          // Auto-play was prevented
-          // Show paused UI.
-          console.log(2, error)
-        });
+
+    this.curPageIndex --;
+
+    this.changePageByIndex();
+
+  }
+
+
+  changePageByIndex() {
+
+    console.log(' in changePageByIndex');
+    this.canTouch = false;
+
+
+    moveItem(this.bgLayer, -this.curPageIndex * this.canvasWidth, 0, 1, () => {
+      this.canTouch = true;
+      this.refreshPageLabel();
+      // this.resetCurData();
+    }, TWEEN.Easing.Cubic.Out);
+
+
+    this.playAudio('click', true);
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+  update() {
+
+
+    this.animationId = window.requestAnimationFrame(this.update.bind(this));
+    // 清除画布内容
+    this.ctx.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
+
+    TWEEN.update();
+
+
+
+    this.updateArr(this.renderArr);
+
+  }
+
+
+
+
+
+
+
+
+
+
+  updateItem(item) {
+    if (item) {
+      item.update();
+    }
+  }
+
+  updateArr(arr) {
+    if (!arr) {
+      return;
+    }
+    for (let i = 0; i < arr.length; i++) {
+      arr[i].update(this);
     }
   }
 
+
+  initHotZone() {
+
+
+    let curBgRect;
+    if (this.bg) {
+      curBgRect = this.bg.getBoundingBox();
+    }
+
+    let oldBgRect = this.data.contentObj.bgItem.rect;
+    if (!oldBgRect) {
+      oldBgRect = curBgRect;
+    }
+
+    const rate = curBgRect.width / oldBgRect.width;
+
+
+    // this.imgArr = [];
+    // const arr = this.data.contentObj.imgItemArr;
+    this.hotZoneArr = [];
+    const arr = this.data.contentObj.hotZoneItemArr;
+    if (!arr) return;
+
+    for (let i = 0; i < arr.length; i++) {
+
+      const data = JSON.parse(JSON.stringify(arr[i]));
+      // const img = {pic_url: data.pic_url};
+
+      data.rect.x *= rate;
+      data.rect.y *= rate;
+      data.rect.width *= rate;
+      data.rect.height *= rate;
+
+      data.rect.x += curBgRect.x;
+      data.rect.y += curBgRect.y;
+
+      const hotZone = this.getHotZoneItem(data);
+      hotZone.alpha = 0;
+      this.hotZoneArr.push(hotZone);
+
+    }
+
+  }
+
+
+  getHotZoneItem(data) {
+    const saveRect = data.rect;
+    const item = new ShapeRect(this.ctx);
+    item.setSize(saveRect.width, saveRect.height);
+    item.x = saveRect.x ;
+    item.y = saveRect.y ;
+    item['data'] = data;
+
+    this.renderArr.push(item);
+
+    return item;
+  }
+
+
+  showEndPatal() {
+    this.endPageArr = [];
+    this.showPetalFlag = true;
+    this.addPetal();
+  }
+
+  stopEndPatal() {
+    this.endPageArr = [];
+    this.showPetalFlag = false;
+  }
+
+  addPetal() {
+
+    if (!this.showPetalFlag) {
+      return;
+    }
+
+    const petal = this.getPetal();
+    this.endPageArr.push(petal);
+
+    moveItem(petal, petal.x, this.canvasHeight + petal.height * petal.scaleY, petal['time'], () => {
+      removeItemFromArr(this.endPageArr, petal);
+    });
+
+    rotateItem(petal, petal['tr'], petal['time']);
+
+    setTimeout(() => {
+      this.addPetal();
+    }, 200);
+
+  }
+
+
+  getPetal() {
+
+    const petal = new MySprite(this.ctx);
+
+    const id = Math.ceil( Math.random() * 3 );
+    petal.init(this.images.get('petal_' + id));
+
+    const randomS = (Math.random() * 0.4 + 0.6) * this.mapScale;
+    petal.setScaleXY(randomS);
+
+    const randomR = Math.random() * 360;
+    petal.rotation = randomR;
+
+    const randomX = Math.random() * this.canvasWidth;
+    petal.x = randomX;
+    petal.y = -petal.height / 2 * petal.scaleY;
+
+    const randomT = 2 + Math.random() * 5;
+    petal['time'] = randomT;
+
+    let randomTR = 360 * Math.random(); // - 180;
+    if (Math.random() < 0.5) { randomTR *= -1; }
+    petal['tr'] = randomTR;
+
+    return petal;
+  }
+
+
+
+
+
+  initListener() {
+
+    this.winResizeEventStream
+      .pipe(debounceTime(500))
+      .subscribe(data => {
+        this.renderAfterResize();
+      });
+
+
+    // ---------------------------------------------
+    const setParentOffset = () => {
+      const rect = this.canvas.nativeElement.getBoundingClientRect();
+      this.canvasLeft = rect.left;
+      this.canvasTop = rect.top;
+    };
+    const setMxMyByTouch = (event) => {
+      if (event.touches.length <= 0) {
+        return;
+      }
+      if (this.canvasLeft == null) {
+        setParentOffset();
+      }
+      this.mx = event.touches[0].pageX - this.canvasLeft;
+      this.my = event.touches[0].pageY - this.canvasTop;
+    };
+
+    const setMxMyByMouse = (event) => {
+      this.mx = event.offsetX;
+      this.my = event.offsetY;
+    };
+    // ---------------------------------------------
+
+
+    let firstTouch = true;
+
+    const touchDownFunc = (e) => {
+      if (firstTouch) {
+        firstTouch = false;
+        removeMouseListener();
+      }
+      console.log('touch down');
+      setMxMyByTouch(e);
+      this.mapDown(e);
+    };
+    const touchMoveFunc = (e) => {
+      setMxMyByTouch(e);
+      this.mapMove(e);
+    };
+    const touchUpFunc = (e) => {
+      setMxMyByTouch(e);
+      this.mapUp(e);
+    };
+
+    const mouseDownFunc = (e) => {
+      if (firstTouch) {
+        firstTouch = false;
+        removeTouchListener();
+      }
+      console.log('mouse down');
+      setMxMyByMouse(e);
+      this.mapDown(e);
+    };
+    const mouseMoveFunc = (e) => {
+      setMxMyByMouse(e);
+      this.mapMove(e);
+    };
+    const mouseUpFunc = (e) => {
+      setMxMyByMouse(e);
+      this.mapUp(e);
+    };
+
+
+    const element = this.canvas.nativeElement;
+
+    const addTouchListener = () => {
+      element.addEventListener('touchstart', touchDownFunc);
+      element.addEventListener('touchmove', touchMoveFunc);
+      element.addEventListener('touchend', touchUpFunc);
+      element.addEventListener('touchcancel', touchUpFunc);
+    };
+    const removeTouchListener = () => {
+      element.removeEventListener('touchstart', touchDownFunc);
+      element.removeEventListener('touchmove', touchMoveFunc);
+      element.removeEventListener('touchend', touchUpFunc);
+      element.removeEventListener('touchcancel', touchUpFunc);
+    };
+
+    const addMouseListener = () => {
+      element.addEventListener('mousedown', mouseDownFunc);
+      element.addEventListener('mousemove', mouseMoveFunc);
+      element.addEventListener('mouseup', mouseUpFunc);
+    };
+    const removeMouseListener = () => {
+      element.removeEventListener('mousedown', mouseDownFunc);
+      element.removeEventListener('mousemove', mouseMoveFunc);
+      element.removeEventListener('mouseup', mouseUpFunc);
+    };
+
+    addMouseListener();
+    addTouchListener();
+  }
+
+
+  playAudio(key, now = false, callback = null) {
+
+    const audio = this.audioObj[key];
+    if (audio) {
+      if (now) {
+        audio.pause();
+        audio.currentTime = 0;
+      }
+
+      if (callback) {
+        audio.onended = () => {
+          callback();
+        };
+      }
+      audio.play();
+    }
+  }
+
+
+
+
+  showArr(arr) {
+    if (!arr) {
+      return;
+    }
+    for (let i = 0; i < arr.length; i++) {
+      arr[i].visible = true;
+    }
+  }
+
+  hideArr(arr) {
+    if (!arr) {
+      return;
+    }
+    for (let i = 0; i < arr.length; i++) {
+      arr[i].visible = false;
+    }
+  }
+
+
+
+  IsPC() {
+
+    if (window['ELECTRON']) {
+      return false; // 封装客户端标记
+    }
+
+
+    if (document.body.ontouchmove !== undefined && document.body.ontouchmove !== undefined) {
+      return false;
+    } else {
+      return true;
+    }
+
+  }
+
+
+  loadResources() {
+    const pr = [];
+    this.rawImages.forEach((value, key) => {// 预加载图片
+
+      const p = this.preload(value)
+        .then(img => {
+          this.images.set(key, img);
+        })
+        .catch(err => console.log(err));
+
+      pr.push(p);
+    });
+
+    this.rawAudios.forEach((value, key) => {// 预加载图片
+
+      const a = this.preloadAudio(value)
+        .then(() => {
+          // this.images.set(key, img);
+        })
+        .catch(err => console.log(err));
+
+      pr.push(a);
+    });
+    return Promise.all(pr);
+  }
+
+  preload(url) {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      // img.crossOrigin = "anonymous";
+      img.onload = () => resolve(img);
+      img.onerror = reject;
+      img.src = url;
+    });
+  }
+
+  preloadAudio(url) {
+    return new Promise((resolve, reject) => {
+      const audio = new Audio();
+      audio.oncanplay = (a) => {
+        resolve();
+      };
+      audio.onerror = () => {
+        reject();
+      };
+      audio.src = url;
+      audio.load();
+    });
+  }
+
+
+  renderAfterResize() {
+    this.canvasWidth = this.wrap.nativeElement.clientWidth;
+    this.canvasHeight = this.wrap.nativeElement.clientHeight;
+    this.init();
+  }
+
+
+
+  checkClickTarget(target) {
+
+    const rect = target.getBoundingBox();
+
+    if (this.checkPointInRect(this.mx, this.my, rect)) {
+      return true;
+    }
+    return false;
+  }
+
+  getWorlRect(target) {
+
+    let rect = target.getBoundingBox();
+
+    if (target.parent) {
+
+      const pRect = this.getWorlRect(target.parent);
+      rect.x += pRect.x;
+      rect.y += pRect.y;
+    }
+    return rect;
+  }
+
+  checkPointInRect(x, y, rect) {
+    if (x >= rect.x && x <= rect.x + rect.width) {
+      if (y >= rect.y && y <= rect.y + rect.height) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  getPosByAngle(angle, len) {
+
+    const radian = angle * Math.PI / 180;
+    const x = Math.sin(radian) * len;
+    const y = Math.cos(radian) * len;
+
+    return {x, y};
+
+  }
+
+  getPosDistance(sx, sy, ex, ey) {
+
+    const _x = ex - sx;
+    const _y = ey - sy;
+    const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) );
+    return len;
+  }
+
 }
diff --git a/src/app/play/resources.js b/src/app/play/resources.js
new file mode 100644
index 0000000000000000000000000000000000000000..57a1c19221fb47661ada0ff3eb780fa4a121d226
--- /dev/null
+++ b/src/app/play/resources.js
@@ -0,0 +1,22 @@
+const res = [
+
+  ['bg', "assets/play/bg.jpg"],
+  ['btn_left', "assets/play/btn_left.png"],
+  ['btn_right', "assets/play/btn_right.png"],
+  ['text_bg', "assets/play/text_bg.png"],
+
+
+];
+
+
+
+const resAudio = [
+
+
+  // ['click', "assets/play/music/click.mp3"],
+
+
+
+];
+
+export {res, resAudio};
diff --git a/src/app/services/config.service.spec.ts b/src/app/services/config.service.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c8fff3dd4ab88ffec8b7c5a6b090c59a8ce2b314
--- /dev/null
+++ b/src/app/services/config.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfigService } from './config.service';
+
+describe('ConfigService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ConfigService = TestBed.get(ConfigService);
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/services/config.service.ts b/src/app/services/config.service.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ebbf2a7beadaa6a28cb6ed7eb912969d6f624d2b
--- /dev/null
+++ b/src/app/services/config.service.ts
@@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import {HttpClient} from "@angular/common/http";
+import {Observable} from "rxjs";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfigService {
+
+  configUrl = 'proxy.conf.json';
+
+  constructor( private http: HttpClient ) { }
+
+  getConfig() {
+    return this.http.get(this.configUrl)
+      .pipe(
+
+
+      );
+  }
+
+
+  showConfig() {
+    this.getConfig()
+      .subscribe((data) => {
+        console.log('data:', data);
+
+      });
+  }
+
+
+  test(data) {
+
+    // return new Promise<any> {
+    //   return new Promise((resolve, reject) => {
+    //     this.http.get(url).subscribe((res) => {
+    //       resolve(res);
+    //     }, reject);
+    //   });
+    //
+    return this.get('/api/login');
+    // return this.http.post('/login', data);
+  }
+
+
+  get(url: string): Promise<any> {
+    return new Promise((resolve, reject) => {
+      this.http.get(url).subscribe((res) => {
+        resolve(res);
+      }, reject);
+    });
+  }
+
+  // login(user): Observable<any> {
+  //
+  //
+  //   return this.http.post('/login', user).pipe(
+  //     tap((data => {
+  //       console.log('login', data)
+  //       localStorage.setItem('token', _.get(data, 'token'));
+  //       delete data['token'];
+  //       localStorage.setItem('info', JSON.stringify(data));
+  //       this.getInfoPromise = this.load('/user/getInfo');
+  //     }))
+  //   );
+  // }
+}
diff --git a/src/assets/all-letters/bg.png b/src/assets/all-letters/bg.png
deleted file mode 100644
index 551411b7883d75f611dce3bc8a71c733b256d72e..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/bg.png and /dev/null differ
diff --git a/src/assets/all-letters/bg2.png b/src/assets/all-letters/bg2.png
deleted file mode 100755
index 70b87ba72a9975ebd93969fa9a93e75bfe69d871..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/bg2.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/a.mp3 b/src/assets/all-letters/letter-audios/a.mp3
deleted file mode 100755
index d3b62661990ec6cc1761db4ca2285f9073a6fc9b..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/a.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/b.mp3 b/src/assets/all-letters/letter-audios/b.mp3
deleted file mode 100755
index 4d511c81aa451eafd10120e86c9009b39fd37add..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/b.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/c.mp3 b/src/assets/all-letters/letter-audios/c.mp3
deleted file mode 100755
index bc5a455dd21d4c71626f00af806ab4cfd0a1b545..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/c.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/d.mp3 b/src/assets/all-letters/letter-audios/d.mp3
deleted file mode 100755
index 2c26762c2a5c534300522576b90d3d3b998e1696..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/d.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/e.mp3 b/src/assets/all-letters/letter-audios/e.mp3
deleted file mode 100755
index a29be311ae3cad11778847bec86a855f76f94f07..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/e.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/f.mp3 b/src/assets/all-letters/letter-audios/f.mp3
deleted file mode 100755
index 5deb473f16c542f55a06abbb6c76ba492956ffd5..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/f.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/g.mp3 b/src/assets/all-letters/letter-audios/g.mp3
deleted file mode 100755
index dff70aa0f3786dee7a63dc2ed2d5cbb10e6a4b4c..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/g.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/h.mp3 b/src/assets/all-letters/letter-audios/h.mp3
deleted file mode 100755
index 46bd296dd8fcbf21b29940bd22a959503b0cccae..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/h.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/i.mp3 b/src/assets/all-letters/letter-audios/i.mp3
deleted file mode 100755
index b5917fa02b24fcb18da0d7296c566664a624e07e..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/i.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/j.mp3 b/src/assets/all-letters/letter-audios/j.mp3
deleted file mode 100755
index 335cd4711706d908a425932b65d644791a7ee597..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/j.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/k.mp3 b/src/assets/all-letters/letter-audios/k.mp3
deleted file mode 100755
index d5d25c5b2acdbb3f2fa425162ff04c481bc597fa..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/k.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/l.mp3 b/src/assets/all-letters/letter-audios/l.mp3
deleted file mode 100755
index 0744fd71aa750384d9438ee7faabede5b96331e9..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/l.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/m.mp3 b/src/assets/all-letters/letter-audios/m.mp3
deleted file mode 100755
index 60f290503234946fe28b6b7ecf657f1780b38203..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/m.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/n.mp3 b/src/assets/all-letters/letter-audios/n.mp3
deleted file mode 100755
index d911039ed3f86f47650c1b2164411f30cb3693ad..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/n.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/o.mp3 b/src/assets/all-letters/letter-audios/o.mp3
deleted file mode 100755
index 96941cc7e491e8a7703094955da322360bbce963..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/o.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/p.mp3 b/src/assets/all-letters/letter-audios/p.mp3
deleted file mode 100755
index f151fb0d1637d7fca367a2e01690fc74e6e8efe2..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/p.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/q.mp3 b/src/assets/all-letters/letter-audios/q.mp3
deleted file mode 100755
index a16e06f30270dfe4271b8f8bef6e1899ec436bc2..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/q.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/r.mp3 b/src/assets/all-letters/letter-audios/r.mp3
deleted file mode 100755
index 2d6c1996b8b32f20f5faa5402af797c1a8855176..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/r.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/s.mp3 b/src/assets/all-letters/letter-audios/s.mp3
deleted file mode 100755
index d4096148606dfb9b819bd41cd0ea076af107b5bd..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/s.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/t.mp3 b/src/assets/all-letters/letter-audios/t.mp3
deleted file mode 100755
index 1002934b1e20459e204c71599aaffe9a5f0dc5f1..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/t.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/u.mp3 b/src/assets/all-letters/letter-audios/u.mp3
deleted file mode 100755
index 22e62564c220ef018dcba19f70169219c4807ec8..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/u.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/v.mp3 b/src/assets/all-letters/letter-audios/v.mp3
deleted file mode 100755
index 9708155d9f88bf1d8ac24003e91ec3a98f2d4767..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/v.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/w.mp3 b/src/assets/all-letters/letter-audios/w.mp3
deleted file mode 100755
index db0a1b9ffd6295a5cbba45da7ea944e2e353440d..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/w.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/x.mp3 b/src/assets/all-letters/letter-audios/x.mp3
deleted file mode 100755
index 4f25663ced80215b03405c6563e73f20e15a2a57..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/x.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/y.mp3 b/src/assets/all-letters/letter-audios/y.mp3
deleted file mode 100755
index 8a69c7135760d067baa4b5075f6350e1020d084c..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/y.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-audios/z.mp3 b/src/assets/all-letters/letter-audios/z.mp3
deleted file mode 100755
index d262963f94b07fc77d1154ad82260bc0a4384376..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-audios/z.mp3 and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/100.png b/src/assets/all-letters/letter-detail/100.png
deleted file mode 100644
index 05d20f794cde1c6ca0997df381be2075e4f89f1a..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/100.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/101.png b/src/assets/all-letters/letter-detail/101.png
deleted file mode 100644
index e6e5066bdb91a1b259dbd7831c9708cbeb149f78..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/101.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/102.png b/src/assets/all-letters/letter-detail/102.png
deleted file mode 100644
index a3945376a0f054f6c357284402018c0ad1a341d3..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/102.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/103.png b/src/assets/all-letters/letter-detail/103.png
deleted file mode 100644
index a4ffaa7d39dde8f75644209fbee93bec4a3967b7..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/103.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/104.png b/src/assets/all-letters/letter-detail/104.png
deleted file mode 100644
index 17fbffe2c7e1d592f23cf163921b67e79953d6fe..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/104.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/105.png b/src/assets/all-letters/letter-detail/105.png
deleted file mode 100644
index 5329099b89779be1e11a57bbbc95eb961ce838c8..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/105.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/106.png b/src/assets/all-letters/letter-detail/106.png
deleted file mode 100644
index c80afb6b1d8a417af85d1e5c4c73b3c0c9dd09ef..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/106.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/107.png b/src/assets/all-letters/letter-detail/107.png
deleted file mode 100644
index 656380e7cd8b3893b69d03bf178272d164e2ce0c..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/107.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/108.png b/src/assets/all-letters/letter-detail/108.png
deleted file mode 100644
index ed900b08171830b366bfb642fc20f73a70078188..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/108.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/109.png b/src/assets/all-letters/letter-detail/109.png
deleted file mode 100644
index 6366ae32ea1a33000b617207bf132f6edadcb9c8..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/109.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/110.png b/src/assets/all-letters/letter-detail/110.png
deleted file mode 100644
index a5901b7f517cb8bcbb0c65214b728942b9d27e42..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/110.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/111.png b/src/assets/all-letters/letter-detail/111.png
deleted file mode 100644
index 3f1f0fb2086982b979ad1858b89a5438a3cfe57a..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/111.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/112.png b/src/assets/all-letters/letter-detail/112.png
deleted file mode 100644
index 9a40ccfd099875c5698aaa45b25f77305b5b10bb..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/112.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/113.png b/src/assets/all-letters/letter-detail/113.png
deleted file mode 100644
index c49675bbc0f650b3cf48b04513fbd146882fcd7a..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/113.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/114.png b/src/assets/all-letters/letter-detail/114.png
deleted file mode 100644
index e38b2702cd5352d99e2a859911882bfbc29a097b..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/114.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/115.png b/src/assets/all-letters/letter-detail/115.png
deleted file mode 100644
index a14ca9fa65fa8c1d2bc4c30fa6a0a71193412cf3..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/115.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/116.png b/src/assets/all-letters/letter-detail/116.png
deleted file mode 100644
index 679a93a5900d6b1ad5040eb8970799974a93aff5..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/116.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/117.png b/src/assets/all-letters/letter-detail/117.png
deleted file mode 100644
index 48c9cc722b8ed78d5348c3c6bd99c037fcd04609..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/117.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/118.png b/src/assets/all-letters/letter-detail/118.png
deleted file mode 100644
index 62cb226c78409f08b59d07b17ccf3ea28ad19bd3..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/118.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/119.png b/src/assets/all-letters/letter-detail/119.png
deleted file mode 100644
index 1ff945aaa38764c627a1431f0818ef920b6a301f..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/119.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/120.png b/src/assets/all-letters/letter-detail/120.png
deleted file mode 100644
index 4c6c3bd0805c929d8a71307c921d31a07b7bf3d9..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/120.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/121.png b/src/assets/all-letters/letter-detail/121.png
deleted file mode 100644
index 98b8627d5b3756bdc9a58ef3aed2c4bdc5c349e1..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/121.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/122.png b/src/assets/all-letters/letter-detail/122.png
deleted file mode 100644
index cdccbd4d7aa76f47cc6410b4a8dcaac74552f673..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/122.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/65.png b/src/assets/all-letters/letter-detail/65.png
deleted file mode 100644
index 2e01a3459c78e0214cb0eb9bfb2c9a8b12b6d5c9..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/65.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/66.png b/src/assets/all-letters/letter-detail/66.png
deleted file mode 100644
index e6a4d68a47f0ce3e7abcc4ba37e70edc93f25c0c..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/66.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/67.png b/src/assets/all-letters/letter-detail/67.png
deleted file mode 100644
index 7242093a461d289481d14b1fbec64105264684fc..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/67.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/68.png b/src/assets/all-letters/letter-detail/68.png
deleted file mode 100644
index e5c507f7fd3d52e5030b77b991be348545e5fae1..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/68.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/69.png b/src/assets/all-letters/letter-detail/69.png
deleted file mode 100644
index eca51351a1e38af5bf445d5688270360c99c4671..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/69.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/70.png b/src/assets/all-letters/letter-detail/70.png
deleted file mode 100644
index 158a2eb72343e7ee7d4c8c1875c29e286c232aab..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/70.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/71.png b/src/assets/all-letters/letter-detail/71.png
deleted file mode 100644
index ce3ff08a557e8fef23b357137946c67771f82add..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/71.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/72.png b/src/assets/all-letters/letter-detail/72.png
deleted file mode 100644
index 09ea9cb1cd9fdd9b8f7f87d388e2c2c1de2827f9..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/72.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/73.png b/src/assets/all-letters/letter-detail/73.png
deleted file mode 100644
index 7e28394489a8b8aa19b21995612ef5d023046c37..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/73.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/74.png b/src/assets/all-letters/letter-detail/74.png
deleted file mode 100644
index d6aa84f98eee9d731b895287f1fffd7227c7950e..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/74.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/75.png b/src/assets/all-letters/letter-detail/75.png
deleted file mode 100644
index bfae4a0a08bdfe3b5a196967fa7cf9f5f427f409..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/75.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/76.png b/src/assets/all-letters/letter-detail/76.png
deleted file mode 100644
index eb6b4384d523e70747ce80c8c5d496b4fcab576a..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/76.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/77.png b/src/assets/all-letters/letter-detail/77.png
deleted file mode 100644
index 07d9ca4223bed3353472b1c92a57d98e2cf1e055..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/77.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/78.png b/src/assets/all-letters/letter-detail/78.png
deleted file mode 100644
index 4ebc71b6ac15ea43949fff10db31147c0ef13d43..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/78.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/79.png b/src/assets/all-letters/letter-detail/79.png
deleted file mode 100644
index 5738ac9761c1ee32412f5000e27212f9291af2cc..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/79.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/80.png b/src/assets/all-letters/letter-detail/80.png
deleted file mode 100644
index 1d79dd9d284fb5f642294d90cc6c5b57b9c76419..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/80.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/81.png b/src/assets/all-letters/letter-detail/81.png
deleted file mode 100644
index 9885481e678f7d5a9c9e87c06f9275d930c1b82f..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/81.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/82.png b/src/assets/all-letters/letter-detail/82.png
deleted file mode 100644
index 7a3dc5100b69a97cfd3205cf53e6c9eafe9ef1a6..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/82.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/83.png b/src/assets/all-letters/letter-detail/83.png
deleted file mode 100644
index 967d5a9da74d9ad3830f436cc2d6510f1c5f0f09..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/83.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/84.png b/src/assets/all-letters/letter-detail/84.png
deleted file mode 100644
index ab1eeba407442188338bf51a246a23682152b632..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/84.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/85.png b/src/assets/all-letters/letter-detail/85.png
deleted file mode 100644
index b08582c09582bb55256793c2b041bc7d6f4ce989..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/85.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/86.png b/src/assets/all-letters/letter-detail/86.png
deleted file mode 100644
index 968f76245883a12d12504175629458f2e53f2497..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/86.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/87.png b/src/assets/all-letters/letter-detail/87.png
deleted file mode 100644
index a5a309d9cdfad6590b5fd0a960f13d77ab513cc6..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/87.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/88.png b/src/assets/all-letters/letter-detail/88.png
deleted file mode 100644
index d1a9b85ed26553b7dfa54d97587bdcec58362187..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/88.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/89.png b/src/assets/all-letters/letter-detail/89.png
deleted file mode 100644
index 99d04ba01021301bfdf827950b31141a8c24183f..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/89.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/90.png b/src/assets/all-letters/letter-detail/90.png
deleted file mode 100644
index 282f5afd846710e052a04e977a813aca99722272..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/90.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/97.png b/src/assets/all-letters/letter-detail/97.png
deleted file mode 100644
index d58505f2a7df10cca037a6eaaa7581ce2bc13b0b..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/97.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/98.png b/src/assets/all-letters/letter-detail/98.png
deleted file mode 100644
index c8b20dd9165d70d7fdd3f6e0e82cb33e017ab3b5..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/98.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-detail/99.png b/src/assets/all-letters/letter-detail/99.png
deleted file mode 100644
index c6c7372cf0f4316ce302eb1b9a5b802883de9d8a..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-detail/99.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/100.png b/src/assets/all-letters/letter-imgs/100.png
deleted file mode 100644
index 4ec4a407f0697e324df0aa600a4f219cfc261279..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/100.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/101.png b/src/assets/all-letters/letter-imgs/101.png
deleted file mode 100644
index acfffd394bb31090ec07aaf9b84038de1fc48cd2..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/101.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/102.png b/src/assets/all-letters/letter-imgs/102.png
deleted file mode 100644
index b863cd4af3735afe0dbb1447b8760d32b8d1027b..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/102.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/103.png b/src/assets/all-letters/letter-imgs/103.png
deleted file mode 100644
index 0a983d81143eaf4023ca86e2ab6b2dc9825b53ef..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/103.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/104.png b/src/assets/all-letters/letter-imgs/104.png
deleted file mode 100644
index 9d55b51704fc6fb4d4a785450ec6d0914ad1d757..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/104.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/105.png b/src/assets/all-letters/letter-imgs/105.png
deleted file mode 100644
index 8782e2b792660083726653d31a88d9ef5c9cbdcb..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/105.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/106.png b/src/assets/all-letters/letter-imgs/106.png
deleted file mode 100644
index ce61746680a011d9132e666cfec07ba267a3a89e..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/106.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/107.png b/src/assets/all-letters/letter-imgs/107.png
deleted file mode 100644
index 2ecbc6f0ee1e2ccd1c425d182abe2e5d3436b66e..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/107.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/108.png b/src/assets/all-letters/letter-imgs/108.png
deleted file mode 100644
index b5aefbbc5ef3d44c8cd9059eb75c53f5929ca452..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/108.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/109.png b/src/assets/all-letters/letter-imgs/109.png
deleted file mode 100644
index 70a44e19d8da3093216542d57ebf8e6883400695..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/109.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/110.png b/src/assets/all-letters/letter-imgs/110.png
deleted file mode 100644
index ee83d6afbd273065ee8eed4219c6ffb185a56006..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/110.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/111.png b/src/assets/all-letters/letter-imgs/111.png
deleted file mode 100644
index 12ed6f768e9fc9778ab183c017d6623a8698b759..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/111.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/112.png b/src/assets/all-letters/letter-imgs/112.png
deleted file mode 100644
index d1e1dd6351c22cc4c88d4544b8bba2960504d2be..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/112.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/113.png b/src/assets/all-letters/letter-imgs/113.png
deleted file mode 100644
index bc34aaa7cfb2d562fee1ac3580826514d2d2e558..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/113.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/114.png b/src/assets/all-letters/letter-imgs/114.png
deleted file mode 100644
index b7f9753fc85e6ae2968e04c6843e0a1152fb0963..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/114.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/115.png b/src/assets/all-letters/letter-imgs/115.png
deleted file mode 100644
index 2bad89b191eefaaa4e67e39a9ec37a0c1dae8aab..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/115.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/116.png b/src/assets/all-letters/letter-imgs/116.png
deleted file mode 100644
index 950f7f342629e7e9121783f25d6a4d1cebdcdfe6..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/116.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/117.png b/src/assets/all-letters/letter-imgs/117.png
deleted file mode 100644
index 8fe665807967bd79b1412784b8a920cbdc215c60..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/117.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/118.png b/src/assets/all-letters/letter-imgs/118.png
deleted file mode 100644
index 669aa761b8066121ea10c21f999b557e54eefdb7..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/118.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/119.png b/src/assets/all-letters/letter-imgs/119.png
deleted file mode 100644
index 05a2316ef1c5b6781930c9555a71cc5e8ca171e3..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/119.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/120.png b/src/assets/all-letters/letter-imgs/120.png
deleted file mode 100644
index 3e4651e4f932eb189eb4d50adc1abda68328e4af..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/120.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/121.png b/src/assets/all-letters/letter-imgs/121.png
deleted file mode 100644
index e2899107c076109676aece42c0c2efc9328ea101..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/121.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/122.png b/src/assets/all-letters/letter-imgs/122.png
deleted file mode 100644
index 86d66e2260f5e301d910830492dc8a2004919f98..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/122.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/65.png b/src/assets/all-letters/letter-imgs/65.png
deleted file mode 100644
index dc5532e69fc70a396e80da884f9174154ab571c3..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/65.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/66.png b/src/assets/all-letters/letter-imgs/66.png
deleted file mode 100644
index ada80d13e1427a7aedde8fbb746c5460c2917f28..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/66.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/67.png b/src/assets/all-letters/letter-imgs/67.png
deleted file mode 100644
index 9de3e67fcabc7de8c50710ac9a16849e98d81624..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/67.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/68.png b/src/assets/all-letters/letter-imgs/68.png
deleted file mode 100644
index 875b2560fb6e787f98d026a06bcfe1e491a5be62..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/68.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/69.png b/src/assets/all-letters/letter-imgs/69.png
deleted file mode 100644
index ff9995c20475567e3b95ceb097f8fe702f8e6a70..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/69.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/70.png b/src/assets/all-letters/letter-imgs/70.png
deleted file mode 100644
index ffc34d5aa06cd10bcfa48b28b457b6e67f4ab4e9..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/70.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/71.png b/src/assets/all-letters/letter-imgs/71.png
deleted file mode 100644
index 8fe265ee6b907aa59d416086de1555b9ac3dfdff..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/71.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/72.png b/src/assets/all-letters/letter-imgs/72.png
deleted file mode 100644
index e075d63c7089d0291a42708408f3eb50b7e82adc..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/72.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/73.png b/src/assets/all-letters/letter-imgs/73.png
deleted file mode 100644
index 703522182cfbbc6fd2ef9b1d671c38a63bf09eaf..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/73.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/74.png b/src/assets/all-letters/letter-imgs/74.png
deleted file mode 100644
index 96c99387edb6643d048bda60898d326e3c2f6c1c..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/74.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/75.png b/src/assets/all-letters/letter-imgs/75.png
deleted file mode 100644
index c0464107ca5a5367efb37e2ad9b3a0aa3ae1cd4e..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/75.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/76.png b/src/assets/all-letters/letter-imgs/76.png
deleted file mode 100644
index 1bee5d41cc67851687e0fbb63cb41d917795fc76..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/76.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/77.png b/src/assets/all-letters/letter-imgs/77.png
deleted file mode 100644
index a2a4a939b6e39db99aab63a30f7883eb0474ca22..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/77.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/78.png b/src/assets/all-letters/letter-imgs/78.png
deleted file mode 100644
index 900f91f8afff37e1e1e4a47a3f9930192aa81e0d..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/78.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/79.png b/src/assets/all-letters/letter-imgs/79.png
deleted file mode 100644
index 5b7bed50dce700094f7a89a9ccf7687a88759f91..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/79.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/80.png b/src/assets/all-letters/letter-imgs/80.png
deleted file mode 100644
index babc069e5ae520c241ab3431500a54149a10a093..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/80.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/81.png b/src/assets/all-letters/letter-imgs/81.png
deleted file mode 100644
index 933c362db3eb624cb17ef8d192134c68077579f9..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/81.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/82.png b/src/assets/all-letters/letter-imgs/82.png
deleted file mode 100644
index e1e75d807034133ac5fd4818b98bd296fdbbadd0..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/82.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/83.png b/src/assets/all-letters/letter-imgs/83.png
deleted file mode 100644
index e015d11eccce74bf538335e7141044bccf45d001..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/83.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/84.png b/src/assets/all-letters/letter-imgs/84.png
deleted file mode 100644
index 532a2c74da5dcc1b11cdcc1f17a7f23207911b0d..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/84.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/85.png b/src/assets/all-letters/letter-imgs/85.png
deleted file mode 100644
index ea347866bfc6b01c92fe0123c6e3ca0f69b6b92a..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/85.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/86.png b/src/assets/all-letters/letter-imgs/86.png
deleted file mode 100644
index be40773c019bb6123be66b6e75bda20ac589105c..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/86.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/87.png b/src/assets/all-letters/letter-imgs/87.png
deleted file mode 100644
index 31f2671f9962feadef0677b5ee8ed9ce70683c64..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/87.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/88.png b/src/assets/all-letters/letter-imgs/88.png
deleted file mode 100644
index 41419c5722722399300a04a60cf5367aaed409c2..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/88.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/89.png b/src/assets/all-letters/letter-imgs/89.png
deleted file mode 100644
index 0bd8a2fcf3566a1ac69ccdd65a1dd1abc906d894..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/89.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/90.png b/src/assets/all-letters/letter-imgs/90.png
deleted file mode 100644
index 5233a79faaff55c925f6e2b3f7966c67257df981..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/90.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/97.png b/src/assets/all-letters/letter-imgs/97.png
deleted file mode 100644
index adb4dd792853d954d3cb6b3414efc044f412234c..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/97.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/98.png b/src/assets/all-letters/letter-imgs/98.png
deleted file mode 100644
index a52464a0aa8a4a4bbc3aad16b6692ac1ea608758..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/98.png and /dev/null differ
diff --git a/src/assets/all-letters/letter-imgs/99.png b/src/assets/all-letters/letter-imgs/99.png
deleted file mode 100644
index 4988e7ba9199b03a89bfb52f8903c955537a839f..0000000000000000000000000000000000000000
Binary files a/src/assets/all-letters/letter-imgs/99.png and /dev/null differ
diff --git a/src/assets/font/BRLNSDB.TTF b/src/assets/font/BRLNSDB.TTF
new file mode 100644
index 0000000000000000000000000000000000000000..e5f34b2f342ffcd820a8a0956af3ab36bb1f9e1f
Binary files /dev/null and b/src/assets/font/BRLNSDB.TTF differ
diff --git a/src/assets/play/bg.jpg b/src/assets/play/bg.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..701c49c4c716d9e48412993f87f47d0fdcfbbe44
Binary files /dev/null and b/src/assets/play/bg.jpg differ
diff --git a/src/assets/play/btn_left.png b/src/assets/play/btn_left.png
new file mode 100755
index 0000000000000000000000000000000000000000..e3428fd5bcda4bad311e87c5aa5669fdb7e96a60
Binary files /dev/null and b/src/assets/play/btn_left.png differ
diff --git a/src/assets/play/btn_right.png b/src/assets/play/btn_right.png
new file mode 100755
index 0000000000000000000000000000000000000000..db0f274024b4ad41d5219acf3936ec2b2f79459c
Binary files /dev/null and b/src/assets/play/btn_right.png differ
diff --git a/src/assets/play/default/audio.mp3 b/src/assets/play/default/audio.mp3
new file mode 100755
index 0000000000000000000000000000000000000000..66313dcf084aa98da69908cb6ee9da2d0d4a451e
Binary files /dev/null and b/src/assets/play/default/audio.mp3 differ
diff --git a/src/assets/play/default/pic.jpg b/src/assets/play/default/pic.jpg
new file mode 100755
index 0000000000000000000000000000000000000000..1da3c1135cc324bf3ec67cc0c7b4c19caeef08f1
Binary files /dev/null and b/src/assets/play/default/pic.jpg differ
diff --git a/src/assets/play/music/click.mp3 b/src/assets/play/music/click.mp3
new file mode 100644
index 0000000000000000000000000000000000000000..f551dc50e89af2d63b79892af8bf1d61ae92f7a5
Binary files /dev/null and b/src/assets/play/music/click.mp3 differ
diff --git a/src/assets/play/text_bg.png b/src/assets/play/text_bg.png
new file mode 100755
index 0000000000000000000000000000000000000000..6084daeadcb2cec320328e7e1f362d104b7ffbaa
Binary files /dev/null and b/src/assets/play/text_bg.png differ