Commit bd59ce3a authored by 李维's avatar 李维

dev commit

parent 5557a5b8
......@@ -40,7 +40,7 @@
<span>卡片类型</span><span> :</span>
</div>
<div style="float: left; width: 300px;">
<nz-radio-group [(ngModel)]="contentObj.answerType" (ngModelChange)="saveItem()" >
<nz-radio-group [(ngModel)]="contentObj.answerType" (ngModelChange)="handleAnswerTypeChange()" >
<label nz-radio [nzValue]="'Text'">文字</label>
<label nz-radio [nzDisabled]="contentObj.question.type != 'LongAudio'" [nzValue]="'Image'">图片</label>
</nz-radio-group>
......@@ -71,12 +71,6 @@
<div *ngFor="let item of contentObj.dataArray; let i = index" class="card-item" style="padding: 0.5vw; " >
<div class="card-item-content border">
<div class="card-item-content">
......@@ -86,24 +80,26 @@
<div class="section" >
<div class="section-content">
<div *ngIf="contentObj.answerType=='Text'" style="flex:1">
<div [ngSwitch]="contentObj.answerType">
<div *ngSwitchCase="Text" style="flex:1">
<div style="display: flex; margin-bottom: 10px;">
<div style="flex:1">
文字
</div>
<div style="flex:5">
<input type="text" nz-input placeholder="" [(ngModel)]="item.text" (blur)="saveItem()" style="width: 250px;" />
<!-- <input type="text" nz-input placeholder="" [(ngModel)]="contentObj.dataArray[i]" (blur)="saveItem()" style="width: 250px;" /> -->
<input type="text" nz-input placeholder="" [(ngModel)]="contentObj.dataArray[i]" (blur)="handleTextChange($event, i)" style="width: 250px;" />
</div>
</div>
</div>
<div *ngIf="contentObj.answerType=='Image'" style="flex:1" >
<div *ngSwitchCase="Image" style="flex:1">
<div style="display: flex; ">
<div style="flex:1">
图片
</div>
<div style="flex:5">
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item.image_url" (imageUploaded)="onImageUploadSuccessByItem($event, contentObj.dataArray, i)"></app-upload-image-with-preview>
<app-upload-image-with-preview style="width: 100%;" [picUrl]="item" (imageUploaded)="onImageUploadSuccessByItem($event, contentObj.dataArray, i)"></app-upload-image-with-preview>
</div>
</div>
</div>
</div>
......
......@@ -13,6 +13,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
_item: any;
KEY = 'DataKey_PU01';
checkOptionsOne = []
Text = "Text"
Image = "Image"
set item(item) {
this._item = item;
......@@ -24,7 +28,11 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
"version": "1.0",
key: "DataKey_PU01",
question: {
type: "Image"
type: "Image",
text: "",
image_url: "",
shortAudio_url: "",
longAudio_url: ""
},
answerType: "Text",
dataArray: []
......@@ -45,14 +53,28 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
handleQuestionTypeChange(){
if(this.contentObj.question.type != 'LongAudio'){
if(this.contentObj.answerType != "Text"){
this.contentObj.answerType='Text'
let len = this.contentObj.dataArray.length
this.contentObj.dataArray = Array(len).fill("")
}
}
this.saveItem()
}
handleAnswerTypeChange(){
// console.log("Change")
let len = this.contentObj.dataArray.length
this.contentObj.dataArray = Array(len).fill("")
this.saveItem()
}
handleTextChange(e, index){
// console.log(e.target.value, index)
this.contentObj.dataArray[index] = e.target.value
this.saveItem()
this.refresh();
}
......@@ -132,12 +154,13 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
addItem(item?, type?) {
item.push({ text: "", image_url: "" })
item.push("")
this.saveItem();
}
onImageUploadSuccessByItem(e, item, key) {
item[key] = e.url
this.contentObj.dataArray[key] = e.url
this,this.refresh()
this.save();
}
......
......@@ -166,7 +166,7 @@ export class PlayComponent implements OnInit, OnDestroy {
mapToImageArray(contentObj){
let array = []
this.g_formData.dataArray.forEach(element => {
array.push(element.image_url)
array.push(element)
});
if(this.g_formData.question.image_url){
array.push(this.g_formData.question.image_url)
......@@ -216,10 +216,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this.disableMoveAsstant();
}
}
this.m_currentSelectedCardID = null
this.m_currentSelectedCardID = null;
this.m_enableCardMove = false;
this.m_answerCard_All = []
this.m_questionCard_All = []
this.m_answerCard_All = [];
this.m_questionCard_All = [];
this.m_startGame = true;
}
......@@ -243,21 +243,43 @@ export class PlayComponent implements OnInit, OnDestroy {
}
initBackground(){
let element = this.g_cartoon.createCartoonElementImageFunc("background-main", "bg_bg", (w, h)=>{
let element = this.g_cartoon.createCartoonElementImageFunc("background-main", "bg_face", (w, h)=>{
// let sx = this.g_canvasWidth / w
// let sy = this.g_canvasHeight / h
// let s = Math.min(sx, sy)
// return {
// sx: s,
// sy: s
// }
let sx = this.g_canvasWidth / w
let sy = this.g_canvasHeight / h
let s = Math.min(sx, sy)
return {
sx: s,
sy: s
sx: 1434 * this.g_mapScale / w,
sy: 1028 * this.g_mapScale / h
}
}, (w, h)=>{
return {
x: this.g_canvasWidth / 2,
y: this.g_canvasHeight / 2
x: this.g_canvasWidth / 2 + 2 * this.g_mapScale,
y: this.g_canvasHeight / 2 - 56 * this.g_mapScale
}
})
let xia = this.g_cartoon.createCartoonElementImage("background-main-xia", "bg_bottom", 1280 * element.ref.scaleX, 142 * element.ref.scaleY, this.g_canvasWidth / 2, this.g_cartoon.getOrigin().y + (720 - 71) * this.g_mapScale)
xia.ref.alpha = 0
element.koushui = (callback?)=>{
element.starAni = this.g_cartoon.createAnimation("icon_kou", 4, 200, ()=>{
element.starAni.visible = false;
this.deleteElementInRender(element.starAni.id)
callback && callback()
})
element.starAni.setScaleXY(this.g_mapScale)
element.starAni.x = element.ref.x + 300 * this.g_mapScale
element.starAni.y = element.ref.y + 397 * this.g_mapScale
this.render(element.starAni, zIndexMap.animation)
element.starAni.play()
}
this.subscribeMapUpEvent("background-color", ()=>{
let slider = this.g_cartoon.getCartoonElement("audio-plyer-slider")
......@@ -454,16 +476,16 @@ export class PlayComponent implements OnInit, OnDestroy {
// 问题卡片 图片
initQuestionCard_Image(){
this.m_questionCard_All.push(this.createQuestionCardImage(0, {}))
this.m_questionCard_All.push(this.createQuestionCardImage(1, {}))
this.m_questionCard_All.push(this.createQuestionCardImage(2, {}))
this.m_questionCard_All.push(this.createQuestionCardImage(3, {}))
this.g_formData.dataArray.forEach((item, index)=>{
this.m_questionCard_All.push(this.createQuestionCardImage(index, item))
})
this.m_questionCard_All = this.randomArray_shuffle(this.m_questionCard_All)
this.alignCenter(this.m_questionCard_All, 20*this.g_mapScale, true)
}
createQuestionCardImage(index, data){
let element = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-"+index, "lego-building", (w, h)=>{
data = data?data:"bg_change3"
let element = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-"+index, data, (w, h)=>{
let s = (155 * this.g_mapScale) / h
return{
sx: s,
......@@ -478,89 +500,91 @@ export class PlayComponent implements OnInit, OnDestroy {
let imageBD = element.ref.getBoundingBox()
element.index = index;
// 边框
let border = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-"+index, "image_center", (w, h)=>{
// 高亮边框
let border_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-"+index, "border_center", (w, h)=>{
return{
sx: (imageBD.width / element.ref.scaleX) / w,
sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h
sy: ((imageBD.height + 30 * this.g_mapScale) / element.ref.scaleY) / h
}
}, (w, h)=>{
return{
x: 0,
y: 13
y: 8
}
})
element.ref.addChild(border.ref)
element.ref.addChild(border_H.ref)
let borderLeft = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-left-"+index, "image_border_left", (w, h)=>{
let borderLeft_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-left-"+index, "border_left", (w, h)=>{
return{
sx: (22 / element.ref.scaleX) / w,
sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h
sy: ((imageBD.height + 30 * this.g_mapScale) / element.ref.scaleY) / h
}
}, (w, h)=>{
return{
x: -(imageBD.width / element.ref.scaleX) / 2 - 5,
y: 13
x: -(imageBD.width / element.ref.scaleX) / 2 - 10,
y: 8
}
})
element.ref.addChild(borderLeft.ref)
element.ref.addChild(borderLeft_H.ref)
let borderRight = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-right-"+index, "image_border_right", (w, h)=>{
let borderRight_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-right-"+index, "border_right", (w, h)=>{
return{
sx: (22 / element.ref.scaleX) / w,
sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h
sy: ((imageBD.height + 30 * this.g_mapScale) / element.ref.scaleY) / h
}
}, (w, h)=>{
return{
x: (imageBD.width / element.ref.scaleX) / 2 + 5,
y: 13
x: (imageBD.width / element.ref.scaleX) / 2 + 10,
y: 8
}
})
element.ref.addChild(borderRight.ref)
element.ref.addChild(borderRight_H.ref)
// 高亮边框
let border_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-"+index, "border_center", (w, h)=>{
border_H.ref.visible = false;
borderRight_H.ref.visible = false;
borderLeft_H.ref.visible = false;
// 边框
let border = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-"+index, "image_center", (w, h)=>{
return{
sx: (imageBD.width / element.ref.scaleX) / w,
sy: ((imageBD.height + 38 * this.g_mapScale) / element.ref.scaleY) / h
sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h
}
}, (w, h)=>{
return{
x: 0,
y: 0
y: 13
}
})
element.ref.addChild(border_H.ref)
element.ref.addChild(border.ref)
let borderLeft_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-left-"+index, "border_left", (w, h)=>{
let borderLeft = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-left-"+index, "image_border_left", (w, h)=>{
return{
sx: (22 / element.ref.scaleX) / w,
sy: ((imageBD.height + 38 * this.g_mapScale) / element.ref.scaleY) / h
sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h
}
}, (w, h)=>{
return{
x: -(imageBD.width / element.ref.scaleX) / 2 - 20,
y: 3
x: -(imageBD.width / element.ref.scaleX) / 2 - 5,
y: 13
}
})
element.ref.addChild(borderLeft_H.ref)
element.ref.addChild(borderLeft.ref)
let borderRight_H = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-h-right-"+index, "border_right", (w, h)=>{
let borderRight = this.g_cartoon.createCartoonElementImageFunc("questioncard-image-border-right-"+index, "image_border_right", (w, h)=>{
return{
sx: (22 / element.ref.scaleX) / w,
sy: ((imageBD.height + 38 * this.g_mapScale) / element.ref.scaleY) / h
sy: ((imageBD.height + 26 * this.g_mapScale) / element.ref.scaleY) / h
}
}, (w, h)=>{
return{
x: (imageBD.width / element.ref.scaleX) / 2 + 20,
y: 3
x: (imageBD.width / element.ref.scaleX) / 2 + 5,
y: 13
}
})
element.ref.addChild(borderRight_H.ref)
element.ref.addChild(borderRight.ref)
border_H.ref.visible = false;
borderRight_H.ref.visible = false;
borderLeft_H.ref.visible = false;
element.startPos = { x:element.initX, y:element.initY }
element.backTo = (pos?, callback?)=>{
......@@ -709,6 +733,7 @@ export class PlayComponent implements OnInit, OnDestroy {
selectedCard.release()
this.disableMoveAsstant();
element.shake();
this.g_cartoon.getCartoonElement("background-main").koushui()
this.g_cartoon.stopAudio("cuowu")
this.g_cartoon.playAudio("cuowu")
}
......@@ -777,7 +802,7 @@ export class PlayComponent implements OnInit, OnDestroy {
selectedCard.release({x:element.ref.x, y:element.ref.y - 6 * this.g_mapScale}, ()=>{
let spacing = 0
if(this.g_formData.answerType=="Image"){
spacing = 20*this.g_mapScale
spacing = 30*this.g_mapScale
}else{
spacing = 20*this.g_mapScale
}
......@@ -805,7 +830,8 @@ export class PlayComponent implements OnInit, OnDestroy {
}else{
selectedCard.release()
this.disableMoveAsstant();
element.shake()
element.shake();
this.g_cartoon.getCartoonElement("background-main").koushui();
this.g_cartoon.stopAudio("cuowu")
this.g_cartoon.playAudio("cuowu")
}
......@@ -1010,6 +1036,16 @@ export class PlayComponent implements OnInit, OnDestroy {
}
})
if(this.g_formData.question.type == "Text"){
let text = this.g_cartoon.createLabel(this.g_formData.question.text, "MMTextBook-Bold", "#fdd943", 50)
text.maxSingalLineWidth = 720
text.textAlign = "left"
text.refreshSize()
text.x = -330
text.y = -431 / 2
element.ref.addChild(text)
}else{
let image = this.g_cartoon.createImage(this.g_formData.question.image_url, (w, h)=>{
let sx = 590 / w
let sy = 360 / h
......@@ -1025,13 +1061,14 @@ export class PlayComponent implements OnInit, OnDestroy {
}
})
element.ref.addChild(image)
}
this.render(element.ref, zIndexMap.imageContainer)
}
}
initAudioPlayer(){
if( (this.g_formData.question.type == "LongAudio" && this.g_formData.question.longAudio_url != "" ) || this.g_formData.question.shortAudio_url != ""){
if( (this.g_formData.question.type == "LongAudio" && this.g_formData.question.longAudio_url ) || this.g_formData.question.shortAudio_url){
let audioType = "L"
let element = this.g_cartoon.createCartoonElementImageFunc("bg-short-audio", "bg_laba", (w, h)=>{
return{
......
......@@ -31,6 +31,7 @@ const localImages = {
'bg_bottom': 'assets/play/bg_bottom.png',
'bg_change': 'assets/play/bg_change_1.png',
'bg_change2': 'assets/play/bg_change2-1.png',
'bg_change3': 'assets/play/bg_change2-2.png',
'bg_kuang1': 'assets/play/bg_kuang1.png',
'bg_kuang2': 'assets/play/bg_kuang2.png',
'bg_laba': 'assets/play/bg_laba.png',
......@@ -60,6 +61,9 @@ const localImages = {
'border_right': 'assets/play/border_right.png',
'border_center': 'assets/play/border_center.png',
'lego-building': 'assets/play/lego-building.jpg',
'bg_face': 'assets/play/bg_face.png',
'btn_laba (1)': 'assets/play/frame/btn_laba (1).png',
'btn_laba (2)': 'assets/play/frame/btn_laba (2).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