Commit 994df2ce authored by 范雪寒's avatar 范雪寒

feat: 事件、表单页面

parent 3d9785b1
...@@ -6,3 +6,15 @@ ...@@ -6,3 +6,15 @@
height: 100%; height: 100%;
} }
.border {
border-radius: 20px;
border-style: dashed;
padding: 20px;
margin: 20px;
/*width: 500px; */
/*//border-radius: 20px;*/
/*//border-width: 2px;*/
/*//border-color: #000000;*/
}
\ No newline at end of file
<div class="model-content"> <div class="model-content">
<div style="position: absolute; left: 200px; top: 100px; width: 800px;"> <div style="position: absolute; left: 200px; top: 100px; width: 800px;">
<input type="text" nz-input [(ngModel)]="item.text" (blur)="save()"> <div class="border" style="width: 650px; height: 190px; float: left;">
<span style="float: left; height: 30px; font-size: 18px;">标题字母:</span>
<input type="text" style="width: 50px;" nz-input [(ngModel)]="item.tittle.word" (blur)="save()">
<br>
<br>
<span style="float: left; height: 30px; font-size: 18px;">标题:</span>
<input type="text" style="width: 550px;" nz-input [(ngModel)]="item.tittle.text" (blur)="save()">
<br>
<br>
<span style="float: left; height: 30px; font-size: 18px;">标题音频:</span>
<app-audio-recorder
[audioUrl]="item.tittle.audio"
(audioUploaded)="onTittleAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
</div>
<br>
<br>
<div class="border" style="width: 650px; height: 200px; float: left;">
<span style="float: left; height: 30px; font-size: 18px;">皮肤:</span>
<br>
<br>
<nz-radio-group [(ngModel)]="item.showType">
<label style="float: left; " [nzValue]="'A'" nz-radio (click)="radioClick('A')">
<img style="width: 160px;height: 90px;" src="assets/play/Img_whole_bg_type_A.png">
</label>
<label style="float: left; " [nzValue]="'B'" nz-radio (click)="radioClick('B')">
<img style="width: 160px;height: 90px;" src="assets/play/Img_whole_bg_type_B.png">
</label>
</nz-radio-group>
</div>
<br>
<br>
<div class="border" style="width: 650px; height: 480px; float: left;">
<span style="float: left; height: 30px; font-size: 18px;">文本:</span>
<br>
<br>
<input type="text" style="width: 300px;padding-bottom: 5px;" nz-input [(ngModel)]="item.words[0]" (blur)="save()">
<input type="text" style="width: 300px;padding-bottom: 5px;" nz-input [(ngModel)]="item.words[3]" (blur)="save()">
<input type="text" style="width: 300px;padding-bottom: 5px;" nz-input [(ngModel)]="item.words[1]" (blur)="save()">
<input type="text" style="width: 300px;padding-bottom: 5px;" nz-input [(ngModel)]="item.words[4]" (blur)="save()">
<input type="text" style="width: 300px;padding-bottom: 5px;" nz-input [(ngModel)]="item.words[2]" (blur)="save()">
<input type="text" style="width: 300px;padding-bottom: 5px;" nz-input [(ngModel)]="item.words[5]" (blur)="save()">
<br>
<br>
<span style="float: left; height: 30px; font-size: 18px;">音频:</span>
<br>
<br>
<table>
<tr>
<td>
<app-audio-recorder
style="float: left;"
[audioUrl]="item.audios[0]"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', 0)"
></app-audio-recorder>
</td>
<td>
<app-audio-recorder
style="float: left;"
[audioUrl]="item.audios[3]"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', 3)"
></app-audio-recorder>
</td>
</tr>
<tr>
<td>
<app-audio-recorder
style="float: left;"
[audioUrl]="item.audios[1]"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', 1)"
></app-audio-recorder>
</td>
<td>
<app-audio-recorder
style="float: left;"
[audioUrl]="item.audios[4]"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', 4)"
></app-audio-recorder>
</td>
</tr>
<tr>
<td>
<app-audio-recorder
style="float: left;"
[audioUrl]="item.audios[2]"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', 2)"
></app-audio-recorder>
</td>
<td>
<app-audio-recorder
style="float: left;"
[audioUrl]="item.audios[5]"
(audioUploaded)="onAudioUploadSuccess($event, 'audio_url', 5)"
></app-audio-recorder>
</td>
</tr>
</table>
<br>
<br>
<span style="float: left; height: 30px; font-size: 18px;">整体音频:</span>
<br>
<br>
<app-audio-recorder
style="float: left;"
[audioUrl]="item.wholeAuido"
(audioUploaded)="onWholeAudioUploadSuccess($event, 'audio_url')"
></app-audio-recorder>
</div>
<!-- <input type="text" nz-input [(ngModel)]="item.text" (blur)="save()">
<app-upload-image-with-preview <app-upload-image-with-preview
[picUrl]="item.pic_url" [picUrl]="item.pic_url"
...@@ -17,9 +123,7 @@ ...@@ -17,9 +123,7 @@
></app-audio-recorder> ></app-audio-recorder>
<app-custom-hot-zone></app-custom-hot-zone> <app-custom-hot-zone></app-custom-hot-zone>
<app-upload-video></app-upload-video> <app-upload-video></app-upload-video>
<app-lesson-title-config></app-lesson-title-config> <app-lesson-title-config></app-lesson-title-config> -->
</div> </div>
</div> </div>
\ No newline at end of file
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';
...@@ -10,22 +10,32 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap ...@@ -10,22 +10,32 @@ 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 = "ym-2-26";
// 储存对象 // 储存对象
item; item;
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef) { constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef) {
} }
ngOnInit() { ngOnInit() {
this.item = {}; this.item = {
tittle: {
word: "",
text: "",
audio: ""
},
showType: "A",
words: ["", "", "", "", "", ""],
wholeAuido: "",
audios: ["", "", "", "", "", ""]
};
// 获取存储的数据 // 获取存储的数据
(<any> window).courseware.getData((data) => { (<any>window).courseware.getData((data) => {
if (data) { if (data) {
this.item = data; this.item = data;
...@@ -54,21 +64,34 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -54,21 +64,34 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
} }
/** radioClick(key) {
* 储存图片数据 this.item.showType = key;
* @param e this.save();
*/ }
onImageUploadSuccess(e, key) {
// 标题音频
onTittleAudioUploadSuccess(e, key) {
this.item.tittle.audio = e.url;
this.save();
}
// 整体
onWholeAudioUploadSuccess(e, key) {
this.item.wholeAuido = e.url;
this.save();
}
this.item[key] = e.url; // 文本音频
this.save(); onAudioUploadSuccess(e, key, idx) {
this.item.audios[idx] = e.url;
this.save();
} }
/** /**
* 储存音频数据 * 储存图片数据
* @param e * @param e
*/ */
onAudioUploadSuccess(e, key) { onImageUploadSuccess(e, key) {
this.item[key] = e.url; this.item[key] = e.url;
this.save(); this.save();
...@@ -80,7 +103,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -80,7 +103,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
* 储存数据 * 储存数据
*/ */
save() { save() {
(<any> window).courseware.setData(this.item, null, this.saveKey); (<any>window).courseware.setData(this.item, null, this.saveKey);
this.refresh(); this.refresh();
} }
......
...@@ -17,14 +17,14 @@ export let defaultData = { ...@@ -17,14 +17,14 @@ export let defaultData = {
"zzzz bbbb cccc", "zzzz bbbb cccc",
], ],
wholeAuido: "bbbb", wholeAuido: "ccccccccccccccc",
audios: [ audios: [
"aaaa", "aaaabbbbcccc",
"aaaa", "cccbbabbcccc",
"aaaa", "eeebbbbcccc",
"aaaa", "ddbbbbcccc",
"aaaa", "xxxbbbbcccc",
"aaaa", "zzzzbbbbcccc",
] ]
}; };
\ No newline at end of file
...@@ -61,7 +61,7 @@ export class Game { ...@@ -61,7 +61,7 @@ export class Game {
_checkHitPosition(node, pos) { _checkHitPosition(node, pos) {
let rightNode = null; let rightNode = null;
if (node.visible && node._touchEnabled && node._checkHitPosition(pos)) { if (node.visible && node.alpha > 0 && node._touchEnabled && node._checkHitPosition(pos)) {
rightNode = node; rightNode = node;
} }
if (node.children.length > 1) { if (node.children.length > 1) {
......
...@@ -47,15 +47,12 @@ export class MyGame extends Game { ...@@ -47,15 +47,12 @@ export class MyGame extends Game {
this.data = data.data; this.data = data.data;
let imgUrlList = []; let imgUrlList = [];
// this.data.cubes.forEach((cube) => {
// imgUrlList.push(cube.image.url);
// });
let audioUrlList = []; let audioUrlList = [];
// this.data.cubes.forEach((cube) => { this.data.audios.forEach((cube) => {
// audioUrlList.push(...(cube.audios.flat(Infinity).filter(val => val !== ''))); audioUrlList.push(cube);
// }); });
// audioUrlList.push(this.data.tittle.audio); audioUrlList.push(this.data.wholeAuido);
audioUrlList.push(this.data.tittle.audio);
this.preLoadData(imgUrlList, audioUrlList); this.preLoadData(imgUrlList, audioUrlList);
} }
...@@ -168,20 +165,21 @@ export class MyGame extends Game { ...@@ -168,20 +165,21 @@ export class MyGame extends Game {
} }
initMiddle() { initMiddle() {
// 创建背景 // 创建背景
this.createMiddlebg(); this.createMiddlebg();
// 创建单词 // 创建单词
this.createWords(); this.createWords();
// 创建右下角的喇叭 // 创建右下角的喇叭
this.createSpeaker(); this.createSpeaker();
// 创建窗口
this.createWindow();
} }
createMiddlebg() { createMiddlebg() {
// 背景 // 背景
const bookBg = new TouchSprite(); const bookBg = new TouchSprite();
bookBg.init(this.images.get(this.typeDiff('Img_whole_bg_type_A', 'Img_whole_bg_type_B'))); bookBg.init(this.images.get(this.typeDiff('Img_whole_bg_type_A', 'Img_whole_bg_type_B')));
bookBg.setName('bookBg');
this.bg.addChild(bookBg); this.bg.addChild(bookBg);
} }
...@@ -210,6 +208,7 @@ export class MyGame extends Game { ...@@ -210,6 +208,7 @@ export class MyGame extends Game {
questionLabel.anchorX = 0; questionLabel.anchorX = 0;
questionLabel.anchorY = 0.5; questionLabel.anchorY = 0.5;
questionLabel.setPosition(...positionList[idx]); questionLabel.setPosition(...positionList[idx]);
questionLabel.setName('label_' + idx);
questionLabel.addTouchBeganListener(() => { questionLabel.addTouchBeganListener(() => {
this.onClickWords(idx); this.onClickWords(idx);
...@@ -221,13 +220,60 @@ export class MyGame extends Game { ...@@ -221,13 +220,60 @@ export class MyGame extends Game {
} }
createSpeaker() { createSpeaker() {
const bookBg = this.bg.getChildByName('bookBg');
const speaker = new TouchSprite(); const speaker = new TouchSprite();
speaker.init(this.images.get('Btn_play')); speaker.init(this.images.get('Btn_play'));
speaker.setPositionX((this.getScreenSize().width / 2 - 50)); speaker.setPositionX(this.typeDiff(bookBg.width / 2, bookBg.width / 2 * 0.92));
speaker.setPositionY((this.getScreenSize().height / 2 - 50)); speaker.setPositionY(this.typeDiff(bookBg.height / 2, bookBg.height / 2 * 1.15));
speaker.addTouchBeganListener(() => {
this.onClickSpeaker();
jelly(speaker);
});
this.bg.addChild(speaker); this.bg.addChild(speaker);
} }
createWindow() {
const mask = new TouchSprite();
mask.init(this.images.get('Img_mask'));
mask.setName('mask');
mask.setScaleXY(this.getFullScaleXY() / this._parent.mapScale);
mask.alpha = 0;
mask.addTouchBeganListener(() => { });
this.bg.addChild(mask);
const winBg = new TouchSprite();
winBg.init(this.images.get(this.typeDiff('Img_winBg_type_A', 'Img_winBg_type_B')));
winBg.setName('winBg');
winBg.alpha = 0;
this.bg.addChild(winBg);
const btnClose = new TouchSprite();
btnClose.init(this.images.get('Btn_close'));
btnClose.setPositionX(winBg.width / 2 * 0.93);
btnClose.setPositionY(-winBg.height / 2 * 0.9);
btnClose.addTouchBeganListener(() => {
this.onClickCloseBtn();
jelly(btnClose);
});
btnClose.setName('btnClose');
btnClose.alpha = 0;
this.bg.addChild(btnClose);
const wordLabel = new MyLabel();
wordLabel.fontSize = this.typeDiff(96, 96);
wordLabel.fontName = this.typeDiff('CenturyGothic-Bold', 'CenturyGothic-Bold');
wordLabel.fontColor = this.typeDiff('#ab5b22', '#c7000b');
wordLabel.anchorX = 0.5;
wordLabel.anchorY = 0.5;
wordLabel.text = 'testw testw testw';
wordLabel.setPosition(0, 0);
wordLabel.refreshSize();
wordLabel.setName('wordLabel');
wordLabel.addTouchBeganListener(() => this.onClickWinWords());
wordLabel.alpha = 0;
winBg.addChild(wordLabel);
}
typeDiff(a, b) { typeDiff(a, b) {
if (this.data.showType === 'A') { if (this.data.showType === 'A') {
return a; return a;
...@@ -236,20 +282,67 @@ export class MyGame extends Game { ...@@ -236,20 +282,67 @@ export class MyGame extends Game {
} }
} }
printCurrentStatus() { onClickWords(idx) {
console.log(JSON.stringify(this.status)); let label = this.bg.getChildByName('label_' + idx);
this.showWindow(this.data.words[idx], this.data.audios[idx], label);
} }
onClickTittle() { hideWindow() {
this._parent.playAudio(this.data.tittle.audio); let mask = this.bg.getChildByName('mask');
let winBg = this.bg.getChildByName('winBg');
let btnClose = this.bg.getChildByName('btnClose');
let wordLabel = winBg.getChildByName('wordLabel');
tweenChange(mask, { alpha: 0 }, 0.5);
tweenChange(winBg, { alpha: 0 }, 0.5);
tweenChange(btnClose, { alpha: 0 }, 0.5);
tweenChange(wordLabel, { alpha: 0 }, 0.5);
} }
onClickWords(idx) { async showWindow(word, audio, pos = { x: 0, y: 0 }) {
// this._parent.playAudio(this.data.audios[idx]); let mask = this.bg.getChildByName('mask');
let winBg = this.bg.getChildByName('winBg');
let btnClose = this.bg.getChildByName('btnClose');
let wordLabel = winBg.getChildByName('wordLabel');
wordLabel.text = word;
wordLabel.refreshSize();
wordLabel.set('audio', audio);
wordLabel.alpha = 1;
winBg.alpha = 1;
winBg.setPosition(pos.x, pos.y);
winBg.scaleX = 0.0;
winBg.scaleY = 0.0;
await Promise.all([
asyncTweenChange(mask, { alpha: 1 }, 0.3),
asyncTweenChange(winBg, { x: 0, y: 0, scaleX: 1, scaleY: 1 }, 0.3)
]);
await asyncTweenChange(btnClose, { alpha: 1 }, 0.2);
} }
onClickWinWords(idx) { onClickWinWords() {
let wordLabel = this.bg.seekChildByName('wordLabel');
this._parent.playAudio(wordLabel.get('audio'));
}
onClickSpeaker() {
this._parent.playAudio(this.data.wholeAuido);
}
onClickCloseBtn() {
this.hideWindow();
}
printCurrentStatus() {
console.log(JSON.stringify(this.status));
}
onClickTittle() {
this._parent.playAudio(this.data.tittle.audio);
} }
gameStart() { gameStart() {
......
...@@ -31,6 +31,6 @@ ...@@ -31,6 +31,6 @@
@font-face @font-face
{ {
font-family: 'CenturyGothic-Bold'; font-family: 'CenturyGothic-Bold';
src: url("../../assets/font/CenturyGothic.TTF") ; src: url("../../assets/font/CenturyGothic-Bold.TTF") ;
} }
...@@ -9,15 +9,19 @@ const res = [ ...@@ -9,15 +9,19 @@ const res = [
['Img_whole_bg_type_B', "assets/play/Img_whole_bg_type_B.png"], ['Img_whole_bg_type_B', "assets/play/Img_whole_bg_type_B.png"],
['Img_winBg_type_A', "assets/play/Img_winBg_type_A.png"], ['Img_winBg_type_A', "assets/play/Img_winBg_type_A.png"],
['Img_winBg_type_B', "assets/play/Img_winBg_type_B.png"], ['Img_winBg_type_B', "assets/play/Img_winBg_type_B.png"],
]; ];
const resAudio = [ const resAudio = [
['ccccccccccccccc', "assets/play/default/ccccccccccccccc.mp3"],
// ['click', "assets/play/music/click.mp3"], ['aaaabbbbcccc', "assets/play/default/aaaabbbbcccc.mp3"],
['cccbbabbcccc', "assets/play/default/cccbbabbcccc.mp3"],
['eeebbbbcccc', "assets/play/default/eeebbbbcccc.mp3"],
['ddbbbbcccc', "assets/play/default/ddbbbbcccc.mp3"],
['xxxbbbbcccc', "assets/play/default/xxxbbbbcccc.mp3"],
['zzzzbbbbcccc', "assets/play/default/zzzzbbbbcccc.mp3"],
['tittle', "assets/play/default/tittle.mp3"],
]; ];
export {res, resAudio}; export {res, resAudio};
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