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)"--> + <!--></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)"--> + <!--></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)"--> + <!--></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? ', - // 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? ', - 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