Commit 220e54ef authored by 李维's avatar 李维

dev done

parent 78674512
......@@ -204,9 +204,8 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy {
item.audio_url = saveData.media.audio_url?saveData.media.audio_url:""
} else {
item.uid = uuid.v4()
console.log(item.uid)
item.initFont(Number(this.fontSize) * this.scale, this.fontName, this.fontColor)
item.init(this.defaultItemBG, "TextText", "Text", () => {
item.init(this.defaultItemBG, "Text", "Text", () => {
item.x = this.canvasWidth / 2 - this.itemWidth / 2;
item.y = this.canvasHeight / 2 - 20;
return {width: this.itemWidth, height: this.itemHeight}
......
......@@ -27,8 +27,8 @@
<!-- 左侧选区 -->
<div style="flex: 1; padding-right: 20px;">
<nz-form-item>
<nz-form-label [nzSpan]="2">左侧单词</nz-form-label>
<nz-form-control [nzSpan]="4">
<nz-form-label [nzSpan]="4">左侧单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.wordLeft_text" (blur)="save()" />
</nz-form-control>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
......@@ -108,33 +108,35 @@
</nz-form-control>
<nz-form-label [nzSpan]="2">组合数</nz-form-label>
<nz-form-control [nzSpan]="4">
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</nz-form-control>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="4" style="padding: 0 5px; ">
<span style="background-color: #ccc; padding: 5px;">
{{getQuestionWord(1, item.combin)}}
</span>
</nz-form-control>
<nz-form-label [nzSpan]="1">发音</nz-form-label>
<nz-form-control [nzSpan]="5">
<nz-form-label [nzSpan]="2">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', item)" > </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="1">组合</nz-form-label>
<nz-form-control [nzSpan]="23">
<nz-form-label [nzSpan]="2">组合</nz-form-label>
<nz-form-control [nzSpan]="22">
<nz-select *ngFor="let part of item.combin; let i = index" [attr.data-index]="i" [(ngModel)]="questionsLeft[QI]._combin[i]" style="float: left; margin-right: 5px; width: 100px;" (ngModelChange)="handlePartChange($event, 1, QI, i)">
<nz-option *ngIf="wordLeft_text" [nzDisabled]="item.combin.indexOf(-1)!=-1" [nzValue]="-1" [nzLabel]="'R-' + wordLeft_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneItemArrLeft; let j = index;" [attr.data-index]="j" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.media.text"></nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="4" style="padding: 0 5px; ">
<span style="background-color: #ccc; padding: 5px;">
{{getQuestionWord(1, item.combin)}}
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item style="margin-bottom: 0;">
<nz-form-control [nzSpan]="24">
<div style="float: right;">
......@@ -173,8 +175,8 @@
<!-- 中间选区 -->
<div style="flex: 1; padding-left: 20px; border-left: 2px dashed #ccc;">
<nz-form-item>
<nz-form-label [nzSpan]="2">中间单词</nz-form-label>
<nz-form-control [nzSpan]="4">
<nz-form-label [nzSpan]="4">中间单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.wordMiddle_text" (blur)="save()" />
</nz-form-control>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
......@@ -220,7 +222,7 @@
文字
</div>
<div style="float: left;">
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="save()" />
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="handleTextChange($event, it.uid)" />
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
......@@ -255,26 +257,19 @@
</nz-form-control>
<nz-form-label [nzSpan]="2">组合数</nz-form-label>
<nz-form-control [nzSpan]="4">
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</nz-form-control>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="4" style="padding: 0 5px; ">
<span style="background-color: #ccc; padding: 5px;">
{{getQuestionWord(2, item.combin)}}
</span>
</nz-form-control>
<nz-form-label [nzSpan]="1">发音</nz-form-label>
<nz-form-control [nzSpan]="5">
<nz-form-label [nzSpan]="2">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', item)" > </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="1">组合</nz-form-label>
<nz-form-control [nzSpan]="23">
<nz-form-label [nzSpan]="2">组合</nz-form-label>
<nz-form-control [nzSpan]="22">
<nz-select *ngFor="let part of item.combin; let i = index" [attr.data-index]="i" [(ngModel)]="questionsMiddle[QI]._combin[i]" style="float: left; margin-right: 5px; width: 100px;" (ngModelChange)="handlePartChange($event, 2, QI, i)">
<nz-option *ngIf="wordMiddle_text" [nzDisabled]="item.combin.indexOf(-1)!=-1" [nzValue]="-1" [nzLabel]="'R-' + wordMiddle_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneItemArrMiddle; let j = index;" [attr.data-index]="j" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.media.text"></nz-option>
......@@ -282,6 +277,15 @@
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="4" style="padding: 0 5px; ">
<span style="background-color: #ccc; padding: 5px;">
{{getQuestionWord(2, item.combin)}}
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item style="margin-bottom: 0;">
<nz-form-control [nzSpan]="24">
<div style="float: right;">
......@@ -321,8 +325,8 @@
<!-- 右侧选区 -->
<div style="flex: 1; padding-left: 20px; border-left: 2px dashed #ccc;">
<nz-form-item>
<nz-form-label [nzSpan]="2">右侧单词</nz-form-label>
<nz-form-control [nzSpan]="4">
<nz-form-label [nzSpan]="4">右侧单词</nz-form-label>
<nz-form-control [nzSpan]="6">
<input type="text" nz-input placeholder="" [(ngModel)]="item.contentObj.wordRight_text" (blur)="save()" />
</nz-form-control>
<nz-form-label [nzSpan]="4">音频</nz-form-label>
......@@ -368,7 +372,7 @@
文字
</div>
<div style="float: left;">
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="save()" />
<input type="text" nz-input placeholder="" [(ngModel)]="it.media.text" (blur)="handleTextChange($event, it.uid)" />
</div>
</nz-form-control>
<nz-form-control [nzSpan]="8">
......@@ -403,26 +407,19 @@
</nz-form-control>
<nz-form-label [nzSpan]="2">组合数</nz-form-label>
<nz-form-control [nzSpan]="4">
<nz-form-control [nzSpan]="6">
<nz-input-number [(ngModel)]="item.number" [nzMin]="1" [nzMax]="5" [nzStep]="1" (ngModelChange)="handleCombinLength(item)"></nz-input-number>
</nz-form-control>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="4" style="padding: 0 5px; ">
<span style="background-color: #ccc; padding: 5px;">
{{getQuestionWord(3, item.combin)}}
</span>
</nz-form-control>
<nz-form-label [nzSpan]="1">发音</nz-form-label>
<nz-form-control [nzSpan]="5">
<nz-form-label [nzSpan]="2">发音</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-audio-recorder id="index_audio_1" [audioUrl]="item.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', item)" > </app-audio-recorder>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="1">组合</nz-form-label>
<nz-form-control [nzSpan]="23">
<nz-form-label [nzSpan]="2">组合</nz-form-label>
<nz-form-control [nzSpan]="22">
<nz-select *ngFor="let part of item.combin; let i = index" [attr.data-index]="i" [(ngModel)]="questionsRight[QI]._combin[i]" style="float: left; margin-right: 5px; width: 100px;" (ngModelChange)="handlePartChange($event, 3, QI, i)">
<nz-option *ngIf="wordRight_text" [nzDisabled]="item.combin.indexOf(-1)!=-1" [nzValue]="-1" [nzLabel]="'R-' + wordRight_text"></nz-option>
<nz-option *ngFor="let hot of hotZoneItemArrRight; let j = index;" [attr.data-index]="j" [nzValue]="j" [nzLabel]="(j + 1) + '-' + hot.media.text"></nz-option>
......@@ -430,6 +427,15 @@
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2">预览</nz-form-label>
<nz-form-control [nzSpan]="4" style="padding: 0 5px; ">
<span style="background-color: #ccc; padding: 5px;">
{{getQuestionWord(3, item.combin)}}
</span>
</nz-form-control>
</nz-form-item>
<nz-form-item style="margin-bottom: 0;">
<nz-form-control [nzSpan]="24">
<div style="float: right;">
......
......@@ -101,6 +101,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
handleTextChange(e, uid) {
this.hotZooLeftEL.setTextByUID(e.target.value, uid)
this.hotZooMiddleEL.setTextByUID(e.target.value, uid)
this.hotZooRightEL.setTextByUID(e.target.value, uid)
this.save()
}
......@@ -265,7 +267,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
item.combin = item.combin.splice(0, Number(item.number))
}
this.save()
console.log(item.combin)
}
deleteQuestionItem(pos, i) {
......@@ -308,7 +309,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
onAudioUploadSuccess(e, key, item?) {
console.log(key, item)
if(item) {
item[key] = e.url;
} else {
......@@ -321,7 +321,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
fields.forEach((name: any)=>{
to[name] = from[name]
})
console.log(from, to)
}
save() {
......
......@@ -129,8 +129,10 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------ 游戏逻辑数据 ------------
m_elementDraged = null;
m_currentQuestionIndex_left = 0;
m_currentQuestionIndex_middle = 0;
m_currentQuestionIndex_right= 0;
m_answerAll_left = []
m_answerAll_middle = []
m_answerAll_right = []
m_centerAdjust = 300
// ------------------------------------
......@@ -184,6 +186,10 @@ export class PlayComponent implements OnInit, OnDestroy {
array.push(element.media.image_url)
});
contentObj.hotZoneItemArrMiddle.forEach(element => {
array.push(element.media.image_url)
});
contentObj.hotZoneItemArrRight.forEach(element => {
array.push(element.media.image_url)
});
......@@ -193,29 +199,34 @@ export class PlayComponent implements OnInit, OnDestroy {
// 映射预加载音频[网路]资源 返回包含音频路径的数组
mapToAduioArray(contentObj){
let array = []
console.log(JSON.stringify(contentObj))
contentObj.title.mainTextAudio_url && array.push(contentObj.title.mainTextAudio_url)
contentObj.longAudio_url && array.push(contentObj.longAudio_url)
contentObj.wordLeft_audio_url && array.push(contentObj.wordLeft_audio_url)
contentObj.wordRight_audio_url && array.push(contentObj.wordRight_audio_url)
contentObj.wordMiddle_audio_url && array.push(contentObj.wordMiddle_audio_url)
contentObj.questionsLeft.forEach(element => {
element.audio_url && array.push(element.audio_url)
});
contentObj.hotZoneItemArrLeft.forEach(element => {
element.media.audio_url && array.push(element.media.audio_url)
});
contentObj.hotZoneItemArrRight.forEach(element => {
element.media.audio_url && array.push(element.media.audio_url)
});
contentObj.questionsRight.forEach(element => {
element.audio_url && array.push(element.audio_url)
});
contentObj.hotZoneItemArrLeft.forEach(element => {
contentObj.hotZoneItemArrMiddle.forEach(element => {
element.media.audio_url && array.push(element.media.audio_url)
});
contentObj.hotZoneItemArrRight.forEach(element => {
element.media.audio_url && array.push(element.media.audio_url)
contentObj.questionsMiddle.forEach(element => {
element.audio_url && array.push(element.audio_url)
});
console.log(array)
return array
}
......@@ -234,9 +245,11 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initSelectPannel();
this.initMainWindow();
this.initLeftPart();
this.initMiddlePart();
this.initRightPart();
this.initWordLines(true);
this.initWordLines(false);
this.initWordLines(1);
this.initWordLines(2);
this.initWordLines(3);
this.initTitle_Part();
this.initTitle_Main();
this.initAudioPlayerAll();
......@@ -246,8 +259,10 @@ export class PlayComponent implements OnInit, OnDestroy {
cleanGameVar(){
this.m_elementDraged = null;
this.m_currentQuestionIndex_left = 0;
this.m_currentQuestionIndex_middle = 0;
this.m_currentQuestionIndex_right= 0;
this.m_answerAll_left = []
this.m_answerAll_middle = []
this.m_answerAll_right = []
}
......@@ -267,30 +282,43 @@ export class PlayComponent implements OnInit, OnDestroy {
initSelectPannel() {
let element_left = this.g_cartoon.createCartoonElementImageFunc("select-background-left", "select-bg", (w, h)=>{
return {
sx: 420 * this.g_mapScale / w,
sy: 188 * this.g_mapScale / h
sx: 371 * this.g_mapScale / w,
sy: 470 * this.g_mapScale / h
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (143 + 420 / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (176 + 168 / 2) * this.g_mapScale
x: this.g_cartoon.getOrigin().x + (80 + 371 / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (167 + 470 / 2) * this.g_mapScale
}
})
let element_right = this.g_cartoon.createCartoonElementImageFunc("select-background-left", "select-bg", (w, h)=>{
let element_middle = this.g_cartoon.createCartoonElementImageFunc("select-background-middle", "select-bg", (w, h)=>{
return {
sx: 420 * this.g_mapScale / w,
sy: 188 * this.g_mapScale / h
sx: 371 * this.g_mapScale / w,
sy: 470 * this.g_mapScale / h
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (708 + 420 / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (176 + 168 / 2) * this.g_mapScale
x: this.g_cartoon.getOrigin().x + (465 + 371 / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (167 + 470 / 2) * this.g_mapScale
}
})
let element_right = this.g_cartoon.createCartoonElementImageFunc("select-background-right", "select-bg", (w, h)=>{
return {
sx: 371 * this.g_mapScale / w,
sy: 470 * this.g_mapScale / h
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (854 + 371 / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (167 + 470 / 2) * this.g_mapScale
}
})
this.render(element_left.ref)
this.render(element_middle.ref)
this.render(element_right.ref)
}
......@@ -363,18 +391,18 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initMainWindow(){
const hotZoneWidth = 400
const hotZoneHeight = 160
const hotZoneWidth = 330
const hotZoneHeight = 168
// 左侧
let containerLeft = this.g_cartoon.createCartoonElementImageFunc("select-container-left", "bg_400_160", (w, h)=>{
let containerLeft = this.g_cartoon.createCartoonElementImageFunc("select-container-left", "bg_330_168", (w, h)=>{
return {
sx: hotZoneWidth * this.g_mapScale / w,
sy: hotZoneHeight * this.g_mapScale / h
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (153 + hotZoneWidth / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (178 + hotZoneHeight / 2) * this.g_mapScale
x: this.g_cartoon.getOrigin().x + (100 + hotZoneWidth / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (185 + hotZoneHeight / 2) * this.g_mapScale
}
})
......@@ -403,16 +431,53 @@ export class PlayComponent implements OnInit, OnDestroy {
this.render(containerLeft.ref)
this.initHotZooes(this.g_formData.hotZoneItemArrLeft, containerLeft, "left")
// 中间
let containerMiddle = this.g_cartoon.createCartoonElementImageFunc("select-container-middle", "bg_330_168", (w, h)=>{
return {
sx: hotZoneWidth * this.g_mapScale / w,
sy: hotZoneHeight * this.g_mapScale / h
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (485 + hotZoneWidth / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (185 + hotZoneHeight / 2) * this.g_mapScale
}
})
contentImageWidth = 0
let element_middle = this.g_cartoon.createCartoonElementImageFunc("window-image-container-right", this.g_formData.bgItemRight.url, (w, h)=>{
let s = Math.min( hotZoneWidth / w, hotZoneHeight / h)
contentImageWidth = (w * s) / 2
contentImageHeight = (h * s) / 2
return {
sx: s,
sy: s
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
containerMiddle.originX = containerMiddle.ref.x - contentImageWidth * containerMiddle.ref.scaleX
containerMiddle.originY = containerMiddle.ref.y - contentImageHeight * containerMiddle.ref.scaleY
containerMiddle.ref.addChild(element_middle.ref)
this.render(containerMiddle.ref)
this.initHotZooes(this.g_formData.hotZoneItemArrRight, containerMiddle, "middle")
// 右侧
let containerRight = this.g_cartoon.createCartoonElementImageFunc("select-container-right", "bg_400_160", (w, h)=>{
let containerRight = this.g_cartoon.createCartoonElementImageFunc("select-container-right", "bg_330_168", (w, h)=>{
return {
sx: hotZoneWidth * this.g_mapScale / w,
sy: hotZoneHeight * this.g_mapScale / h
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (718 + hotZoneWidth / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (178 + hotZoneHeight / 2) * this.g_mapScale
x: this.g_cartoon.getOrigin().x + (875 + hotZoneWidth / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (185 + hotZoneHeight / 2) * this.g_mapScale
}
})
......@@ -461,10 +526,10 @@ export class PlayComponent implements OnInit, OnDestroy {
element.hotZoneSide = side;
element.ref.alpha = 0;
let elementDrag = null
elementDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-"+index+"_"+side, " " + item.media.text + " ", "MMTextBook-Bold", "#000", 48 * this.g_mapScale, -500, -500)
elementDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-"+index+"_"+side, " " + item.media.text + " ", "MMTextBook-Bold", "#000", 36 * this.g_mapScale, -500, -500)
let textShow = null
textShow = this.g_cartoon.createCartoonElementLabel("text-puzzle-"+index+"_"+side, " " + item.media.text + " ", "FuturaBT-Medium", "#c8161e", 48 * this.g_mapScale, element.ref.x, element.ref.y)
textShow = this.g_cartoon.createCartoonElementLabel("text-puzzle-"+index+"_"+side, " " + item.media.text + " ", "FuturaBT-Medium", "#c8161e", 36 * this.g_mapScale, element.ref.x, element.ref.y)
this.render(element.ref)
this.render(textShow.ref)
......@@ -507,7 +572,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (298 + 110 / 2) * this.g_mapScale,
x: this.g_cartoon.getOrigin().x + (209 + 110 / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (126 + 110 / 2) * this.g_mapScale
}
})
......@@ -548,6 +613,61 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initMiddlePart() {
if(!this.g_formData.wordRight_text) {
return;
}
let element = this.g_cartoon.createCartoonElementImageFunc("middle-part-container", "oval-copy", (w, h)=>{
return {
sx: 110 * this.g_mapScale / w,
sy: 110 * this.g_mapScale / h
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (598 + 110 / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (126 + 110 / 2) * this.g_mapScale
}
})
element.hotZoneIndex = -1;
element.hotZoneSide = "middle"
let text = null
text = this.g_cartoon.createCartoonElementLabel("text-puzzle-middle", " " + this.g_formData.wordMiddle_text + " ", "MMTextBook-Bold", "#FFF", 48)
element.ref.addChild(text.ref)
let textDrag = null
textDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-middle-drag", " " + this.g_formData.wordMiddle_text + " ", "MMTextBook-Bold", "#C8161E", 48 * this.g_mapScale, -500, -500)
this.render(textDrag.ref)
this.render(element.ref)
element.timeoutID = null
this.subscribeMapDragEvent(element.id, ()=>{
text.ref.alpha = 0.5;
element.timeoutID = setTimeout(() => {
this.g_cartoon.stopAllAudio()
this.g_cartoon.playAudio(this.g_formData.wordMiddle_audio_url)
}, 500);
}, ()=>{
if(element.timeoutID) {
clearTimeout(element.timeoutID)
element.timeoutID = null
}
textDrag.ref.x = this.g_clickX,
textDrag.ref.y = this.g_clickY
}, ()=>{
text.ref.alpha = 1;
textDrag.ref.x = textDrag.initX,
textDrag.ref.y = textDrag.initY
this.m_elementDraged = element.id;
this.g_enableMapUp = true;
this.g_enableMapDown = true;
})
}
initRightPart() {
if(!this.g_formData.wordRight_text) {
return;
......@@ -560,7 +680,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (863 + 110 / 2) * this.g_mapScale,
x: this.g_cartoon.getOrigin().x + (987 + 110 / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (126 + 110 / 2) * this.g_mapScale
}
})
......@@ -601,26 +721,46 @@ export class PlayComponent implements OnInit, OnDestroy {
})
}
initWordLines(isLeft) {
initWordLines(pos) {
let questions = null
let side = isLeft?"left":"right"
if(isLeft) {
questions = this.g_formData.questionsLeft
} else {
questions = this.g_formData.questionsRight
let side = ""
switch(pos) {
case 1: questions = this.g_formData.questionsLeft; side = "left"; break; // 左边
case 2: questions = this.g_formData.questionsMiddle; side = "middle"; break; // 中间
case 3: questions = this.g_formData.questionsRight; side = "right"; break; // 右边
}
const lineWidth = 382
const lineWidth = 300
questions.forEach((item, index) => {
let textAll = []
item.combin.forEach(combinIndex => {
let key = Number(combinIndex)
let value = ""
if(key == -1) {
value = isLeft?this.g_formData.wordLeft_text:this.g_formData.wordRight_text
} else {
value = isLeft?this.g_formData.hotZoneItemArrLeft[combinIndex].media.text:this.g_formData.hotZoneItemArrRight[combinIndex].media.text
switch(pos) {
case 1:
if(key == -1) {
value = this.g_formData.wordLeft_text
} else {
value = this.g_formData.hotZoneItemArrLeft[combinIndex].media.text
};
break;
case 2:
if(key == -1) {
value = this.g_formData.wordMiddle_text
} else {
value = this.g_formData.hotZoneItemArrMiddle[combinIndex].media.text
};
break;
case 3:
if(key == -1) {
value = this.g_formData.wordRight_text
} else {
value = this.g_formData.hotZoneItemArrRight[combinIndex].media.text
};
break;
}
textAll.push(
{
key,
......@@ -629,36 +769,50 @@ export class PlayComponent implements OnInit, OnDestroy {
)
});
let element = this.g_cartoon.createCartoonElementImageFunc(`line-word-container-${side}-${index}`, "bg_375_46", (w, h)=>{
let element = this.g_cartoon.createCartoonElementImageFunc(`line-word-container-${side}-${index}`, "bg_300_46", (w, h)=>{
return {
sx: 375 * this.g_mapScale / w,
sx: 300 * this.g_mapScale / w,
sy: 46 * this.g_mapScale / h
}
}, (w, h)=>{
let x = 0
switch(pos) {
case 1: x = this.g_cartoon.getOrigin().x + (115 + lineWidth / 2) * this.g_mapScale; break; // 左边
case 2: x = this.g_cartoon.getOrigin().x + (511 + lineWidth / 2) * this.g_mapScale; break; // 中间
case 3: x = this.g_cartoon.getOrigin().x + (892 + lineWidth / 2) * this.g_mapScale; break; // 右边
}
return {
x: isLeft?this.g_cartoon.getOrigin().x + (169 + lineWidth / 2) * this.g_mapScale:this.g_cartoon.getOrigin().x + (748 + lineWidth / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (400 + 80 * index) * this.g_mapScale
x: x,
y: this.g_cartoon.getOrigin().y + (420 + 70 * index) * this.g_mapScale
}
})
element.questionIndex = index;
element.done = false;
element.audio_url = item.audio_url?item.audio_url:""
let number = this.g_cartoon.createCartoonElementImageFunc(`line-word-number-${side}-${index}`, `num-${index+1}`, (w, h)=>{
let number = this.g_cartoon.createCartoonElementImageFunc(`line-word-number-${side}-${index}`, `bg_num`, (w, h)=>{
return {
sx: 46 / w,
sy: 46 / h
sx: 36 / w,
sy: 36 / h
}
}, (w, h)=>{
return {
x: -lineWidth / 2 + 46 / 2,
x: -lineWidth / 2 + 36 / 2,
y: 0
}
})
let number_text = this.g_cartoon.createCartoonElementLabelFunc(`question-index-${side}-${index}`, index + "", "FuturaBT-Medium", "#FFF", 36, (w, h)=>{
return {
x: 0,
y: 5
}
})
number.ref.addChild(number_text.ref)
let line = this.g_cartoon.createCartoonElementImageFunc(`line-word-line-${side}-${index}`, "line", (w, h)=>{
return {
sx: 300 / w,
sx: 240 / w,
sy: 2 / h
}
}, (w, h)=>{
......@@ -680,7 +834,7 @@ export class PlayComponent implements OnInit, OnDestroy {
}
answerIndex.push(item.key)
this[`m_answerAll_${side}`][index].push(`word-part-${side}-${index}-${item.key}-${partIndex}`)
let textShow = this.g_cartoon.createCartoonElementLabel(`word-part-${side}-${index}-${item.key}-${partIndex}`, item.value, "MMTextBook-Bold", color, 48, startX, 0)
let textShow = this.g_cartoon.createCartoonElementLabel(`word-part-${side}-${index}-${item.key}-${partIndex}`, item.value, "MMTextBook-Bold", color, 48 , startX, 0)
textShow.isShown = false;
textShow.ref.alpha = 0;
textShow.ref.x = startX + textShow.ref.width / 2
......@@ -718,7 +872,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}
for (let index = 0; index < answerIndex.length; index++) {
console.log(dragElement.hotZoneIndex, answerIndex[index], answerIndex)
let textShow = this.g_cartoon.getCartoonElement(`word-part-${side}-${this[`m_currentQuestionIndex_${side}`]}-${dragElement.hotZoneIndex}-${index}`)
if(dragElement.hotZoneIndex == answerIndex[index] && !textShow.isShown) {
......@@ -760,7 +913,7 @@ export class PlayComponent implements OnInit, OnDestroy {
element.ref.addChild(line.ref)
element.ref.addChild(number.ref)
this.render(element.ref, -1)
this.render(element.ref, 100)
})
}
......@@ -946,7 +1099,6 @@ export class PlayComponent implements OnInit, OnDestroy {
}, (w, h)=>{
return this.calcPosition(key, w, h)
})
console.log(this.g_formData.bgImages[key])
this.render(ele.ref, -9999)
}
}
......
......@@ -30,9 +30,12 @@ const localImages = {
"defalut_container": "assets/play/bg_320_168.png",
"part_number_bg": "assets/play/part_number_bg.png",
'bg_70_40': 'assets/play/bg_70_40.png',
'bg_num': 'assets/play/bg_num.png',
'bg_250_46': 'assets/play/bg_250_46.png',
'bg_375_46': 'assets/play/bg_375_46.png',
'bg_50_20': 'assets/play/bg_50_20.png',
'bg_330_168': 'assets/play/bg_330_168.png',
'bg_300_46': 'assets/play/bg_300_46.png',
'demo': 'assets/play/demo.png',
'line': 'assets/play/line.png',
'num-1': 'assets/play/num-1.png',
......
......@@ -70,48 +70,303 @@ export const demoData = {
mainText: "Listen, circle and write.",
mainTextAudio_url: "",
},
wordLeft_text: "",
wordLeft_text: "ear",
wordLeft_audio_url: "",
hotZoneItemArrLeft: [],
questionsLeft: [],
hotZoneItemArrLeft: [
{
index: 0,
rect: {
x: 11.870388349514563,
y: -38.60859029126214,
width: 60.87378640776699,
height: 26.175728155339808,
},
uid: "2ea9d699-a27a-4316-b67f-911ea7f79ce6",
media: {
image_url: "assets/play/default_itemBG.png",
text: "d",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
},
{
index: 1,
rect: {
x: 16.131553398058255,
y: 72.18170097087379,
width: 60.87378640776699,
height: 26.175728155339808,
},
uid: "eab8f3d6-9cbc-4956-b240-c858b2678476",
media: {
image_url: "assets/play/default_itemBG.png",
text: "mi",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
},
{
index: 2,
rect: {
x: 117.18203883495147,
y: 21.047720388349518,
width: 60.87378640776699,
height: 26.175728155339808,
},
uid: "aa2310bc-ff1c-4c8e-b2f6-e884ecdddf88",
media: {
image_url: "assets/play/default_itemBG.png",
text: "p",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
},
{
index: 3,
rect: {
x: 235.88592233009712,
y: -37.99985242718447,
width: 60.87378640776699,
height: 26.175728155339808,
},
uid: "5a91f31e-9e37-4d7c-a6e6-255c8e2dd1df",
media: {
image_url: "assets/play/default_itemBG.png",
text: "w",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
},
{
index: 4,
rect: {
x: 232.23349514563108,
y: 69.13801165048544,
width: 60.87378640776699,
height: 26.175728155339808,
},
uid: "a4bdec5b-3659-4f70-bdf0-5a7029e73c67",
media: {
image_url: "assets/play/default_itemBG.png",
text: "go",
type: "Text",
audio_url: "",
},
scale: 0.6087378640776699,
},
],
questionsLeft: [
{ number: 2, combin: [0, -1], _combin: [0, -1] },
{ number: 2, combin: [0, -1], _combin: [0, -1] },
{ number: 2, combin: [0, -1], _combin: [0, -1] },
],
bgItemLeft: {
url: "assets/play/hotZooCard/defalut_bg.png",
rect: {
x: 0,
y: 0,
width: 1315,
height: 212.31770833333334,
},
rect: { x: 0, y: 89.51538825757572, width: 515, height: 83.15104166666667 },
questions: [],
},
wordMiddle_text: "",
wordMiddle_text: "ear",
wordMiddle_audio_url: "",
hotZoneItemArrMiddle: [],
questionsMiddle: [],
hotZoneItemArrMiddle: [
{
index: 0,
rect: {
x: 17.416666666666668,
y: -27.247,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "bffbcc62-44bf-4336-b9a2-28b9c57a23dd",
media: {
image_url: "assets/play/default_itemBG.png",
text: "d",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
{
index: 1,
rect: {
x: 13.750000000000002,
y: 69.91966666666667,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "7a9a60fd-da42-4adc-92b2-ea44144e3c85",
media: {
image_url: "assets/play/default_itemBG.png",
text: "mi",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
{
index: 2,
rect: {
x: 121.91666666666667,
y: 18.586333333333336,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "33260665-7cbb-4d66-b50f-35cb27bb232e",
media: {
image_url: "assets/play/default_itemBG.png",
text: "p",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
{
index: 3,
rect: {
x: 235.58333333333334,
y: -27.858111111111114,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "6691ef34-6d56-4704-9fc0-945bf929e4d6",
media: {
image_url: "assets/play/default_itemBG.png",
text: "w",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
{
index: 4,
rect: {
x: 230.69444444444446,
y: 63.19744444444445,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "e8a50b81-cdca-40fd-886d-2a07e6263c9d",
media: {
image_url: "assets/play/default_itemBG.png",
text: "go",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
],
questionsMiddle: [
{ number: 2, combin: [2, -1], _combin: [2, -1] },
{ number: 2, combin: [2, -1], _combin: [2, -1] },
{ number: 2, combin: [2, -1], _combin: [2, -1] },
],
bgItemMiddle: {
url: "assets/play/hotZooCard/defalut_bg.png",
rect: {
x: 0,
y: 0,
width: 1315,
height: 212.31770833333334,
},
rect: { x: 0, y: 89.16775568181816, width: 513, height: 82.828125 },
questions: [],
},
wordRight_text: "",
wordRight_text: "ear",
wordRight_audio_url: "",
hotZoneItemArrRight: [],
questionsRight: [],
hotZoneItemArrRight: [
{
index: 0,
rect: {
x: 18.63888888888889,
y: -24.191444444444446,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "b7943632-7a5b-4ada-b640-81b758712a61",
media: {
image_url: "assets/play/default_itemBG.png",
text: "d",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
{
index: 1,
rect: {
x: 16.805555555555557,
y: 69.91966666666667,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "54e395b1-5d90-4f4b-afe4-dacea3711fad",
media: {
image_url: "assets/play/default_itemBG.png",
text: "mi",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
{
index: 2,
rect: {
x: 126.19444444444446,
y: 19.197444444444447,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "2669a94f-b66d-483a-9a49-a71042ad7e02",
media: {
image_url: "assets/play/default_itemBG.png",
text: "p",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
{
index: 3,
rect: {
x: 233.75000000000003,
y: -22.35811111111111,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "6a6fcbc7-84e9-4cad-b380-d78e74a24c33",
media: {
image_url: "assets/play/default_itemBG.png",
text: "w",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
{
index: 4,
rect: {
x: 233.75000000000003,
y: 68.08633333333334,
width: 61.111111111111114,
height: 26.27777777777778,
},
uid: "41165693-b5ca-4b7d-b7db-6f643259dac6",
media: {
image_url: "assets/play/default_itemBG.png",
text: "go",
type: "Text",
audio_url: "",
},
scale: 0.6111111111111112,
},
],
questionsRight: [
{ number: 2, combin: [3, -1], _combin: [3, -1] },
{ number: 2, combin: [3, -1], _combin: [3, -1] },
{ number: 2, combin: [3, -1], _combin: [3, -1] },
],
bgItemRight: {
url: "assets/play/hotZooCard/defalut_bg.png",
rect: {
x: 0,
y: 0,
width: 1315,
height: 212.31770833333334,
},
rect: { x: 0, y: 89.16775568181816, width: 513, height: 82.828125 },
questions: [],
},
bgImages: {
leftTop: "",
middleTop: "",
......@@ -121,5 +376,5 @@ export const demoData = {
leftBottom: "",
middleBottom: "",
rightBottom: "",
}
},
};
src/assets/play/bg_330_168.png

2.12 KB | W: | H:

src/assets/play/bg_330_168.png

2.32 KB | W: | H:

src/assets/play/bg_330_168.png
src/assets/play/bg_330_168.png
src/assets/play/bg_330_168.png
src/assets/play/bg_330_168.png
  • 2-up
  • Swipe
  • Onion skin
src/assets/play/line.png

113 Bytes | W: | H:

src/assets/play/line.png

108 Bytes | W: | H:

src/assets/play/line.png
src/assets/play/line.png
src/assets/play/line.png
src/assets/play/line.png
  • 2-up
  • Swipe
  • Onion skin
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