Commit d32cc0b4 authored by 李维's avatar 李维

dev commit

parent dd991b1e
...@@ -5,7 +5,24 @@ ...@@ -5,7 +5,24 @@
<div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;"> <div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<div style="float: left;"> <div style="float: left;">
<h3>音频素材</h3> <h3>音频素材</h3>
<app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.audio_url" (audioUploaded)="onAudioUploadSuccess($event, bgItem, null)" > </app-audio-recorder> <app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.audio_url" (audioUploaded)="onAudioUploadSuccess($event, bgItem, 'audio_url')" > </app-audio-recorder>
</div>
</div>
</div>
<div nzAlign="middle">
<div class="img-box clearfix" style="border-bottom: 1px solid #DDD; padding-bottom: 10px;">
<div style="position: relative; margin-bottom: 5px;">
<h3>题号</h3>
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.NO" (blur)="autoSave()" />
</div>
<div style="position: relative; margin-bottom: 5px;">
<h3>课件标题</h3>
<input type="text" nz-input placeholder="" [(ngModel)]="bgItem.mainText" (blur)="autoSave()" />
</div>
<div style="position: relative; margin-bottom: 5px;">
<h3>标题发音</h3>
<app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.mainTitleAudio" (audioUploaded)="onUploadSuccessByItem($event, bgItem.title,'mainTitleAudio', 'audio')" > </app-audio-recorder>
</div> </div>
</div> </div>
</div> </div>
......
...@@ -161,9 +161,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges { ...@@ -161,9 +161,9 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
onAudioUploadSuccess(e, item, key) { onAudioUploadSuccess(e, item, key) {
if(key) { if(key) {
item.audio_url = e.url;
} else {
item[key] = e.url; item[key] = e.url;
} else {
item.audio_url = e.url;
} }
this.autoSave() this.autoSave()
......
...@@ -129,7 +129,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -129,7 +129,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------ 游戏逻辑数据 ------------ // ------------ 游戏逻辑数据 ------------
m_elementDraged = null;
// ------------------------------------ // ------------------------------------
...@@ -139,7 +139,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -139,7 +139,7 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------ 调试变量 ------------ // ------------ 调试变量 ------------
g_EnableStageRuler = true; // 使能舞台背景格尺 g_EnableStageRuler = false; // 使能舞台背景格尺
g_ForceChangeDefaultRole = false // 强制当前角色为默认角色 g_ForceChangeDefaultRole = false // 强制当前角色为默认角色
g_EnableTestSendEvent = false // 发送模拟Web数据 g_EnableTestSendEvent = false // 发送模拟Web数据
g_showLeftCornerTest= false // 测试左上角图标 g_showLeftCornerTest= false // 测试左上角图标
...@@ -169,7 +169,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -169,7 +169,6 @@ export class PlayComponent implements OnInit, OnDestroy {
contentObj.hotZoneItemArr.forEach(element => { contentObj.hotZoneItemArr.forEach(element => {
array.push(element.media.image_url) array.push(element.media.image_url)
}); });
console.log(array)
return array return array
} }
...@@ -177,6 +176,18 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -177,6 +176,18 @@ export class PlayComponent implements OnInit, OnDestroy {
mapToAduioArray(contentObj){ mapToAduioArray(contentObj){
let array = [] let array = []
contentObj.bgItem.audio_url && array.push(contentObj.bgItem.audio_url)
contentObj.bgItem.wordLeft_audio_url && array.push(contentObj.bgItem.wordLeft_audio_url)
contentObj.bgItem.wordRight_audio_url && array.push(contentObj.bgItem.wordRight_audio_url)
contentObj.bgItem.questions.forEach(element => {
element.audio_url && array.push(element.audio_url)
});
contentObj.hotZoneItemArr.forEach(element => {
element.media.audio_url && array.push(element.media.audio_url)
});
return array return array
} }
...@@ -196,6 +207,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -196,6 +207,10 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initMainWindow(); this.initMainWindow();
this.initLeftPart(); this.initLeftPart();
this.initRightPart(); this.initRightPart();
this.initWordLines();
this.initTitle_Part();
this.initTitle_Main();
this.initAudioPlayerAll()
} }
cleanGameVar(){ cleanGameVar(){
...@@ -231,6 +246,59 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -231,6 +246,59 @@ export class PlayComponent implements OnInit, OnDestroy {
this.render(element.ref) this.render(element.ref)
} }
initTitle_Part(){
let element = this.g_cartoon.createCartoonElementImageFunc("part-title", "bg_title_part", (w, h)=>{
return {
sx: 57*this.g_mapScale / w,
sy: 65*this.g_mapScale / h,
}
}, (w, h)=>{
return {
x: 53*this.g_mapScale + (57*this.g_mapScale)/2,
y: (65*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.bgItem.NO, "BerlinSansFBDemi-Bold", "#F7CB47", 48)
element.ref.addChild(text)
let partBG = this.g_cartoon.createCartoonElementImageFunc("part-title-background", "part_number_bg", (w, h)=>{
return {
sx: 121*this.g_mapScale / w,
sy: 69*this.g_mapScale / h,
}
}, (w, h)=>{
return {
x: (121*this.g_mapScale)/2,
y: (69*this.g_mapScale)/2
}
})
this.render(partBG.ref)
this.render(element.ref)
}
initTitle_Main(){
let labelWidth = 0
let text = this.g_cartoon.createCartoonElementLabelFunc("main-title", this.g_formData.bgItem.mainText, "FuturaBT-Bold", "#000000", 36 * this.g_mapScale, (w, h)=>{
labelWidth = w/2
return {
x: this.g_partTitle_x - 20 * this.g_mapScale + labelWidth * this.g_mapScale,
y: (65*this.g_mapScale) / 2
}
})
text.ref.x = this.g_partTitle_x + 60 * this.g_mapScale
text.ref.textAlign = "left"
this.subscribeMapDownEvent(text.id, ()=>{
this.g_enableMapDown = true;
this.g_cartoon.stopAllAudio()
})
this.render(text.ref)
}
initMainWindow(){ initMainWindow(){
let element = this.g_cartoon.createCartoonElementImageFunc("select-container", "defalut_container", (w, h)=>{ let element = this.g_cartoon.createCartoonElementImageFunc("select-container", "defalut_container", (w, h)=>{
return { return {
...@@ -270,15 +338,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -270,15 +338,17 @@ export class PlayComponent implements OnInit, OnDestroy {
element.initX = element.ref.x; element.initX = element.ref.x;
element.initY = element.ref.y element.initY = element.ref.y
element.margin = 0 element.margin = 0
element.hotZooIndex = index;
let elementDrag = null let elementDrag = null
elementDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-"+index, " " + item.media.text + " ", "MMTextBook-Bold", "#000", 48 * this.g_mapScale, -500, -500) elementDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-"+index, " " + item.media.text + " ", "MMTextBook-Bold", "#000", 48 * this.g_mapScale, -500, -500)
console.log(elementDrag.ref.x + " - " + elementDrag.ref.y)
this.render(element.ref) this.render(element.ref)
this.render(elementDrag.ref) this.render(elementDrag.ref)
this.subscribeMapDragEvent(element.id, ()=>{ this.subscribeMapDragEvent(element.id, ()=>{
element.ref.alpha = 0.5; element.ref.alpha = 0.5;
item.media.audio_url && this.g_cartoon.playAudio(item.media.audio_url)
console.log(item.media.audio_url)
}, ()=>{ }, ()=>{
elementDrag.ref.x = this.g_clickX, elementDrag.ref.x = this.g_clickX,
elementDrag.ref.y = this.g_clickY elementDrag.ref.y = this.g_clickY
...@@ -286,6 +356,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -286,6 +356,7 @@ export class PlayComponent implements OnInit, OnDestroy {
element.ref.alpha = 1; element.ref.alpha = 1;
elementDrag.ref.x = elementDrag.initX, elementDrag.ref.x = elementDrag.initX,
elementDrag.ref.y = elementDrag.initY elementDrag.ref.y = elementDrag.initY
this.m_elementDraged = element.id;
this.g_enableMapUp = true; this.g_enableMapUp = true;
this.g_enableMapDown = true; this.g_enableMapDown = true;
}) })
...@@ -308,13 +379,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -308,13 +379,14 @@ export class PlayComponent implements OnInit, OnDestroy {
y: this.g_cartoon.getOrigin().y + (150 + 96 / 2) * this.g_mapScale y: this.g_cartoon.getOrigin().y + (150 + 96 / 2) * this.g_mapScale
} }
}) })
element.hotZooIndex = -1;
let text = null let text = null
text = this.g_cartoon.createCartoonElementLabel("text-puzzle-left", " " + this.g_formData.bgItem.wordLeft_text + " ", "MMTextBook-Bold", "#FFF", 48) text = this.g_cartoon.createCartoonElementLabel("text-puzzle-left", " " + this.g_formData.bgItem.wordLeft_text + " ", "MMTextBook-Bold", "#FFF", 48)
element.ref.addChild(text.ref) element.ref.addChild(text.ref)
let textDrag = null let textDrag = null
textDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-left-drag", " " + this.g_formData.bgItem.wordLeft_text + " ", "MMTextBook-Bold", "#000", 48 * this.g_mapScale, -500, -500) textDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-left-drag", " " + this.g_formData.bgItem.wordLeft_text + " ", "MMTextBook-Bold", "#C8161E", 48 * this.g_mapScale, -500, -500)
this.render(textDrag.ref) this.render(textDrag.ref)
this.render(element.ref) this.render(element.ref)
...@@ -327,6 +399,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -327,6 +399,7 @@ export class PlayComponent implements OnInit, OnDestroy {
text.ref.alpha = 1; text.ref.alpha = 1;
textDrag.ref.x = textDrag.initX, textDrag.ref.x = textDrag.initX,
textDrag.ref.y = textDrag.initY textDrag.ref.y = textDrag.initY
this.m_elementDraged = element.id;
this.g_enableMapUp = true; this.g_enableMapUp = true;
this.g_enableMapDown = true; this.g_enableMapDown = true;
}) })
...@@ -349,13 +422,14 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -349,13 +422,14 @@ export class PlayComponent implements OnInit, OnDestroy {
y: this.g_cartoon.getOrigin().y + (150 + 96 / 2) * this.g_mapScale y: this.g_cartoon.getOrigin().y + (150 + 96 / 2) * this.g_mapScale
} }
}) })
element.hotZooIndex = -2;
let text = null let text = null
text = this.g_cartoon.createCartoonElementLabel("text-puzzle-right", " " + this.g_formData.bgItem.wordRight_text + " ", "MMTextBook-Bold", "#FFF", 48) text = this.g_cartoon.createCartoonElementLabel("text-puzzle-right", " " + this.g_formData.bgItem.wordRight_text + " ", "MMTextBook-Bold", "#FFF", 48)
element.ref.addChild(text.ref) element.ref.addChild(text.ref)
let textDrag = null let textDrag = null
textDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-right-drag", " " + this.g_formData.bgItem.wordRight_text + " ", "MMTextBook-Bold", "#000", 48 * this.g_mapScale, -500, -500) textDrag = this.g_cartoon.createCartoonElementLabel("text-puzzle-right-drag", " " + this.g_formData.bgItem.wordRight_text + " ", "MMTextBook-Bold", "#C8161E", 48 * this.g_mapScale, -500, -500)
this.render(textDrag.ref) this.render(textDrag.ref)
this.render(element.ref) this.render(element.ref)
...@@ -368,14 +442,224 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -368,14 +442,224 @@ export class PlayComponent implements OnInit, OnDestroy {
text.ref.alpha = 1; text.ref.alpha = 1;
textDrag.ref.x = textDrag.initX, textDrag.ref.x = textDrag.initX,
textDrag.ref.y = textDrag.initY textDrag.ref.y = textDrag.initY
this.m_elementDraged = element.id;
this.g_enableMapUp = true; this.g_enableMapUp = true;
this.g_enableMapDown = true; this.g_enableMapDown = true;
}) })
}
initWordLines() {
this.g_formData.bgItem.questions.forEach((item, index) => {
let textAll = []
item.combin.forEach(combinIndex => {
let key = Number(combinIndex)
let value = ""
if(key == -1) {
value = this.g_formData.bgItem.wordLeft_text;
} else if(key == -2) {
value = this.g_formData.bgItem.wordRight_text;
} else {
value = this.g_formData.hotZoneItemArr[combinIndex].media.text
}
textAll.push(
{
key,
value
}
)
});
let element = this.g_cartoon.createCartoonElementImageFunc(`line-word-container-${index}`, "bg_250_46", (w, h)=>{
return {
sx: 250 * this.g_mapScale / w,
sy: 46 * this.g_mapScale / h
}
}, (w, h)=>{
let y = 0;
if(index>3) {
y = this.g_cartoon.getOrigin().y + (509 + 46 / 2) * this.g_mapScale
} else {
y = this.g_cartoon.getOrigin().y + (383 + 46 / 2) * this.g_mapScale
}
let xIndex = index % 4
return {
x: this.g_cartoon.getOrigin().x + (58 + 250 / 2) * this.g_mapScale + 295 * this.g_mapScale * xIndex,
y: y
}
})
element.questionIndex = index;
let number = this.g_cartoon.createCartoonElementImageFunc(`line-word-number-${index}`, `num-${index+1}`, (w, h)=>{
return {
sx: 46 / w,
sy: 46 / h
}
}, (w, h)=>{
return {
x: -102,
y: 0
}
})
let line = this.g_cartoon.createCartoonElementImageFunc(`line-word-line-${index}`, "line", (w, h)=>{
return {
sx: 200 / w,
sy: 2 / h
}
}, (w, h)=>{
return {
x: 25,
y: 22
}
})
let startX = -70
let answerIndex = []
textAll.forEach((item, partIndex) => {
let color = "#000"
if(item.key<0) {
color = "#C8161E"
}
answerIndex.push(item.key)
let textShow = this.g_cartoon.createCartoonElementLabel(`word-part-${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
startX += textShow.ref.width
element.ref.addChild(textShow.ref)
})
this.subscribeMapUpEvent(element.id, ()=>{
if(!this.m_elementDraged) {
this.g_enableMapUp = true;
return;
}
let dragElement = this.g_cartoon.getCartoonElement(this.m_elementDraged)
if(!dragElement) {
this.g_enableMapUp = true;
return;
}
for (let index = 0; index < answerIndex.length; index++) {
if(dragElement.hotZooIndex == answerIndex[index]) {
let textShow = this.g_cartoon.getCartoonElement(`word-part-${element.questionIndex}-${dragElement.hotZooIndex}-${index}`)
if(!textShow.isShown) {
textShow.isShown = true;
textShow.ref.alpha = 1;
break;
}
}
}
this.m_elementDraged = null;
this.g_enableMapUp = true;
})
element.ref.addChild(line.ref)
element.ref.addChild(number.ref)
this.render(element.ref)
})
}
initAudioPlayerAll(){
let element = this.g_cartoon.createCartoonElementImageFunc(`audio-all`, "icon_audio_container", (w, h)=>{
return {
sx: 76 * this.g_mapScale / w,
sy: 77 * this.g_mapScale / h,
}
}, (w, h)=>{
return {
x: this.g_cartoon.getOrigin().x + (1190 + 80 / 2) * this.g_mapScale,
y: this.g_cartoon.getOrigin().y + (630 + 81.5 / 2) * this.g_mapScale
}
})
let play = this.g_cartoon.createCartoonElementImageFunc(`audio-all-play`, "icon_paly", (w, h)=>{
return {
sx: 76 / w,
sy: 77 / h,
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
let pause = this.g_cartoon.createCartoonElementImageFunc(`audio-all-pause`, "icon_pause", (w, h)=>{
return {
sx: 76 / w,
sy: 77 / h,
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
pause.ref.visible = true;
element.playIcon = play
element.pauseIcon = pause
element.ref.addChild(element.pauseIcon.ref)
element.ref.addChild(element.playIcon.ref)
element.isPlaying = false
element.audio = this.g_cartoon.audio.get(this.g_formData.bgItem.audio_url)
if(element.audio){
element.audio.onended = ()=>{
element.pause()
}
}
element.play = ()=>{
if(!element.audio){
return
} }
element.isPlaying = true;
this.g_cartoon.stopAllAudio()
element.audio.play()
element.playIcon.ref.visible = false;
element.pauseIcon.ref.visible = true;
}
element.pause = ()=>{
if(!element.audio){
return
}
element.isPlaying = false;
element.audio.pause()
element.playIcon.ref.visible = true;
element.pauseIcon.ref.visible = false;
}
element.enable = true;
this.subscribeMapDownEvent(element.id, ()=>{
if(!element.audio || !element.enable){
this.g_enableMapDown = true;
return
}
if(element.isPlaying){
element.pause()
}else{
element.play()
}
this.g_enableMapDown = true;
})
this.render(element.ref)
}
resetLongAudio(){
let audio = this.g_cartoon.getCartoonElement(`audio-all`)
if(audio.enable){
audio.pause()
}
}
...@@ -904,9 +1188,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -904,9 +1188,7 @@ export class PlayComponent implements OnInit, OnDestroy {
this.g_stage = image this.g_stage = image
this.subscribeMapUpEvent("g-ackground-color", ()=>{ this.subscribeMapUpEvent("g-ackground-color", ()=>{
console.log("FEEFEFEFEFEF")
if(this.g_currentDragElementID){ if(this.g_currentDragElementID){
// let dragElement = this.g_cartoon.getCartoonElement(this.g_currentDragElementID)
this.releaseDragElement() this.releaseDragElement()
this.g_currentDragElementID = null; this.g_currentDragElementID = null;
}else{ }else{
......
...@@ -28,7 +28,9 @@ const localImages = { ...@@ -28,7 +28,9 @@ const localImages = {
'_image_none': 'assets/default/images/image_none.png', '_image_none': 'assets/default/images/image_none.png',
"defalut_container": "assets/play/hotZooCard/defalut_bg.png", "defalut_container": "assets/play/hotZooCard/defalut_bg.png",
"part_number_bg": "assets/play/part_number_bg.png",
'bg_70_40': 'assets/play/bg_70_40.png', 'bg_70_40': 'assets/play/bg_70_40.png',
'bg_250_46': 'assets/play/bg_250_46.png',
'line': 'assets/play/line.png', 'line': 'assets/play/line.png',
'num-1': 'assets/play/num-1.png', 'num-1': 'assets/play/num-1.png',
'num-2': 'assets/play/num-2.png', 'num-2': 'assets/play/num-2.png',
...@@ -40,7 +42,10 @@ const localImages = { ...@@ -40,7 +42,10 @@ const localImages = {
'num-8': 'assets/play/num-8.png', 'num-8': 'assets/play/num-8.png',
'oval-copy': 'assets/play/oval-copy.png', 'oval-copy': 'assets/play/oval-copy.png',
'select-bg': 'assets/play/select-bg.png', 'select-bg': 'assets/play/select-bg.png',
'icon_audio_container': 'assets/play/icon_audio_container.png',
'bg_title_part': 'assets/play/bg_title_part.png',
'icon_paly': 'assets/play/icon_paly.png',
'icon_pause': 'assets/play/icon_pause.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