Commit 5c63c1e3 authored by 李维's avatar 李维

dev commit

parent d32cc0b4
......@@ -16,6 +16,7 @@ import { PlayComponent } from "./play/play.component";
import { LessonTitleConfigComponent } from './common/lesson-title-config/lesson-title-config.component';
import { AudioRecorderComponent } from './common/audio-recorder/audio-recorder.component';
import { PlayerContentWrapperComponent } from './common/player-content-wrapper/player-content-wrapper.component';
import { BackgroundUploadComponent } from './common/background-upload/background-upload.component';
/** 配置 angular i18n **/
import { registerLocaleData } from '@angular/common';
......@@ -41,7 +42,8 @@ registerLocaleData(zh);
TimePipe,
UploadVideoComponent,
CustomHotZoneComponent,
PlayerContentWrapperComponent
PlayerContentWrapperComponent,
BackgroundUploadComponent
],
imports: [
FormsModule,
......
......@@ -21,8 +21,8 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
Type = Type;
withRmBtn = false;
uploadUrl = (<any>window).courseware.uploadUrl();
uploadData = (<any>window).courseware.uploadData();
uploadUrl
uploadData
@Input()
needRemove = false;
......@@ -54,7 +54,13 @@ export class AudioRecorderComponent implements OnInit, OnChanges, OnDestroy {
constructor( private nzMessageService: NzMessageService ) {
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
}
init() {
......
<nz-form-item>
<nz-form-label [nzSpan]="2" >左上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >中上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleTop')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >右上</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightTop"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightTop')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2" >左中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftMiddle')"></app-upload-image-with-preview>
</nz-form-control>
<div nz-col nzSpan="8"></div>
<nz-form-label [nzSpan]="2" >右中</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightMiddle"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightMiddle')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="2" >左下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.leftBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'leftBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2" >中下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.middleBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'middleBottom')"></app-upload-image-with-preview>
</nz-form-control>
<nz-form-label [nzSpan]="2">右下</nz-form-label>
<nz-form-control [nzSpan]="6">
<app-upload-image-with-preview style="width: 100%" [picUrl]="items.rightBottom"
(imageUploaded)="onImageUploadSuccess($event, items, 'rightBottom')"></app-upload-image-with-preview>
</nz-form-control>
</nz-form-item>
\ No newline at end of file
import {Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-background-upload',
templateUrl: './background-upload.component.html',
styleUrls: ['./background-upload.component.scss']
})
export class BackgroundUploadComponent {
@Input() items = {};
@Output() change = new EventEmitter();
constructor( ) { }
onImageUploadSuccess(e, items, key) {
items[key] = e.url;
this.change.emit(items)
}
}
......@@ -22,7 +22,7 @@
</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>
<app-audio-recorder id="index_audio_1" [audioUrl]="bgItem.mainTextAudio" (audioUploaded)="onAudioUploadSuccess($event, bgItem,'mainTextAudio')" > </app-audio-recorder>
</div>
</div>
</div>
......
......@@ -279,6 +279,7 @@ export class CustomHotZoneComponent implements OnInit, OnDestroy, OnChanges {
deleteItem(e, i) {
this.hotZoneArr.splice(i, 1);
this.refreshHotZoneId();
this.refreshIndexNumber()
this.autoSave()
}
......
......@@ -47,8 +47,8 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
item: any;
// videoItem = null;
uploadUrl = (<any> window).courseware.uploadUrl();
uploadData = (<any> window).courseware.uploadData();
uploadUrl
uploadData
constructor(private nzMessageService: NzMessageService,
private sanitization: DomSanitizer
......@@ -58,6 +58,14 @@ export class UploadVideoComponent implements OnChanges, OnDestroy {
this.uploading = false;
this.videoFile = null;
this.uploadUrl = (<any> window).courseware.uploadUrl();
this.uploadData = (<any> window).courseware.uploadData();
window['air'].getUploadCallback = (url, data) => {
this.uploadUrl = url;
this.uploadData = data;
};
}
ngOnChanges() {
// if (!this.videoFile || this.showUploadBtn) {
......
......@@ -12,6 +12,15 @@
></app-custom-hot-zone>
</div>
</div>
<div class="card-item-content">
<div class="title">背景 设置</div>
<div class="section">
<app-background-upload
[items]="bgImages"
(change)="backgroundImageChanged($event)">
</app-background-upload>
</div>
</div>
</div>
</div>
</div>
......
......@@ -12,7 +12,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
dataArray: Array<Object> = [];
hotZoneItemArr: Array<Object> = [];
bgItem: Object;
bgImages: Object;
KEY = 'DataKey_YM4-11';
set item(item) {
......@@ -58,6 +58,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
saveData(e){
this.bgItem = e.bgItem;
// this.bgImages = e.bgImages
this.hotZoneItemArr.length = 0;
e.hotZoneItemArr.forEach(item => {
this.hotZoneItemArr.push(item)
......@@ -88,6 +89,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
this.item.contentObj.bgItem = this.bgItem;
}
if (this.item.contentObj.bgImages) {
this.bgImages = this.item.contentObj.bgImages;
} else {
this.bgImages = {
leftTop: '', middleTop: '', rightTop: '', leftMiddle: '', rightMiddle: '', leftBottom: '', middleBottom: '', rightBottom: '',
}
this.item.contentObj.bgImages = this.bgImages;
}
}
cardItemData(){
......@@ -152,6 +164,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
backgroundImageChanged(e) {
this.saveItem()
}
save() {
(<any> window).courseware.setData(this.item, null, this.KEY);
this.refresh();
......
......@@ -45,7 +45,6 @@ import TWEEN from "@tweenjs/tween.js";
import defauleFormData from '../../assets/default/formData/defaultData.js'
import { element } from 'protractor';
const zIndexMap = {
mainBackground: 0,
hotZooContainer: 100,
......@@ -130,6 +129,8 @@ export class PlayComponent implements OnInit, OnDestroy {
// ------------ 游戏逻辑数据 ------------
m_elementDraged = null;
m_currentQuestionIndex = 0;
m_answerAll = []
// ------------------------------------
......@@ -166,6 +167,16 @@ export class PlayComponent implements OnInit, OnDestroy {
mapToImageArray(contentObj){
let array = []
array.push(contentObj.bgItem.url)
contentObj.bgImages.leftTop && array.push(contentObj.bgImages.leftTop)
contentObj.bgImages.middleTop && array.push(contentObj.bgImages.middleTop)
contentObj.bgImages.rightTop && array.push(contentObj.bgImages.rightTop)
contentObj.bgImages.leftMiddle && array.push(contentObj.bgImages.leftMiddle)
contentObj.bgImages.rightMiddle && array.push(contentObj.bgImages.rightMiddle)
contentObj.bgImages.leftBottom && array.push(contentObj.bgImages.leftBottom)
contentObj.bgImages.middleBottom && array.push(contentObj.bgImages.middleBottom)
contentObj.bgImages.rightBottom && array.push(contentObj.bgImages.rightBottom)
contentObj.hotZoneItemArr.forEach(element => {
array.push(element.media.image_url)
});
......@@ -176,6 +187,7 @@ export class PlayComponent implements OnInit, OnDestroy {
mapToAduioArray(contentObj){
let array = []
contentObj.bgItem.mainTextAudio && array.push(contentObj.bgItem.mainTextAudio)
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)
......@@ -210,11 +222,14 @@ export class PlayComponent implements OnInit, OnDestroy {
this.initWordLines();
this.initTitle_Part();
this.initTitle_Main();
this.initAudioPlayerAll()
this.initAudioPlayerAll();
this.initBackgroundSide();
}
cleanGameVar(){
this.m_elementDraged = null;
this.m_currentQuestionIndex = -1;
this.m_answerAll = []
}
startGame(){
......@@ -262,7 +277,7 @@ export class PlayComponent implements OnInit, OnDestroy {
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)=>{
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,
......@@ -280,7 +295,6 @@ export class PlayComponent implements OnInit, OnDestroy {
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 {
......@@ -288,14 +302,29 @@ export class PlayComponent implements OnInit, OnDestroy {
y: (65*this.g_mapScale) / 2
}
})
let background = this.g_cartoon.createCartoonElementImageFunc("main-title-background", "bg_50_20", (w, h)=>{
return {
sx: labelWidth*2 / w,
sy: 50*this.g_mapScale / h,
}
}, (w, h)=>{
return {
x: this.g_partTitle_x + labelWidth + 60 * 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.subscribeMapDownEvent(background.id, ()=>{
this.g_cartoon.stopAllAudio()
this.g_cartoon.playAudio(this.g_formData.bgItem.mainTextAudio)
this.g_enableMapDown = true;
})
this.render(background.ref)
this.render(text.ref)
}
......@@ -315,8 +344,19 @@ export class PlayComponent implements OnInit, OnDestroy {
element.originX = element.ref.x - 960 * this.g_mapScale / 2
element.originY = element.ref.y - 155 * this.g_mapScale / 2
let element_t = this.g_cartoon.createCartoonElement("window-image-container", "MySprite")
element_t.ref.init(this.g_cartoon.images.get(this.g_formData.bgItem.url))
let element_t = this.g_cartoon.createCartoonElementImageFunc("window-image-container", this.g_formData.bgItem.url, (w, h)=>{
let s = Math.min( 960 / w, 155 / h)
return {
sx: s,
sy: s
}
}, (w, h)=>{
return {
x: 0,
y: 0
}
})
element.ref.addChild(element_t.ref)
this.render(element.ref)
......@@ -489,6 +529,8 @@ export class PlayComponent implements OnInit, OnDestroy {
}
})
element.questionIndex = index;
element.done = false;
element.audio_url = item.audio_url?item.audio_url:""
let number = this.g_cartoon.createCartoonElementImageFunc(`line-word-number-${index}`, `num-${index+1}`, (w, h)=>{
return {
......@@ -516,12 +558,15 @@ export class PlayComponent implements OnInit, OnDestroy {
let startX = -70
let answerIndex = []
this.m_answerAll.push([])
textAll.forEach((item, partIndex) => {
let color = "#000"
if(item.key<0) {
color = "#C8161E"
}
answerIndex.push(item.key)
this.m_answerAll[index].push(`word-part-${index}-${item.key}-${partIndex}`)
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;
......@@ -531,21 +576,23 @@ export class PlayComponent implements OnInit, OnDestroy {
})
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;
}
if(this.m_currentQuestionIndex != element.questionIndex) {
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}`)
let textShow = this.g_cartoon.getCartoonElement(`word-part-${this.m_currentQuestionIndex}-${dragElement.hotZooIndex}-${index}`)
if(!textShow.isShown) {
textShow.isShown = true;
textShow.ref.alpha = 1;
......@@ -554,17 +601,60 @@ export class PlayComponent implements OnInit, OnDestroy {
}
}
if(this.checkQuestionDone()) {
this.m_currentQuestionIndex++
element.done = true;
if(this.m_currentQuestionIndex > this.g_formData.bgItem.questions.length) {
this.endGame()
}
}
this.m_elementDraged = null;
this.g_enableMapUp = true;
})
this.subscribeMapDownEvent(element.id, ()=>{
if(element.done) {
this.g_cartoon.stopAllAudio()
this.g_cartoon.playAudio(element.audio_url)
}
this.g_enableMapDown = true;
})
element.ref.addChild(line.ref)
element.ref.addChild(number.ref)
this.render(element.ref)
})
}
checkQuestionDone() {
let partAll = []
let result = []
if(this.m_currentQuestionIndex >= 0) {
partAll = this.m_answerAll[this.m_currentQuestionIndex]?this.m_answerAll[this.m_currentQuestionIndex]:[]
}
partAll.forEach(item=>{
let el = this.g_cartoon.getCartoonElement(item)
if(el && el.isShown) {
result.push(true)
} else {
result.push(false)
}
})
if(result.indexOf(false)==-1){
return true
} else {
return false
}
}
initAudioPlayerAll(){
if(!this.g_formData.bgItem.audio_url) {
return
}
let element = this.g_cartoon.createCartoonElementImageFunc(`audio-all`, "icon_audio_container", (w, h)=>{
return {
sx: 76 * this.g_mapScale / w,
......@@ -660,6 +750,34 @@ export class PlayComponent implements OnInit, OnDestroy {
audio.pause()
}
}
initBackgroundSide() {
const map = {
leftTop: {x: 0, y: 0},
middleTop: {x: this.g_canvasWidth / 2, y: 0},
rightTop: {x: this.g_canvasWidth, y: 0},
leftMiddle: {x: 0, y: this.g_canvasHeight / 2},
rightMiddle: {x: this.g_canvasWidth, y: this.g_canvasHeight / 2},
leftBottom: {x: 0, y: this.g_canvasHeight},
middleBottom: {x: this.g_canvasWidth / 2, y: this.g_canvasHeight},
rightBottom: {x: this.g_canvasWidth, y: this.g_canvasHeight}
}
for(let key in this.g_formData.bgImages) {
if(!this.g_formData.bgImages[key]) {
continue
}
let ele = this.g_cartoon.createCartoonElementImageFunc(`background-side-${key}`, this.g_formData.bgImages[key], (w, h)=>{
return {
sx: 1,
sy: 1,
}
}, (w, h)=>{
return map[key]
})
console.log(this.g_formData.bgImages[key])
this.render(ele.ref, -1)
}
}
......
......@@ -31,6 +31,8 @@ const localImages = {
"part_number_bg": "assets/play/part_number_bg.png",
'bg_70_40': 'assets/play/bg_70_40.png',
'bg_250_46': 'assets/play/bg_250_46.png',
'bg_50_20': 'assets/play/bg_50_20.png',
'demo': 'assets/play/demo.png',
'line': 'assets/play/line.png',
'num-1': 'assets/play/num-1.png',
'num-2': 'assets/play/num-2.png',
......
......@@ -8,16 +8,25 @@ export default {
],
"bgItem": {
"url": "assets/play/hotZooCard/defalut_bg.png",
"url": "demo",
"questions": [
],
"NO": "C",
"mainText": "Listen, circle and write.",
"mainTextAudio": "",
"wordLeft_text": "",
"wordLeft_audio_url": "",
"wordRight_text": "",
"wordRight_audio_url": "",
"rect": {
"x": 0,
"y": 0,
"width": 1315,
"height": 212.31770833333334
"x": 0,
"y": 0,
"width": 1315,
"height": 212.31770833333334
}
},
"bgImages": {
"leftTop": '', "middleTop": '', "rightTop": '', "leftMiddle": '', "rightMiddle": '', "leftBottom": '', "middleBottom": '', "rightBottom": '',
}
}
\ No newline at end of file
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