Commit 38200a85 authored by Chen Jiping's avatar Chen Jiping

feat:完成配置页面开发

parent 9f3a2900
...@@ -128,5 +128,8 @@ ...@@ -128,5 +128,8 @@
} }
} }
}, },
"defaultProject": "ng-template-generator" "defaultProject": "ng-template-generator",
"cli": {
"analytics": "1a48a602-7be0-487b-a3bc-eb9ad1dc4a2f"
}
} }
\ No newline at end of file
import { Obj } from "./ObjBean";
export class ExercisesBean extends Obj{
leftAnswer : AnswerBean;
rightAnswer : AnswerBean;
card : Obj;
}
export function getDefaultExercises(){
let exercises = new ExercisesBean();
exercises.leftAnswer = new AnswerBean();
exercises.rightAnswer = new AnswerBean();
exercises.card = new Obj();
return exercises;
}
export class LetterBean extends Obj{
backgroud:String;
isFill = '0';
}
export function getDefaultLetter(){
let letter = new LetterBean();
return letter;
}
export class AnswerBean extends Obj{
letterArr = [];
}
export class Obj{
/**音频材料 */
audioUrl: String;
/**图片材料 */
picUrl:String;
val : String;
}
\ No newline at end of file
import { Obj } from "./ObjBean";
export class TitleBean extends Obj{
part1 : String;
part2: String;
}
export function getDefaultTile(){
let title = new TitleBean();
title.part1 = "C";
title.part2 = "Read and point";
return title;
}
\ No newline at end of file
...@@ -6,3 +6,6 @@ ...@@ -6,3 +6,6 @@
height: 100%; height: 100%;
} }
.gridStyle {
width: '50%'
}
\ No newline at end of file
This diff is collapsed.
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import { getDefaultExercises, getDefaultLetter } from '../bean/Exercises';
import { getDefaultTile } from '../bean/TitleBean';
...@@ -10,10 +12,13 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,10 +12,13 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
export class FormComponent implements OnInit, OnChanges, OnDestroy { export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 储存数据用 // 储存数据用
saveKey = "test_0011"; saveKey = "YM5-10";
// 储存对象 // 储存对象
item; item;
gridStyle = {
width: '50%'
};
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) {
...@@ -24,6 +29,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -24,6 +29,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.item = {}; this.item = {};
this.item.title = getDefaultTile();
this.item.letterArr = [];
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any> window).courseware.getData((data) => {
...@@ -50,7 +59,24 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -50,7 +59,24 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
init() { init() {
if (!this.item.title) {
this.item.title = getDefaultTile();
}
if (!this.item.letterArr) {
this.item.letterArr = [];
}
if (!this.item.exercisesArr) {
this.item.exercisesArr = [];
}
for (let i = this.item.exercisesArr.length; i < 4; ++i) {
let exercises = getDefaultExercises();
this.item.exercisesArr.push(exercises);
}
} }
...@@ -58,9 +84,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -58,9 +84,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存图片数据 * 储存图片数据
* @param e * @param e
*/ */
onImageUploadSuccess(e, key) { onImageUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -68,9 +94,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -68,9 +94,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存音频数据 * 储存音频数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onAudioUploadSuccess(e, item, key) {
this.item[key] = e.url; item[key] = e.url;
this.save(); this.save();
} }
...@@ -93,5 +119,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -93,5 +119,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}, 1); }, 1);
} }
addLetterItem(item) {
let letter = getDefaultLetter();
item.letterArr.push(letter);
item.letterArr = [...item.letterArr];
this.save();
}
delLetter(item, index) {
if (index !== -1) {
item.letterArr.splice(index, 1);
item.letterArr = [...item.letterArr];
this.save();
}
}
} }
...@@ -17,3 +17,20 @@ ...@@ -17,3 +17,20 @@
src: url("../../assets/font/BRLNSDB.TTF") ; src: url("../../assets/font/BRLNSDB.TTF") ;
} }
@font-face
{
font-family: 'tt0142m';
src: url("../../assets/font/tt0142m.ttf") ;
}
@font-face
{
font-family: 'GOTHICB';
src: url("../../assets/font/GOTHICB.TTF") ;
}
@font-face
{
font-family: 'MMB';
src: url("../../assets/font/MMTextBook-Bold.otf") ;
}
\ No newline at end of file
...@@ -57,17 +57,10 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -57,17 +57,10 @@ export class PlayComponent implements OnInit, OnDestroy {
canvasLeft; canvasLeft;
canvasTop; canvasTop;
saveKey = 'test_0011'; saveKey = 'YM5-10';
btnLeft;
btnRight;
pic1;
pic2;
canTouch = true; canTouch = true;
curPic;
@HostListener('window:resize', ['$event']) @HostListener('window:resize', ['$event'])
onResize(event) { onResize(event) {
...@@ -341,7 +334,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -341,7 +334,7 @@ export class PlayComponent implements OnInit, OnDestroy {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const audio = new Audio(); const audio = new Audio();
audio.oncanplay = (a) => { audio.oncanplay = (a) => {
resolve(); resolve(a);
}; };
audio.onerror = () => { audio.onerror = () => {
reject(); reject();
...@@ -443,10 +436,7 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -443,10 +436,7 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initDefaultData() { initDefaultData() {
if (!this.data.pic_url) {
this.data.pic_url = 'assets/play/default/pic.jpg';
this.data.pic_url_2 = 'assets/play/default/pic.jpg';
}
} }
...@@ -455,8 +445,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -455,8 +445,6 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initImg() { initImg() {
this.addUrlToImages(this.data.pic_url);
this.addUrlToImages(this.data.pic_url_2);
} }
...@@ -465,13 +453,15 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -465,13 +453,15 @@ export class PlayComponent implements OnInit, OnDestroy {
*/ */
initAudio() { initAudio() {
// 音频资源
this.addUrlToAudioObj(this.data.audio_url);
this.addUrlToAudioObj(this.data.audio_url_2);
// 音效 // 音效
this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3); this.addUrlToAudioObj('click', this.rawAudios.get('click'), 0.3);
this.addUrlToAudioObj('open', this.rawAudios.get('open'));
this.addUrlToAudioObj('turn', this.rawAudios.get('turn'));
} }
...@@ -504,131 +494,17 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -504,131 +494,17 @@ export class PlayComponent implements OnInit, OnDestroy {
initView() { initView() {
this.initPic();
this.initBottomPart();
}
initBottomPart() {
const btnLeft = new MySprite();
btnLeft.init(this.images.get('btn_left'));
btnLeft.x = this.canvasWidth - 150 * this.mapScale;
btnLeft.y = this.canvasHeight - 100 * this.mapScale;
btnLeft.setScaleXY(this.mapScale);
this.renderArr.push(btnLeft);
this.btnLeft = btnLeft;
const btnRight = new MySprite();
btnRight.init(this.images.get('btn_right'));
btnRight.x = this.canvasWidth - 50 * this.mapScale;
btnRight.y = this.canvasHeight - 100 * this.mapScale;
btnRight.setScaleXY(this.mapScale);
this.renderArr.push(btnRight);
this.btnRight = btnRight;
} }
initPic() {
const maxW = this.canvasWidth * 0.7;
const pic1 = new MySprite();
pic1.init(this.images.get(this.data.pic_url));
pic1.x = this.canvasWidth / 2;
pic1.y = this.canvasHeight / 2;
pic1.setScaleXY(maxW / pic1.width);
this.renderArr.push(pic1);
this.pic1 = pic1;
const label1 = new Label();
label1.text = this.data.text;
label1.textAlign = 'center';
label1.fontSize = 50;
label1.fontName = 'BRLNSDB';
label1.fontColor = '#ffffff';
pic1.addChild(label1);
const pic2 = new MySprite();
pic2.init(this.images.get(this.data.pic_url_2));
pic2.x = this.canvasWidth / 2 + this.canvasWidth;
pic2.y = this.canvasHeight / 2;
pic2.setScaleXY(maxW / pic2.width);
this.renderArr.push(pic2);
this.pic2 = pic2;
this.curPic = pic1;
}
btnLeftClicked() {
this.lastPage();
}
btnRightClicked() {
this.nextPage();
}
lastPage() {
if (this.curPic == this.pic1) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x + moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x + moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic1;
});
}
nextPage() {
if (this.curPic == this.pic2) {
return;
}
this.canTouch = false;
const moveLen = this.canvasWidth;
tweenChange(this.pic1, {x: this.pic1.x - moveLen}, 1);
tweenChange(this.pic2, {x: this.pic2.x - moveLen}, 1, () => {
this.canTouch = true;
this.curPic = this.pic2;
});
}
pic1Clicked() {
this.playAudio(this.data.audio_url);
}
pic2Clicked() {
this.playAudio(this.data.audio_url_2);
}
mapDown(event) { mapDown(event) {
...@@ -636,25 +512,6 @@ export class PlayComponent implements OnInit, OnDestroy { ...@@ -636,25 +512,6 @@ export class PlayComponent implements OnInit, OnDestroy {
return; return;
} }
if ( this.checkClickTarget(this.btnLeft) ) {
this.btnLeftClicked();
return;
}
if ( this.checkClickTarget(this.btnRight) ) {
this.btnRightClicked();
return;
}
if ( this.checkClickTarget(this.pic1) ) {
this.pic1Clicked();
return;
}
if ( this.checkClickTarget(this.pic2) ) {
this.pic2Clicked();
return;
}
} }
......
const res = [ const res = [
// ['bg', "assets/play/bg.jpg"], ['play', "assets/play/play.png"],
['btn_left', "assets/play/btn_left.png"], ['stop', "assets/play/stop.png"],
['btn_right', "assets/play/btn_right.png"],
// ['text_bg', "assets/play/text_bg.png"],
]; ];
...@@ -12,7 +10,8 @@ const res = [ ...@@ -12,7 +10,8 @@ const res = [
const resAudio = [ const resAudio = [
['click', "assets/play/music/click.mp3"], ['click', "assets/play/music/click.mp3"],
['open', "assets/play/music/open.mp3"],
['turn', "assets/play/music/turn.mp3"],
]; ];
export {res, resAudio}; export {res, resAudio};
This diff is collapsed.
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