Commit 8371b586 authored by 范雪寒's avatar 范雪寒

feat: 主页面基本完成

parent e4ae1d3c
......@@ -38,6 +38,10 @@
<br><br>
<span style="float: left; margin-left: 20px; margin-bottom: -15px; height: 30px; font-size: 18px;">标题:</span>
<input style="float: left; margin-bottom: -15px; width: 250px;" type="text" nz-input [(ngModel)]="item.groupTitle[i]" (blur)="save()">
<span style="float: left; height: 30px; margin-left: 10px; margin-bottom: -15px; font-size: 18px;">音频:</span>
<app-audio-recorder style="float: left; margin-bottom: -15px;" [audioUrl]="item.groupAudio[i]"
(audioUploaded)="onGroupAudioUploadSuccess($event, i)">
</app-audio-recorder>
<div *ngFor="let line of group; let j = index">
<div style="width: 660px; float: left;" class="border">
......@@ -51,7 +55,7 @@
<br><br>
<span style="float: left; height: 30px; font-size: 18px;">音频:</span>
<app-audio-recorder style="float: left;" [audioUrl]="line.audio"
(audioUploaded)="onMiddleAudioUploadSuccess($event)">
(audioUploaded)="onLineAudioUploadSuccess($event, i, j)">
</app-audio-recorder>
</div>
<span style="float: none;">&nbsp;</span>
......
......@@ -47,6 +47,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
totalAudio: '',
group: [[], [], [], []],
groupTitle: ['', '', '', ''],
groupAudio: ['', '', '', ''],
};
// 获取存储的数据
......@@ -105,7 +106,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
lineData.letterDataList = lineData.word.split('').map(letter => {
return {
letter: letter,
color: '#000000', // 颜色
color: '#696363', // 颜色
line: false, // 下划线
number: 0, // 下划线下方的数字
group: 0, // 分组
......@@ -133,17 +134,17 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
changeLetterBlack(groupIdx, lineIdx, letterIdx) {
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#000000';
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#696363';
this.save();
}
changeLetterRed(groupIdx, lineIdx, letterIdx) {
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#FF0000';
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#c8161e';
this.save();
}
changeLetterGrey(groupIdx, lineIdx, letterIdx) {
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#888888';
this.item.group[groupIdx][lineIdx].letterDataList[letterIdx].color = '#b8aeae';
this.save();
}
......@@ -187,8 +188,6 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
}
this.item.group[groupIdx][lineIdx].groups = new Array(maxGroup + 1).fill('0');
console.log('汪汪汪')
this.save();
}
......@@ -211,6 +210,16 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.save();
}
onGroupAudioUploadSuccess(e, groupIdx) {
this.item.groupAudio[groupIdx] = e.url;
this.save();
}
onLineAudioUploadSuccess(e, groupIdx, lineIdx) {
this.item.group[groupIdx][lineIdx].audio = e.url;
this.save();
}
/**
* 储存音频数据
* @param e
......
......@@ -1640,9 +1640,15 @@ export function jelly(item, time = 0.7) {
TWEEN.remove(item.jellyTween);
}
const t = time / 9;
const baseSX = item.scaleX;
const baseSY = item.scaleY;
const t = time / 8;
if (!item.baseSX) {
item.baseSX = item.scaleX;
}
if (!item.baseSY) {
item.baseSY = item.scaleY;
}
let index = 0;
const run = () => {
......@@ -1659,11 +1665,11 @@ export function jelly(item, time = 0.7) {
};
const arr = [
[baseSX * 1.1, baseSY * 0.9, t],
[baseSX * 0.98, baseSY * 1.02, t * 2],
[baseSX * 1.02, baseSY * 0.98, t * 2],
[baseSX * 0.99, baseSY * 1.01, t * 2],
[baseSX * 1.0, baseSY * 1.0, t * 2],
[item.baseSX * 1.1, item.baseSY * 0.9, t],
[item.baseSX * 0.98, item.baseSY * 1.02, t * 2],
[item.baseSX * 1.02, item.baseSY * 0.98, t * 2],
[item.baseSX * 0.99, item.baseSY * 1.01, t * 2],
[item.baseSX * 1.0, item.baseSY * 1.0, t],
];
......
......@@ -22,7 +22,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 1,
"group": 0,
......@@ -31,7 +31,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 1,
"group": 0,
......@@ -40,7 +40,7 @@ export const defaultData = {
},
{
"letter": "c",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 2,
"group": 1,
......@@ -49,7 +49,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 2,
"group": 1,
......@@ -58,7 +58,7 @@ export const defaultData = {
},
{
"letter": "e",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -67,7 +67,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -76,7 +76,7 @@ export const defaultData = {
},
{
"letter": "g",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 3,
"group": 4,
......@@ -85,7 +85,7 @@ export const defaultData = {
},
{
"letter": "h",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 3,
"group": 4,
......@@ -108,7 +108,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 0,
......@@ -117,7 +117,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 1,
"group": 0,
......@@ -126,7 +126,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 3,
"group": 0,
......@@ -135,7 +135,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 0,
"group": 1,
......@@ -144,7 +144,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 0,
"group": 1,
......@@ -153,7 +153,7 @@ export const defaultData = {
},
{
"letter": "t",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -162,7 +162,7 @@ export const defaultData = {
},
{
"letter": "t",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -171,7 +171,7 @@ export const defaultData = {
},
{
"letter": "t",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -180,7 +180,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -189,7 +189,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -198,7 +198,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -221,7 +221,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -230,7 +230,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -239,7 +239,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 0,
"group": 1,
......@@ -248,7 +248,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 0,
"group": 1,
......@@ -257,7 +257,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -266,7 +266,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -275,7 +275,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 3,
"group": 3,
......@@ -284,7 +284,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 3,
"group": 3,
......@@ -293,7 +293,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 4,
......@@ -302,7 +302,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 4,
......@@ -311,7 +311,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 1,
"group": 4,
......@@ -320,7 +320,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 1,
"group": 4,
......@@ -345,7 +345,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -354,7 +354,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -363,7 +363,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#FF0000",
"color": "#c8161e",
"line": false,
"number": 0,
"group": 0,
......@@ -372,7 +372,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 3,
"group": 1,
......@@ -381,7 +381,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 1,
......@@ -390,7 +390,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 0,
"group": 2,
......@@ -399,7 +399,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#888888",
"color": "#b8aeae",
"line": false,
"number": 0,
"group": 2,
......@@ -408,7 +408,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -417,7 +417,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -426,7 +426,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 1,
"group": 3,
......@@ -435,7 +435,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -444,7 +444,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -467,7 +467,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "q",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -476,7 +476,7 @@ export const defaultData = {
},
{
"letter": "w",
"color": "#FF0000",
"color": "#c8161e",
"line": false,
"number": 0,
"group": 0,
......@@ -485,7 +485,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 1,
......@@ -494,7 +494,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 1,
......@@ -503,7 +503,7 @@ export const defaultData = {
},
{
"letter": "z",
"color": "#888888",
"color": "#b8aeae",
"line": false,
"number": 0,
"group": 2,
......@@ -512,7 +512,7 @@ export const defaultData = {
},
{
"letter": "x",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 0,
"group": 3,
......@@ -521,7 +521,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -530,7 +530,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 1,
"group": 3,
......@@ -539,7 +539,7 @@ export const defaultData = {
},
{
"letter": "q",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 3,
"group": 3,
......@@ -548,7 +548,7 @@ export const defaultData = {
},
{
"letter": "w",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -557,7 +557,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -566,7 +566,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -589,7 +589,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "n",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -598,7 +598,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -607,7 +607,7 @@ export const defaultData = {
},
{
"letter": "g",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -616,7 +616,7 @@ export const defaultData = {
},
{
"letter": "j",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 1,
"group": 1,
......@@ -625,7 +625,7 @@ export const defaultData = {
},
{
"letter": "u",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 1,
"group": 1,
......@@ -634,7 +634,7 @@ export const defaultData = {
},
{
"letter": "y",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 2,
......@@ -643,7 +643,7 @@ export const defaultData = {
},
{
"letter": "j",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 2,
......@@ -652,7 +652,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 3,
"group": 2,
......@@ -661,7 +661,7 @@ export const defaultData = {
},
{
"letter": "g",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 3,
"group": 2,
......@@ -670,7 +670,7 @@ export const defaultData = {
},
{
"letter": "h",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -679,7 +679,7 @@ export const defaultData = {
},
{
"letter": "j",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -688,7 +688,7 @@ export const defaultData = {
},
{
"letter": "n",
"color": "#FF0000",
"color": "#c8161e",
"line": false,
"number": 0,
"group": 4,
......@@ -697,7 +697,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -706,7 +706,7 @@ export const defaultData = {
},
{
"letter": "g",
"color": "#888888",
"color": "#b8aeae",
"line": false,
"number": 0,
"group": 4,
......@@ -731,7 +731,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 1,
"group": 0,
......@@ -740,7 +740,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 1,
"group": 0,
......@@ -749,7 +749,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#FF0000",
"color": "#c8161e",
"line": false,
"number": 0,
"group": 1,
......@@ -758,7 +758,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#FF0000",
"color": "#c8161e",
"line": false,
"number": 0,
"group": 1,
......@@ -767,7 +767,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 2,
......@@ -776,7 +776,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -785,7 +785,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -794,7 +794,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 3,
"group": 4,
......@@ -817,7 +817,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "q",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 1,
"group": 0,
......@@ -826,7 +826,7 @@ export const defaultData = {
},
{
"letter": "q",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 1,
"group": 0,
......@@ -835,7 +835,7 @@ export const defaultData = {
},
{
"letter": "q",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 1,
"group": 0,
......@@ -844,7 +844,7 @@ export const defaultData = {
},
{
"letter": "w",
"color": "#888888",
"color": "#b8aeae",
"line": false,
"number": 0,
"group": 1,
......@@ -853,7 +853,7 @@ export const defaultData = {
},
{
"letter": "w",
"color": "#888888",
"color": "#b8aeae",
"line": false,
"number": 0,
"group": 1,
......@@ -862,7 +862,7 @@ export const defaultData = {
},
{
"letter": "w",
"color": "#888888",
"color": "#b8aeae",
"line": false,
"number": 0,
"group": 1,
......@@ -871,7 +871,7 @@ export const defaultData = {
},
{
"letter": "e",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 2,
......@@ -880,7 +880,7 @@ export const defaultData = {
},
{
"letter": "e",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 2,
......@@ -889,7 +889,7 @@ export const defaultData = {
},
{
"letter": "e",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 3,
"group": 3,
......@@ -898,7 +898,7 @@ export const defaultData = {
},
{
"letter": "e",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -907,7 +907,7 @@ export const defaultData = {
},
{
"letter": "e",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -930,7 +930,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "q",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -939,7 +939,7 @@ export const defaultData = {
},
{
"letter": "q",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -948,7 +948,7 @@ export const defaultData = {
},
{
"letter": "w",
"color": "#888888",
"color": "#b8aeae",
"line": false,
"number": 0,
"group": 1,
......@@ -957,7 +957,7 @@ export const defaultData = {
},
{
"letter": "w",
"color": "#888888",
"color": "#b8aeae",
"line": false,
"number": 0,
"group": 1,
......@@ -966,7 +966,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -975,7 +975,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -984,7 +984,7 @@ export const defaultData = {
},
{
"letter": "x",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 0,
"group": 3,
......@@ -993,7 +993,7 @@ export const defaultData = {
},
{
"letter": "x",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 0,
"group": 3,
......@@ -1002,7 +1002,7 @@ export const defaultData = {
},
{
"letter": "z",
"color": "#FF0000",
"color": "#c8161e",
"line": false,
"number": 0,
"group": 3,
......@@ -1011,7 +1011,7 @@ export const defaultData = {
},
{
"letter": "z",
"color": "#FF0000",
"color": "#c8161e",
"line": false,
"number": 0,
"group": 3,
......@@ -1020,7 +1020,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 4,
......@@ -1029,7 +1029,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": true,
"number": 2,
"group": 4,
......@@ -1054,7 +1054,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "h",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -1063,7 +1063,7 @@ export const defaultData = {
},
{
"letter": "m",
"color": "#888888",
"color": "#b8aeae",
"line": false,
"number": 0,
"group": 1,
......@@ -1072,7 +1072,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 1,
......@@ -1081,7 +1081,7 @@ export const defaultData = {
},
{
"letter": "g",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 1,
"group": 2,
......@@ -1090,7 +1090,7 @@ export const defaultData = {
},
{
"letter": "h",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -1099,7 +1099,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -1108,7 +1108,7 @@ export const defaultData = {
},
{
"letter": "g",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 2,
"group": 2,
......@@ -1117,7 +1117,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -1126,7 +1126,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 3,
"group": 4,
......@@ -1149,7 +1149,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "k",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -1158,7 +1158,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -1167,7 +1167,7 @@ export const defaultData = {
},
{
"letter": "u",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 1,
"group": 1,
......@@ -1176,7 +1176,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 1,
......@@ -1185,7 +1185,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 1,
......@@ -1194,7 +1194,7 @@ export const defaultData = {
},
{
"letter": "l",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 2,
"group": 2,
......@@ -1203,7 +1203,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -1212,7 +1212,7 @@ export const defaultData = {
},
{
"letter": "i",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -1221,7 +1221,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 3,
"group": 3,
......@@ -1230,7 +1230,7 @@ export const defaultData = {
},
{
"letter": "s",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -1239,7 +1239,7 @@ export const defaultData = {
},
{
"letter": "d",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 0,
"group": 4,
......@@ -1248,7 +1248,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -1271,7 +1271,7 @@ export const defaultData = {
"letterDataList": [
{
"letter": "d",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -1280,7 +1280,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 0,
......@@ -1289,7 +1289,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#FF0000",
"color": "#c8161e",
"line": true,
"number": 2,
"group": 1,
......@@ -1298,7 +1298,7 @@ export const defaultData = {
},
{
"letter": "g",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 1,
......@@ -1307,7 +1307,7 @@ export const defaultData = {
},
{
"letter": "o",
"color": "#FF0000",
"color": "#c8161e",
"line": false,
"number": 0,
"group": 2,
......@@ -1316,7 +1316,7 @@ export const defaultData = {
},
{
"letter": "i",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -1325,7 +1325,7 @@ export const defaultData = {
},
{
"letter": "y",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -1334,7 +1334,7 @@ export const defaultData = {
},
{
"letter": "t",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 2,
......@@ -1343,7 +1343,7 @@ export const defaultData = {
},
{
"letter": "n",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 2,
"group": 3,
......@@ -1352,7 +1352,7 @@ export const defaultData = {
},
{
"letter": "c",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -1361,7 +1361,7 @@ export const defaultData = {
},
{
"letter": "j",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -1370,7 +1370,7 @@ export const defaultData = {
},
{
"letter": "f",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -1379,7 +1379,7 @@ export const defaultData = {
},
{
"letter": "k",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 3,
......@@ -1388,7 +1388,7 @@ export const defaultData = {
},
{
"letter": "b",
"color": "#888888",
"color": "#b8aeae",
"line": true,
"number": 2,
"group": 4,
......@@ -1397,7 +1397,7 @@ export const defaultData = {
},
{
"letter": "a",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -1406,7 +1406,7 @@ export const defaultData = {
},
{
"letter": "u",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......@@ -1415,7 +1415,7 @@ export const defaultData = {
},
{
"letter": "j",
"color": "#000000",
"color": "#696363",
"line": false,
"number": 0,
"group": 4,
......
......@@ -50,6 +50,7 @@ export class Game {
}
_currentPlayingAudioName;
_currentPlayingAudioCallback;
playAudio(key, now = true, callback = null) {
if (this._currentPlayingAudioName != '') {
......@@ -58,6 +59,10 @@ export class Game {
if (now) {
if (!audio.paused) {
audio.pause();
if (this._currentPlayingAudioCallback) {
this._currentPlayingAudioCallback();
this._currentPlayingAudioCallback = null;
}
// audio.currentTime = 0;
}
}
......@@ -65,6 +70,7 @@ export class Game {
}
this._currentPlayingAudioName = key;
this._currentPlayingAudioCallback = callback;
this._parent.playAudio(key, now, () => {
this._currentPlayingAudioName = '';
if (callback) {
......
import {
Game,
TouchSprite,
RandomInt,
Between,
MyLabel,
blinkItem,
stopBlinkItem,
asyncDelayTime,
asyncTweenChange,
} from './Game';
import {
Label,
jelly,
showPopParticle,
tweenChange,
rotateItem,
scaleItem,
delayCall,
hideItem,
showItem,
moveItem,
shake,
ShapeRect,
} from './../Unit';
import TWEEN from '@tweenjs/tween.js';
import { defaultData } from './DefaultData';
export class MyGame extends Game {
images = null;
......@@ -42,23 +22,32 @@ export class MyGame extends Game {
this.status = {};
if (!data.data || Object.is(data.data, {}) || !data.data.tittle) {
if (!data.data || Object.is(data.data, {})) {
this.data = defaultData;
} else {
this.data = data.data;
}
let imgUrlList = [];
let audioUrlList = [];
// imgUrlList.push(...this.data.bottomLineCards.map(card => card.img));
// audioUrlList.push(this.data.tittle.audio);
this.data.group.forEach(group => {
group.forEach(line => {
imgUrlList.push(line.img);
audioUrlList.push(line.audio);
});
});
imgUrlList.push(this.data.middleImg);
audioUrlList.push(this.data.titleLetterAudio);
audioUrlList.push(this.data.titleAudio);
audioUrlList.push(this.data.middleImgAudio);
audioUrlList.push(this.data.totalAudio);
imgUrlList = imgUrlList.filter((data) => data != null && data != '');
audioUrlList = audioUrlList.filter((data) => data != null && data != '');
this.preLoadData(imgUrlList, audioUrlList);
}
}
preLoadData(imgUrlList, audioUrlList) {
imgUrlList.forEach((data) => {
......@@ -81,19 +70,30 @@ export class MyGame extends Game {
// 初始化中间部分
this.initMiddle();
// 初始化右下角音频按钮
this.initTotalAudio();
// 初始化弹出窗口
this.initPopUp();
}
bg;
initBg() {
const bgBig = new TouchSprite();
bgBig.init(this.images.get('img_white_bg'));
bgBig.x = this._parent.canvasWidth / 2;
bgBig.y = this._parent.canvasHeight / 2;
bgBig.setScaleXY(this._parent.mapScaleBig);
this.addChild(bgBig);
const bg = new TouchSprite();
bg.init(this.images.get('img_grey_bg'));
bg.init(this.images.get('img_white_bg'));
bg.x = this._parent.canvasWidth / 2;
bg.y = this._parent.canvasHeight / 2;
bg.setScaleXY(this.mapScale);
bg.alpha = 0.5;
this.addChild(bg);
this.bg = bg;
}
initTittle() {
......@@ -113,9 +113,13 @@ export class MyGame extends Game {
titleLetter.anchorX = 0;
titleLetter.anchorY = 0.5;
titleLetter.text = this.data.titleLetter;
titleLetter.refreshSize();
titleLetter.addTouchBeganListener(() => {
this.playAudio(this.data.titleLetterAudio);
});
titleBg.addChild(titleLetter);
const titleLabel = new Label();
const titleLabel = new MyLabel();
titleLabel.x = titleBg.width * 5 / 8;
titleLabel.y = 0;
titleLabel.fontSize = 36;
......@@ -124,9 +128,193 @@ export class MyGame extends Game {
titleLabel.anchorX = 0;
titleLabel.anchorY = 0.5;
titleLabel.text = this.data.title;
titleLabel.refreshSize();
titleLabel.addTouchBeganListener(() => {
this.playAudio(this.data.titleAudio);
});
titleBg.addChild(titleLabel);
}
initMiddle() {
this.initGroups();
this.initMiddleCircle();
}
initMiddleCircle() {
const circle = new TouchSprite();
circle.init(this.images.get('img_oval_bg'));
this.bg.addChild(circle);
const middleImg = new TouchSprite();
middleImg.init(this.images.get(this.data.middleImg));
middleImg.setScaleXY(Math.min(circle.width / middleImg.width, circle.height / middleImg.height));
this.bg.addChild(middleImg);
circle.addTouchBeganListener(() => {
jelly(circle);
jelly(middleImg);
this.playAudio(this.data.middleImgAudio);
});
}
initGroups() {
const groupImgList = [
'img_group_bg_1',
'img_group_bg_2',
'img_group_bg_2',
'img_group_bg_1'
];
const groupPosList = [
{ x: -1, y: -1 },
{ x: 1, y: -1 },
{ x: -1, y: 1 },
{ x: 1, y: 1 },
];
for (let i = 0; i < 4; i++) {
this.initGroup(i, groupImgList, groupPosList);
}
}
initGroup(idx, groupImgList, groupPosList) {
const groupBg = new TouchSprite();
groupBg.init(this.images.get(groupImgList[idx]));
groupBg.x = groupPosList[idx].x * (groupBg.width / 2 + 2);
groupBg.y = groupPosList[idx].y * (groupBg.height / 2 + 2);
this.bg.addChild(groupBg);
const groupTitle = new MyLabel();
groupTitle.fontSize = 36;
groupTitle.fontColor = "#ffffff";
groupTitle.fontName = 'GOTHICB';
groupTitle.anchorX = 0;
groupTitle.anchorY = 0.5;
groupTitle.text = this.data.groupTitle[idx];
groupTitle.refreshSize();
groupTitle.x = 90 - groupBg.width / 2;
groupTitle.y = groupTitle.height - groupBg.height / 2;
groupTitle.addTouchBeganListener(() => {
this.playAudio(this.data.groupAudio[idx]);
});
groupBg.addChild(groupTitle);
this.data.group[idx].forEach((line, lineIdx) => {
const lineImg = new TouchSprite();
lineImg.init(this.images.get(line.img));
lineImg.setScaleXY(Math.min(65 / lineImg.width, 65 / lineImg.height));
lineImg.x = 120 - groupBg.width / 2;
lineImg.y = lineIdx * 75 - 50;
lineImg.addTouchBeganListener(() => {
jelly(lineImg);
this.playAudio(line.audio);
});
groupBg.addChild(lineImg);
let numberDataList = [];
let width = 0;
line.letterDataList.forEach((letterData, letterIdx) => {
const letterLabel = new MyLabel();
letterLabel.fontSize = 36;
letterLabel.fontColor = letterData.color;
letterLabel.fontName = 'ahronbd';
letterLabel.anchorX = 0;
letterLabel.anchorY = 0.5;
letterLabel.text = letterData.letter;
letterLabel.refreshSize();
letterLabel.x = 160 - groupBg.width / 2 + width;
letterLabel.y = lineIdx * 75 - 50;
groupBg.addChild(letterLabel);
letterLabel.addTouchBeganListener(() => {
console.log(`groupIdx = ${idx}, lineIdx = ${lineIdx}`);
console.log('this.data.group[idx][lineIdx] = ' + JSON.stringify(this.data.group[idx][lineIdx]));
});
width += letterLabel.width;
if (letterData.line) {
const outLine = new TouchSprite();
if (letterData.color == '#c8161e') {
outLine.init(this.images.get('img_line_red'));
} else if (letterData.color == '#696363') {
outLine.init(this.images.get('img_line_black'));
} else {
outLine.init(this.images.get('img_line_grey'));
}
outLine.x = letterLabel.width / 2;
outLine.y = 20;
outLine.scaleX = letterLabel.width / outLine.width;
outLine.scaleY = 1.5;
letterLabel.addChild(outLine);
if (letterData.number) {
const numberData = numberDataList[numberDataList.length - 1];
if (numberDataList.length > 0 && letterIdx - numberData.idx == 1 && numberData.number == letterData.number) {
numberData.idx = letterIdx;
numberData.endX = letterLabel.x + letterLabel.width;
return;
}
numberDataList.push({
idx: letterIdx,
number: letterData.number,
color: letterData.color,
startX: letterLabel.x,
endX: letterLabel.x + letterLabel.width
});
}
}
});
console.log('numberDataList = ' + numberDataList);
numberDataList.forEach(numberData => {
const letterLabel = new MyLabel();
letterLabel.fontSize = 20;
letterLabel.fontColor = numberData.color;
letterLabel.fontName = 'ahronbd';
letterLabel.anchorX = 0;
letterLabel.anchorY = 0.5;
letterLabel.text = numberData.number;
letterLabel.refreshSize();
letterLabel.x = (numberData.startX + numberData.endX) / 2 - letterLabel.width / 2;
letterLabel.y = lineIdx * 75 - 20;
groupBg.addChild(letterLabel);
});
});
}
initTotalAudio() {
const totalAudioBtn = new TouchSprite();
totalAudioBtn.init(this.images.get('btn_play'));
totalAudioBtn.x = this._parent.canvasWidth - totalAudioBtn.width;
totalAudioBtn.y = this._parent.canvasHeight - totalAudioBtn.height;
totalAudioBtn.addTouchBeganListener(() => {
jelly(totalAudioBtn);
this.playAudio(this.data.totalAudio, true, () => {
totalAudioBtn.init(this.images.get('btn_play'));
});
totalAudioBtn.init(this.images.get('btn_pause'));
});
this.addChild(totalAudioBtn);
}
initPopUp() {
const popUpBg = new TouchSprite();
popUpBg.init(this.images.get('img_grey_bg'));
popUpBg.x = this._parent.canvasWidth / 2;
popUpBg.y = this._parent.canvasHeight / 2;
popUpBg.setScaleXY(this._parent.mapScaleBig);
popUpBg.alpha = 0;
popUpBg.addTouchBeganListener(() => {
console.log('汪汪汪');
});
this.addChild(popUpBg);
}
popUp(popUpData) {
}
}
......@@ -53,6 +53,7 @@ export class PlayComponent implements OnInit, OnDestroy {
renderArr;
mapScale = 1;
mapScaleBig = 1;
canvasLeft;
canvasTop;
......@@ -503,8 +504,8 @@ export class PlayComponent implements OnInit, OnDestroy {
const sx = this.canvasWidth / this.canvasBaseW;
const sy = this.canvasHeight / this.canvasBaseH;
const s = Math.min(sx, sy);
this.mapScale = s;
this.mapScale = Math.min(sx, sy);
this.mapScaleBig = Math.max(sx, sy);
// this.mapScale = sx;
// this.mapScale = sy;
......
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