Commit bd3618b5 authored by 李维's avatar 李维

dev done

parent 22ec6f5d
...@@ -28,11 +28,12 @@ ...@@ -28,11 +28,12 @@
"ali-oss": "^6.5.1", "ali-oss": "^6.5.1",
"compressing": "^1.5.0", "compressing": "^1.5.0",
"ng-zorro-antd": "^8.5.2", "ng-zorro-antd": "^8.5.2",
"node-sass": "4.0.0",
"rxjs": "~6.5.4", "rxjs": "~6.5.4",
"spark-md5": "^3.0.0", "spark-md5": "^3.0.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.10.2", "uuid": "^8.3.2",
"node-sass": "4.0.0" "zone.js": "~0.10.2"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.900.3", "@angular-devkit/build-angular": "~0.900.3",
......
...@@ -20,101 +20,38 @@ ...@@ -20,101 +20,38 @@
<app-audio-recorder id="index_audio_1" [audioUrl]="title.mainTextAudio_url" (audioUploaded)="onAudioUploadSuccess($event, 'mainTextAudio_url', title)" ></app-audio-recorder> <app-audio-recorder id="index_audio_1" [audioUrl]="title.mainTextAudio_url" (audioUploaded)="onAudioUploadSuccess($event, 'mainTextAudio_url', title)" ></app-audio-recorder>
</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]="4">
<app-audio-recorder id="index_audio_1" [audioUrl]="long_audio.audio_url" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url', long_audio)" ></app-audio-recorder>
</nz-form-control>
</nz-form-item>
</div> </div>
<div class="section" style="padding: 1rem;"> <div class="section" style="padding: 1rem;">
<div *ngIf="dataArray.length==0" style="font-style: italic;"> <div *ngIf="dataArray.length==0" style="font-style: italic;">
请新建单词 请新建问答
</div> </div>
<div ngfor *ngFor="let item of dataArray; let i = index" class="section-content" style="border-bottom: 1px dashed #ccc; padding-bottom: 5px; display: flex;"> <div ngfor *ngFor="let item of dataArray; let i = index" class="section-content" style="border-bottom: 1px dashed #ccc; padding-bottom: 5px;">
<div style="flex:1"> <h3>-{{i+1}}-</h3>
<div class="form-item" style="margin-bottom: 10px;"> <nz-form-item>
<p> <nz-form-label [nzSpan]="2">问题</nz-form-label>
<span>序号</span> <nz-form-control [nzSpan]="12">
<strong>{{i+1}}</strong> <textarea rows="4" nz-input [(ngModel)]="item.questionText" (blur)="saveItem()"></textarea>
</p> </nz-form-control>
</div> <nz-form-label [nzSpan]="2">题号</nz-form-label>
<div class="form-item" style="margin-bottom: 10px;"> <nz-form-control [nzSpan]="8">
<p> <app-audio-recorder [audioUrl]="item.audio_url_question"
<span>音频-左</span> (audioUploaded)="onAudioUploadSuccess($event, 'audio_url_question',item)">
<app-audio-recorder [audioUrl]="item.audio_url_left"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_left',item)">
</app-audio-recorder> </app-audio-recorder>
</p> </nz-form-control>
</div> </nz-form-item>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>单词-左</span>
<input type="text" nz-input placeholder="" maxlength="3" [(ngModel)]="item.text_left" (blur)="saveItem()" />
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>图片-左</span>
<app-upload-image-with-preview [picUrl]="item.image_url_left"
(imageUploaded)="onImageUploadSuccess($event, 'image_url_left', item)"></app-upload-image-with-preview>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>反转后图片</span>
<app-upload-image-with-preview [picUrl]="item.image_url_back" (imageUploaded)="onImageUploadSuccess($event, 'image_url_back', item)"></app-upload-image-with-preview>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<button style="margin-bottom: 10px;" nz-button nzType="danger" (click)="deleteItem(i)">
<span>删除</span>
</button>
</div>
</div>
<div style="flex:1"> <nz-form-item>
<div class="form-item" style="margin-bottom: 10px;"> <nz-form-label [nzSpan]="2">题号</nz-form-label>
<p> <nz-form-control [nzSpan]="12">
<span>卡片颜色</span> <textarea rows="4" nz-input [(ngModel)]="item.answerText" (blur)="saveItem()"></textarea>
<nz-select [(ngModel)]="item.bgColorType" style="width: 150px;" (ngModelChange)="saveItem()"> </nz-form-control>
<nz-option nzValue="g_g" nzLabel="左绿色-右绿色"></nz-option> <nz-form-label [nzSpan]="2">题号</nz-form-label>
<nz-option nzValue="g_p" nzLabel="左绿色-右粉色"></nz-option> <nz-form-control [nzSpan]="8">
<nz-option nzValue="p_p" nzLabel="左粉色-右粉色"></nz-option> <app-audio-recorder [audioUrl]="item.audio_url_answer"
<nz-option nzValue="p_g" nzLabel="左粉色-右绿色"></nz-option> (audioUploaded)="onAudioUploadSuccess($event, 'audio_url_answer',item)">
</nz-select>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px;">
<p>
<span>音频-右</span>
<app-audio-recorder [audioUrl]="item.audio_url_right"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url_right',item)">
</app-audio-recorder> </app-audio-recorder>
</p> </nz-form-control>
</div> </nz-form-item>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>单词-右</span>
<input type="text" nz-input placeholder="" maxlength="3" [(ngModel)]="item.text_right" (blur)="saveItem()" />
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>图片-右</span>
<app-upload-image-with-preview [picUrl]="item.image_url_right"
(imageUploaded)="onImageUploadSuccess($event, 'image_url_right', item)"></app-upload-image-with-preview>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;">
<p>
<span>反转后音频</span>
<app-audio-recorder [audioUrl]="item.audio_url_back" (audioUploaded)="onAudioUploadSuccess($event, 'audio_url_back', item)" ></app-audio-recorder>
</p>
</div>
<div class="form-item" style="margin-bottom: 10px; max-width: 400px;"></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -122,7 +59,7 @@ ...@@ -122,7 +59,7 @@
<div class="card-item" style="padding: 0.5vw; width: 500px;"> <div class="card-item" style="padding: 0.5vw; width: 500px;">
<button nz-button [disabled]="dataArray.length>=8" nzType="primary" class="add-btn" (click)="addItem()"> <button nz-button [disabled]="dataArray.length>=8" nzType="primary" class="add-btn" (click)="addItem()">
<i nz-icon nzType="plus-circle" nzTheme="outline"></i> <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
新建词组 新建问答
</button> </button>
</div> </div>
......
...@@ -27,7 +27,6 @@ ...@@ -27,7 +27,6 @@
width: 100%; width: 100%;
} }
.section-content{ .section-content{
display: flex;
margin: 5px 0 10px 0; margin: 5px 0 10px 0;
} }
} }
......
...@@ -28,9 +28,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -28,9 +28,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
"mainText": "", "mainText": "",
"mainTextAudio_url": "" "mainTextAudio_url": ""
}; };
long_audio = {
audio_url: ""
};
@Output() @Output()
update = new EventEmitter(); update = new EventEmitter();
...@@ -68,7 +65,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -68,7 +65,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
const fields = ["dataArray", "title", "long_audio"] const fields = ["dataArray", "title"]
if(typeof(this.item.contentObj.dataArray) == undefined || typeof(this.item.contentObj.grid) == undefined || typeof(this.item.contentObj.title) == undefined || this.item.contentObj.version != defaultData.version) { if(typeof(this.item.contentObj.dataArray) == undefined || typeof(this.item.contentObj.grid) == undefined || typeof(this.item.contentObj.title) == undefined || this.item.contentObj.version != defaultData.version) {
console.log("Init defalue data") console.log("Init defalue data")
this.item.contentObj = defaultData this.item.contentObj = defaultData
...@@ -81,7 +78,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -81,7 +78,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
addItem() { addItem() {
this.dataArray.push({bgColorType: "", image_url_back: "", audio_url_back: "", image_url_left: "", image_url_right: "", audio_url_left: "", audio_url_right: "", text_left: "", text_right: "" }) this.dataArray.push({questionText: "", audio_url_question: "", answerText: "", audio_url_answer: ""})
this.saveItem(); this.saveItem();
} }
......
...@@ -31,66 +31,81 @@ ...@@ -31,66 +31,81 @@
} }
@font-face{ // @font-face{
font-family: 'BRLNSDB'; // font-family: 'BRLNSDB';
src: url("../../assets/default/font/BRLNSDB.TTF") ; // src: url("../../assets/default/font/BRLNSDB.TTF") ;
} // }
@font-face{ // @font-face{
font-family: 'RoundedBold'; // font-family: 'RoundedBold';
src: url("../../assets/default/font/ArialRoundedBold.otf") ; // src: url("../../assets/default/font/ArialRoundedBold.otf") ;
} // }
@font-face{ // @font-face{
font-family: 'BRLNSB_1'; // font-family: 'BRLNSB_1';
src: url("../../assets/default/font/BerlinSansFB/BRLNSB_1.TTF") ; // src: url("../../assets/default/font/BerlinSansFB/BRLNSB_1.TTF") ;
} // }
@font-face{ // @font-face{
font-family: 'BerlinSansFBDemi-Bold'; // font-family: 'BerlinSansFBDemi-Bold';
src: url("../../assets/default/font/BerlinSansFB/BRLNSDB_1.TTF") ; // src: url("../../assets/default/font/BerlinSansFB/BRLNSDB_1.TTF") ;
} // }
@font-face{ // @font-face{
font-family: 'BRLNSR_1'; // font-family: 'BRLNSR_1';
src: url("../../assets/default/font/BerlinSansFB/BRLNSR_1.TTF") ; // src: url("../../assets/default/font/BerlinSansFB/BRLNSR_1.TTF") ;
} // }
// @font-face{
// font-family: 'GOTHIC_1';
// src: url("../../assets/default/font/CenturyGothic/GOTHIC_1.TTF") ;
// }
// @font-face{
// font-family: 'GOTHICB_1';
// src: url("../../assets/default/font/CenturyGothic/GOTHICB_1.TTF") ;
// }
// @font-face{
// font-family: 'GOTHICBI_1';
// src: url("../../assets/default/font/CenturyGothic/GOTHICBI_1.TTF") ;
// }
// @font-face{
// font-family: 'GOTHICI_1';
// src: url("../../assets/default/font/CenturyGothic/GOTHICI_1.TTF") ;
// }
// @font-face{
// font-family: 'MMTextBook';
// src: url("../../assets/default/font/MMTextBook/MMTextBook.otf") ;
// }
// @font-face{
// font-family: 'MMTextBook-Bold';
// src: url("../../assets/default/font/MMTextBook/MMTextBook-Bold.otf") ;
// }
// @font-face{
// font-family: 'MMTextBook-BoldItalic';
// src: url("../../assets/default/font/MMTextBook/MMTextBook-BoldItalic.otf") ;
// }
// @font-face{
// font-family: 'MMTextBook-Italic';
// src: url("../../assets/default/font/MMTextBook/MMTextBook-Italic.otf") ;
// }
@font-face{
font-family: 'GOTHIC_1';
src: url("../../assets/default/font/CenturyGothic/GOTHIC_1.TTF") ;
}
@font-face{
font-family: 'GOTHICB_1';
src: url("../../assets/default/font/CenturyGothic/GOTHICB_1.TTF") ;
}
@font-face{
font-family: 'GOTHICBI_1';
src: url("../../assets/default/font/CenturyGothic/GOTHICBI_1.TTF") ;
}
@font-face{
font-family: 'GOTHICI_1';
src: url("../../assets/default/font/CenturyGothic/GOTHICI_1.TTF") ;
}
@font-face{ @font-face{
font-family: 'MMTextBook'; font-family: 'BRLNSDB_1';
src: url("../../assets/default/font/MMTextBook/MMTextBook.otf") ; src: url("../../assets/play/font/BRLNSDB_1.ttf") ;
}
@font-face{
font-family: 'MMTextBook-Bold';
src: url("../../assets/default/font/MMTextBook/MMTextBook-Bold.otf") ;
} }
@font-face{ @font-face{
font-family: 'MMTextBook-BoldItalic'; font-family: 'DFChu-W4-WIN-BF';
src: url("../../assets/default/font/MMTextBook/MMTextBook-BoldItalic.otf") ; src: url("../../assets/play/font/DFChu-W4-WIN-BF.ttf") ;
} }
@font-face{ @font-face{
font-family: 'MMTextBook-Italic'; font-family: 'FuturaStd-Medium';
src: url("../../assets/default/font/MMTextBook/MMTextBook-Italic.otf") ; src: url("../../assets/play/font/FuturaStd-Medium.otf") ;
} }
@font-face{ @font-face{
font-family: 'DFChu-W4-WIN-BF'; font-family: 'GOTHICB_1';
src: url("../../assets/play/font/DFChu-W4-WIN-BF.ttf") ; src: url("../../assets/play/font/GOTHICB_1.ttf") ;
} }
...@@ -42,6 +42,7 @@ import { debounceTime, map, takeWhile, retry } from "rxjs/operators"; ...@@ -42,6 +42,7 @@ import { debounceTime, map, takeWhile, retry } from "rxjs/operators";
import * as _ from "lodash"; import * as _ from "lodash";
import TWEEN from "@tweenjs/tween.js"; import TWEEN from "@tweenjs/tween.js";
import { demoData as defaultData } from '../../assets/play/data/data.js' import { demoData as defaultData } from '../../assets/play/data/data.js'
import { v4 as uuidv4 } from 'uuid';
const zIndexMap = { const zIndexMap = {
mainBackground: 0, mainBackground: 0,
...@@ -129,7 +130,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -129,7 +130,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------ 游戏逻辑数据 ------------ // ------------ 游戏逻辑数据 ------------
m_currentQuestionIndex: number = -1;
// ------------------------------------ // ------------------------------------
...@@ -172,7 +173,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -172,7 +173,10 @@ export class PlayComponent implements OnInit, OnDestroy {
// 映射预加载音频[网路]资源 返回包含音频路径的数组 // 映射预加载音频[网路]资源 返回包含音频路径的数组
mapToAduioArray(contentObj){ mapToAduioArray(contentObj){
let array = [] let array = []
contentObj.dataArray.forEach(element => {
array.push(element.audio_url_answer);
array.push(element.audio_url_question);
});
return array return array
} }
...@@ -196,6 +200,8 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -196,6 +200,8 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initSlider(); this.initSlider();
this.initButtions(); this.initButtions();
this.initTopMaskLine(); this.initTopMaskLine();
this.nextQuestion()
} }
cleanGameVar(){ cleanGameVar(){
...@@ -224,7 +230,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -224,7 +230,7 @@ export class PlayComponent implements OnInit, OnDestroy {
} }
}) })
element.ref.x = this.g_partTitle_x - 20 * this.g_mapScale + (57*this.g_mapScale)/2; element.ref.x = this.g_partTitle_x - 20 * this.g_mapScale + (57*this.g_mapScale)/2;
let text = this.g_cartoon.createLabel(this.g_formData.title.NO?this.g_formData.title.NO:"C", "BerlinSansFBDemi-Bold", "#FFFFFF", 48) let text = this.g_cartoon.createLabel(this.g_formData.title.NO?this.g_formData.title.NO:"C", "BRLNSDB_1", "#FFFFFF", 48)
element.ref.addChild(text) element.ref.addChild(text)
let partBG = this.g_cartoon.createCartoonElementImageFunc("part-title-background", "part_number_bg", (w, h)=>{ let partBG = this.g_cartoon.createCartoonElementImageFunc("part-title-background", "part_number_bg", (w, h)=>{
...@@ -245,14 +251,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -245,14 +251,14 @@ export class PlayComponent implements OnInit, OnDestroy {
initTitle_Main(){ initTitle_Main(){
let labelWidth = 0 let labelWidth = 0
let text = this.g_cartoon.createCartoonElementLabelFunc("main-title", this.g_formData.title.mainText, "tt0142m", "#000000", 36, (w, h)=>{ let text = this.g_cartoon.createCartoonElementLabelFunc("main-title", this.g_formData.title.mainText, "FuturaStd-Medium", "#000000", 36, (w, h)=>{
labelWidth = w/2 labelWidth = w/2
return { return {
x: this.g_partTitle_x - 20 * this.g_mapScale + labelWidth * this.g_mapScale, x: this.g_partTitle_x - 20 * this.g_mapScale + labelWidth * this.g_mapScale,
y: 5*this.g_mapScale + (65*this.g_mapScale) / 2 y: 5*this.g_mapScale + (65*this.g_mapScale) / 2
} }
}) })
// text.ref.fontWeight = 900 text.ref.fontWeight = 900
text.ref.setScaleXY(this.g_mapScale) text.ref.setScaleXY(this.g_mapScale)
let background = this.g_cartoon.createCartoonElementImageFunc("main-title-background", "bg_50_20", (w, h)=>{ let background = this.g_cartoon.createCartoonElementImageFunc("main-title-background", "bg_50_20", (w, h)=>{
...@@ -479,7 +485,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -479,7 +485,7 @@ export class PlayComponent implements OnInit, OnDestroy {
pannel.lastInserType = "Q" pannel.lastInserType = "Q"
pannel.windowHeight = this.g_canvasHeight - 78 * this.g_mapScale pannel.windowHeight = this.g_canvasHeight - 78 * this.g_mapScale
pannel.currentY = 32; pannel.currentY = 32;
pannel.currentQuestionIndex = 0; pannel.currentQuestionIndex = -1;
pannel.insertQuestion = (text, nextQuestion = false) => { pannel.insertQuestion = (text, nextQuestion = false) => {
if(nextQuestion) { if(nextQuestion) {
pannel.currentQuestionIndex++; pannel.currentQuestionIndex++;
...@@ -487,7 +493,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -487,7 +493,7 @@ export class PlayComponent implements OnInit, OnDestroy {
let textString = "" let textString = ""
let startX = 42 * this.g_mapScale; let startX = 42 * this.g_mapScale;
if(nextQuestion) { if(nextQuestion) {
textString = `${pannel.currentQuestionIndex}. ${text}`; textString = `${pannel.currentQuestionIndex+1}. ${text}`;
} else { } else {
textString = text; textString = text;
pannel.currentY -= 52 * this.g_mapScale; pannel.currentY -= 52 * this.g_mapScale;
...@@ -514,8 +520,9 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -514,8 +520,9 @@ export class PlayComponent implements OnInit, OnDestroy {
let bb = label.ref.getBoundingBox(); let bb = label.ref.getBoundingBox();
label.ref.x = 42 * this.g_mapScale * 2 + bb.width / 2; label.ref.x = 42 * this.g_mapScale * 2 + bb.width / 2;
if(pannel.lastInserType == "Q") { if(pannel.lastInserType == "Q") {
pannel.currentY -= 32 * this.g_mapScale pannel.currentY -= 38 * this.g_mapScale
line.mask.ref.y -= 32 * this.g_mapScale; line.mask.ref.y -= 38 * this.g_mapScale;
line.target.ref.y -= 38 * this.g_mapScale;
} }
label.ref.y = pannel.currentY + 32 * this.g_mapScale / 2; label.ref.y = pannel.currentY + 32 * this.g_mapScale / 2;
...@@ -545,6 +552,20 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -545,6 +552,20 @@ export class PlayComponent implements OnInit, OnDestroy {
y: this.g_canvasHeight / 2 - 150 * this.g_mapScale, y: this.g_canvasHeight / 2 - 150 * this.g_mapScale,
} }
}) })
btnQuestion.show = (callback) => {
btnQuestion.ref.scaleX = 0;
btnQuestion.ref.scaleY = 0;
tweenChange(btnQuestion.ref, {scaleX: btnQuestion.initScaleX, scaleY: btnQuestion.initScaleY}, 0.2, ()=>{
callback && callback()
})
}
btnQuestion.hide = (callback) => {
btnQuestion.ref.scaleX = btnQuestion.initScaleX;
btnQuestion.ref.scaleY = btnQuestion.initScaleY;
tweenChange(btnQuestion.ref, {scaleX: 0, scaleY: 0}, 0.2, ()=>{
callback && callback()
})
}
let btnAnswer = this.g_cartoon.createCartoonElementImageFunc("button-answer", "btn_answer", (w, h)=>{ let btnAnswer = this.g_cartoon.createCartoonElementImageFunc("button-answer", "btn_answer", (w, h)=>{
return { return {
...@@ -554,29 +575,57 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -554,29 +575,57 @@ export class PlayComponent implements OnInit, OnDestroy {
}, (w, h)=>{ }, (w, h)=>{
return { return {
x: this.g_canvasWidth - 50 * this.g_mapScale, x: this.g_canvasWidth - 50 * this.g_mapScale,
y: this.g_canvasHeight / 2 - 50 * this.g_mapScale, y: this.g_canvasHeight / 2 - 150 * this.g_mapScale,
}
})
btnAnswer.ref.scaleX = 0;
btnAnswer.ref.scaleY = 0;
btnAnswer.show = (callback) => {
btnAnswer.ref.scaleX = 0;
btnAnswer.ref.scaleY = 0;
tweenChange(btnAnswer.ref, {scaleX: btnAnswer.initScaleX, scaleY: btnAnswer.initScaleY}, 0.2, ()=>{
callback && callback()
})
} }
btnAnswer.hide = (callback) => {
btnAnswer.ref.scaleX = btnAnswer.initScaleX;
btnAnswer.ref.scaleY = btnAnswer.initScaleY;
tweenChange(btnAnswer.ref, {scaleX: 0, scaleY: 0}, 0.2, ()=>{
callback && callback()
}) })
}
const scrollPannel = this.g_cartoon.getCartoonElement("scroll-pannel") const scrollPannel = this.g_cartoon.getCartoonElement("scroll-pannel")
this.subscribeMapDownEvent(btnQuestion.id, ()=>{ this.subscribeMapDownEvent(btnQuestion.id, ()=>{
let text = "Where is Mandy and Carl’s backyard?Where is Mandy and Carl’s backyard?Where is Mandy and Carl’s backyard?" let text = this.g_formData.dataArray[this.m_currentQuestionIndex].questionText?this.g_formData.dataArray[this.m_currentQuestionIndex].questionText:""
let textArray = this.stringToArray(text, 56) let textArray = text.split(/\n/)
let lastIndex = textArray.length let lastIndex = textArray.length;
jelly(btnQuestion.ref)
textArray.forEach((item, index) => { textArray.forEach((item, index) => {
console.log(item.id)
if(index==0) { if(index==0) {
setTimeout(() => { setTimeout(() => {
scrollPannel.insertQuestion(item, true) scrollPannel.insertQuestion(item, true)
if(index == lastIndex-1) { if(index == lastIndex-1) {
setTimeout(() => {
btnQuestion.hide(()=>{
btnAnswer.show(()=>{
this.g_enableMapDown = true; this.g_enableMapDown = true;
})
})
}, 1000);
} }
}, 0); }, 0);
} else { } else {
setTimeout(() => { setTimeout(() => {
scrollPannel.insertQuestion(item, false); scrollPannel.insertQuestion(item, false);
if(index == lastIndex-1) { if(index == lastIndex-1) {
setTimeout(() => {
btnQuestion.hide(()=>{
btnAnswer.show(()=>{
this.g_enableMapDown = true; this.g_enableMapDown = true;
})
})
}, 1000);
} }
}, 900*index); }, 900*index);
} }
...@@ -584,15 +633,25 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -584,15 +633,25 @@ export class PlayComponent implements OnInit, OnDestroy {
}) })
this.subscribeMapDownEvent(btnAnswer.id, ()=>{ this.subscribeMapDownEvent(btnAnswer.id, ()=>{
let text = "It is behind there house.It is behind there house.It is behind there house.It is behind there house.It is behind there house.It is behind there house.It is behind there house." let text = this.g_formData.dataArray[this.m_currentQuestionIndex].answerText?this.g_formData.dataArray[this.m_currentQuestionIndex].answerText:""
let textArray = this.stringToArray(text, 56) let textArray = text.split(/\n/)
let lastIndex = textArray.length let lastIndex = textArray.length;
jelly(btnAnswer.ref);
textArray.forEach((item, index) => { textArray.forEach((item, index) => {
console.log(item.id)
setTimeout(() => { setTimeout(() => {
scrollPannel.insertAnswer(item); scrollPannel.insertAnswer(item);
if(index == lastIndex-1) { if(index == lastIndex-1) {
setTimeout(() => {
btnAnswer.hide(()=>{
this.nextQuestion((status)=>{
if(status) {
btnQuestion.show(()=>{
this.g_enableMapDown = true; this.g_enableMapDown = true;
})
}
})
})
}, 1000);
} }
}, 900*index); }, 900*index);
}) })
...@@ -613,16 +672,34 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -613,16 +672,34 @@ export class PlayComponent implements OnInit, OnDestroy {
line.label.ref.x = startX + bb.width / 2; line.label.ref.x = startX + bb.width / 2;
line.label.ref.y = startY + 64 * this.g_mapScale / 2; line.label.ref.y = startY + 64 * this.g_mapScale / 2;
let mask = this.g_cartoon.createCartoonElementShapeRect(`lebel-question-${index}-mask`, this.g_canvasWidth, 64 * this.g_mapScale, "#f0f5f8") // f0f5f8 let mask = this.g_cartoon.createCartoonElementShapeRect(`lebel-question-${index}-mask`, this.g_canvasWidth, 64 * this.g_mapScale, "#f0f5f8") // f0f5f8
mask.ref.x = startX mask.ref.x = startX
mask.ref.y = startY mask.ref.y = startY
let target = this.g_cartoon.createCartoonElementShapeRect(`lebel-question-${index}-target-${uuidv4()}`, this.g_canvasWidth - 200 * this.g_mapScale, 64 * this.g_mapScale, "#FFFFFF")
target.ref.x = startX
target.ref.y = startY
target.ref.alpha = 0;
this.subscribeMapDownEvent(target.id, ()=>{
target.audio_url = this.g_formData.dataArray[index].audio_url_question?this.g_formData.dataArray[index].audio_url_question:""
if(target.audio_url) {
this.g_cartoon.playAudio(target.audio_url, false, ()=>{
this.g_enableMapDown = true;
})
} else {
this.g_enableMapDown = true;
}
})
line.show = () => { line.show = () => {
tweenChange(mask.ref, {x: this.g_canvasWidth}, 1) tweenChange(mask.ref, {x: this.g_canvasWidth}, 1)
} }
parent.addChild(line.label.ref); parent.addChild(line.label.ref);
parent.addChild(mask.ref); parent.addChild(mask.ref);
parent.addChild(target.ref);
return line return line
} }
...@@ -630,55 +707,64 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -630,55 +707,64 @@ export class PlayComponent implements OnInit, OnDestroy {
let line = { let line = {
label: null, label: null,
mask: null, mask: null,
target: null,
show: null show: null
} }
line.label = this.g_cartoon.createCartoonElementLabel(`lebel-answer-${index}`, text, "DFChu-W4-WIN-BF", "#d60d00", 42 * this.g_mapScale); line.label = this.g_cartoon.createCartoonElementLabel(`lebel-answer-${index}-${uuidv4()}`, text, "DFChu-W4-WIN-BF", "#d60d00", 42 * this.g_mapScale);
let bb = line.label.ref.getBoundingBox() let bb = line.label.ref.getBoundingBox()
line.label.ref.x = startX + bb.width / 2; line.label.ref.x = startX + bb.width / 2;
line.label.ref.y = startY + 64 * this.g_mapScale / 2; line.label.ref.y = startY + 64 * this.g_mapScale / 2;
let mask = this.g_cartoon.createCartoonElementShapeRect(`lebel-answer-${index}-mask`, this.g_canvasWidth, 64 * this.g_mapScale, "#f0f5f8") // f0f5f8 let mask = this.g_cartoon.createCartoonElementShapeRect(`lebel-answer-${index}-mask`, this.g_canvasWidth, 48 * this.g_mapScale, "#f0f5f8") // f0f5f8
mask.ref.x = startX mask.ref.x = startX
mask.ref.y = startY mask.ref.y = startY
line.mask = mask; line.mask = mask;
let target = this.g_cartoon.createCartoonElementShapeRect(`lebel-answer-${index}-target-${uuidv4()}`, this.g_canvasWidth - 200 * this.g_mapScale, 64 * this.g_mapScale, "#FFFFFF")
target.ref.x = startX
target.ref.y = startY;
target.ref.alpha = 0;
line.target = target;
this.subscribeMapDownEvent(target.id, ()=>{
target.audio_url = this.g_formData.dataArray[index].audio_url_answer?this.g_formData.dataArray[index].audio_url_answer:"";
if(target.audio_url) {
this.g_cartoon.playAudio(target.audio_url, false, ()=>{
this.g_enableMapDown = true;
})
} else {
this.g_enableMapDown = true;
}
})
line.show = () => { line.show = () => {
tweenChange(mask.ref, {x: this.g_canvasWidth}, 1) tweenChange(mask.ref, {x: this.g_canvasWidth}, 1)
} }
parent.addChild(line.label.ref); parent.addChild(line.label.ref);
parent.addChild(mask.ref); parent.addChild(mask.ref);
parent.addChild(target.ref);
return line return line
} }
stringToArray(text, maxLen) { nextQuestion(callback?) {
const cutString = (str, len) => { this.m_currentQuestionIndex++;
let arr = str.split("") if(this.m_currentQuestionIndex >= this.g_formData.dataArray.length) {
let a = arr.splice(0, len) callback && callback(false)
return { } else {
a: a.join(""), callback && callback(true)
b: arr.join("")
}
}
let s = text
let textArray = []
do {
let cut = cutString(s, maxLen)
s = cut.b
textArray.push(cut.a)
} while(maxLen < s.length)
if(s.length != 0) {
textArray.push(s)
} }
return textArray
} }
createTestLabel() { createTestLabel() {
let testLabel = this.g_cartoon.createCartoonElementLabel(`test-label`, "TEST_YOU_CANT_SEE_THIS", "DFChu-W4-WIN-BF", "#d60d00", 42 * this.g_mapScale); let testLabel_1 = this.g_cartoon.createCartoonElementLabel(`test-label-1`, "TEST_YOU_CANT_SEE_THIS", "BRLNSDB_1", "#000000", 42 * this.g_mapScale);
this.render(testLabel.ref) let testLabel_2 = this.g_cartoon.createCartoonElementLabel(`test-label-2`, "TEST_YOU_CANT_SEE_THIS", "DFChu-W4-WIN-BF", "#000000", 42 * this.g_mapScale);
let testLabel_3 = this.g_cartoon.createCartoonElementLabel(`test-label-3`, "TEST_YOU_CANT_SEE_THIS", "FuturaStd-Medium", "#000000", 42 * this.g_mapScale);
let testLabel_4 = this.g_cartoon.createCartoonElementLabel(`test-label-4`, "TEST_YOU_CANT_SEE_THIS", "GOTHICB_1", "#000000", 42 * this.g_mapScale);
this.render(testLabel_1.ref)
this.render(testLabel_2.ref)
this.render(testLabel_3.ref)
this.render(testLabel_4.ref)
} }
......
...@@ -41,6 +41,7 @@ const localImages = { ...@@ -41,6 +41,7 @@ const localImages = {
'slider_body': 'assets/play/slider_body.png', 'slider_body': 'assets/play/slider_body.png',
'slider_bottom': 'assets/play/slider_bottom.png', 'slider_bottom': 'assets/play/slider_bottom.png',
'part_number_bg': 'assets/play/part_number_bg.png', 'part_number_bg': 'assets/play/part_number_bg.png',
'bg_title_part': 'assets/play/bg_title_part.png',
}; };
......
export const defaultData = { export const defaultData = {
version: "1.0", version: "1.0",
dataKey: "DataKey_YM5-9", dataKey: "DataKey_YM5-9",
title: { title: {
NO: "C", NO: "",
mainText: "Listen, circle and write.", mainText: "",
mainTextAudio_url: "", mainTextAudio_url: "",
}, },
dataArray: [], dataArray: [],
long_audio: {
audio_url: "",
}
}; };
export const demoData = { export const demoData = {
version: "1.0", version: "1.0",
dataKey: "DataKey_YM5-9", dataKey: "DataKey_YM5-9",
title: { title: { NO: "C", mainText: "Read and point", mainTextAudio_url: "" },
NO: "C",
mainText: "Listen, circle and write.",
mainTextAudio_url: "",
},
dataArray: [ dataArray: [
{ {
image_url: "demo_card_image_2", questionText: "Where is Mandy and Carl's backyard?",
image_url_back: "demo_popup_B", audio_url_question: "",
image_url_left: "demo_0001", answerText: "It is behind there house.",
image_url_right: "demo_0002", },
audio_url_left: "", {
audio_url_right: "", questionText: "Where is Mandy and Carl's backyard?",
text_left: "ch", audio_url_question: "",
text_right: "ph", answerText: "It is behind there house. There is a birdbath and\na windmill next to pond.",
audio_url_answer: "",
},
{
questionText: "Where is Mandy and Carl's backyard?",
audio_url_question: "",
answerText: "It is behind there house.",
audio_url_answer: "",
},
{
questionText: "Where is Mandy and Carl's backyard?",
audio_url_question: "",
answerText: "It is behind there house.",
audio_url_answer: "",
},
{
questionText: "Where is Mandy and Carl's backyard?",
audio_url_question: "",
answerText: "It is behind there house. You can see fireflies at \nnight.",
audio_url_answer: "",
}, },
], ]
long_audio: {
audio_url: "",
}
}; };
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