Commit b5012225 authored by hw_023_test's avatar hw_023_test

confirm

parent 6968ff34
...@@ -43,6 +43,7 @@ ...@@ -43,6 +43,7 @@
(audioUploaded) = "onAudioUploadSuccessByItem($event,word)" (audioUploaded) = "onAudioUploadSuccessByItem($event,word)"
class="item" class="item"
></app-audio-recorder> ></app-audio-recorder>
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItemWord(it,word)">删除单词和音频</button>
</div> </div>
<button nz-button nzType="primary" class="add-word-btn" (click)="addWord(it)">添加单词</button> <button nz-button nzType="primary" class="add-word-btn" (click)="addWord(it)">添加单词</button>
</div> </div>
......
...@@ -65,6 +65,9 @@ ...@@ -65,6 +65,9 @@
margin-right: 10px; margin-right: 10px;
} }
} }
button{
margin-left: 10px;
}
.add-word-btn{ .add-word-btn{
width: 100%; width: 100%;
} }
......
...@@ -18,6 +18,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -18,6 +18,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存对象 // 储存对象
_item: any; _item: any;
KEY = 'test_0011'; KEY = 'test_0011';
wordArr = [];
...@@ -143,6 +144,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -143,6 +144,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
deleteItem(data) { deleteItem(data) {
const index = this.picArr.indexOf(data); const index = this.picArr.indexOf(data);
console.log(this.picArr);
console.log(index);
if (index !== -1) { if (index !== -1) {
this.picArr.splice(index, 1); this.picArr.splice(index, 1);
} }
...@@ -151,6 +154,30 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -151,6 +154,30 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save(); this.save();
} }
deleteItemWord(picdata,wordData) {
const pindex = this.picArr.indexOf(picdata);
// console.log('data',picdata,index);
const wordList = this.picArr[pindex].wordArr;
// console.log('s',wordList);
const windex = wordList.indexOf(wordData);
console.log('id',windex);
if ( pindex !== -1) {
// const this.picArr[pindex].wordArr[windex].splice(windex,1);
this.picArr[pindex].wordArr.splice(windex,1);
// const pic = this.picArr[pindex].wordArr;
// const word = pic[windex];
// console.log('word',word);
}
// const a = this.item.contentObj
// console.log(this.picArr);
// console.log(index);
// if (index !== -1) {
// this.wordArr.splice(index, 1);
// }
console.log('a');
// this.update.emit(this.item);
this.save();
}
......
...@@ -37,6 +37,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -37,6 +37,8 @@ export class PlayComponent implements OnInit, OnDestroy {
soundID: number; soundID: number;
wordList: any[]; wordList: any[];
optionRectArrBak: any[]; optionRectArrBak: any[];
wordArrBg = [];
wordBgList: any;
@Input() @Input()
set data(data) { set data(data) {
...@@ -112,6 +114,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -112,6 +114,7 @@ export class PlayComponent implements OnInit, OnDestroy {
particleLayer; particleLayer;
showPetalFlag; showPetalFlag;
itemW = 140; itemW = 140;
spotW = 70;
itemH = 75; itemH = 75;
topRect; topRect;
optionRect; optionRect;
...@@ -531,13 +534,24 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -531,13 +534,24 @@ export class PlayComponent implements OnInit, OnDestroy {
* 添加默认数据 便于无数据时的展示 * 添加默认数据 便于无数据时的展示
*/ */
initDefaultData() { initDefaultData() {
let contentObj = this.data.contentObj;
let picArr = this.data.contentObj.picArr; let picArr = this.data.contentObj.picArr;
if (!picArr || picArr.length <= 0) { if (!picArr || picArr.length == 0) {
picArr = [{ picArr = [{
audio_url : 'assets/play/default/audio.mp3',
pic_url: 'assets/play/default/pic.jpg', pic_url: 'assets/play/default/pic.jpg',
wordArr: [
{text: 'one', id: '0'},
{text: 'aaa', id: '1'},
{text: 'three', id: '2'},
],
}]; }];
this.data.contentObj.picArr = picArr; this.data.contentObj.picArr = picArr;
// this.initBaseBg();
} }
console.log('picArr',picArr);
console.log('contentObj', contentObj);
} }
/** /**
...@@ -545,6 +559,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -545,6 +559,7 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
const contentObj = this.data.contentObj; const contentObj = this.data.contentObj;
if (!contentObj) {return;}
if (contentObj) { if (contentObj) {
const picArr = this.data.contentObj.picArr; const picArr = this.data.contentObj.picArr;
if (picArr) { if (picArr) {
...@@ -624,6 +639,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -624,6 +639,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.data.contentObj.picArr = []; this.data.contentObj.picArr = [];
} }
this.picArr = this.data.contentObj.picArr; this.picArr = this.data.contentObj.picArr;
if (!this.picArr) {return};
this.picArr.forEach(ele => { this.picArr.forEach(ele => {
for (let i = 0; i < ele.wordArr.length; i++) { for (let i = 0; i < ele.wordArr.length; i++) {
ele.wordArr[i].id = i; ele.wordArr[i].id = i;
...@@ -636,6 +652,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -636,6 +652,7 @@ export class PlayComponent implements OnInit, OnDestroy {
* 初始化试图 * 初始化试图
*/ */
initView() { initView() {
this.initBg(); this.initBg();
this.initTitle(); this.initTitle();
this.initCard(); this.initCard();
...@@ -646,6 +663,22 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -646,6 +663,22 @@ export class PlayComponent implements OnInit, OnDestroy {
this.isHideCheck(); this.isHideCheck();
this.typeA[0]['isHide'] = false; this.typeA[0]['isHide'] = false;
this.typeA[0].alpha = 1; this.typeA[0].alpha = 1;
console.log('wordArr',this.wordArr);
console.log('wordArrBg',this.wordArrBg);
}
initBaseBg() {
this.bgArr = [];
const bg = new MySprite();
bg.init(this.images.get('Rectangle@2x'));
bg.x = this.canvasWidth / 2;
bg.y = this.canvasHeight / 2;
const sx = this.canvasWidth / bg.width;
const sy = this.canvasHeight / bg.height;
const s = Math.max(sx, sy);
bg.setScaleXY(1);
this.renderArr.push(bg);
} }
/** /**
...@@ -673,6 +706,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -673,6 +706,17 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
initTitle() { initTitle() {
// test
const bgRect = new ShapeRect();
bgRect.setSize(57, 65);
bgRect.fillColor = '#FFF';
const asx = this.canvasWidth / this.canvasBaseW;
const asy = this.canvasHeight / this.canvasBaseH;
bgRect.setScaleXY(asx);
bgRect.x = 65 * asx;
this.renderArr.push(bgRect);
const titleBox = new ShapeRect(); const titleBox = new ShapeRect();
titleBox.init(); titleBox.init();
titleBox.fillColor = '#ffffff'; titleBox.fillColor = '#ffffff';
...@@ -680,23 +724,34 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -680,23 +724,34 @@ export class PlayComponent implements OnInit, OnDestroy {
this.renderArr.push(titleBox); this.renderArr.push(titleBox);
titleBox.alpha = 0; titleBox.alpha = 0;
const panel = new MySprite(); const panel = new ShapeRect();
panel.init(this.images.get('Rectangle_3@2x')); panel.fillColor = '#AB5B22';
panel.setScaleXY(this.mapScale * .5); panel.setSize(57, 65);
panel.x = 80 * this.mapScale; panel.setScaleXY(asx);
panel.y = 30 * this.mapScale; // panel.init(this.images.get('Rectangle_3@2x'));
// panel.setScaleXY(this.mapScale * .5);
panel.x = 65 * asx;
panel.y = 0;
this.renderArr.push(panel); this.renderArr.push(panel);
titleBox.addChild(panel); titleBox.addChild(panel);
const richText1 = new Label(); const richText1 = new RichText();
richText1.disH = 15;
richText1.text = 'C'; richText1.text = 'C';
richText1.x = panel.width / 2 - 24;
richText1.y = -25;
// richText1.width = panel.width;
richText1.fontName = 'BRLNSDB'; richText1.fontName = 'BRLNSDB';
richText1.textAlign = 'center';
richText1.fontSize = 90 * this.mapScale; // rit
richText1.fontColor = '#ffffff'; // richText1.textAlign = 'center';
richText1.fontWeight = 300 * this.mapScale; // richText1.fontSize = 40;
richText1.fontColor = '#F7CB47';
// richText1.x = 35 * asx;
// richText1.fontWeight = 300 * this.mapScale;
panel.addChild(richText1); panel.addChild(richText1);
const richText2 = new Label(); const richText2 = new Label();
const sx = this.canvasWidth / richText2.width; const sx = this.canvasWidth / richText2.width;
const sy = this.canvasHeight / richText2.height; const sy = this.canvasHeight / richText2.height;
...@@ -705,97 +760,140 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -705,97 +760,140 @@ export class PlayComponent implements OnInit, OnDestroy {
richText2.setScaleXY(s); richText2.setScaleXY(s);
richText2.text = this.data.contentObj.question_text; richText2.text = this.data.contentObj.question_text;
richText2.fontName = 'BRLNSDB'; richText2.fontName = 'BRLNSDB';
richText2.fontSize = 40 * this.mapScale; richText2.fontSize = 50 * this.mapScale;
richText2.fontColor = '#000000'; richText2.fontColor = '#000000';
richText2.fontWeight = 300; richText2.fontWeight = 300;
richText2.textAlign = 'left'; richText2.textAlign = 'left';
richText2.x = 130 * this.mapScale; richText2.x = 150 * this.mapScale;
richText2.y = 30 * this.mapScale; richText2.y = 30 * this.mapScale;
this.renderArr.push(richText2); this.renderArr.push(richText2);
this.question = titleBox; this.question = titleBox;
titleBox.addChild(richText2); // titleBox.addChild(richText2);
} }
initCard() { initCard() {
this.createCard(); this.typeA = [];
} for (let i = 0; i < this.picArr.length; i++) {
createCard() {
const topH = 60 * this.mapScale; const topH = 60 * this.mapScale;
const bottomH = 220 * this.mapScale; const bottomH = 250 * this.mapScale;
const maxH = this.canvasHeight - topH - bottomH; const maxH = this.canvasHeight - topH - bottomH;
const maxW = this.canvasWidth * 0.9; const maxW = this.canvasWidth * 0.9;
const card = new MySprite(this.ctx); const curData = this.picArr[i];
card.setScaleXY(this.mapScale);
card.anchorY = 1; const panel = new MySprite();
panel.init(this.images.get(curData.pic_url));
// panel.setScaleXY(this.mapScale);
// panel.anchorY = 1;
let targetY = this.canvasHeight - bottomH; let targetY = this.canvasHeight - bottomH;
if (this.canvasHeight - bottomH > card.height * card.scaleY) { if (this.canvasHeight - bottomH > panel.height * panel.scaleY) {
targetY = card.height * card.scaleY; targetY = panel.height * panel.scaleY;
}
card.x = this.canvasWidth / 2;
card.y = this.canvasHeight / 2 - 100 * this.mapScale;
card.setScaleXY(.5 * this.mapScale);
this.addPic(card);
this.renderArr.push(card);
} }
addPic(card) { const edge = 20 * this.mapScale;
this.typeA = []; const sx = (maxW - edge * 2) / panel.width;
for (let i = 0; i < this.picArr.length; i++) { const sy = (maxH - edge * 2) / panel.height;
const curData = this.picArr[i]; const s = Math.min(sx, sy);
const pic = new MySprite(this.ctx); panel.setScaleXY(s);
pic.init(this.images.get(curData.pic_url));
pic['type'] = 'A'; const qBg = new ShapeRect();
pic['isHide'] = true; qBg.init();
this.typeA.push(pic); qBg.fillColor = '#ffffff';
card.addChild(pic); qBg.setSize((panel.width) * panel.scaleX + edge * 2, (panel.height) * panel.scaleY + edge * 2);
} qBg.x = this.canvasWidth / 2;
} qBg.y = topH + qBg.height / 2;
qBg.setShadow(0, 10 * this.mapScale, 12 * this.mapScale, 'rgba(0, 0, 0, 0.4)');
this.renderArr.push(qBg);
qBg.addChild(panel);
qBg.alpha = 0;
// panel.x = this.canvasWidth / 2;
// panel.y = targetY;
// this.renderArr.push(panel);
panel['type'] = 'A';
panel['isHide'] = true;
this.typeA.push(panel);
}
// this.createCard();
}
// createCard() {
// const topH = 380 * this.mapScale;
// const bottomH = 220 * this.mapScale;
// const maxH = this.canvasHeight - topH - bottomH;
// const maxW = this.canvasWidth * 0.9;
// const card = new ShapeRect(this.ctx);
// let targetY = this.canvasHeight - bottomH;
// if (this.canvasHeight - bottomH > card.height * card.scaleY) {
// targetY = card.height * card.scaleY;
// }
// card.x = this.canvasWidth / 2;
// card.y = this.canvasHeight / 2;
// card.color = "#FFF";
// this.addPic(card);
// this.renderArr.push(card);
// }
// addPic(card) {
// this.typeA = [];
// for (let i = 0; i < this.picArr.length; i++) {
// const curData = this.picArr[i];
// const pic = new MySprite(this.ctx);
// pic.init(this.images.get(curData.pic_url));
// console.log('hight',pic.height);
// pic['type'] = 'A';
// pic['isHide'] = true;
// this.typeA.push(pic);
// card.addChild(pic);
// }
// }
initSpot() { initSpot() {
this.spotList = []; this.spotList = [];
const picArr = this.data.contentObj.picArr; const picArr = this.data.contentObj.picArr;
if (!picArr) { return; }
const arr = this.picArr; const arr = this.picArr;
let itemW = this.itemW; let spotW = this.spotW + 7;
let disW = 10; let disW = 10;
let totalW = 0; let totalW = 0;
let stotalW = 0;
if (arr.length <= 8) { if (arr.length <= 8) {
totalW = (itemW + disW) * this.picArr.length; // totalW = itemW * arr.length + disW * (arr.length - 1);
stotalW = spotW * arr.length + disW * (arr.length - 1);
} else { } else {
totalW = (itemW + disW) * 8; // totalW = (itemW + disW) * 8;
itemW = totalW / this.picArr.length / 15 * 14; stotalW = (spotW + disW) * 8;
spotW = stotalW / this.wordList.length / 15 * 14;
} }
disW = itemW / 14; disW = spotW / 14;
totalW *= this.mapScale; stotalW *= this.mapScale;
itemW *= this.mapScale; spotW *= this.mapScale;
disW *= this.mapScale; disW *= this.mapScale;
const itemH = itemW / this.itemW * this.itemH; // const itemH = itemW / this.itemW * this.itemH;
const offX = this.canvasWidth / 2 - totalW / 2 + (itemW + disW) / 2; const offX = this.canvasWidth / 2 - stotalW / 2 + (spotW + disW) / 2;
const disH = 100 * this.mapScale; const disH = 100 * this.mapScale;
const offY = this.canvasHeight - (disH) * 3 + itemH / 2; // const offY = this.canvasHeight - (disH) * 2 + itemH / 2;
this.disW = disW; this.disW = disW;
const bottomH = 220 * this.mapScale;
let targetY = this.canvasHeight - bottomH;
for (let i = 0; i < picArr.length; i++) { for (let i = 0; i < picArr.length; i++) {
const baseX = offX + i * (spotW + disW);
const spot = new ShapeCircle(this.ctx); const spot = new ShapeCircle(this.ctx);
if (this.canvasHeight - bottomH > spot.height * spot.scaleY) {
targetY = spot.height * spot.scaleY;
}
spot.init(); spot.init();
spot.setScaleXY(this.mapScale * 0.6); spot.setScaleXY(this.mapScale * 0.6);
spot.x = offX + i * (itemW + disW); spot.x = baseX;
spot.y = offY; // spot.y = offY + 45 * this.mapScale;
spot.y = this.canvasHeight - 230 * this.mapScale;
spot['isChange'] = false; spot['isChange'] = false;
spot.fillColor = '#832F27'; spot.fillColor = '#832F27';
spot.setRadius(40); spot.setRadius(40);
this.renderArr.push(spot); this.renderArr.push(spot);
this.space += 120; // this.space += 120;
const richText3 = new Label(); const richText3 = new Label();
richText3.text = (i + 1).toString(); richText3.text = (i + 1).toString();
...@@ -870,11 +968,16 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -870,11 +968,16 @@ export class PlayComponent implements OnInit, OnDestroy {
for ( let i = 0; i < this.picArr.length; i++ ) { for ( let i = 0; i < this.picArr.length; i++ ) {
this.wordArr.push(this.picArr[i].wordArr); this.wordArr.push(this.picArr[i].wordArr);
this.wordArrBg.push(this.picArr[i].wordArr);
} }
for (let j = 0; j < this.wordArr.length; j++) { for (let j = 0; j < this.wordArr.length; j++) {
this.wordList = randomSortByArr(this.wordArr[j]); this.wordList = randomSortByArr(this.wordArr[j]);
this.wordBgList = this.wordArrBg[j];
const arr = this.wordList; const arr = this.wordList;
const arrBg = this.wordBgList;
console.log('arr', arr);
console.log('arrBg', arrBg);
let itemW = this.itemW + 7; let itemW = this.itemW + 7;
let disW = 10; let disW = 10;
let totalW = 0; let totalW = 0;
...@@ -900,13 +1003,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -900,13 +1003,14 @@ export class PlayComponent implements OnInit, OnDestroy {
for (let k = 0; k < arr.length; k++) { for (let k = 0; k < arr.length; k++) {
const baseX = offX + k * (itemW + disW); const baseX = offX + k * (itemW + disW);
const data = arr[k]; const data = arr[k];
const dataBg = arrBg[k];
const optionRect = new ShapeRect(); const optionRect = new ShapeRect();
optionRect.init(); optionRect.init();
optionRect.fillColor = '#ffffff'; optionRect.fillColor = '#ffffff';
optionRect.setSize(itemW, itemH); optionRect.setSize(itemW, itemH);
optionRect.setShadow(0, 5, 10); optionRect.setShadow(0, 5, 10);
optionRect.x = baseX; optionRect.x = baseX;
optionRect.y = this.canvasHeight - 45 * this.mapScale; optionRect.y = this.canvasHeight - 55 * this.mapScale;
optionRect['id'] = data.id; optionRect['id'] = data.id;
optionRect['data'] = data; optionRect['data'] = data;
optionRect['baseX'] = optionRect.x; optionRect['baseX'] = optionRect.x;
...@@ -921,9 +1025,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -921,9 +1025,10 @@ export class PlayComponent implements OnInit, OnDestroy {
optionRect.setSize(itemW, itemH); optionRect.setSize(itemW, itemH);
optionBg.setScaleXY(this.mapScale * .5); optionBg.setScaleXY(this.mapScale * .5);
optionBg.x = optionRect.x; optionBg.x = optionRect.x;
optionBg.y = this.canvasHeight - 130 * this.mapScale; optionBg.y = this.canvasHeight - 150 * this.mapScale;
optionBg['id'] = k; optionBg['id'] = k;
optionBg['num'] = j; optionBg['num'] = j;
optionBg['data'] = dataBg;
this.renderArr.push(optionBg); this.renderArr.push(optionBg);
const label = new Label(); const label = new Label();
...@@ -959,6 +1064,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -959,6 +1064,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.typeC.push(optionBg); this.typeC.push(optionBg);
} }
} }
} }
getArr(num) { getArr(num) {
...@@ -1091,6 +1197,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1091,6 +1197,7 @@ export class PlayComponent implements OnInit, OnDestroy {
soundBegin(i) { soundBegin(i) {
const curData = this.picArr[i]; const curData = this.picArr[i];
if (!curData.audio_url) { return; }
const audioLink = curData.audio_url; const audioLink = curData.audio_url;
this.audioPlayer.src = audioLink; this.audioPlayer.src = audioLink;
this.audioPlayer.load(); this.audioPlayer.load();
...@@ -1118,8 +1225,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1118,8 +1225,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const soundClose = new MySprite(); const soundClose = new MySprite();
soundClose.init(this.images.get('Sound_Close_Btn@2x')); soundClose.init(this.images.get('Sound_Close_Btn@2x'));
soundClose.x = this.canvasWidth - 70 * this.mapScale; soundClose.x = this.canvasWidth - 70 * this.mapScale;
soundClose.y = this.canvasHeight - 40 * this.mapScale; soundClose.y = this.canvasHeight - 50 * this.mapScale;
soundClose.setScaleXY(this.mapScale * .6); soundClose.setScaleXY(this.mapScale * .5);
this.renderArr.push(soundClose); this.renderArr.push(soundClose);
this.soundClose = soundClose; this.soundClose = soundClose;
...@@ -1128,7 +1235,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1128,7 +1235,7 @@ export class PlayComponent implements OnInit, OnDestroy {
soundOpen.setScaleXY(this.mapScale); soundOpen.setScaleXY(this.mapScale);
soundOpen.x = soundClose.x; soundOpen.x = soundClose.x;
soundOpen.y = soundClose.y; soundOpen.y = soundClose.y;
soundOpen.setScaleXY(this.mapScale * .6); soundOpen.setScaleXY(this.mapScale * .5);
this.renderArr.push(soundOpen); this.renderArr.push(soundOpen);
this.soundOpen = soundOpen; this.soundOpen = soundOpen;
soundClose.visible = false; soundClose.visible = false;
...@@ -1301,7 +1408,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -1301,7 +1408,14 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
checkOptionTargetRight(optionTarget) { checkOptionTargetRight(optionTarget) {
if (this.curOptionRect.id == optionTarget.id) { console.log('curOptionRect',this.curOptionRect);
console.log('optionTarget',optionTarget);
console.log('curOptionRect.text',this.curOptionRect.data['text']);
// console.log('optionTarget.text',optionTarget.data['text']);
console.log('curOptionRect.id',this.curOptionRect.id);
console.log('optionTarget.id',optionTarget.id);
// || this.curOptionRect.data['text'] == optionTarget.data['text']
if (this.curOptionRect.id == optionTarget.id || this.curOptionRect.data['text'] == optionTarget.data['text']) {
this.putOption(this.curOptionRect, optionTarget); this.putOption(this.curOptionRect, optionTarget);
} else { } else {
const wrongLink: any = this.rawAudios.get('wrong'); const wrongLink: any = this.rawAudios.get('wrong');
......
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