Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
N
ng-template-generator
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
ng-template-generator
Commits
a7e92ed4
Commit
a7e92ed4
authored
Jan 21, 2020
by
limingzhe
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
update template
parent
c915a859
Changes
9
Hide whitespace changes
Inline
Side-by-side
Showing
9 changed files
with
637 additions
and
1262 deletions
+637
-1262
form.component.html
src/app/form/form.component.html
+230
-140
form.component.scss
src/app/form/form.component.scss
+0
-46
form.component.ts
src/app/form/form.component.ts
+30
-144
Unit.ts
src/app/play/Unit.ts
+11
-8
play.component.scss
src/app/play/play.component.scss
+0
-10
play.component.ts
src/app/play/play.component.ts
+363
-828
resources.js
src/app/play/resources.js
+3
-7
config.service.spec.ts
src/app/services/config.service.spec.ts
+0
-12
config.service.ts
src/app/services/config.service.ts
+0
-67
No files found.
src/app/form/form.component.html
View file @
a7e92ed4
...
...
@@ -2,244 +2,334 @@
<div
class=
"model-content"
>
<div
style=
"position: absolute; left: 200px; top: 100px; width: 300px;"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text
"
(
blur
)="
save
()"
>
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url
')"
></app-upload-image-with-preview>
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url
')"
></app-audio-recorder>
</div>
<div
style=
"position: absolute; left: 1000px; top: 100px; width: 300px;"
>
<input
type=
"text"
nz-input
[(
ngModel
)]="
item
.
text_2
"
(
blur
)="
save
()"
>
<app-upload-image-with-preview
[
picUrl
]="
item
.
pic_url_2
"
(
imageUploaded
)="
onImageUploadSuccess
($
event
,
'
pic_url_2
')"
></app-upload-image-with-preview>
<app-audio-recorder
[
audioUrl
]="
item
.
audio_url_2
"
(
audioUploaded
)="
onAudioUploadSuccess
($
event
,
'
audio_url_2
')"
></app-audio-recorder>
</div>
</div>
<div
*
ngFor=
"let it of picArr; let i = index"
nz-col
nzSpan=
"8"
>
<div
class=
"item-box"
>
<app-upload-image-with-preview
style=
"width: 100%"
[
picUrl
]="
it
.
pic_url
"
(
imageUploaded
)="
onImageUploadSuccessByItem
($
event
,
it
)"
></app-upload-image-with-preview>
<div
style=
"display: flex; justify-items: center; padding-top: 10px"
>
<app-audio-recorder
[
audioUrl
]="
it
.
audio_url
"
(
audioUploaded
)="
onAudioUploadSuccessByItem
($
event
,
it
)"
>
</app-audio-recorder>
<button
style=
"margin-left: 10px;"
nz-button
nzType=
"danger"
(
click
)="
deleteItem
(
it
)"
>
<i
nz-icon
type=
"close"
></i>
</button>
</div>
</div>
<!--<h5> id-{{i+1}} </h5>-->
<!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--></app-upload-image-with-preview>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="display: flex; align-items: center; justify-content: center">-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group>-->
</div>
<div
nz-col
nzSpan=
"8"
class=
"add-btn-box"
>
<!--<app-audio-recorder-->
<!--[audioUrl]="item.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccess($event)"-->
<!--></app-audio-recorder>-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
<!--<div class="item-box">-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--></app-upload-image-with-preview>-->
<!--<div style="display: flex; justify-items: center; padding-top: 10px">-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it)">-->
<!--</app-audio-recorder>-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--<div style="width: 100%; height: 100%;">-->
<button
style=
" margin: auto; width: 60%; height: 60%;"
nz-button
nzType=
"dashed"
class=
"add-btn"
(
click
)="
addPic
()"
>
<i
nz-icon
nzType=
"plus-circle"
nzTheme=
"outline"
></i>
Add
</button>
<!--</div>-->
<!--<!–<h5> id-{{i+1}} </h5>–>-->
<!--<!–<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">–>-->
<!--<!–<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">–>-->
<!--<!–<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">–>-->
<!--<!–<i nz-icon type="close"></i>–>-->
<!--<!–</button>–>-->
<!--<!–</div>–>-->
</div>
<!--<!–<app-upload-image-with-preview–>-->
<!--<!–style="width: 100%"–>-->
<!--<!–[picUrl]="it.pic_url"–>-->
<!--<!–(imageUploaded)="onImageUploadSuccessByItem($event, it)"–>-->
<!--<!–></app-upload-image-with-preview>–>-->
<!--<!–<div style="display: flex; align-items: center; justify-content: center">–>-->
<!--<!–<span style="width: 80px;">–>-->
<!--<!–question:–>-->
<!--<!–</span>–>-->
<!--<!–<app-audio-recorder–>-->
<!--<!–[audioUrl]="it['q_audio_url']"–>-->
<!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">–>-->
<!--<!–</app-audio-recorder>–>-->
<!--<!–</div>–>-->
<!--<!–<div style="display: flex; align-items: center; justify-content: center">–>-->
<!--<!–<span style="width: 80px;">–>-->
<!--<!–answer:–>-->
<!--<!–</span>–>-->
<!--<!–<app-audio-recorder–>-->
<!--<!–[audioUrl]="it['a_audio_url']"–>-->
<!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">–>-->
<!--<!–</app-audio-recorder>–>-->
<!--<!–</div>–>-->
<!--<div style="padding-bottom: 30px;">-->
<!--<!–<nz-radio-group [(ngModel)]="it.radioValue" >–>-->
<!--<!–<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>–>-->
<!--<!–<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>–>-->
<!--<!–</nz-radio-group>–>-->
<!--<h5> title-sound: </h5>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.contentObj.title_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<div style="padding-bottom: 30px;">-->
<!--<h5> bg-sound: </h5>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="item.contentObj.bg_audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">-->
<!--</app-audio-recorder>-->
<!--<div nz-col nzSpan="8" class="add-btn-box" >-->
<!--<!–<div style="width: 100%; height: 100%;">–>-->
<!--<button style=" margin: auto; width: 60%; height: 60%;" nz-button nzType="dashed" class="add-btn"-->
<!--(click)="addPic()">-->
<!--<i nz-icon nzType="plus-circle" nzTheme="outline"></i>-->
<!--Add-->
<!--</button>-->
<!--<!–</div>–>-->
<!--</div>-->
<!--<span style="margin-bottom: 20px"> 10 : 23 </span>-->
<!--<div *ngFor="let it of picArr; let i = index">-->
<!--<span> pic-{{i + 1}}: </span>-->
<!--<div style="display: flex; align-items: center; padding-bottom: 20px">-->
<!--<div style="width: 40%; padding-right: 20px">-->
<!--<app-upload-image-with-preview-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--></app-upload-image-with-preview>-->
<!--</div>-->
<!--<div class="pic-sound-box">-->
<!--<div nz-row style="width: 50%; padding-bottom: 20px;">-->
<!--<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">-->
<!--<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>-->
<!--</div>-->
<!--</div>-->
<!--<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">-->
<!--<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it2.audio_url"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<!–<div style="padding-bottom: 30px;">–>-->
<!--</div>-->
<!--<!–<h5> title-sound: </h5>–>-->
<!--<!–<app-audio-recorder–>-->
<!--<!–[audioUrl]="item.contentObj.title_audio_url"–>-->
<!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'title')">–>-->
<!--<!–</app-audio-recorder>–>-->
<!--<!–</div>–>-->
<!--</div>-->
<!--
</div>
-->
<!--
<!–<div style="padding-bottom: 30px;">–>
-->
<!--<!–<h5> bg-sound: </h5>–>-->
<!--<!–<app-audio-recorder–>-->
<!--<!–[audioUrl]="item.contentObj.bg_audio_url"–>-->
<!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, item.contentObj, 'bg')">–>-->
<!--<!–</app-audio-recorder>–>-->
<!--<!–</div>–>-->
<!--
<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">
-->
<!--
<!–<span style="margin-bottom: 20px"> 10 : 23 </span>–>
-->
<!--<!–<div *ngFor="let it of picArr; let i = index">–>-->
<!--<div *ngFor="let it of picArr; let i = index"-->
<!--nz-col nzSpan="8" >-->
<!--<div class="item-box">-->
<!--<!–<span> pic-{{i + 1}}: </span>–>-->
<!--<!–<div style="display: flex; align-items: center; padding-bottom: 20px">–>-->
<!--<!–<div style="width: 40%; padding-right: 20px">–>-->
<!--<!–<app-upload-image-with-preview–>-->
<!--<!–[picUrl]="it.pic_url"–>-->
<!--<!–(imageUploaded)="onImageUploadSuccessByItem($event, it)"–>-->
<!--<!–></app-upload-image-with-preview>–>-->
<!--<!–</div>–>-->
<!--<h5> id-{{i+1}} </h5>
-->
<!--<!–<div class="pic-sound-box">–>
-->
<!--<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">-->
<!--<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">-->
<!--<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">-->
<!--<i nz-icon type="close"></i>-->
<!--</button>-->
<!--</div>-->
<!--<!–<div nz-row style="width: 50%; padding-bottom: 20px;">–>-->
<!--<!–<div *ngFor="let it2 of it.soundArr; let i2 = index" nz-col nzSpan="8">–>-->
<!--<!–<label nz-checkbox nzValue="{{'answer_' + (i2 + 1)}}" [(ngModel)]="it2.answer" (ngModelChange)="clickCheckBox()" >{{i2 + 1}}</label>–>-->
<!--<!–</div>–>-->
<!--<app-upload-image-with-preview-->
<!--style="width: 100%"-->
<!--[picUrl]="it.pic_url"-->
<!--(imageUploaded)="onImageUploadSuccessByItem($event, it)"-->
<!--></app-upload-image-with-preview>-->
<!--<!–</div>–>-->
<!--<!–<div *ngFor="let it2 of it.soundArr; let i2 = index" style="display: flex; align-items: center; padding-bottom: 5px">–>-->
<!--<!–<span style="padding-right: 10px">sound-{{i2 + 1}}:</span>–>-->
<!--<!–<app-audio-recorder–>-->
<!--<!–[audioUrl]="it2.audio_url"–>-->
<!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, it2)">–>-->
<!--<!–</app-audio-recorder>–>-->
<!--<!–</div>–>-->
<!--<div style="display: flex; align-items: center; justify-content: center">
-->
<!--<!–</div>–>
-->
<!--<span style="width: 80px;">-->
<!--question:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['q_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">-->
<!--</app-audio-recorder>-->
<!--</div>
-->
<!--<!–</div>–>
-->
<!--<div style="display: flex; align-items: center; justify-content: center">
-->
<!--<!–</div>–>
-->
<!--<span style="width: 80px;">-->
<!--answer:-->
<!--</span>-->
<!--<app-audio-recorder-->
<!--[audioUrl]="it['a_audio_url']"-->
<!--(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">-->
<!--</app-audio-recorder>-->
<!--</div>-->
<!--<!–<div style="margin: auto; width: 95%;" nz-row nzType="flex" nzJustify="start" nzAlign="middle">–>-->
<!--<nz-radio-group [(ngModel)]="it.radioValue" >-->
<!--<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>-->
<!--<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>-->
<!--</nz-radio-group>-->
<!--<!–<div *ngFor="let it of picArr; let i = index"–>-->
<!--<!–nz-col nzSpan="8" >–>-->
<!--<!–<div class="item-box">–>-->
<!--</div>-->
<!--<!–<h5> id-{{i+1}} </h5>–>-->
<!--<!–<div style="display: flex; align-items: center; justify-content: center; padding-bottom: 5px">–>-->
<!--<!–<input type="text" nz-input placeholder="" [(ngModel)]="it.text" (blur)="saveItem()">–>-->
<!--<!–<button style="margin-left: 10px;" nz-button nzType="danger" (click)="deleteItem(it)">–>-->
<!--<!–<i nz-icon type="close"></i>–>-->
<!--<!–</button>–>-->
<!--<!–</div>–>-->
<!--</div>-->
<!--<!–<app-upload-image-with-preview–>-->
<!--<!–style="width: 100%"–>-->
<!--<!–[picUrl]="it.pic_url"–>-->
<!--<!–(imageUploaded)="onImageUploadSuccessByItem($event, it)"–>-->
<!--<!–></app-upload-image-with-preview>–>-->
<!--<!–<div style="display: flex; align-items: center; justify-content: center">–>-->
<!--<!–<span style="width: 80px;">–>-->
<!--<!–question:–>-->
<!--<!–</span>–>-->
<!--<!–<app-audio-recorder–>-->
<!--<!–[audioUrl]="it['q_audio_url']"–>-->
<!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'q')">–>-->
<!--<!–</app-audio-recorder>–>-->
<!--<!–</div>–>-->
<!--<!–<div style="display: flex; align-items: center; justify-content: center">–>-->
</div>
<!--<!–<span style="width: 80px;">–>-->
<!--<!–answer:–>-->
<!--<!–</span>–>-->
<!--<!–<app-audio-recorder–>-->
<!--<!–[audioUrl]="it['a_audio_url']"–>-->
<!--<!–(audioUploaded)="onAudioUploadSuccessByItem($event, it, 'a')">–>-->
<!--<!–</app-audio-recorder>–>-->
<!--<!–</div>–>-->
<!--<!–<nz-radio-group [(ngModel)]="it.radioValue" >–>-->
<!--<!–<label nz-radio nzValue="A" (click)="radioClick(it, 'A')"> <i nz-icon nzType="check" nzTheme="outline"></i> </label>–>-->
<!--<!–<label nz-radio nzValue="B" (click)="radioClick(it, 'B')"> <i nz-icon nzType="close" nzTheme="outline"></i> </label>–>-->
<!--<!–</nz-radio-group>–>-->
<!--<!–</div>–>-->
<!--<!–</div>–>-->
<!--</div>-->
src/app/form/form.component.scss
View file @
a7e92ed4
...
...
@@ -5,50 +5,4 @@
width
:
100%
;
height
:
100%
;
.item-box
{
width
:
100%
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
flex-direction
:
column
;
padding
:
10px
;
padding-bottom
:
5vw
;
padding-top
:
5vw
;
}
.pic-sound-box
{
width
:
50%
;
display
:
flex
;
//align-items: center;
flex-direction
:
column
}
.add-btn-box
{
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
//width: 180px;
height
:
20vw
;
//background: #FFDC00;
padding
:
10px
;
padding-top
:
5vw
;
}
}
src/app/form/form.component.ts
View file @
a7e92ed4
...
...
@@ -9,30 +9,10 @@ import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, Ap
})
export
class
FormComponent
implements
OnInit
,
OnChanges
,
OnDestroy
{
picArr
=
[];
_item
:
any
;
KEY
=
'
hw_000
'
;
// @Input()
set
item
(
item
)
{
this
.
_item
=
item
;
// this.init();
}
get
item
()
{
return
this
.
_item
;
}
@
Output
()
update
=
new
EventEmitter
();
// 储存数据用
saveKey
=
"
test_0011
"
;
// 储存对象
item
;
constructor
(
private
appRef
:
ApplicationRef
)
{
...
...
@@ -43,162 +23,68 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnInit
()
{
this
.
item
=
{};
this
.
item
.
contentObj
=
{};
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
getData
((
data
)
=>
{
// 获取存储的数据
(
<
any
>
window
).
courseware
.
getData
((
data
)
=>
{
if
(
data
)
{
this
.
item
=
data
;
}
else
{
this
.
item
=
{};
}
if
(
!
this
.
item
.
contentObj
)
{
this
.
item
.
contentObj
=
{};
}
console
.
log
(
'
~data:
'
,
data
);
this
.
init
();
this
.
refresh
();
},
this
.
KEY
);
},
this
.
saveKey
);
// this.initData();
}
ngOnChanges
()
{
}
ngOnDestroy
()
{
}
init
()
{
if
(
this
.
item
.
contentObj
.
picArr
)
{
this
.
picArr
=
this
.
item
.
contentObj
.
picArr
;
}
else
{
this
.
picArr
=
this
.
getDefaultPicArr
();
this
.
item
.
contentObj
.
picArr
=
this
.
picArr
;
}
console
.
log
(
'
item:
'
,
this
.
item
);
// this.picArr = this.getDefaultPicArr();
// this.item.contentObj.picArr = this.picArr;
// console.log('this.item:;', this.picArr);
ngOnChanges
()
{
}
getDefaultPicArr
()
{
const
arr
=
[];
// for (let i = 0; i < 4; i ++) {
// const data = {};
// data['pic_url'] = '';
//
// const soundArr = [];
// for (let i = 0; i < 3; i++) {
// const tmpData = {};
// tmpData['answer'] = false;
// tmpData['audio_url'] = '';
// soundArr.push(tmpData);
// }
// data['soundArr'] = soundArr;
//
// arr.push(data);
// }
return
arr
;
ngOnDestroy
()
{
}
initData
()
{
}
deleteItem
(
data
)
{
const
index
=
this
.
picArr
.
indexOf
(
data
);
if
(
index
!==
-
1
)
{
this
.
picArr
.
splice
(
index
,
1
);
}
init
()
{
// this.update.emit(this.item);
this
.
save
();
}
/**
* 储存图片数据
* @param e
*/
onImageUploadSuccess
(
e
,
key
)
{
onImageUploadSuccessByItem
(
e
,
item
,
id
=
null
)
{
if
(
id
!=
null
)
{
item
[
id
+
'
_pic_url
'
]
=
e
.
url
;
}
else
{
item
.
pic_url
=
e
.
url
;
}
this
.
save
();
// this.update.emit(this.item);
// console.log('this.item: ', this.item);
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
}
/**
* 储存音频数据
* @param e
*/
onAudioUploadSuccess
(
e
,
key
)
{
onAudioUploadSuccessByItem
(
e
,
item
,
id
=
null
)
{
if
(
id
!=
null
)
{
item
[
id
+
'
_audio_url
'
]
=
e
.
url
;
}
else
{
item
.
audio_url
=
e
.
url
;
}
// this.update.emit(this.item);
this
.
item
[
key
]
=
e
.
url
;
this
.
save
();
}
addPic
()
{
this
.
picArr
.
push
({
pic_url
:
''
,
audio_url
:
''
,
// text: '',
// radioValue: 'A'
});
this
.
saveItem
();
}
radioClick
(
it
,
radioValue
)
{
it
.
radioValue
=
radioValue
;
this
.
saveItem
();
}
clickCheckBox
()
{
console
.
log
(
'
in clickCheckBox
'
);
this
.
saveItem
();
}
saveItem
()
{
// this.update.emit(this.item);
this
.
save
();
}
/**
* 储存数据
*/
save
()
{
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
KEY
);
(
<
any
>
window
).
courseware
.
setData
(
this
.
item
,
null
,
this
.
saveKey
);
this
.
refresh
();
}
/**
* 刷新 渲染页面
*/
refresh
()
{
setTimeout
(()
=>
{
this
.
appRef
.
tick
();
...
...
src/app/play/Unit.ts
View file @
a7e92ed4
...
...
@@ -359,7 +359,7 @@ export class ColorSpr extends MySprite {
g
=
0
;
b
=
0
;
createGSCanvas
(){
createGSCanvas
()
{
if
(
!
this
.
img
)
{
return
;
...
...
@@ -1327,6 +1327,16 @@ export function removeItemFromArr(arr, item) {
export
function
getPosDistance
(
sx
,
sy
,
ex
,
ey
)
{
const
_x
=
ex
-
sx
;
const
_y
=
ey
-
sy
;
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
)
);
return
len
;
}
...
...
@@ -1370,13 +1380,6 @@ export function circleMove(item, x0, y0, time = 2, addR = 360, xPer = 1, yPer =
}
export
function
getPosDistance
(
sx
,
sy
,
ex
,
ey
)
{
const
_x
=
ex
-
sx
;
const
_y
=
ey
-
sy
;
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
)
);
return
len
;
}
export
function
delayCall
(
callback
,
second
)
{
const
tween
=
new
TWEEN
.
Tween
(
this
)
...
...
src/app/play/play.component.scss
View file @
a7e92ed4
.game-container
{
width
:
100%
;
height
:
100%
;
//background-image: url("/assets/listen-read-circle/bg.jpg");
background
:
#ffffff
;
background-repeat
:
no-repeat
;
background-size
:
cover
;
}
...
...
@@ -19,11 +17,3 @@
src
:
url("../../assets/font/BRLNSDB.TTF")
;
}
//
//
//@font-face
//{
// font-family: 'RoundedBold';
// src: url("../../assets/font/ArialRoundedBold.otf") ;
//}
src/app/play/play.component.ts
View file @
a7e92ed4
import
{
Component
,
ElementRef
,
ViewChild
,
OnInit
,
Input
,
OnDestroy
,
HostListener
}
from
'
@angular/core
'
;
import
{
MySprite
,
Label
,
moveItem
,
rotateItem
,
removeItemFromArr
,
ShapeRect
,
MySprite
,
tweenChange
,
}
from
'
./Unit
'
;
import
{
res
,
resAudio
}
from
'
./resources
'
;
...
...
@@ -14,7 +10,6 @@ import {res, resAudio} from './resources';
import
{
Subject
}
from
'
rxjs
'
;
import
{
debounceTime
}
from
'
rxjs/operators
'
;
import
*
as
_
from
'
lodash
'
;
import
TWEEN
from
'
@tweenjs/tween.js
'
;
...
...
@@ -26,36 +21,23 @@ import TWEEN from '@tweenjs/tween.js';
styleUrls
:
[
'
./play.component.scss
'
]
})
export
class
PlayComponent
implements
OnInit
,
OnDestroy
{
// 数据
_data
;
@
Input
()
set
data
(
data
)
{
this
.
_data
=
data
;
}
get
data
()
{
return
this
.
_data
;
}
@
Input
()
sid
;
@
ViewChild
(
'
canvas
'
)
canvas
:
ElementRef
;
@
ViewChild
(
'
wrap
'
)
wrap
:
ElementRef
;
canvasWidth
=
1280
;
canvasHeight
=
720
;
canvasBaseW
=
1280
;
canvasBaseH
=
720
;
// 数据
data
;
ctx
;
fps
=
0
;
frametime
=
0
;
// 上一帧动画的时间, 两帧时间差
canvasWidth
=
1280
;
// canvas实际宽度
canvasHeight
=
720
;
// canvas实际高度
mx
;
my
;
// 点击坐标
canvasBaseW
=
1280
;
// canvas 资源预设宽度
canvasBaseH
=
720
;
// canvas 资源预设高度
mx
;
// 点击x坐标
my
;
// 点击y坐标
// 资源
...
...
@@ -67,806 +49,121 @@ export class PlayComponent implements OnInit, OnDestroy {
animationId
:
any
;
winResizeEventStream
=
new
Subject
();
audioObj
=
{};
renderArr
;
mapScale
=
1
;
canvasLeft
;
canvasTop
;
canTouch
=
true
;
KEY
=
'
hw_000
'
;
// -----
picArr
;
pageLabel
;
leftBtn
;
rightBtn
;
bgLayer
;
curPageIndex
;
saveKey
=
'
test_0011
'
;
btnLeft
;
btnRight
;
pic1
;
pic2
;
hotZoneArr
;
picIndex
=
0
;
bgArr
;
endPageArr
;
gameEndFlag
;
showPetalFlag
;
bg
;
canTouch
=
true
;
curPic
;
@
HostListener
(
'
window:resize
'
,
[
'
$event
'
])
onResize
(
event
)
{
this
.
winResizeEventStream
.
next
();
}
ngOnInit
()
{
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
getData
((
data
)
=>
{
if
(
data
&&
typeof
data
==
'
object
'
)
{
this
.
data
=
data
;
}
else
{
this
.
data
=
{};
}
console
.
log
(
'
data:
'
,
data
);
if
(
!
this
.
data
.
contentObj
)
{
this
.
data
.
contentObj
=
{};
}
this
.
initDefaultData
();
this
.
initAudio
();
this
.
initImg
();
this
.
initListener
();
},
this
.
KEY
);
//
// // this.initAudio();
// this.initImg();
// this.initListener();
}
initDefaultData
()
{
let
picArr
=
this
.
data
.
contentObj
.
picArr
;
// console.log('picArr: ', picArr);
if
(
!
picArr
||
picArr
.
length
==
0
)
{
const
picArr
=
[];
for
(
let
i
=
0
;
i
<
2
;
i
++
)
{
picArr
.
push
({
'
pic_url
'
:
'
assets/play/default/pic.jpg
'
,
'
audio_url
'
:
'
assets/play/default/audio.mp3
'
});
}
this
.
data
.
contentObj
.
picArr
=
picArr
;
}
}
ngOnDestroy
()
{
window
[
'
curCtx
'
]
=
null
;
window
.
cancelAnimationFrame
(
this
.
animationId
);
this
.
gameEndFlag
=
true
;
}
initData
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
canvas
.
nativeElement
.
width
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvas
.
nativeElement
.
height
=
this
.
wrap
.
nativeElement
.
clientHeight
;
const
sx
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
const
sy
=
this
.
canvasHeight
/
this
.
canvasBaseH
;
const
s
=
Math
.
min
(
sx
,
sy
);
this
.
mapScale
=
s
;
// this.mapScale = this.canvasWidth / this.canvasBaseW;
// this.mapScale = this.canvasHeight / this.canvasBaseH;
this
.
renderArr
=
[];
console
.
log
(
'
in initData
'
,
this
.
data
);
this
.
canTouch
=
true
;
this
.
curPageIndex
=
0
;
// this.downFlag = false;
this
.
endPageArr
=
[];
// this.clockUpdateFlag = false;
if
(
!
this
.
data
.
contentObj
.
picArr
)
{
this
.
data
.
contentObj
.
picArr
=
[];
}
this
.
picArr
=
this
.
data
.
contentObj
.
picArr
;
this
.
picIndex
=
0
;
}
initAudio
()
{
const
contentObj
=
this
.
data
.
contentObj
;
if
(
!
contentObj
)
{
return
;
}
// const addAudio = (key) => {
// const audioUrl = contentObj[key];
// if (audioUrl) {
// const audio = new Audio();
// audio.src = audioUrl;
// audio.load();
// this.audioObj[key] = audio;
// }
// }
//
// for (let i = 0; i < 4; i ++) {
// const key = i + '_audio_url';
// addAudio(key);
// }
//
// addAudio('audio_url');
//
const
addUrlToAudioObj
=
(
audioUrl
)
=>
{
if
(
audioUrl
)
{
// console.log('audioUrl:', audioUrl);
const
audio
=
new
Audio
();
audio
.
src
=
audioUrl
;
audio
.
load
();
this
.
audioObj
[
audioUrl
]
=
audio
;
}
};
let
arr
=
contentObj
.
picArr
;
if
(
arr
)
{
// console.log('arr: ', arr);
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
addUrlToAudioObj
(
arr
[
i
].
audio_url
);
}
}
const
audioObj
=
this
.
audioObj
;
const
addOneAudio
=
(
key
,
url
,
vlomue
=
1
,
loop
=
false
,
callback
=
null
)
=>
{
const
audio
=
new
Audio
();
audio
.
src
=
url
;
audio
.
load
();
audio
.
loop
=
loop
;
audio
.
volume
=
vlomue
;
audioObj
[
key
]
=
audio
;
if
(
callback
)
{
audio
.
onended
=
()
=>
{
callback
();
};
}
};
addOneAudio
(
'
click
'
,
this
.
rawAudios
.
get
(
'
click
'
),
0.3
);
// addOneAudio('angry', this.rawAudios.get('angry'), 1);
// addOneAudio('cow_start', this.rawAudios.get('cow_start'), 1);
// addOneAudio('eat', this.rawAudios.get('eat'), 1);
// addOneAudio('grass', this.rawAudios.get('grass'), 1);
// addOneAudio('happy', this.rawAudios.get('happy'), 1);
// addOneAudio('right', this.rawAudios.get('right'), 1);
// addOneAudio('wrong', this.rawAudios.get('wrong'), 1);
//
// const titleUrl = this.data.contentObj.title_audio_url;
// if (titleUrl) {
//
// this.titleAudio.src = titleUrl;
// this.titleAudio.load();
// }
// this.bgAudio.src = 'assets/bat-mail/music/bg.mp3';
// this.bgAudio.load();
// this.bgAudio.loop = true;
// this.bgAudio.volume = 0.5;
//
// this.wrongAudio.src = 'assets/common/music/wrong.mp3';
// this.wrongAudio.load();
//
// this.rightAudio.src = 'assets/common/music/right.mp3';
// this.rightAudio.load();
//
// this.successAudio.src = 'assets/magic-hat/music/finish.mp3';
// this.successAudio.load();
//
// this.successAudio.onended = () => {
// // this.showSuccessAudio();
// };
}
initImg
()
{
const
contentObj
=
this
.
data
.
contentObj
;
if
(
contentObj
)
{
const
addPicUrl
=
(
url
)
=>
{
if
(
url
)
{
this
.
rawImages
.
set
(
url
,
url
);
}
};
let
arr
=
this
.
data
.
contentObj
.
picArr
;
if
(
arr
)
{
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
addPicUrl
(
arr
[
i
].
pic_url
);
}
}
}
// this.initFontImg();
// 预加载资源
this
.
loadResources
().
then
(()
=>
{
window
[
"
air
"
].
hideAirClassLoading
(
this
.
KEY
,
this
.
data
);
// this.setfontData();
this
.
init
();
this
.
update
();
});
}
initFontImg
()
{
// const fontbaseUrlW = 'assets/mechanical/letter/';
// const fontDataW = {};
//
// let num = 97;
// for (let i = 0; i < 26; i++) {
//
// const key = String.fromCharCode(num + i); // 'a'
// const url = fontbaseUrlW + key + '.png';
//
// this.rawImages.set(url, url);
// fontDataW[key] = url;
// }
//
//
// this.fontDataW = fontDataW;
}
setfontData
()
{
// for (let key in this.fontDataW) {
// this.fontDataW[key] = this.images.get(this.fontDataW[key]);
// }
}
init
()
{
this
.
initData
();
this
.
initCtx
();
this
.
initView
();
}
initCtx
()
{
this
.
ctx
=
this
.
canvas
.
nativeElement
.
getContext
(
'
2d
'
);
this
.
canvas
.
nativeElement
.
width
=
this
.
canvasWidth
;
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
window
[
'
curCtx
'
]
=
this
.
ctx
;
}
initView
()
{
this
.
initBg
();
this
.
initPic
();
this
.
initBottomRight
();
this
.
refreshPageLabel
();
}
initBottomRight
()
{
const
px
=
this
.
canvasWidth
-
100
*
this
.
mapScale
;
const
py
=
this
.
canvasHeight
-
50
*
this
.
mapScale
;
const
offX
=
40
*
this
.
mapScale
;
const
leftBtn
=
new
MySprite
();
leftBtn
.
init
(
this
.
images
.
get
(
'
btn_left
'
));
leftBtn
.
setScaleXY
(
this
.
mapScale
);
leftBtn
.
x
=
px
-
offX
;
leftBtn
.
y
=
py
;
const
rightBtn
=
new
MySprite
();
rightBtn
.
init
(
this
.
images
.
get
(
'
btn_right
'
));
rightBtn
.
setScaleXY
(
this
.
mapScale
);
rightBtn
.
x
=
px
+
offX
;
rightBtn
.
y
=
py
;
this
.
renderArr
.
push
(
leftBtn
);
this
.
renderArr
.
push
(
rightBtn
);
const
textBg
=
new
MySprite
();
textBg
.
init
(
this
.
images
.
get
(
'
text_bg
'
));
textBg
.
setScaleXY
(
this
.
mapScale
);
textBg
.
x
=
px
;
textBg
.
y
=
py
-
65
*
this
.
mapScale
;
this
.
renderArr
.
push
(
textBg
);
const
label
=
new
Label
();
label
.
text
=
'
0 / 0
'
;
label
.
fontName
=
'
BRLNSDB
'
;
label
.
fontSize
=
24
;
label
.
fontColor
=
'
#ffffff
'
;
label
.
textAlign
=
'
center
'
;
label
.
setMaxSize
(
textBg
.
width
*
textBg
.
scaleX
*
0.9
);
textBg
.
addChild
(
label
);
this
.
leftBtn
=
leftBtn
;
this
.
rightBtn
=
rightBtn
;
this
.
pageLabel
=
label
;
if
(
this
.
picArr
.
length
<=
1
)
{
this
.
leftBtn
.
visible
=
false
;
this
.
rightBtn
.
visible
=
false
;
textBg
.
visible
=
false
;
}
}
refreshPageLabel
()
{
const
label
=
this
.
pageLabel
;
label
.
text
=
(
this
.
curPageIndex
+
1
)
+
'
/
'
+
this
.
picArr
.
length
;
this
.
showAudio
();
}
showAudio
()
{
const
data
=
this
.
picArr
[
this
.
curPageIndex
];
const
audio
=
this
.
audioObj
[
data
.
audio_url
];
if
(
audio
)
{
audio
.
play
();
}
}
initPic
()
{
for
(
let
i
=
0
;
i
<
this
.
picArr
.
length
;
i
++
)
{
const
data
=
this
.
picArr
[
i
];
const
pic
=
new
MySprite
();
pic
.
init
(
this
.
images
.
get
(
data
.
pic_url
));
// pic.x = this.canvasWidth / 2;
// pic.y = this.canvasHeight / 2;
const
maxW
=
this
.
canvasWidth
*
0.9
;
const
maxH
=
this
.
canvasHeight
*
0.9
;
const
sx
=
maxW
/
pic
.
width
;
const
sy
=
maxH
/
pic
.
height
;
const
s
=
Math
.
min
(
sx
,
sy
);
pic
.
setScaleXY
(
s
);
// pic.setRadius(50 * this.mapScale);
const
picBg
=
new
ShapeRect
();
picBg
.
setSize
(
pic
.
width
*
pic
.
scaleX
,
pic
.
height
*
pic
.
scaleY
);
picBg
.
x
=
this
.
canvasWidth
/
2
+
this
.
canvasWidth
*
i
;
picBg
.
y
=
this
.
canvasHeight
/
2
;
picBg
.
init
();
picBg
.
fillColor
=
'
#ffffff
'
;
// picBg.setRadius(50 * this.mapScale);
picBg
.
setShadow
(
0
,
10
,
20
,
'
rgba(0,0,0,0.3)
'
);
// picBg.alpha = 0;
// this.renderArr.push(picBg);
// this.renderArr.push(picShadow);
picBg
.
addChild
(
pic
);
this
.
bgLayer
.
addChild
(
picBg
);
}
}
initBg
()
{
this
.
bgArr
=
[];
const
bg
=
new
MySprite
();
bg
.
init
(
this
.
images
.
get
(
'
bg
'
));
bg
.
x
=
this
.
canvasWidth
/
2
;
bg
.
y
=
this
.
canvasHeight
/
2
;
const
sx
=
this
.
canvasWidth
/
bg
.
width
;
const
sy
=
this
.
canvasHeight
/
bg
.
height
;
const
s
=
Math
.
max
(
sx
,
sy
);
bg
.
setScaleXY
(
s
);
this
.
renderArr
.
push
(
bg
);
this
.
bgLayer
=
new
MySprite
();
this
.
renderArr
.
push
(
this
.
bgLayer
);
}
mapDown
(
event
)
{
if
(
!
this
.
canTouch
)
{
return
;
}
if
(
this
.
checkClickTarget
(
this
.
leftBtn
))
{
this
.
lastPageClick
();
return
;
}
if
(
this
.
checkClickTarget
(
this
.
rightBtn
))
{
this
.
nextPageClick
();
return
;
}
}
mapMove
(
event
)
{
}
mapUp
(
event
)
{
}
nextPageClick
()
{
console
.
log
(
'
in leftBtnClick
'
);
if
(
this
.
curPageIndex
>=
this
.
picArr
.
length
-
1
)
{
return
;
}
this
.
curPageIndex
++
;
this
.
changePageByIndex
();
}
lastPageClick
()
{
console
.
log
(
'
in rightBtnClick
'
);
if
(
this
.
curPageIndex
<=
0
)
{
return
;
}
this
.
curPageIndex
--
;
this
.
changePageByIndex
();
}
changePageByIndex
()
{
console
.
log
(
'
in changePageByIndex
'
);
this
.
canTouch
=
false
;
moveItem
(
this
.
bgLayer
,
-
this
.
curPageIndex
*
this
.
canvasWidth
,
0
,
1
,
()
=>
{
this
.
canTouch
=
true
;
this
.
refreshPageLabel
();
// this.resetCurData();
},
TWEEN
.
Easing
.
Cubic
.
Out
);
this
.
playAudio
(
'
click
'
,
true
);
}
update
()
{
this
.
animationId
=
window
.
requestAnimationFrame
(
this
.
update
.
bind
(
this
));
// 清除画布内容
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
canvasWidth
,
this
.
canvasHeight
);
TWEEN
.
update
();
this
.
updateArr
(
this
.
renderArr
);
}
ngOnInit
()
{
this
.
data
=
{};
// 获取数据
const
getData
=
(
<
any
>
window
).
courseware
.
getData
;
getData
((
data
)
=>
{
if
(
data
&&
typeof
data
==
'
object
'
)
{
this
.
data
=
data
;
}
// console.log('data:' , data);
// 初始化 各事件监听
this
.
initListener
();
// 若无数据 则为预览模式 需要填充一些默认数据用来显示
this
.
initDefaultData
();
// 初始化 音频资源
this
.
initAudio
();
// 初始化 图片资源
this
.
initImg
();
// 开始预加载资源
this
.
load
();
},
this
.
saveKey
);
updateItem
(
item
)
{
if
(
item
)
{
item
.
update
();
}
}
updateArr
(
arr
)
{
if
(
!
arr
)
{
return
;
}
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
arr
[
i
].
update
(
this
);
}
}
initHotZone
()
{
let
curBgRect
;
if
(
this
.
bg
)
{
curBgRect
=
this
.
bg
.
getBoundingBox
();
}
let
oldBgRect
=
this
.
data
.
contentObj
.
bgItem
.
rect
;
if
(
!
oldBgRect
)
{
oldBgRect
=
curBgRect
;
}
const
rate
=
curBgRect
.
width
/
oldBgRect
.
width
;
// this.imgArr = [];
// const arr = this.data.contentObj.imgItemArr;
this
.
hotZoneArr
=
[];
const
arr
=
this
.
data
.
contentObj
.
hotZoneItemArr
;
if
(
!
arr
)
return
;
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
const
data
=
JSON
.
parse
(
JSON
.
stringify
(
arr
[
i
]));
// const img = {pic_url: data.pic_url};
data
.
rect
.
x
*=
rate
;
data
.
rect
.
y
*=
rate
;
data
.
rect
.
width
*=
rate
;
data
.
rect
.
height
*=
rate
;
data
.
rect
.
x
+=
curBgRect
.
x
;
data
.
rect
.
y
+=
curBgRect
.
y
;
const
hotZone
=
this
.
getHotZoneItem
(
data
);
hotZone
.
alpha
=
0
;
this
.
hotZoneArr
.
push
(
hotZone
);
}
}
getHotZoneItem
(
data
)
{
const
saveRect
=
data
.
rect
;
const
item
=
new
ShapeRect
(
this
.
ctx
);
item
.
setSize
(
saveRect
.
width
,
saveRect
.
height
);
item
.
x
=
saveRect
.
x
;
item
.
y
=
saveRect
.
y
;
item
[
'
data
'
]
=
data
;
this
.
renderArr
.
push
(
item
);
}
return
item
;
ngOnDestroy
()
{
window
[
'
curCtx
'
]
=
null
;
window
.
cancelAnimationFrame
(
this
.
animationId
);
}
showEndPatal
()
{
this
.
endPageArr
=
[];
this
.
showPetalFlag
=
true
;
this
.
addPetal
();
}
load
()
{
stopEndPatal
()
{
this
.
endPageArr
=
[];
this
.
showPetalFlag
=
false
;
// 预加载资源
this
.
loadResources
().
then
(()
=>
{
window
[
"
air
"
].
hideAirClassLoading
(
this
.
saveKey
,
this
.
data
);
this
.
init
();
this
.
update
();
});
}
addPetal
()
{
if
(
!
this
.
showPetalFlag
)
{
return
;
}
init
()
{
const
petal
=
this
.
getPetal
();
this
.
endPageArr
.
push
(
petal
);
this
.
initCtx
();
this
.
initData
();
this
.
initView
();
}
moveItem
(
petal
,
petal
.
x
,
this
.
canvasHeight
+
petal
.
height
*
petal
.
scaleY
,
petal
[
'
time
'
],
()
=>
{
removeItemFromArr
(
this
.
endPageArr
,
petal
);
});
initCtx
()
{
this
.
canvasWidth
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvasHeight
=
this
.
wrap
.
nativeElement
.
clientHeight
;
this
.
canvas
.
nativeElement
.
width
=
this
.
wrap
.
nativeElement
.
clientWidth
;
this
.
canvas
.
nativeElement
.
height
=
this
.
wrap
.
nativeElement
.
clientHeight
;
rotateItem
(
petal
,
petal
[
'
tr
'
],
petal
[
'
time
'
]);
setTimeout
(()
=>
{
this
.
addPetal
()
;
},
200
)
;
this
.
ctx
=
this
.
canvas
.
nativeElement
.
getContext
(
'
2d
'
);
this
.
canvas
.
nativeElement
.
width
=
this
.
canvasWidth
;
this
.
canvas
.
nativeElement
.
height
=
this
.
canvasHeight
;
window
[
'
curCtx
'
]
=
this
.
ctx
;
}
getPetal
()
{
const
petal
=
new
MySprite
(
this
.
ctx
);
const
id
=
Math
.
ceil
(
Math
.
random
()
*
3
);
petal
.
init
(
this
.
images
.
get
(
'
petal_
'
+
id
));
const
randomS
=
(
Math
.
random
()
*
0.4
+
0.6
)
*
this
.
mapScale
;
petal
.
setScaleXY
(
randomS
);
const
randomR
=
Math
.
random
()
*
360
;
petal
.
rotation
=
randomR
;
const
randomX
=
Math
.
random
()
*
this
.
canvasWidth
;
petal
.
x
=
randomX
;
petal
.
y
=
-
petal
.
height
/
2
*
petal
.
scaleY
;
updateItem
(
item
)
{
if
(
item
)
{
item
.
update
();
}
}
const
randomT
=
2
+
Math
.
random
()
*
5
;
petal
[
'
time
'
]
=
randomT
;
updateArr
(
arr
)
{
if
(
!
arr
)
{
return
;
}
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
arr
[
i
].
update
(
this
);
}
}
let
randomTR
=
360
*
Math
.
random
();
// - 180;
if
(
Math
.
random
()
<
0.5
)
{
randomTR
*=
-
1
;
}
petal
[
'
tr
'
]
=
randomTR
;
return
petal
;
}
...
...
@@ -912,7 +209,6 @@ export class PlayComponent implements OnInit, OnDestroy {
firstTouch
=
false
;
removeMouseListener
();
}
console
.
log
(
'
touch down
'
);
setMxMyByTouch
(
e
);
this
.
mapDown
(
e
);
};
...
...
@@ -930,7 +226,6 @@ export class PlayComponent implements OnInit, OnDestroy {
firstTouch
=
false
;
removeTouchListener
();
}
console
.
log
(
'
mouse down
'
);
setMxMyByMouse
(
e
);
this
.
mapDown
(
e
);
};
...
...
@@ -995,43 +290,6 @@ export class PlayComponent implements OnInit, OnDestroy {
showArr
(
arr
)
{
if
(
!
arr
)
{
return
;
}
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
arr
[
i
].
visible
=
true
;
}
}
hideArr
(
arr
)
{
if
(
!
arr
)
{
return
;
}
for
(
let
i
=
0
;
i
<
arr
.
length
;
i
++
)
{
arr
[
i
].
visible
=
false
;
}
}
IsPC
()
{
if
(
window
[
'
ELECTRON
'
])
{
return
false
;
// 封装客户端标记
}
if
(
document
.
body
.
ontouchmove
!==
undefined
&&
document
.
body
.
ontouchmove
!==
undefined
)
{
return
false
;
}
else
{
return
true
;
}
}
loadResources
()
{
const
pr
=
[];
this
.
rawImages
.
forEach
((
value
,
key
)
=>
{
// 预加载图片
...
...
@@ -1045,7 +303,7 @@ export class PlayComponent implements OnInit, OnDestroy {
pr
.
push
(
p
);
});
this
.
rawAudios
.
forEach
((
value
,
key
)
=>
{
// 预加载
图片
this
.
rawAudios
.
forEach
((
value
,
key
)
=>
{
// 预加载
音频
const
a
=
this
.
preloadAudio
(
value
)
.
then
(()
=>
{
...
...
@@ -1091,6 +349,8 @@ export class PlayComponent implements OnInit, OnDestroy {
checkClickTarget
(
target
)
{
const
rect
=
target
.
getBoundingBox
();
...
...
@@ -1123,22 +383,297 @@ export class PlayComponent implements OnInit, OnDestroy {
return
false
;
}
getPosByAngle
(
angle
,
len
)
{
const
radian
=
angle
*
Math
.
PI
/
180
;
const
x
=
Math
.
sin
(
radian
)
*
len
;
const
y
=
Math
.
cos
(
radian
)
*
len
;
return
{
x
,
y
};
addUrlToAudioObj
(
key
,
url
=
null
,
vlomue
=
1
,
loop
=
false
,
callback
=
null
)
{
const
audioObj
=
this
.
audioObj
;
if
(
url
==
null
)
{
url
=
key
;
}
this
.
rawAudios
.
set
(
key
,
url
);
const
audio
=
new
Audio
();
audio
.
src
=
url
;
audio
.
load
();
audio
.
loop
=
loop
;
audio
.
volume
=
vlomue
;
audioObj
[
key
]
=
audio
;
if
(
callback
)
{
audio
.
onended
=
()
=>
{
callback
();
};
}
}
addUrlToImages
(
url
)
{
this
.
rawImages
.
set
(
url
,
url
);
}
// ======================================================编写区域==========================================================================
/**
* 添加默认数据 便于无数据时的展示
*/
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
'
;
}
}
/**
* 添加预加载图片
*/
initImg
()
{
this
.
addUrlToImages
(
this
.
data
.
pic_url
);
this
.
addUrlToImages
(
this
.
data
.
pic_url_2
);
}
/**
* 添加预加载音频
*/
initAudio
()
{
// 音频资源
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url
);
this
.
addUrlToAudioObj
(
this
.
data
.
audio_url_2
);
// 音效
this
.
addUrlToAudioObj
(
'
click
'
,
this
.
rawAudios
.
get
(
'
click
'
),
0.3
);
}
/**
* 初始化数据
*/
initData
()
{
const
sx
=
this
.
canvasWidth
/
this
.
canvasBaseW
;
const
sy
=
this
.
canvasHeight
/
this
.
canvasBaseH
;
const
s
=
Math
.
min
(
sx
,
sy
);
this
.
mapScale
=
s
;
// this.mapScale = sx;
// this.mapScale = sy;
this
.
renderArr
=
[];
}
/**
* 初始化试图
*/
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
)
{
if
(
!
this
.
canTouch
)
{
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
;
}
}
mapMove
(
event
)
{
}
mapUp
(
event
)
{
}
getPosDistance
(
sx
,
sy
,
ex
,
ey
)
{
const
_x
=
ex
-
sx
;
const
_y
=
ey
-
sy
;
const
len
=
Math
.
sqrt
(
Math
.
pow
(
_x
,
2
)
+
Math
.
pow
(
_y
,
2
)
);
return
len
;
update
()
{
// ----------------------------------------------------------
this
.
animationId
=
window
.
requestAnimationFrame
(
this
.
update
.
bind
(
this
));
// 清除画布内容
this
.
ctx
.
clearRect
(
0
,
0
,
this
.
canvasWidth
,
this
.
canvasHeight
);
// tween 更新动画
TWEEN
.
update
();
// ----------------------------------------------------------
this
.
updateArr
(
this
.
renderArr
);
}
}
src/app/play/resources.js
View file @
a7e92ed4
const
res
=
[
[
'
bg
'
,
"
assets/play/bg.jpg
"
],
//
['bg', "assets/play/bg.jpg"],
[
'
btn_left
'
,
"
assets/play/btn_left.png
"
],
[
'
btn_right
'
,
"
assets/play/btn_right.png
"
],
[
'
text_bg
'
,
"
assets/play/text_bg.png
"
],
// ['text_bg', "assets/play/text_bg.png"],
];
...
...
@@ -12,10 +11,7 @@ const res = [
const
resAudio
=
[
// ['click', "assets/play/music/click.mp3"],
[
'
click
'
,
"
assets/play/music/click.mp3
"
],
];
...
...
src/app/services/config.service.spec.ts
deleted
100644 → 0
View file @
c915a859
import
{
TestBed
}
from
'
@angular/core/testing
'
;
import
{
ConfigService
}
from
'
./config.service
'
;
describe
(
'
ConfigService
'
,
()
=>
{
beforeEach
(()
=>
TestBed
.
configureTestingModule
({}));
it
(
'
should be created
'
,
()
=>
{
const
service
:
ConfigService
=
TestBed
.
get
(
ConfigService
);
expect
(
service
).
toBeTruthy
();
});
});
src/app/services/config.service.ts
deleted
100644 → 0
View file @
c915a859
import
{
Injectable
}
from
'
@angular/core
'
;
import
{
HttpClient
}
from
"
@angular/common/http
"
;
import
{
Observable
}
from
"
rxjs
"
;
@
Injectable
({
providedIn
:
'
root
'
})
export
class
ConfigService
{
configUrl
=
'
proxy.conf.json
'
;
constructor
(
private
http
:
HttpClient
)
{
}
getConfig
()
{
return
this
.
http
.
get
(
this
.
configUrl
)
.
pipe
(
);
}
showConfig
()
{
this
.
getConfig
()
.
subscribe
((
data
)
=>
{
console
.
log
(
'
data:
'
,
data
);
});
}
test
(
data
)
{
// return new Promise<any> {
// return new Promise((resolve, reject) => {
// this.http.get(url).subscribe((res) => {
// resolve(res);
// }, reject);
// });
//
return
this
.
get
(
'
/api/login
'
);
// return this.http.post('/login', data);
}
get
(
url
:
string
):
Promise
<
any
>
{
return
new
Promise
((
resolve
,
reject
)
=>
{
this
.
http
.
get
(
url
).
subscribe
((
res
)
=>
{
resolve
(
res
);
},
reject
);
});
}
// login(user): Observable<any> {
//
//
// return this.http.post('/login', user).pipe(
// tap((data => {
// console.log('login', data)
// localStorage.setItem('token', _.get(data, 'token'));
// delete data['token'];
// localStorage.setItem('info', JSON.stringify(data));
// this.getInfoPromise = this.load('/user/getInfo');
// }))
// );
// }
}
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment