Commit 27abc5ba authored by Chen Jiping's avatar Chen Jiping

完成模板

parent 3695f7ce
......@@ -128,5 +128,8 @@
}
}
},
"defaultProject": "ng-template-generator"
"defaultProject": "ng-template-generator",
"cli": {
"analytics": "a25e4257-f436-47d1-8d39-caa0266c3e44"
}
}
\ No newline at end of file
<div class="model-content">
<div nz-row>
<div nz-col nzOffset='4'>
<h1 nz-title>课程练习内容编辑</h1>
</div>
</div>
<div nz-row>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="theme" nzNoColon=true>主题</nz-form-label>
<nz-form-control [nzSpan]="10">
<nz-select [(ngModel)]="item.theme" style="width: 110px;" id="theme"
(ngModelChange)="onChangeTheme($event, item, 'theme')" nzPlaceHolder="Theme">
<nz-option [nzValue]="option.code" [nzLabel]="option.name" *ngFor="let option of themeArr"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</div>
<div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<div id='listen-anchor'>
<nz-divider nzText="Stage内容" nzOrientation="left"></nz-divider>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzFor="add-btn" nzNoColon=true>操作</nz-form-label>
<nz-form-control [nzSpan]="6">
<button nz-button nzType="dashed" class="add-btn" id="add-btn" (click)="addStageItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i>添加
</button>
</nz-form-control>
</nz-form-item>
</div>
<app-upload-image-with-preview
[picUrl]="item.pic_url"
(imageUploaded)="onImageUploadSuccess($event, 'pic_url')"
></app-upload-image-with-preview>
<div *ngFor="let data of item.stageItemArr;let j = index">
<nz-card nzTitle="Stage-{{j+1}}" [nzExtra]="extraTemplate" style="margin:5vw;" nzType="inner">
<div nz-row>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzNoColon=true>Stage</nz-form-label>
<nz-form-control [nzSpan]="6">
<nz-input-group nzAddOnBefore="Stage">
<input type="text" nz-input [(ngModel)]="data.index" (blur)="save()">
</nz-input-group>
</nz-form-control>
</nz-form-item>
</div>
<app-audio-recorder
[audioUrl]="item.audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config>
<div nz-row>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzNoColon=true>标题</nz-form-label>
<nz-form-control [nzSpan]="8">
<textarea rows="4" nz-input [(ngModel)]="data.title" (blur)="saveContent(data.title)"></textarea>
</nz-form-control>
</nz-form-item>
</div>
<div nz-row>
<nz-form-item>
<nz-form-label [nzSpan]="6" nzNoColon=true>内容</nz-form-label>
<nz-form-control [nzSpan]="8">
<app-upload-image-with-preview [picUrl]="data.imgUrl"
(imageUploaded)="onImageUploadSuccess($event, data, 'imgUrl')">
</app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
</div>
</nz-card>
<ng-template #extraTemplate>
<button style="margin: 10px;" nz-button nzType="danger" (click)="delStageItem(j)">
<span>删除</span>
</button>
</ng-template>
</div>
</div>
\ No newline at end of file
\ No newline at end of file
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { NzMessageService } from 'ng-zorro-antd/message';
@Component({
selector: 'app-form',
......@@ -10,22 +10,35 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用
saveKey = "test_0011";
saveKey = "PU-11";
// 储存对象
item;
themeArr = [];
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
}
ngOnInit() {
this.themeArr = [];
this.themeArr.push({ code: '1', name: '主题1' });
this.themeArr.push({ code: '2', name: '主题2' });
this.item = {};
//默认为主题1
this.item.theme = '1';
this.item.stageItemArr = [];
// 获取存储的数据
(<any> window).courseware.getData((data) => {
(<any>window).courseware.getData((data) => {
if (data) {
this.item = data;
......@@ -58,9 +71,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据
* @param e
*/
onImageUploadSuccess(e, key) {
onImageUploadSuccess(e, item, key) {
this.item[key] = e.url;
item[key] = e.url;
this.save();
}
......@@ -80,7 +93,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据
*/
save() {
(<any> window).courseware.setData(this.item, null, this.saveKey);
(<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh();
}
......@@ -93,5 +106,61 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1);
}
getDefaultStageItem() {
const stageItem = {
index: '',
title: '',
picUrl: ''
};
return stageItem;
}
onChangeTheme(e, item, key) {
item[key] = e;
this.save();
}
saveContent(value) {
if (!value) {
return;
}
const chr = value.split(/\s+|\?|\.|\,|\!/);
let count = 0;
for (const c of chr) {
if (c) {
count += 1;
}
}
if (count <= 10) {
this.save();
}
else {
let id = this.message.error('超过10个单词量', { nzDuration: 0 }).messageId;
setTimeout(() => {
this.message.remove(id);
}, 3000);
}
}
addStageItem() {
const stageItem = this.getDefaultStageItem();
this.item.stageItemArr.push(stageItem);
this.save();
}
delStageItem(index) {
if (index !== -1) {
this.item.stageItemArr.splice(index, 1);
this.save();
}
}
}
import {
Label,
RichText,
MySprite, tweenChange, ShapeRect,
} from './Unit';
class Item {
/**图片集合 */
images;
audioObj;
_scaleX = 1;
_scaleY = 1;
set scaleX(v) {
this._scaleX = v;
}
get scaleX() {
return this._scaleX;
}
set scaleY(v) {
this._scaleY = v;
}
get scaleY() {
return this._scaleY;
}
constructor(images, audioObj, scaleX = 1, scaleY = 1) {
this.images = images;
this.audioObj = audioObj;
this._scaleX = scaleX;
this._scaleY = scaleY;
}
}
export class Stage extends Item {
bg;
picBg;
titleBg;
curTitleLabel;
curContent;
mission: Mission;
baseW = 1162;
bashH = 642;
width = 1162;
height = 642;
stageContentArr = [];
curIndex = -1;
init(theme) {
this.width = this.baseW * this.scaleX;
this.height = this.bashH * this.scaleY;
const bg = new ShapeRect();
bg.setSize(this.width, this.height);
bg.alpha = 0;
this.bg = bg;
const stageBg = new MySprite();
stageBg.init(this.images.get(theme + "bg2"));
stageBg.scaleX = this.scaleX;
stageBg.scaleY = this.scaleY;
stageBg.x = stageBg.getBoundingBox().width / 2;
stageBg.y = stageBg.getBoundingBox().height / 2;
bg.addChild(stageBg);
const picBg = new MySprite();
picBg.init(this.images.get(theme + "pic_bg"));
picBg.scaleX = this.scaleX;
picBg.scaleY = this.scaleY;
picBg.x = this.width / 2;
picBg.y = this.height / 2;
bg.addChild(picBg);
const picBg2 = new ShapeRect();
picBg2.setSize(picBg.width * this.scaleX, picBg.height * this.scaleY);
picBg2.alpha = 0;
picBg2.x = (this.width - picBg2.width) /2;
picBg2.y = (this.height - picBg2.height) /2;
bg.addChild(picBg2);
this.picBg = picBg2;
const titlePic = new MySprite();
titlePic.init(this.images.get(theme + "title_bg"));
titlePic.scaleX = this.scaleX;
titlePic.scaleY = this.scaleY;
titlePic.x = this.width / 2 + 196 * this.scaleX;
titlePic.y = 80 * this.scaleY;
bg.addChild(titlePic);
const titleBg = new ShapeRect();
titleBg.setSize(495 * this.scaleX, 134 * this.scaleY);
titleBg.x = (this.width - titleBg.width) / 2;
titleBg.y = 12 * this.scaleY;
titleBg.alpha = 0;
this.titleBg = titleBg;
bg.addChild(titleBg);
}
setStageContent(stageItemArr) {
if (!stageItemArr) {
return;
}
const setScale = (pW, pH, child) => {
let width = child.width;
let height = child.height;
let sx = pW / width;
let sy = pH / height;
let scale = Math.min(sx, sy);
if (scale < 1) {
child.setScaleXY(scale);
}
}
const getPic = (imgUrl) => {
const pic = new MySprite();
pic.init(this.images.get(imgUrl));
pic.x = this.picBg.width / 2;
pic.y = this.picBg.height / 2 - 9 * this.scaleY;
setScale(719 * this.scaleX, 383 * this.scaleY, pic);
return pic;
};
for (let i = 0; i < stageItemArr.length; ++i) {
let stageItem = stageItemArr[i];
if (!stageItem) {
continue;
}
let pic;
if (stageItem.imgUrl) {
pic = getPic(stageItem.imgUrl);
}
this.stageContentArr.push({ index: stageItem.index, title: stageItem.title, pic: pic })
}
}
showLast(callback = null) {
if (this.curIndex == 0) {
if (callback) {
callback();
}
return;
}
this.curIndex -= 1;
this.showContent(callback);
}
showNext(callback = null) {
if (this.curIndex == this.stageContentArr.length - 1) {
if (callback) {
callback();
}
return;
}
this.curIndex += 1;
this.showContent(callback);
}
private showContent(callback = null) {
let content = this.stageContentArr[this.curIndex];
this.mission.setStageVal(content.index);
this.setTitleVal(content.title);
this.setPic(content, () => {
this.curContent = content;
});
if (callback) {
callback();
}
}
private setTitleVal(val) {
if (!val) {
return;
}
if (this.curTitleLabel) {
this.titleBg.removeChild(this.curTitleLabel);
}
const title = new RichText();
title.scaleX = this._scaleX;
title.scaleY = this._scaleY;
title.width = this.titleBg.width - 40 * this._scaleX;
title.disH = 0;
title.text = val;
title.textAlign = 'middle';
title.fontSize = 40;
title.fontName = "BRLNSDB";
title.fontColor = "#a0e9ff";
title.refreshSize();
title.x = (this.titleBg.width - title.width) / 2;
title.y = (this.titleBg.height - title.height) / 2;
this.titleBg.addChild(title);
this.curTitleLabel = title;
}
private setPic(content, callback = null) {
if (this.curContent) {
this.picBg.removeChild(this.curContent.pic);
}
this.picBg.addChild(content.pic);
if (callback) {
callback();
}
}
}
export class Mission extends Item {
bg;
stageValLabel;
stageBgPic;
baseW = 435;
bashH = 96;
width = 435;
height = 96;
init(theme) {
this.width = this.baseW * this.scaleX;
this.height = this.bashH * this.scaleY;
const bg = new ShapeRect();
bg.setSize(this.width, this.height);
bg.alpha = 0;
this.bg = bg;
const missionPic = new MySprite();
missionPic.init(this.images.get(theme + "e-mission"));
missionPic.scaleX = this.scaleX;
missionPic.scaleY = this.scaleY;
missionPic.x = missionPic.getBoundingBox().width / 2;
missionPic.y = this.height / 2;
bg.addChild(missionPic);
const stageBgPic = new MySprite();
stageBgPic.init(this.images.get(theme + "stage_bg"));
stageBgPic.scaleX = this.scaleX;
stageBgPic.scaleY = this.scaleY;
stageBgPic.alpha = 0;
stageBgPic.x = this.width - stageBgPic.getBoundingBox().width / 2;
stageBgPic.y = this.height - stageBgPic.getBoundingBox().height / 2 + 2 * this.scaleY;
this.stageBgPic = stageBgPic;
bg.addChild(stageBgPic);
const stageVal = new Label();
stageVal.text = "";
stageVal.fontName = "BRLNSDB";
stageVal.fontColor = "#ffffff"
stageVal.fontSize = 34;
stageVal.textAlign = 'middle';
stageVal.scaleX = this.scaleX;
stageVal.scaleY = this.scaleY;
stageVal.refreshSize();
stageVal.x = missionPic.getBoundingBox().width + 5 * this.scaleX;
stageVal.y = 20 * this.scaleY + stageVal.getBoundingBox().height / 2;
stageVal.alpha = 0;
bg.addChild(stageVal);
this.stageValLabel = stageVal;
}
setStageVal(index) {
if (!index) {
this.stageBgPic.alpha = 0;
this.stageValLabel.alpha = 0;
return;
}
this.stageValLabel.text = 'Stage ' + index;
this.stageBgPic.alpha = 1;
this.stageValLabel.alpha = 1;
}
}
\ No newline at end of file
......@@ -767,6 +767,40 @@ export class RichText extends Label {
}
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;
const selfW = this.width;
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW;
for (const c of chr) {
if (this.ctx.measureText(temp).width * this.scaleX < w && this.ctx.measureText(temp + (c)).width * this.scaleX <= w) {
temp += ' ' + c;
} else {
row.push(temp);
temp = ' ' + c;
}
}
if (temp != ' ') {
row.push(temp);
}
this._height = this.fontSize * row.length + (row.length - 1) * this.disH;
this.ctx.restore();
}
drawText() {
......@@ -782,48 +816,43 @@ export class RichText extends Label {
this.ctx.fillStyle = this.fontColor;
const selfW = this.width * this.scaleX;
const selfW = this.width;
const chr = this.text.split(' ');
let temp = '';
const row = [];
const w = selfW - 80;
const disH = (this.fontSize + this.disH) * this.scaleY;
const w = selfW;
const disH = (this.fontSize + this.disH);
for (const c of chr) {
if (this.ctx.measureText(temp).width < w && this.ctx.measureText(temp + (c)).width <= w) {
if (this.ctx.measureText(temp).width * this.scaleX < w && this.ctx.measureText(temp + (c)).width * this.scaleX <= w) {
temp += ' ' + c;
} else {
row.push(temp);
temp = ' ' + c;
}
}
if (temp != ' ') {
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
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
for (let b = 0; b < row.length; b++) {
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔20
}
}
......
import {Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener} from '@angular/core';
import { Component, ElementRef, ViewChild, OnInit, Input, OnDestroy, HostListener } from '@angular/core';
import {
Label,
MySprite, tweenChange,
} from './Unit';
import {res, resAudio} from './resources';
import { res, resAudio } from './resources';
import {Subject} from 'rxjs';
import {debounceTime} from 'rxjs/operators';
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import TWEEN from '@tweenjs/tween.js';
import { Stage, Mission } from './Stage';
@Component({
......@@ -22,8 +22,8 @@ import TWEEN from '@tweenjs/tween.js';
})
export class PlayComponent implements OnInit, OnDestroy {
@ViewChild('canvas', {static: true }) canvas: ElementRef;
@ViewChild('wrap', {static: true }) wrap: ElementRef;
@ViewChild('canvas', { static: true }) canvas: ElementRef;
@ViewChild('wrap', { static: true }) wrap: ElementRef;
// 数据
data;
......@@ -57,17 +57,17 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft;
canvasTop;
saveKey = 'test_0011';
saveKey = 'PU-11';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true;
curPic;
theme;
stage: Stage;
@HostListener('window:resize', ['$event'])
onResize(event) {
......@@ -80,13 +80,13 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = {};
// 获取数据
const getData = (<any> window).courseware.getData;
const getData = (<any>window).courseware.getData;
getData((data) => {
if (data && typeof data == 'object') {
this.data = data;
}
// console.log('data:' , data);
console.log('data:' , data);
// 初始化 各事件监听
this.initListener();
......@@ -116,6 +116,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// 预加载资源
this.loadResources().then(() => {
window["air"].hideAirClassLoading(this.saveKey, this.data);
this.init();
this.update();
});
......@@ -432,9 +433,14 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
if (!this.data.stageItemArr) {
this.data.stageItemArr = [];
this.data.stageItemArr.push(this.getDefaultStageItem());
}
if (!this.data.theme) {
this.data.theme = '1';
}
}
......@@ -444,9 +450,13 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
for (let i = 0; i < this.data.stageItemArr.length; ++i) {
let stageItem = this.data.stageItemArr[i];
if (stageItem.imgUrl) {
this.addUrlToImages(stageItem.imgUrl);
}
}
}
/**
......@@ -454,10 +464,6 @@ export class PlayComponent implements OnInit, OnDestroy {
*/
initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
......@@ -475,13 +481,10 @@ export class PlayComponent implements OnInit, OnDestroy {
const s = Math.min(sx, sy);
this.mapScale = s;
// this.mapScale = sx;
// this.mapScale = sy;
this.renderArr = [];
this.theme = this.data.theme + "_";
}
......@@ -495,17 +498,22 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initPic();
this.initStage();
this.initBottomPart();
this.stage.showNext(()=>{
this.showBtn();
});
}
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.init(this.images.get(this.theme + 'btn_left'));
btnLeft.x = 158 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.alpha = 0;
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
......@@ -515,11 +523,11 @@ export class PlayComponent implements OnInit, OnDestroy {
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.init(this.images.get(this.theme + 'btn_right'));
btnRight.x = this.canvasWidth - 118 * this.mapScale;
btnRight.y = btnLeft.y;
btnRight.setScaleXY(this.mapScale);
btnRight.alpha = 0;
this.renderArr.push(btnRight);
this.btnRight = btnRight;
......@@ -527,41 +535,40 @@ export class PlayComponent implements OnInit, OnDestroy {
initPic() {
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1);
this.pic1 = pic1;
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
const bg = new MySprite();
bg.init(this.images.get(this.theme + "bg"));
const sx = this.canvasWidth / bg.width;
const sy = this.canvasHeight / bg.height;
const s = Math.max(sx, sy);
bg.setScaleXY(s);
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
this.renderArr.push(bg);
const bg2 = new MySprite();
bg2.init(this.images.get(this.theme + "bg2"));
bg2.setScaleXY(this.mapScale);
bg2.x = this.canvasWidth / 2;
bg2.y = this.canvasHeight / 2;
this.renderArr.push(bg2);
}
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
initStage() {
this.renderArr.push(pic2);
this.pic2 = pic2;
const stage = new Stage(this.images, this.audioObj, this.mapScale, this.mapScale);
stage.init(this.theme);
stage.bg.x = (this.canvasWidth - stage.width) / 2;
stage.bg.y = (this.canvasHeight - stage.height) / 2;
this.renderArr.push(stage.bg);
stage.setStageContent(this.data.stageItemArr);
this.stage = stage;
this.curPic = pic1;
const mission = new Mission(this.images, this.audioObj, this.mapScale, this.mapScale);
mission.init(this.theme);
mission.bg.x = -50 * this.mapScale;
mission.bg.y = 67 * this.mapScale;
this.renderArr.push(mission.bg);
this.stage.mission = mission;
}
......@@ -577,42 +584,42 @@ export class PlayComponent implements OnInit, OnDestroy {
lastPage() {
if (this.curPic == this.pic1) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.stage.showLast(() => {
this.canTouch = true;
this.curPic = this.pic1;
this.showBtn();
});
}
nextPage() {
if (this.curPic == this.pic2) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.stage.showNext(() => {
this.canTouch = true;
this.curPic = this.pic2;
this.showBtn();
});
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
showBtn(){
if(this.stage.curIndex > 0){
this.btnLeft.alpha = 1;
}
else{
this.btnLeft.alpha = 0;
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
if(this.stage.curIndex < this.stage.stageContentArr.length - 1){
this.btnRight.alpha = 1;
}
else{
this.btnRight.alpha = 0;
}
}
......@@ -625,26 +632,16 @@ export class PlayComponent implements OnInit, OnDestroy {
return;
}
if ( this.checkClickTarget(this.btnLeft) ) {
if (this.checkClickTarget(this.btnLeft)) {
this.btnLeftClicked();
return;
}
if ( this.checkClickTarget(this.btnRight) ) {
if (this.checkClickTarget(this.btnRight)) {
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return;
}
}
mapMove(event) {
......@@ -674,6 +671,14 @@ export class PlayComponent implements OnInit, OnDestroy {
}
getDefaultStageItem() {
const stageItem = {
index: '1',
title: 'Make a Family page for your All about me book. ',
picUrl: 'assets/default/default.jpg'
};
return stageItem;
}
}
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"],
['1_bg', "assets/play/theme/1/bg.png"],
['1_bg2', "assets/play/theme/1/bg2.png"],
['1_btn_left', "assets/play/theme/1/btn_left.png"],
['1_btn_right', "assets/play/theme/1/btn_right.png"],
['1_e-mission', "assets/play/theme/1/e-mission.png"],
['1_pic_bg', "assets/play/theme/1/pic_bg.png"],
['1_stage_bg', "assets/play/theme/1/stage_bg.png"],
['1_title_bg', "assets/play/theme/1/title_bg.png"],
['2_bg', "assets/play/theme/2/bg.png"],
['2_bg2', "assets/play/theme/2/bg2.png"],
['2_btn_left', "assets/play/theme/2/btn_left.png"],
['2_btn_right', "assets/play/theme/2/btn_right.png"],
['2_e-mission', "assets/play/theme/2/e-mission.png"],
['2_pic_bg', "assets/play/theme/2/pic_bg.png"],
['2_stage_bg', "assets/play/theme/2/stage_bg.png"],
['2_title_bg', "assets/play/theme/2/title_bg.png"],
];
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment