Commit 253254ac authored by Chen Jiping's avatar Chen Jiping

fix:完成模板开发

parent 39b85803
...@@ -20,6 +20,10 @@ export function getDefaultExercises() { ...@@ -20,6 +20,10 @@ export function getDefaultExercises() {
export class AnswerBean extends Obj { export class AnswerBean extends Obj {
letterArr = []; letterArr = [];
start = -1;
letterStart = -1;
} }
export function getDefaultAnswer(){ export function getDefaultAnswer(){
...@@ -33,21 +37,15 @@ export function getDefaultAnswer(){ ...@@ -33,21 +37,15 @@ export function getDefaultAnswer(){
export class LetterBean extends Obj { export class LetterBean extends Obj {
key = '';
bold = '0'; bold = '0';
fontColor = '#363333'; fontColor = '#363333';
isFill = '0';
} }
export function getDefaultLetter() { export function getDefaultLetter() {
let letter = new LetterBean(); let letter = new LetterBean();
letter.key = 'K-' + new Date().getTime();
return letter; return letter;
} }
...@@ -8,4 +8,16 @@ ...@@ -8,4 +8,16 @@
} }
.gridStyle { .gridStyle {
width: '50%' width: '50%'
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'GOTHIC';
src: url("../../assets/font/GOTHIC.TTF") ;
} }
\ No newline at end of file
...@@ -51,7 +51,23 @@ ...@@ -51,7 +51,23 @@
(blur)="saveContent(data)"></textarea> (blur)="saveContent(data)"></textarea>
</nz-form-control> </nz-form-control>
</nz-form-item> </nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="20">
<div *ngFor="let letter of data.letterArr; let j = index" style="float: left;">
<div *ngIf="(letter.bold == '0')" style="float: left;">
<label
[ngStyle]="{'float': 'left','font-size': '21px','font-family': 'GOTHIC','color':letter.fontColor, 'margin-right': '2px'}">{{letter.val
== ' ' ? '&nbsp;' : letter.val}}</label>
</div>
<div *ngIf="(letter.bold == '1')" style="float: left;">
<label
[ngStyle]="{'float': 'left','font-size': '21px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}">{{letter.val
== ' ' ? '&nbsp;' : letter.val}}</label>
</div>
</div>
</nz-form-control>
</nz-form-item>
<div *ngFor="let answer of data.answerArr; let m=index"> <div *ngFor="let answer of data.answerArr; let m=index">
<nz-card nzType="inner" nzTitle="{{ m == 0 ? '正确选项': '错误选项'}}"> <nz-card nzType="inner" nzTitle="{{ m == 0 ? '正确选项': '错误选项'}}">
<nz-form-item *ngIf="m == 0"> <nz-form-item *ngIf="m == 0">
...@@ -67,11 +83,11 @@ ...@@ -67,11 +83,11 @@
<nz-form-control [nzSpan]="20"> <nz-form-control [nzSpan]="20">
<div *ngFor="let letter of answer.letterArr; let j = index" style="float: left;"> <div *ngFor="let letter of answer.letterArr; let j = index" style="float: left;">
<div *ngIf="(letter.bold == '0')" style="float: left;"> <div *ngIf="(letter.bold == '0')" style="float: left;">
<a style="float: left;font-size: 42px;font-family: FuturaBT-Bold; color:#363333; margin-right: 2px" <a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHIC','color':letter.fontColor, 'margin-right': '2px'}"
(click)="clickLetter(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a> (click)="clickLetter(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
</div> </div>
<div *ngIf="(letter.bold == '1')" style="float: left;"> <div *ngIf="(letter.bold == '1')" style="float: left;">
<a style="float: left;font-size: 42px;font-family: FuturaBT-Bold; color:#581578; margin-right: 2px;font-weight: bold;" <a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}"
(click)="clickLetter(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a> (click)="clickLetter(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
</div> </div>
</div> </div>
...@@ -82,8 +98,8 @@ ...@@ -82,8 +98,8 @@
<nz-form-control [nzSpan]="20"> <nz-form-control [nzSpan]="20">
<div *ngFor="let letter of answer.letterArr; let j = index" style="float: left;"> <div *ngFor="let letter of answer.letterArr; let j = index" style="float: left;">
<div *ngIf="(answer.from &lt;= j && answer.to &gt;= j)" style="float: left;"> <div *ngIf="(answer.from &lt;= j && answer.to &gt;= j)" style="float: left;">
<a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'FuturaBT-Bold','color':letter.fontColor, 'margin-right': '2px','font-weight': 'bold'}" <a [ngStyle]="{'float': 'left','font-size': '42px','font-family': 'GOTHICB','color':letter.fontColor, 'margin-right': '2px'}"
(click)="clickLetter2( answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a> (click)="clickLetter2(data, answer, j)">{{letter.val == ' ' ? '&nbsp;' : letter.val}}</a>
</div> </div>
</div> </div>
</nz-form-control> </nz-form-control>
......
...@@ -39,7 +39,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -39,7 +39,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
if (data) { if (data) {
this.item = data; this.item = data;
} }
console.log(data); console.log(JSON.stringify(data));
this.init(); this.init();
this.changeDetectorRef.markForCheck(); this.changeDetectorRef.markForCheck();
this.changeDetectorRef.detectChanges(); this.changeDetectorRef.detectChanges();
...@@ -119,25 +119,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -119,25 +119,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
addLetterItem(item) {
let letter = getDefaultLetter();
item.letterArr.push(letter);
item.letterArr = [...item.letterArr];
this.save();
}
delLetter(item, index) {
if (index !== -1) {
item.letterArr.splice(index, 1);
item.letterArr = [...item.letterArr];
this.save();
}
}
saveContent(item) { saveContent(item) {
const reset = (answer) => { const reset = (answer) => {
...@@ -161,20 +142,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -161,20 +142,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item.oldVal = val; item.oldVal = val;
let letterArr = [];
for (let j = 0; j < val.length; ++j) {
let letter = getDefaultLetter();
letter.val = val.charAt(j);
letterArr.push(letter);
}
let jsonStr = JSON.stringify(letterArr);
for (let i = 0; i < item.answerArr.length; ++i) { for (let i = 0; i < item.answerArr.length; ++i) {
let answer = item.answerArr[i]; let answer = item.answerArr[i];
reset(answer); reset(answer);
for (let j = 0; j < val.length; ++j) { answer.letterArr = JSON.parse(jsonStr);
let letter = getDefaultLetter();
letter.val = val.charAt(j);
answer.letterArr.push(letter);
}
} }
item.letterArr = JSON.parse(jsonStr);
} }
} }
else { else {
...@@ -185,6 +174,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -185,6 +174,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
reset(answer); reset(answer);
} }
item.letterArr = [];
} }
this.save(); this.save();
...@@ -211,24 +202,48 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -211,24 +202,48 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
} }
private setLetter(exercises) {
clickLetter(exercises, item, i) { let letterArr = exercises.letterArr;
if(!this.checkIntersection(exercises, item, i)){ for(let i = 0; i < letterArr.length; ++ i){
return; letterArr[i].fontColor = '#363333';
letterArr[i].bold = '0'
} }
let letterArr = item.letterArr; for (let i = 0; i < exercises.answerArr.length; ++i) {
if (!item.start || item.start == -1) { let item = exercises.answerArr[i];
for (let i = 0; i < letterArr.length; ++i) { let from = item.from;
let to = item.to;
for (let i = from; i <= to; ++i) {
if(!i || i == -1){
continue;
}
letterArr[i].bold = '0'; let letter = item.letterArr[i];
letterArr[i].fontColor = '#363333';
letterArr[i].fontColor = letter.fontColor;
letterArr[i].bold = letter.bold;
} }
}
this.save();
}
clickLetter(exercises, item, i) {
if (!this.checkIntersection(exercises, item, i)) {
return;
}
let letterArr = item.letterArr;
if (!item.start || item.start == -1) {
item.start = i; item.start = i;
letterArr[i].bold = '1'; letterArr[i].bold = '1';
letterArr[i].fontColor = '#581578'; letterArr[i].fontColor = '#581578';
...@@ -258,14 +273,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -258,14 +273,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
} }
item.start = -1; item.start = -1;
}
this.save(); this.setLetter(exercises);
}
} }
private checkIntersection(exercises, item, index){ private checkIntersection(exercises, item, index) {
let result = false; let result = false;
...@@ -273,16 +288,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -273,16 +288,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
let answer = exercises.answerArr[i]; let answer = exercises.answerArr[i];
if(answer == item){ if (answer == item) {
continue; continue;
} }
if(answer.from <= index && answer.to >= index){ if (answer.from <= index && answer.to >= index) {
result = true; result = true;
} }
} }
if(result){ if (result) {
let id = this.message.error('所选内容有交叉,请重新选择', { nzDuration: 0 }).messageId; let id = this.message.error('所选内容有交叉,请重新选择', { nzDuration: 0 }).messageId;
setTimeout(() => { setTimeout(() => {
this.message.remove(id); this.message.remove(id);
...@@ -294,7 +309,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -294,7 +309,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
return true; return true;
} }
clickLetter2(item, i) { clickLetter2(exercises, item, i) {
let letterArr = item.letterArr; let letterArr = item.letterArr;
...@@ -332,108 +347,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -332,108 +347,14 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
} }
item.letterStart = -1; item.letterStart = -1;
}
this.save();
}
boldOptionChange(item) {
if (item.bold == '0') { this.setLetter(exercises);
item.fontColor = "#363333";
} }
else {
item.fontColor = "#0fad51";
}
this.save();
}
letterOptionChange(item) {
if (item.letterFlag == '0') {
item.letterArr = [];
}
else {
item.letterArr = [];
}
this.save();
} }
private setOptionArr(exercises) {
const getOptionArr = (flag) => {
let tempArr = [];
for (let i = 0; i < this.item.letterArr.length; ++i) {
let letter = this.item.letterArr[i];
if (!letter || !letter.val) {
continue;
}
let index = letter.val.indexOf("-");
if (index == -1) {
tempArr.push(letter);
}
else {
let pattern;
if (flag == 'r') {
pattern = /^-.+(?<!-)$/;
}
else if (flag == 'm') {
pattern = /^-.+-$/;
}
else {
pattern = /^(?!-).+-$/;
}
if (pattern.test(letter.val)) {
tempArr.push(letter);
}
}
}
return tempArr;
}
if (!exercises.optionArr) {
exercises.optionArr = [];
}
let tempArr = [];
let val = exercises.val ? exercises.val : "";
const chr = val.split(/\s+|\?|\.|\,|\!/);
for (const c of chr) {
let index = c.indexOf("_");
if (index == -1) {
continue;
}
if (index == 0) {
tempArr = getOptionArr('l')
}
else if (index > 0 && index < c.length - 1) {
tempArr = getOptionArr('m');
}
else {
tempArr = getOptionArr('r');
}
}
exercises.optionArr = [...tempArr];
}
check(value, maxLength: number) { check(value, maxLength: number) {
if (!value) { if (!value) {
...@@ -461,49 +382,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -461,49 +382,5 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
return false; return false;
} }
} }
private refreshExercises(item, letter, flag) {
let key = letter.key;
//改变单词对应的值
let letterArr = item.letterArr;
if (!letterArr) {
return;
}
for (let j = 0; j < letterArr.length; ++j) {
let tLetter = letterArr[j];
if (tLetter.isFill != '1') {
continue;
}
if (flag == 'R') {
tLetter.val = letter.val.replace(/\-/g, '');
tLetter.key = key;
item.key = key;
}
else {
if (tLetter.key == key && letter.val) {
if (flag == 'U') {
tLetter.val = letter.val.replace(/\-/g, '');
}
else if (flag == 'D') {
tLetter.val = '_';
tLetter.key = '';
tLetter.isFill = '1';
item.key = '';
}
}
}
}
}
} }
import { text } from "@fortawesome/fontawesome-svg-core";
import { faAlignRight } from "@fortawesome/free-solid-svg-icons"; import { faAlignRight } from "@fortawesome/free-solid-svg-icons";
import { Listening } from "./Listening"; import { Listening } from "./Listening";
import { getMaxScale, jelly, jellyPop, Label, Label2, LabelText, Line, MySprite, RichText, ShapeCircle, ShapeRect, ShapeRectNew, tweenChange } from "./Unit"; import { getMaxScale, getMinScale, jelly, jellyPop, Label, Label2, LabelText, Line, MySprite, RichText, ShapeCircle, ShapeRect, ShapeRectNew, Text, tweenChange } from "./Unit";
export class Exercises { export class Exercises {
data; data;
...@@ -15,7 +16,7 @@ export class Exercises { ...@@ -15,7 +16,7 @@ export class Exercises {
answer: ShapeRect; answer: ShapeRect;
answerLabel; answerLabel: RichText;
scaleX = 1; scaleX = 1;
...@@ -25,11 +26,17 @@ export class Exercises { ...@@ -25,11 +26,17 @@ export class Exercises {
indexLabelBg: ShapeCircle; indexLabelBg: ShapeCircle;
pic: MySprite;
answered = false; answered = false;
showed = false; showed = false;
underline : Line; underline: Line;
audioPos = {x:0, y :0};
circle : MySprite;
init(images, indexBgColor, data, scaleX = 1, scaleY = 1) { init(images, indexBgColor, data, scaleX = 1, scaleY = 1) {
...@@ -55,13 +62,33 @@ export class Exercises { ...@@ -55,13 +62,33 @@ export class Exercises {
h = this.answer.height > h ? this.answer.height : h; h = this.answer.height > h ? this.answer.height : h;
this.bg.setSize(w, h); this.bg.setSize(w, h);
this.answer.y = (h - this.answer.height) / 2;
this.indexLabelBg.y = this.answer.y + this.indexLabelBg.radius;
let labelH = (this.answerLabel.fontSize) * this.scaleY;
if(this.pic){
this.pic.y = this.answer.y + this.answerLabel.endPos.offY * this.scaleY + labelH / 2;
this.audioPos.x = this.pic.x + this.pic.getBoundingBox().width / 2 + 3 * this.scaleX;
this.audioPos.y = this.pic.y;
}
else{
this.audioPos.x = this.answer.x + this.answerLabel.endPos.offX * this.scaleX + 3 * this.scaleX;
this.audioPos.y = this.answer.y + this.answerLabel.endPos.offY * this.scaleY + labelH / 2;
}
} }
initBg() { initBg() {
const bg = new ShapeRect(); const bg = new ShapeRect();
bg.fillColor = "#dbd0e7";
bg.alpha = 0; bg.alpha = 1;
this.bg = bg; this.bg = bg;
} }
...@@ -72,7 +99,6 @@ export class Exercises { ...@@ -72,7 +99,6 @@ export class Exercises {
indexBg.fillColor = "#763c92"; indexBg.fillColor = "#763c92";
indexBg.setRadius(r); indexBg.setRadius(r);
indexBg.x = 56 * this.scaleX + r; indexBg.x = 56 * this.scaleX + r;
indexBg.y = r + 43 * this.scaleY;
this.bg.addChild(indexBg); this.bg.addChild(indexBg);
this.indexLabelBg = indexBg; this.indexLabelBg = indexBg;
...@@ -93,31 +119,78 @@ export class Exercises { ...@@ -93,31 +119,78 @@ export class Exercises {
initExercises() { initExercises() {
let startX = 17 * this.scaleX + this.indexLabelBg.width / 2 + this.indexLabelBg.x; let startX = 17 * this.scaleX + this.indexLabelBg.radius + this.indexLabelBg.x;
let y = 0;
let answer = this.getAnswerView(this.data.answer); let answer = this.getAnswerView(this.data);
answer.x = startX; answer.x = startX;
answer.y = y;
this.answer = answer; this.answer = answer;
this.bg.addChild(answer); this.bg.addChild(answer);
let mH = 100 * this.scaleY;
let mW = 100 * this.scaleX;
if(this.data.picUrl){
const pic = new MySprite();
pic.init(this.images.get(this.data.picUrl));
let scale = getMinScale(pic,mW, mH);
scale = Math.floor(scale * 100) / 100;
pic.setScaleXY(scale > this.scaleX ? this.scaleX : scale);
pic.x = answer.x + this.answerLabel.endPos.offX * this.scaleX + pic.getBoundingBox().width / 2;
this.pic = pic;
this.bg.addChild(pic);
}
} }
getAnswerView(answerData) { getAnswerView(data) {
const getTextArr = () => {
let textArr = [];
let from = data.answerArr[0].from;
let to = data.answerArr[0].to;
let flag = 'R';
for (let i = 0; i < data.letterArr.length; ++i) {
let text = new Text();
text.val = data.letterArr[i].val;
text.fontColor = data.letterArr[i].fontColor;
if (i >= from && i <= to) {
text.ext01 = flag;
}
if (text.val == '/') {
text.fontColor = '#af62d4';
text.bold = true;
}
if (data.letterArr[i].bold == '1') {
text.bold = true;
}
textArr.push(text);
}
return textArr;
}
const text = new RichText(); const text = new RichText();
text.fontColor = "#363333"; text.fontColor = "#363333";
text.fontSize = 48; text.fontSize = 42;
text.fontName = "MMB"; text.fontName = "GOTHIC";
text.text = this.data.val; text.boldFontName = 'GOTHICB';
text.textArr = getTextArr();
text.disH = 20 * this.scaleX; text.disH = 20 * this.scaleX;
text.width = 1056 * this.scaleX; text.maxWidth = 980 * this.scaleX;
text.setScaleXY(this.scaleX); text.setScaleXY(this.scaleX);
text.refreshSize(); text.refreshSize();
this.answerLabel = text; this.answerLabel = text;
...@@ -125,10 +198,10 @@ export class Exercises { ...@@ -125,10 +198,10 @@ export class Exercises {
const bg = new ShapeRect(); const bg = new ShapeRect();
bg.setSize(text.getBoundingBox().width, text.getBoundingBox().height); bg.setSize(text.getBoundingBox().width, text.getBoundingBox().height);
bg.fillColor="#432300" bg.fillColor = "#432300"
bg.alpha = 0; bg.alpha = 0;
text.y = bg.height / 2; text.y = bg.height / 2 - text.disH / 2;
text.x = 0; text.x = 0;
bg.addChild(text); bg.addChild(text);
...@@ -137,8 +210,7 @@ export class Exercises { ...@@ -137,8 +210,7 @@ export class Exercises {
check(mx, my) {
check(curLetterItem, mx, my) {
const checkPointInRect = (x, y, rect) => { const checkPointInRect = (x, y, rect) => {
if (x >= rect.x && x <= rect.x + rect.width) { if (x >= rect.x && x <= rect.x + rect.width) {
...@@ -149,35 +221,58 @@ export class Exercises { ...@@ -149,35 +221,58 @@ export class Exercises {
return false; return false;
} }
if (!curLetterItem) { let rect = this.answer.getBoundingBox();
return false;
}
let textArr = this.answerLabel.textArr;
let rect = this.answer.getBoundingBox(); rect.width = 0;
let offsetX = 0;
let width = 60 * this.scaleX; let offsetY = 0;
let x = this.answerLabel.linePos.x * this.scaleX; let start;
rect.x += x; let h = (this.answerLabel.fontSize + this.answerLabel.disH / 2) * this.scaleY;
rect.width = width;
//console.log(rect, fillText); for (let i = 0; i < textArr.length; ++i) {
if (textArr[i].ext01 == 'R') {
start = i;
offsetX = textArr[i].x;
break;
}
}
if (checkPointInRect(mx, my, rect) && curLetterItem.data.key == this.data.key) { for (let i = start; i < textArr.length; ++i) {
this.answered = true; if (textArr[i].ext01 == 'R') {
this.answerLabel.fillVal = curLetterItem.data.val.replace(/\-/g, ''); rect.width += textArr[i].width;
this.answerLabel.answered = true; offsetY = textArr[i].y;
if(this.underline){
this.underline.visible = false;
} }
return true;
} }
else {
rect.y += offsetY * this.scaleY;
rect.x += offsetX * this.scaleX;
rect.width = rect.width * this.scaleX;
if (!checkPointInRect(mx, my, rect)) {
return false; return false;
} }
const circle = new MySprite();
circle.init(this.images.get('circle'));
circle.scaleY = this.scaleY;
circle.scaleX = (rect.width + 30* this.scaleX) / circle.width;
circle.x = this.answer.x + offsetX * this.scaleY + rect.width / 2;
circle.y = this.answer.y + offsetY * this.scaleY + h / 2;
this.circle = circle;
this.bg.addChild(circle);
this.answered = true;
return true;
} }
}
\ No newline at end of file }
\ No newline at end of file
...@@ -62,7 +62,7 @@ export class Listening { ...@@ -62,7 +62,7 @@ export class Listening {
} }
play(callback = null){ play(callback = null){
console.log('playing:', this.playing);
if(!this.playing){ if(!this.playing){
this.playAudio(callback); this.playAudio(callback);
return this.audio; return this.audio;
...@@ -82,7 +82,12 @@ export class Listening { ...@@ -82,7 +82,12 @@ export class Listening {
} }
playAudio(callback = null){ playAudio(callback = null){
if(!this.audio){
if(callback){
callback();
}
return;
}
this.btnPlay.alpha = 0; this.btnPlay.alpha = 0;
this.btnStop.alpha = 1; this.btnStop.alpha = 1;
......
import TWEEN from '@tweenjs/tween.js'; import TWEEN from '@tweenjs/tween.js';
interface AirWindow extends Window { interface AirWindow extends Window {
air: any; air: any;
curCtx: any; curCtx: any;
curImages: any; curImages: any;
...@@ -223,7 +223,7 @@ export class MySprite extends Sprite { ...@@ -223,7 +223,7 @@ export class MySprite extends Sprite {
this._offCtx.drawImage(this.img, 0, 0); this._offCtx.drawImage(this.img, 0, 0);
if (this._maskSpr) { if (this._maskSpr) {
this._offCtx.globalCompositeOperation = 'destination-in'; this._offCtx.globalCompositeOperation = 'destination-in';
this._offCtx.drawImage(this._maskSpr.img, this._maskSpr.x + this._maskSpr._offX - this._offX , this._maskSpr.y + this._maskSpr._offY - this._offY); this._offCtx.drawImage(this._maskSpr.img, this._maskSpr.x + this._maskSpr._offX - this._offX, this._maskSpr.y + this._maskSpr._offY - this._offY);
} }
this.ctx.drawImage(this._offCanvas, this._offX, this._offY); this.ctx.drawImage(this._offCanvas, this._offX, this._offY);
...@@ -247,11 +247,11 @@ export class MySprite extends Sprite { ...@@ -247,11 +247,11 @@ export class MySprite extends Sprite {
} }
updateChildren() { updateChildren() {
if (this.children.length <= 0) { return; } if (this.children.length <= 0) { return; }
for (const child of this.children) { for (const child of this.children) {
if (child === this) { if (child === this) {
if (this.visible) { if (this.visible) {
this.drawSelf(); this.drawSelf();
...@@ -306,14 +306,14 @@ export class MySprite extends Sprite { ...@@ -306,14 +306,14 @@ export class MySprite extends Sprite {
if (this.children[i]) { if (this.children[i]) {
if (this.children[i] !== this) { if (this.children[i] !== this) {
this.children.splice(i, 1); this.children.splice(i, 1);
i --; i--;
} }
} }
} }
} }
_changeChildAlpha(alpha) { _changeChildAlpha(alpha) {
for (const child of this.children) { for (const child of this.children) {
if (child !== this) { if (child !== this) {
child.alpha = alpha; child.alpha = alpha;
} }
...@@ -400,7 +400,7 @@ export class MySprite extends Sprite { ...@@ -400,7 +400,7 @@ export class MySprite extends Sprite {
} }
return {px, py, sx, sy}; return { px, py, sx, sy };
}; };
...@@ -412,7 +412,7 @@ export class MySprite extends Sprite { ...@@ -412,7 +412,7 @@ export class MySprite extends Sprite {
const width = this.width * Math.abs(data.sx); const width = this.width * Math.abs(data.sx);
const height = this.height * Math.abs(data.sy); const height = this.height * Math.abs(data.sy);
return {x, y, width, height}; return { x, y, width, height };
} }
} }
...@@ -442,10 +442,10 @@ export class ColorSpr extends MySprite { ...@@ -442,10 +442,10 @@ export class ColorSpr extends MySprite {
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height); const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) { for (let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) { for (let j = 0; j < c.width; j++) {
const x = (i * 4) * c.width + ( j * 4 ); const x = (i * 4) * c.width + (j * 4);
const r = c.data[x]; const r = c.data[x];
const g = c.data[x + 1]; const g = c.data[x + 1];
const b = c.data[x + 2]; const b = c.data[x + 2];
...@@ -488,10 +488,10 @@ export class GrayscaleSpr extends MySprite { ...@@ -488,10 +488,10 @@ export class GrayscaleSpr extends MySprite {
const rect = this.getBoundingBox(); const rect = this.getBoundingBox();
const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height); const c = this.ctx.getImageData(rect.x, rect.y, rect.width, rect.height);
for ( let i = 0; i < c.height; i++) { for (let i = 0; i < c.height; i++) {
for ( let j = 0; j < c.width; j++) { for (let j = 0; j < c.width; j++) {
const x = (i * 4) * c.width + ( j * 4 ); const x = (i * 4) * c.width + (j * 4);
const r = c.data[x]; const r = c.data[x];
const g = c.data[x + 1]; const g = c.data[x + 1];
const b = c.data[x + 2]; const b = c.data[x + 2];
...@@ -548,7 +548,7 @@ export class BitMapLabel extends MySprite { ...@@ -548,7 +548,7 @@ export class BitMapLabel extends MySprite {
this.height = h; this.height = h;
let offX = -totalW / 2; let offX = -totalW / 2;
for (const label of labelArr) { for (const label of labelArr) {
label.x = offX; label.x = offX;
offX += label.width; offX += label.width;
} }
...@@ -749,35 +749,35 @@ export class LabelText { ...@@ -749,35 +749,35 @@ export class LabelText {
return this._underLine; return this._underLine;
} }
set visiable(visiable){ set visiable(visiable) {
this._visiable = visiable; this._visiable = visiable;
} }
get visiable(){ get visiable() {
return this._visiable; return this._visiable;
} }
set fill(file){ set fill(file) {
this._fill = file; this._fill = file;
} }
get fill(){ get fill() {
return this._fill; return this._fill;
} }
set width(width){ set width(width) {
this._width = width; this._width = width;
} }
get width(){ get width() {
return this._width; return this._width;
} }
set x(val){ set x(val) {
this._x = val; this._x = val;
} }
get x(){ get x() {
return this._x; return this._x;
} }
} }
...@@ -823,20 +823,20 @@ export class Label2 extends MySprite { ...@@ -823,20 +823,20 @@ export class Label2 extends MySprite {
for (let i = 0; i < this.textArr.length; ++i) { for (let i = 0; i < this.textArr.length; ++i) {
if(this.textArr[i].underLine){ if (this.textArr[i].underLine) {
count ++; count++;
continue; continue;
} }
text += this.textArr[i].val; text += this.textArr[i].val;
} }
if(count > 0){ if (count > 0) {
this._width = this.ctx.measureText(text).width + 36 * count + 4 * (count - 1); this._width = this.ctx.measureText(text).width + 36 * count + 4 * (count - 1);
} }
else{ else {
this._width = this.ctx.measureText(text).width; this._width = this.ctx.measureText(text).width;
} }
this._height = this.fontSize; this._height = this.fontSize;
this.refreshAnchorOff(); this.refreshAnchorOff();
...@@ -895,7 +895,7 @@ export class Label2 extends MySprite { ...@@ -895,7 +895,7 @@ export class Label2 extends MySprite {
var startX = 0; var startX = 0;
for (let i = 0; i < this.textArr.length; ++i) { for (let i = 0; i < this.textArr.length; ++i) {
var text = this.textArr[i]; var text = this.textArr[i];
let width = this.ctx.measureText(text.val).width; let width = this.ctx.measureText(text.val).width;
...@@ -925,16 +925,16 @@ export class Label2 extends MySprite { ...@@ -925,16 +925,16 @@ export class Label2 extends MySprite {
tempStartX += (36 - width) / 2; tempStartX += (36 - width) / 2;
dW = 36 ; dW = 36;
if(this.textArr[i + 1] && this.textArr[i + 1].underLine){ if (this.textArr[i + 1] && this.textArr[i + 1].underLine) {
dW += 4 ; dW += 4;
} }
} }
else{ else {
dW = width; dW = width;
} }
if (this._outlineFlag) { if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth; this.ctx.lineWidth = this._outLineWidth;
...@@ -947,15 +947,15 @@ export class Label2 extends MySprite { ...@@ -947,15 +947,15 @@ export class Label2 extends MySprite {
this.ctx.strokeStyle = this.outlineColor; this.ctx.strokeStyle = this.outlineColor;
this.ctx.strokeText(text.val, tempStartX, 0); this.ctx.strokeText(text.val, tempStartX, 0);
} }
this.ctx.fillStyle = text.fontColor ? text.fontColor : this.fontColor; this.ctx.fillStyle = text.fontColor ? text.fontColor : this.fontColor;
if(text.visiable){ if (text.visiable) {
this.ctx.fillText(text.val, tempStartX, 0); this.ctx.fillText(text.val, tempStartX, 0);
} }
startX += dW; startX += dW;
} }
...@@ -979,7 +979,7 @@ export class RichTextOld extends Label { ...@@ -979,7 +979,7 @@ export class RichTextOld extends Label {
for (const word of words) { for (const word of words) {
const re = new RegExp(word, 'g'); const re = new RegExp(word, 'g');
newText = newText.replace( re, `#${word}#`); newText = newText.replace(re, `#${word}#`);
// newText = newText.replace(word, `#${word}#`); // newText = newText.replace(word, `#${word}#`);
} }
...@@ -1075,36 +1075,95 @@ export class RichTextOld extends Label { ...@@ -1075,36 +1075,95 @@ export class RichTextOld extends Label {
} }
export class Text {
private _val: string;
private _fontColor = "#000000";
private _bold = false;
export class RichText extends Label { private _width = 0;
private _x = 0;
disH = 10; private _y = 0;
offW = 0;
private _ext01;
set val(val) {
this._val = val;
}
get val() {
return this._val;
}
set fontColor(fontColor) {
this._fontColor = fontColor;
}
get fontColor() {
return this._fontColor;
}
underlineWidth = 0; set bold(bold) {
this._bold = bold;
}
get bold() {
return this._bold;
}
set width(width) {
this._width = width;
}
get width() {
return this._width;
}
get x() {
return this._x;
}
set x(x) {
this._x = x;
}
get y() {
return this._y;
}
set y(y) {
this._y = y;
}
get ext01() {
return this._ext01;
}
underlineHeight = 0; set ext01(ext01) {
this._ext01 = ext01;
}
}
underlineColor = "#000000";
linePos = {x : 0, y : 0}; export class RichText extends Label {
fillIndex = 0;
fillFontColor = "#000000"; disH = 10;
offW = 0;
text1 = ""; boldFontName = 'Verdana';
text2 = "" //显示内容
textArr: Array<Text> = [];
answered = false; answered = false;
fillVal = ""; endPos = { offX: 0, offY: 0 };
audioPos = {x : 0, y : 0}; maxWidth
constructor(ctx?: any) { constructor(ctx?: any) {
super(ctx); super(ctx);
...@@ -1112,99 +1171,115 @@ export class RichText extends Label { ...@@ -1112,99 +1171,115 @@ export class RichText extends Label {
// this.dataArr = dataArr; // this.dataArr = dataArr;
} }
private getContent() {
const getBlank = () => {
let blank = new Text();
blank.val = ' ';
blank.width = this.ctx.measureText(blank.val).width * this.scaleX;
return blank;
}
refreshSize() { const selfW = this.maxWidth;
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 = ''; let temp = '';
const row = []; const row = [];
const w = selfW - 2 * this.offW; const w = selfW - 2 * this.offW;
for (const c of chr) {
let index = c.indexOf("_"); let tempArr = [];
if(index != -1){
let w1 = this.ctx.measureText(c.substring(0, index)).width;
let w2 = this.ctx.measureText(c.substring(index + 1)).width;
let w3 = this.ctx.measureText(c.substring(index + 1) + c).width;
let tW1 = w1 + this.underlineWidth + w2; let tempStr = "";
let tW2 = w1 + this.underlineWidth + w3; for (let i = 0; i < this.textArr.length; ++i) {
let text = this.textArr[i];
let c = this.textArr[i].val;
if(tW1 * this.scaleX < w && tW2 * this.scaleX <= w){ if (text.val != ' ') {
temp += ' ' + c; if (text.bold) {
this.ctx.font = `${this.fontSize}px ${this.boldFontName}`;
} }
else{ else {
row.push(temp); this.ctx.font = `${this.fontSize}px ${this.fontName}`;
temp = ' ' + c;
} }
this.textArr[i].width = this.ctx.measureText(c).width * this.scaleX;
tempStr += text.val;
tempArr.push(this.textArr[i]);
continue
} }
else{
if (this.ctx.measureText(temp).width * this.scaleX < w && this.ctx.measureText(temp + (c)).width * this.scaleX <= w) { if (this.ctx.measureText(temp).width * this.scaleX < w && this.ctx.measureText(temp + (tempStr)).width * this.scaleX <= w) {
temp += ' ' + c; temp += ' ' + tempStr;
} else {
row.push(temp); tempArr.push(getBlank());
temp = ' ' + c; tempArr.push(this.textArr[i]);
}
} } else {
row.push(tempArr);
temp = ' ' + tempStr;
tempArr = [];
tempArr.push(getBlank());
tempArr.push(this.textArr[i]);
}
tempStr = "";
} }
if (temp != ' ') { if (temp != ' ') {
row.push(temp); row.push(tempArr);
} }
this._height = this.fontSize * row.length + (row.length - 1) * this.disH; return row;
}
const disH = (this.fontSize + this.disH); refreshSize() {
this.ctx.save();
this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'middle';
const row = this.getContent();
const x = 0; this._height = this.fontSize * row.length + (row.length - 1) * this.disH;
let mW = 0;
const disH = (this.fontSize + this.disH);
let x = 0;
for (let b = 0; b < row.length; b++) { for (let b = 0; b < row.length; b++) {
let index = row[b].indexOf("_");
if(index != -1){
this.fillIndex = b; let tW = 0;
let text1 = row[b].substring(0, index); let textArr = row[b];
this.text1 = text1; for (let i = 0; i < textArr.length; ++i) {
this.text2 = row[b].substring(index + 1); tW += textArr[i].width;
let w = this.ctx.measureText(text1).width; textArr[i].x = x;
textArr[i].y = b * disH;
x += textArr[i].width;
}
this.linePos.x = x + w; if (tW > mW) {
this.linePos.y = (b + 1) * disH; mW = tW;
} }
//最后一行,取末尾坐标
if(b == row.length - 1){
this.audioPos.x = this.ctx.measureText(row[b]).width;
this.audioPos.y = b * disH;
if(this.answered && this.fillIndex == b){ if(b == row.length - 1){
let val = this.text1 + this.fillVal + this.text2; this.endPos.offX = x;
this.audioPos.x = this.ctx.measureText(val).width; this.endPos.offY = b * disH;
}
} }
x = 0;
} }
this._width = mW;
this.ctx.restore(); this.ctx.restore();
} }
drawText() { drawText() {
if (!this.text) { if (!this.textArr) {
return; return;
} }
...@@ -1212,121 +1287,50 @@ export class RichText extends Label { ...@@ -1212,121 +1287,50 @@ export class RichText extends Label {
this.ctx.font = `${this.fontSize}px ${this.fontName}`; this.ctx.font = `${this.fontSize}px ${this.fontName}`;
this.ctx.textAlign = this.textAlign; this.ctx.textAlign = this.textAlign;
this.ctx.textBaseline = 'bottom'; this.ctx.textBaseline = 'bottom';
this.ctx.fontWeight = this.fontWeight;
this.ctx.fillStyle = this.fontColor;
const selfW = this.width;
const chr = this.text.split(' '); const row = this.getContent();
let temp = '';
const row = [];
const w = selfW - 2 * this.offW;
const disH = (this.fontSize + this.disH); const disH = (this.fontSize + this.disH);
for (const c of chr) { let x = 0;
let index = c.indexOf("_");
if(index != -1){
let w1 = this.ctx.measureText(c.substring(0, index)).width;
let w2 = this.ctx.measureText(c.substring(index + 1)).width;
let w3 = this.ctx.measureText(c.substring(index + 1) + c).width;
let tW1 = w1 + this.underlineWidth + w2;
let tW2 = w1 + this.underlineWidth + w3;
if(tW1 * this.scaleX < w && tW2 * this.scaleX <= w){
temp += ' ' + c;
}
else{
row.push(temp);
temp = ' ' + c;
}
}
else{
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; const y = -row.length * disH / 2;
if (this._outlineFlag) { if (this._outlineFlag) {
this.ctx.lineWidth = this._outLineWidth; this.ctx.lineWidth = this._outLineWidth;
this.ctx.strokeStyle = this._outLineColor; this.ctx.strokeStyle = this._outLineColor;
for (let b = 0; b < row.length; b++) { for (let b = 0; b < row.length; b++) {
this.ctx.strokeText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔 let textArr = row[b];
for (let i = 0; i < textArr.length; ++i) {
this.ctx.strokeText(textArr[i].val, x, y + (b + 1) * disH); // 每行字体y坐标间隔
x += textArr[i].width;
}
x = 0;
} }
} }
x = 0;
// this.ctx.fillStyle = '#ff7600'; // this.ctx.fillStyle = '#ff7600';
for (let b = 0; b < row.length; b++) { for (let b = 0; b < row.length; b++) {
if(this.answered){ let textArr = row[b];
if(b == this.fillIndex){
let w = this.ctx.measureText(this.text1).width;
this.ctx.fillText(this.text1, x, y + (b + 1) * disH); // 每行字体y坐标间隔
this.ctx.fillStyle = this.fillFontColor;
this.ctx.fillText(this.fillVal, x + w, y + (b + 1) * disH); // 每行字体y坐标间隔 for (let i = 0; i < textArr.length; ++i) {
let w2 = this.ctx.measureText(this.fillVal).width; if (textArr[i].bold) {
this.ctx.fillStyle = this.fontColor; this.ctx.font = `${this.fontSize}px ${this.boldFontName}`;
this.ctx.fillText(this.text2, x + w + w2, y + (b + 1) * disH); // 每行字体y坐标间隔
}
else{
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔
}
}
else{
let index = row[b].indexOf("_");
if(index != -1){
let text1 = row[b].substring(0, index);
let w = this.ctx.measureText(text1).width;
let text2 = row[b].substring(index + 1);
this.ctx.fillText(text1, x, y + (b + 1) * disH); // 每行字体y坐标间隔
this.ctx.fillText(text2, x + w + this.underlineWidth, y + (b + 1) * disH); // 每行字体y坐标间隔
this.linePos.x = x + w;
this.linePos.y = y + (b + 1) * disH;
let lineY = y + (b + 1) * disH;
this.ctx.save();
this.ctx.beginPath();
this.ctx.moveTo(x + w, lineY);
this.ctx.lineTo(x + w + this.underlineWidth, lineY);
this.ctx.lineWidth = this.underlineHeight;
this.ctx.strokeStyle = this.underlineColor;
this.ctx.stroke();
this.ctx.restore();
} }
else{ else {
this.ctx.fillText(row[b], x, y + (b + 1) * disH); // 每行字体y坐标间隔 this.ctx.font = `${this.fontSize}px ${this.fontName}`;
} }
this.ctx.fillStyle = textArr[i].fontColor;
this.ctx.fillText(textArr[i].val, x, y + (b + 1) * disH); // 每行字体y坐标间隔
textArr[i].x = x;
textArr[i].y = b * disH;
x += textArr[i].width;
} }
x = 0;
} }
} }
...@@ -1592,7 +1596,7 @@ export class MyAnimation extends MySprite { ...@@ -1592,7 +1596,7 @@ export class MyAnimation extends MySprite {
} }
showAllFrame() { showAllFrame() {
for (const frame of this.frameArr ) { for (const frame of this.frameArr) {
frame.alpha = 1; frame.alpha = 1;
} }
} }
...@@ -1623,7 +1627,7 @@ export class MyAnimation extends MySprite { ...@@ -1623,7 +1627,7 @@ export class MyAnimation extends MySprite {
this.frameArr[this.frameIndex].visible = false; this.frameArr[this.frameIndex].visible = false;
} }
this.frameIndex ++; this.frameIndex++;
if (this.frameIndex >= this.frameArr.length) { if (this.frameIndex >= this.frameArr.length) {
if (this.loop) { if (this.loop) {
this.frameIndex = 0; this.frameIndex = 0;
...@@ -1631,7 +1635,7 @@ export class MyAnimation extends MySprite { ...@@ -1631,7 +1635,7 @@ export class MyAnimation extends MySprite {
this.restartFlag = false; this.restartFlag = false;
this.frameIndex = 0; this.frameIndex = 0;
} else { } else {
this.frameIndex -- ; this.frameIndex--;
this.playEnd(); this.playEnd();
return; return;
} }
...@@ -1673,25 +1677,25 @@ export class MyAnimation extends MySprite { ...@@ -1673,25 +1677,25 @@ export class MyAnimation extends MySprite {
} }
export class Line extends MySprite{ export class Line extends MySprite {
lineColor = '#ffffff'; lineColor = '#ffffff';
lineWidth = 10; lineWidth = 10;
setLine(length){ setLine(length) {
this.width = length; this.width = length;
} }
drawLine() { drawLine() {
this.ctx.save(); this.ctx.save();
this.ctx.beginPath(); this.ctx.beginPath();
this.ctx.lineWidth = this.lineWidth; this.ctx.lineWidth = this.lineWidth;
this.ctx.strokeStyle = this.lineColor; this.ctx.strokeStyle = this.lineColor;
this.ctx.moveTo(this._offX, this._offY); this.ctx.moveTo(this._offX, this._offY);
this.ctx.lineTo(this._offX + this.width, this._offY); this.ctx.lineTo(this._offX + this.width, this._offY);
this.ctx.stroke(); this.ctx.stroke();
this.ctx.restore(); this.ctx.restore();
} }
...@@ -1728,7 +1732,7 @@ export function createTween(item, obj, time = 0.8, callBack = null, easing = nul ...@@ -1728,7 +1732,7 @@ export function createTween(item, obj, time = 0.8, callBack = null, easing = nul
tween.easing(easing); tween.easing(easing);
} }
if (update) { if (update) {
tween.onUpdate( (a, b) => { tween.onUpdate((a, b) => {
update(a, b); update(a, b);
}); });
} }
...@@ -1740,7 +1744,7 @@ export function tweenQueue(arr) { ...@@ -1740,7 +1744,7 @@ export function tweenQueue(arr) {
const showOneTween = () => { const showOneTween = () => {
const tween = arr.shift(); const tween = arr.shift();
if (arr.length > 0) { if (arr.length > 0) {
tween.onComplete( () => { tween.onComplete(() => {
showOneTween(); showOneTween();
}); });
} }
...@@ -1780,7 +1784,7 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing = ...@@ -1780,7 +1784,7 @@ export function rotateItem(item, rotation, time = 0.8, callBack = null, easing =
export function scaleItem(item, scale, time = 0.8, callBack = null, easing = null) { 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); const tween = new TWEEN.Tween(item).to({ scaleX: scale, scaleY: scale }, time * 1000);
if (callBack) { if (callBack) {
tween.onComplete(() => { tween.onComplete(() => {
...@@ -1798,7 +1802,7 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul ...@@ -1798,7 +1802,7 @@ export function scaleItem(item, scale, time = 0.8, callBack = null, easing = nul
export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) { export function moveItem(item, x, y, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item).to({ x, y}, time * 1000); const tween = new TWEEN.Tween(item).to({ x, y }, time * 1000);
if (callBack) { if (callBack) {
tween.onComplete(() => { tween.onComplete(() => {
...@@ -1841,7 +1845,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) { ...@@ -1841,7 +1845,7 @@ export function hideItem(item, time = 0.8, callBack = null, easing = null) {
} }
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha: 0}, time * 1000) .to({ alpha: 0 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(() => {
if (callBack) { if (callBack) {
...@@ -1868,7 +1872,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) { ...@@ -1868,7 +1872,7 @@ export function showItem(item, time = 0.8, callBack = null, easing = null) {
item.visible = true; item.visible = true;
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha: 1}, time * 1000) .to({ alpha: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(() => {
if (callBack) { if (callBack) {
...@@ -1888,7 +1892,7 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul ...@@ -1888,7 +1892,7 @@ export function alphaItem(item, alpha, time = 0.8, callBack = null, easing = nul
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha}, time * 1000) .to({ alpha }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(() => {
if (callBack) { if (callBack) {
...@@ -1908,7 +1912,7 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) { ...@@ -1908,7 +1912,7 @@ export function showStar(item, time = 0.8, callBack = null, easing = null) {
const tween = new TWEEN.Tween(item) const tween = new TWEEN.Tween(item)
.to({alpha: 1, scale: 1}, time * 1000) .to({ alpha: 1, scale: 1 }, time * 1000)
// .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth. // .easing(TWEEN.Easing.Quadratic.Out) // Use an easing function to make the animation smooth.
.onComplete(() => { .onComplete(() => {
if (callBack) { if (callBack) {
...@@ -1928,7 +1932,7 @@ export function randomSortByArr(arr) { ...@@ -1928,7 +1932,7 @@ export function randomSortByArr(arr) {
const newArr = []; const newArr = [];
const tmpArr = arr.concat(); const tmpArr = arr.concat();
while (tmpArr.length > 0) { while (tmpArr.length > 0) {
const randomIndex = Math.floor( tmpArr.length * Math.random() ); const randomIndex = Math.floor(tmpArr.length * Math.random());
newArr.push(tmpArr[randomIndex]); newArr.push(tmpArr[randomIndex]);
tmpArr.splice(randomIndex, 1); tmpArr.splice(randomIndex, 1);
} }
...@@ -1952,7 +1956,7 @@ export function getPosByAngle(angle, len) { ...@@ -1952,7 +1956,7 @@ export function getPosByAngle(angle, len) {
const x = Math.sin(radian) * len; const x = Math.sin(radian) * len;
const y = Math.cos(radian) * len; const y = Math.cos(radian) * len;
return {x, y}; return { x, y };
} }
...@@ -2008,12 +2012,12 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = ...@@ -2008,12 +2012,12 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
const r = getPosDistance(item.x, item.y, x0, y0); const r = getPosDistance(item.x, item.y, x0, y0);
let a = getAngleByPos(item.x, item.y, x0, y0); let a = getAngleByPos(item.x, item.y, x0, y0);
a += 90; a += 90;
const obj = {r, a}; const obj = { r, a };
item._circleAngle = a; item._circleAngle = a;
const targetA = a + addR; const targetA = a + addR;
const tween = new TWEEN.Tween(item).to({_circleAngle: targetA}, time * 1000); const tween = new TWEEN.Tween(item).to({ _circleAngle: targetA }, time * 1000);
if (callBack) { if (callBack) {
tween.onComplete(() => { tween.onComplete(() => {
...@@ -2024,7 +2028,7 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer = ...@@ -2024,7 +2028,7 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
tween.easing(easing); tween.easing(easing);
} }
tween.onUpdate( (item, progress) => { tween.onUpdate((item, progress) => {
// console.log(item._circleAngle); // console.log(item._circleAngle);
const r = obj.r; const r = obj.r;
...@@ -2047,7 +2051,7 @@ export function getPosDistance(sx, sy, ex, ey) { ...@@ -2047,7 +2051,7 @@ export function getPosDistance(sx, sy, ex, ey) {
const _x = ex - sx; const _x = ex - sx;
const _y = ey - sy; const _y = ey - sy;
const len = Math.sqrt( Math.pow(_x, 2) + Math.pow(_y, 2) ); const len = Math.sqrt(Math.pow(_x, 2) + Math.pow(_y, 2));
return len; return len;
} }
...@@ -2078,8 +2082,9 @@ export function formatTime(fmt, date) { ...@@ -2078,8 +2082,9 @@ export function formatTime(fmt, date) {
}; };
if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); } if (/(y+)/.test(fmt)) { fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length)); }
for (const k in o) { for (const k in o) {
if (new RegExp('(' + k + ')').test(fmt)) { fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) if (new RegExp('(' + k + ')').test(fmt)) {
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))); fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1)
? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)));
} }
} }
return fmt; return fmt;
...@@ -2117,8 +2122,8 @@ export function jelly(item, time = 0.7) { ...@@ -2117,8 +2122,8 @@ export function jelly(item, time = 0.7) {
return; return;
} }
const data = arr[index]; const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => { const t = tweenChange(item, { scaleX: data[0], scaleY: data[1] }, data[2], () => {
index ++; index++;
run(); run();
}, TWEEN.Easing.Sinusoidal.InOut); }, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t; item.jellyTween = t;
...@@ -2153,8 +2158,8 @@ export function jellyPop(item, time) { ...@@ -2153,8 +2158,8 @@ export function jellyPop(item, time) {
return; return;
} }
const data = arr[index]; const data = arr[index];
const t = tweenChange(item, {scaleX: data[0], scaleY: data[1]}, data[2], () => { const t = tweenChange(item, { scaleX: data[0], scaleY: data[1] }, data[2], () => {
index ++; index++;
run(); run();
}, TWEEN.Easing.Sinusoidal.InOut); }, TWEEN.Easing.Sinusoidal.InOut);
item.jellyTween = t; item.jellyTween = t;
...@@ -2181,7 +2186,7 @@ export function jellyPop(item, time) { ...@@ -2181,7 +2186,7 @@ export function jellyPop(item, time) {
export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) { export function showPopParticle(img, pos, parent, num = 20, minLen = 40, maxLen = 80, showTime = 0.4) {
for (let i = 0; i < num; i ++) { for (let i = 0; i < num; i++) {
const particle = new MySprite(); const particle = new MySprite();
particle.init(img); particle.init(img);
...@@ -2295,7 +2300,7 @@ export class MyVideo extends MySprite { ...@@ -2295,7 +2300,7 @@ export class MyVideo extends MySprite {
element; element;
initVideoElement(videoElement) { initVideoElement(videoElement) {
this.element = videoElement; this.element = videoElement;
this.width = this.element.videoWidth; this.width = this.element.videoWidth;
......
const defaultVal = {
"title":{
"part1":"C",
"part2":"Read and point"
},
"exercisesArr":[
{
"answerArr":[
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"b"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"o"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"c"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"c"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/f95fd3997cdd67abd51a1ab45efd855d.mp3",
"from":25,
"to":31,
"letterFrom":-1,
"letterTo":-1
},
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"b"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"c"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"c"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"i"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"n"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"o"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"from":35,
"to":44,
"letterFrom":35,
"letterTo":36
}
],
"index":1,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/919b2c150b41b3306869ebe78ecb70b3.mp3",
"val":"The story in the book is correct / incorrect.",
"oldVal":"The story in the book is correct / incorrect.",
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"b"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"o"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"i"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"n"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"o"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"c"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
],
"picUrl":"http://staging-teach.cdn.ireadabc.com/9d7bdb483c7690728f0658022753c8ed.png"
},
{
"answerArr":[
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"y"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/b44fa51172b19b555fda30717c773027.mp3",
"from":11,
"to":18,
"letterFrom":-1,
"letterTo":-1
},
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"u"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"n"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"from":22,
"to":28,
"letterFrom":22,
"letterTo":23
}
],
"index":2,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/8970ccce02d3a37640c80e02626fefb8.mp3",
"picUrl":"http://staging-teach.cdn.ireadabc.com/c9147ba4f6865137f78a9a6331c81151.png",
"val":"My shoe is tied yet / untied.",
"oldVal":"My shoe is tied yet / untied.",
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"o"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"y"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"u"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"n"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
]
},
{
"answerArr":[
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"p"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"g"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"g"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"m"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"i"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"s"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"l"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"a"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/30621df106455523573e3871a5a5c598.mp3",
"from":78,
"to":85,
"letterFrom":78,
"letterTo":80
},
{
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"p"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"g"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"l"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"a"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"u"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"s"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"g"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"h"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"m"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
}
],
"start":-1,
"letterStart":-1,
"from":62,
"to":74,
"letterFrom":-1,
"letterTo":-1
}
],
"index":3,
"audioUrl":"http://staging-teach.cdn.ireadabc.com/71eb8fcc0895873363840db7bc0c5883.mp3",
"picUrl":"http://staging-teach.cdn.ireadabc.com/c4a540d4be404cc04cd0460c9cad1ecc.png",
"val":"Misa always talk with partners when she as a guide. That will lead us right / mislead.",
"oldVal":"Misa always talk with partners when she as a guide. That will lead us right / mislead.",
"letterArr":[
{
"bold":"0",
"fontColor":"#363333",
"val":"M"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"y"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"k"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"p"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"r"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"n"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"s"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"g"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"u"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"d"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"e"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"."
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"T"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"h"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"a"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"w"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"i"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":"l"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"l"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"a"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"u"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"s"
},
{
"bold":"1",
"fontColor":"#581578",
"val":" "
},
{
"bold":"1",
"fontColor":"#581578",
"val":"r"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"i"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"g"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"h"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"t"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"0",
"fontColor":"#363333",
"val":"/"
},
{
"bold":"0",
"fontColor":"#363333",
"val":" "
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"m"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"i"
},
{
"bold":"1",
"fontColor":"#0fad51",
"val":"s"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"l"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"e"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"a"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"d"
},
{
"bold":"1",
"fontColor":"#581578",
"val":"."
}
]
}
]
};
export {defaultVal}
\ No newline at end of file
...@@ -29,6 +29,12 @@ ...@@ -29,6 +29,12 @@
src: url("../../assets/font/GOTHICB.TTF") ; src: url("../../assets/font/GOTHICB.TTF") ;
} }
@font-face
{
font-family: 'GOTHIC';
src: url("../../assets/font/GOTHIC.TTF") ;
}
@font-face @font-face
{ {
font-family: 'MMB'; font-family: 'MMB';
......
...@@ -17,7 +17,7 @@ import { Exercises } from './Exercises.spreat'; ...@@ -17,7 +17,7 @@ import { Exercises } from './Exercises.spreat';
import { getDefaultExercises } from '../bean/Exercises'; import { getDefaultExercises } from '../bean/Exercises';
import { getDefaultTile } from '../bean/TitleBean'; import { getDefaultTile } from '../bean/TitleBean';
import { exception } from 'console'; import { exception } from 'console';
import { defaultVal } from './default';
...@@ -105,8 +105,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -105,8 +105,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data = data; this.data = data;
} }
else { else {
let defaultData = '{"title":{"part1":"C","part2":"Read and point"},"letterArr":[{"key":"K-1612945850419","isFill":"0","val":"-dis"},{"key":"K-1612945972128","isFill":"0","val":"-aw-"},{"key":"K-1612947526926","isFill":"0","val":"ph"},{"key":"K-1612947527364","isFill":"0","val":"-aw-"},{"key":"K-1612947541415","isFill":"0","val":"-ch"},{"key":"K-1612947545454","isFill":"0","val":"-ed"},{"key":"K-1612947548919","isFill":"0","val":"pre-"}],"exercisesArr":[{"letterArr":[{"key":"K-1613141016560","isFill":"0","val":"Hello,My name is chenjp.Hello My n"},{"key":"K-1613141016560","isFill":"1","val":"_"},{"key":"K-1613141016560","isFill":"0","val":"e is chenjp.Hello,"}],"key":"K-1612947526926","answer":{"letterArr":[{"key":"","isFill":"0","val":"name"},{"key":"K-1612705253202","isFill":"1","val":"pah","val2":"pah"}]},"index":1,"val":"Hello,My name is chenjp.Hello My n_e is chenjp.Hello,","audioUrl":"http://staging-teach.cdn.ireadabc.com/8970ccce02d3a37640c80e02626fefb8.mp3"},{"key":"K-1612945850419","answer":{},"index":2,"val":"I _agree with my dad about it.","letterArr":[{"key":"K-1612946396917","isFill":"0","val":"I "},{"key":"K-1612945850419","isFill":"1","val":"dis"},{"key":"K-1612946396917","isFill":"0","val":"agree with my dad about it."}],"audioUrl":"http://staging-teach.cdn.ireadabc.com/ef597f87e534ab2c73f4f9ed34eb26fa.mp3"},{"key":"K-1612947545454","answer":{},"index":3,"val":"He received the best treat_ for a cold yesterday.","letterArr":[{"key":"K-1613141079966","isFill":"0","val":"He received the best treat"},{"key":"K-1613141079966","isFill":"1","val":"_"},{"key":"K-1613141079966","isFill":"0","val":" for a cold yesterday."}],"audioUrl":"http://staging-teach.cdn.ireadabc.com/55addbbc6a4da4a63bc22988063bdded.mp3"},{"key":"K-1612947541415","answer":{},"index":4,"val":"He received the best treat_ for a cold yesterday.","letterArr":[{"key":"K-1613141080944","isFill":"0","val":"He received the best treat"},{"key":"K-1612947541415","isFill":"1","val":"ch"},{"key":"K-1613141080944","isFill":"0","val":" for a cold yesterday."}],"audioUrl":"http://staging-teach.cdn.ireadabc.com/71eb8fcc0895873363840db7bc0c5883.mp3"}]}'; this.data = defaultVal;
this.data = JSON.parse(defaultData);
} }
//console.log('data:', JSON.stringify(data)); //console.log('data:', JSON.stringify(data));
...@@ -481,7 +480,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -481,7 +480,14 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
for (let i = 0; i < this.data.exercisesArr.length; ++i) {
let exercises = this.data.exercisesArr[i];
if (exercises.picUrl) {
this.addUrlToImages(exercises.picUrl);
}
}
} }
/** /**
...@@ -514,9 +520,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -514,9 +520,17 @@ export class PlayComponent implements OnInit, OnDestroy {
let exercises = this.data.exercisesArr[i]; let exercises = this.data.exercisesArr[i];
if (exercises.answer && exercises.audioUrl) { if(exercises.audioUrl){
this.addUrlToAudioObj(exercises.audioUrl); this.addUrlToAudioObj(exercises.audioUrl);
} }
for(let j = 0; j < exercises.answerArr.length; ++ j){
let answer = exercises.answerArr[j];
if(answer && answer.audioUrl){
this.addUrlToAudioObj(answer.audioUrl);
}
}
} }
} }
...@@ -749,6 +763,28 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -749,6 +763,28 @@ export class PlayComponent implements OnInit, OnDestroy {
}); });
} }
return;
}
let target;
let callback;
for (let i = 0; i < this.exercisesArr.length; ++i) {
let exercises = this.exercisesArr[i];
if (this.checkClickTarget(exercises.bg)) {
target = exercises;
callback = this.clickExercies.bind(this);
break;
}
}
if (target) {
callback(target);
return;
} }
} }
...@@ -780,18 +816,44 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -780,18 +816,44 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
private clickExercies(curExer) { private clickExercies(target) {
if (!curExer) { if (!target) {
return; return;
} }
if (curExer.answered) { if (target.answered) {
if (this.checkClickTarget(curExer.answer)) {
this.playAudio(curExer.data.audioUrl, true); if(this.checkClickTarget(target.circle)){
this.playAudio(target.data.answerArr[0].audioUrl, true);
return;
}
if (this.checkClickTarget(target.answer)) {
this.playAudio(target.data.audioUrl, true);
} }
return; return;
} }
if (!target.check(this.mx, this.my)) {
return;
}
let audioPos = target.audioPos;
let listening = new Listening(this.audioObj[target.data.audioUrl], this.images);
listening.init(this.mapScale, this.mapScale, 'play_1', 'stop_1');
listening.bg.x = audioPos.x;
listening.bg.y = audioPos.y - listening.bg.height / 2;
target.bg.addChild(listening.bg);
this.listeningArr.push(listening);
this.playAudio("right", true, () => {
this.playAudio(target.data.answerArr[0].audioUrl, true);
});
this.canTouch = true;
} }
} }
...@@ -5,6 +5,7 @@ const res = [ ...@@ -5,6 +5,7 @@ const res = [
['play_1', "assets/play/play_1.png"], ['play_1', "assets/play/play_1.png"],
['stop_1', "assets/play/stop_1.png"], ['stop_1', "assets/play/stop_1.png"],
['index_bg', "assets/play/index_bg.png"], ['index_bg', "assets/play/index_bg.png"],
['circle', "assets/play/circle.png"],
]; ];
......
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